Commit daeae255 authored by Matija Obreza's avatar Matija Obreza
Browse files

Fix: Compatibility with translate() and withStyles()

parent 7d5c48a7
...@@ -7502,6 +7502,12 @@ ...@@ -7502,6 +7502,12 @@
"number-is-nan": "^1.0.0" "number-is-nan": "^1.0.0"
} }
}, },
"is-function": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.1.tgz",
"integrity": "sha1-Es+5i2W1fdPRk6MSH19uL0N2ArU=",
"dev": true
},
"is-glob": { "is-glob": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.0.tgz", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.0.tgz",
...@@ -7879,11 +7885,35 @@ ...@@ -7879,11 +7885,35 @@
"hyphenate-style-name": "^1.0.2" "hyphenate-style-name": "^1.0.2"
} }
}, },
"jss-compose": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/jss-compose/-/jss-compose-5.0.0.tgz",
"integrity": "sha512-YofRYuiA0+VbeOw0VjgkyO380sA4+TWDrW52nSluD9n+1FWOlDzNbgpZ/Sb3Y46+DcAbOS21W5jo6SAqUEiuwA==",
"dev": true,
"requires": {
"warning": "^3.0.0"
}
},
"jss-default-unit": { "jss-default-unit": {
"version": "8.0.2", "version": "8.0.2",
"resolved": "https://registry.npmjs.org/jss-default-unit/-/jss-default-unit-8.0.2.tgz", "resolved": "https://registry.npmjs.org/jss-default-unit/-/jss-default-unit-8.0.2.tgz",
"integrity": "sha512-WxNHrF/18CdoAGw2H0FqOEvJdREXVXLazn7PQYU7V6/BWkCV0GkmWsppNiExdw8dP4TU1ma1dT9zBNJ95feLmg==" "integrity": "sha512-WxNHrF/18CdoAGw2H0FqOEvJdREXVXLazn7PQYU7V6/BWkCV0GkmWsppNiExdw8dP4TU1ma1dT9zBNJ95feLmg=="
}, },
"jss-expand": {
"version": "5.3.0",
"resolved": "https://registry.npmjs.org/jss-expand/-/jss-expand-5.3.0.tgz",
"integrity": "sha512-NiM4TbDVE0ykXSAw6dfFmB1LIqXP/jdd0ZMnlvlGgEMkMt+weJIl8Ynq1DsuBY9WwkNyzWktdqcEW2VN0RAtQg==",
"dev": true
},
"jss-extend": {
"version": "6.2.0",
"resolved": "https://registry.npmjs.org/jss-extend/-/jss-extend-6.2.0.tgz",
"integrity": "sha512-YszrmcB6o9HOsKPszK7NeDBNNjVyiW864jfoiHoMlgMIg2qlxKw70axZHqgczXHDcoyi/0/ikP1XaHDPRvYtEA==",
"dev": true,
"requires": {
"warning": "^3.0.0"
}
},
"jss-global": { "jss-global": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/jss-global/-/jss-global-3.0.0.tgz", "resolved": "https://registry.npmjs.org/jss-global/-/jss-global-3.0.0.tgz",
...@@ -7897,11 +7927,38 @@ ...@@ -7897,11 +7927,38 @@
"warning": "^3.0.0" "warning": "^3.0.0"
} }
}, },
"jss-preset-default": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/jss-preset-default/-/jss-preset-default-4.5.0.tgz",
"integrity": "sha512-qZbpRVtHT7hBPpZEBPFfafZKWmq3tA/An5RNqywDsZQGrlinIF/mGD9lmj6jGqu8GrED2SMHZ3pPKLmjCZoiaQ==",
"dev": true,
"requires": {
"jss-camel-case": "^6.1.0",
"jss-compose": "^5.0.0",
"jss-default-unit": "^8.0.2",
"jss-expand": "^5.3.0",
"jss-extend": "^6.2.0",
"jss-global": "^3.0.0",
"jss-nested": "^6.0.1",
"jss-props-sort": "^6.0.0",
"jss-template": "^1.0.1",
"jss-vendor-prefixer": "^7.0.0"
}
},
"jss-props-sort": { "jss-props-sort": {
"version": "6.0.0", "version": "6.0.0",
"resolved": "https://registry.npmjs.org/jss-props-sort/-/jss-props-sort-6.0.0.tgz", "resolved": "https://registry.npmjs.org/jss-props-sort/-/jss-props-sort-6.0.0.tgz",
"integrity": "sha512-E89UDcrphmI0LzmvYk25Hp4aE5ZBsXqMWlkFXS0EtPkunJkRr+WXdCNYbXbksIPnKlBenGB9OxzQY+mVc70S+g==" "integrity": "sha512-E89UDcrphmI0LzmvYk25Hp4aE5ZBsXqMWlkFXS0EtPkunJkRr+WXdCNYbXbksIPnKlBenGB9OxzQY+mVc70S+g=="
}, },
"jss-template": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/jss-template/-/jss-template-1.0.1.tgz",
"integrity": "sha512-m5BqEWha17fmIVXm1z8xbJhY6GFJxNB9H68GVnCWPyGYfxiAgY9WTQyvDAVj+pYRgrXSOfN5V1T4+SzN1sJTeg==",
"dev": true,
"requires": {
"warning": "^3.0.0"
}
},
"jss-vendor-prefixer": { "jss-vendor-prefixer": {
"version": "7.0.0", "version": "7.0.0",
"resolved": "https://registry.npmjs.org/jss-vendor-prefixer/-/jss-vendor-prefixer-7.0.0.tgz", "resolved": "https://registry.npmjs.org/jss-vendor-prefixer/-/jss-vendor-prefixer-7.0.0.tgz",
...@@ -14023,6 +14080,27 @@ ...@@ -14023,6 +14080,27 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.4.2.tgz", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.4.2.tgz",
"integrity": "sha512-rI3cGFj/obHbBz156PvErrS5xc6f1eWyTwyV4mo0vF2lGgXgS+mm7EKD5buLJq6jNgIagQescGSVG2YzgXt8Yg==" "integrity": "sha512-rI3cGFj/obHbBz156PvErrS5xc6f1eWyTwyV4mo0vF2lGgXgS+mm7EKD5buLJq6jNgIagQescGSVG2YzgXt8Yg=="
}, },
"react-jss": {
"version": "8.6.1",
"resolved": "https://registry.npmjs.org/react-jss/-/react-jss-8.6.1.tgz",
"integrity": "sha512-SH6XrJDJkAphp602J14JTy3puB2Zxz1FkM3bKVE8wON+va99jnUTKWnzGECb3NfIn9JPR5vHykge7K3/A747xQ==",
"dev": true,
"requires": {
"hoist-non-react-statics": "^2.5.0",
"jss": "^9.7.0",
"jss-preset-default": "^4.3.0",
"prop-types": "^15.6.0",
"theming": "^1.3.0"
},
"dependencies": {
"hoist-non-react-statics": {
"version": "2.5.5",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
"integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==",
"dev": true
}
}
},
"react-leaflet": { "react-leaflet": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-2.0.1.tgz", "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-2.0.1.tgz",
...@@ -16895,6 +16973,18 @@ ...@@ -16895,6 +16973,18 @@
"integrity": "sha512-XWdJW7F/M3YzXhDEUP8ycmNWoYymBtsHwCHoda0YF44RthJsls95TqDrmpAlC1sB/KXaCvkdBlcNRq+AaV6klA==", "integrity": "sha512-XWdJW7F/M3YzXhDEUP8ycmNWoYymBtsHwCHoda0YF44RthJsls95TqDrmpAlC1sB/KXaCvkdBlcNRq+AaV6klA==",
"dev": true "dev": true
}, },
"theming": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/theming/-/theming-1.3.0.tgz",
"integrity": "sha512-ya5Ef7XDGbTPBv5ENTwrwkPUexrlPeiAg/EI9kdlUAZhNlRbCdhMKRgjNX1IcmsmiPcqDQZE6BpSaH+cr31FKw==",
"dev": true,
"requires": {
"brcast": "^3.0.1",
"is-function": "^1.0.1",
"is-plain-object": "^2.0.1",
"prop-types": "^15.5.8"
}
},
"through": { "through": {
"version": "2.3.8", "version": "2.3.8",
"resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz", "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
......
...@@ -33,9 +33,9 @@ ...@@ -33,9 +33,9 @@
"i18nscan": "i18next-scanner --config i18next-scanner.config.js 'src/**/*.tsx'" "i18nscan": "i18next-scanner --config i18next-scanner.config.js 'src/**/*.tsx'"
}, },
"dependencies": { "dependencies": {
"@material-ui/core": "^3.4.0", "@material-ui/core": "^3.0.0",
"@material-ui/icons": "^3.0.1",
"@material-ui/lab": "^3.0.0-alpha.23", "@material-ui/lab": "^3.0.0-alpha.23",
"@material-ui/icons": "^3.0.0",
"autosuggest-highlight": "^3.1.0", "autosuggest-highlight": "^3.1.0",
"axios": "^0.18.0", "axios": "^0.18.0",
"classnames": "^2.2.6", "classnames": "^2.2.6",
...@@ -126,6 +126,7 @@ ...@@ -126,6 +126,7 @@
"postcss-mixins": "^6.0.0", "postcss-mixins": "^6.0.0",
"precss": "^3.1.2", "precss": "^3.1.2",
"react-hot-loader": "^4.3.3", "react-hot-loader": "^4.3.3",
"react-jss": "^8.6.1",
"resolve-url-loader": "^3.0.0", "resolve-url-loader": "^3.0.0",
"sass-loader": "^7.1.0", "sass-loader": "^7.1.0",
"script-ext-html-webpack-plugin": "^2.0.1", "script-ext-html-webpack-plugin": "^2.0.1",
......
...@@ -41,9 +41,9 @@ const styles = (theme) => ({ ...@@ -41,9 +41,9 @@ const styles = (theme) => ({
}); });
interface IBrowsePageProps extends React.ClassAttributes<any> { interface IBrowsePageProps {
t: any; t?: any;
classes: any; classes?: any;
uuid: string; uuid: string;
doi: string; // DOI comes from the route without the '10.' doi: string; // DOI comes from the route without the '10.'
...@@ -307,4 +307,4 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({ ...@@ -307,4 +307,4 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({
}, dispatch); }, dispatch);
export default connect(mapStateToProps, mapDispatchToProps)(translate()(withStyles(styles)(BrowsePage))); export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(translate()(BrowsePage)));
import * as React from 'react'; import * as React from 'react';
import {connect} from 'react-redux'; import { connect } from 'react-redux';
import {translate} from 'react-i18next'; import { translate } from 'react-i18next';
import {withStyles} from '@material-ui/core/styles'; import { withStyles } from '@material-ui/core/styles';
import {bindActionCreators} from 'redux'; import { bindActionCreators } from 'redux';
import { loadAccessionsMapInfo } from 'accessions/actions/public'; import { loadAccessionsMapInfo } from 'accessions/actions/public';
import AccessionFilter from 'model/accession/AccessionFilter'; import AccessionFilter from 'model/accession/AccessionFilter';
import Loading from 'ui/common/Loading'; import Loading from 'ui/common/Loading';
...@@ -10,21 +10,22 @@ import AccessionMapInfo from 'model/accession/AccessionMapInfo'; ...@@ -10,21 +10,22 @@ import AccessionMapInfo from 'model/accession/AccessionMapInfo';
import PageLayout from 'ui/layout/PageLayout'; import PageLayout from 'ui/layout/PageLayout';
import ContentHeader from 'ui/common/heading/ContentHeader'; import ContentHeader from 'ui/common/heading/ContentHeader';
import Button from '@material-ui/core/Button'; import Button from '@material-ui/core/Button';
import Tabs, {Tab} from 'ui/common/Tabs'; import Tabs, { Tab } from 'ui/common/Tabs';
import PrettyFilters from 'ui/common/filter/PrettyFilters'; import PrettyFilters from 'ui/common/filter/PrettyFilters';
let Map; let Map;
let TileLayer; let TileLayer;
interface IMapPageProps extends React.ClassAttributes<any> { interface IMapPageProps {
classes?: any;
t?: any;
apiUrl: string; apiUrl: string;
mapInfo: AccessionMapInfo; mapInfo: AccessionMapInfo;
currentTab: string; currentTab: string;
classes: any;
filterCode: string; filterCode: string;
loadAccessionsMapInfo: any; loadAccessionsMapInfo: any;
t: any;
} }
const styles = (theme) => ({ const styles = (theme) => ({
...@@ -140,4 +141,4 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({ ...@@ -140,4 +141,4 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({
loadAccessionsMapInfo, loadAccessionsMapInfo,
}, dispatch); }, dispatch);
export default translate()(connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(BrowsePage))); export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(translate()(BrowsePage)));
...@@ -16,7 +16,7 @@ import ArticleSection from './c/ArticleSection'; ...@@ -16,7 +16,7 @@ import ArticleSection from './c/ArticleSection';
import MenuStepper from './c/MenuStepper'; import MenuStepper from './c/MenuStepper';
import Grid from '@material-ui/core/Grid'; import Grid from '@material-ui/core/Grid';
interface IContentPageProps extends React.ClassAttributes<any> { interface IContentPageProps {
menuKey: string; menuKey: string;
slug: string; slug: string;
t: any; t: any;
......
...@@ -106,3 +106,9 @@ export enum PublishState { ...@@ -106,3 +106,9 @@ export enum PublishState {
PUBLISHED = 'PUBLISHED', PUBLISHED = 'PUBLISHED',
REVIEWING = 'REVIEWING', REVIEWING = 'REVIEWING',
} }
export interface IGeoPoint {
id?: any;
lat: number;
lng: number;
}
...@@ -31,15 +31,15 @@ const styles = (theme) => ({ ...@@ -31,15 +31,15 @@ const styles = (theme) => ({
}, },
}); });
interface IAccessionRefsTableProps extends React.ClassAttributes<any> { interface IAccessionRefsTableProps {
classes: any; classes?: any;
t?: any;
accessionRefs: AccessionRef[]; accessionRefs: AccessionRef[];
t: any;
} }
class AccessionRefsTable extends React.Component<IAccessionRefsTableProps, any> { class AccessionRefsTable extends React.Component<IAccessionRefsTableProps, any> {
constructor(props, context) { constructor(props?, context?) {
super(props, context); super(props, context);
} }
......
import * as React from 'react'; import * as React from 'react';
import {withStyles} from '@material-ui/core/styles'; import {withStyles} from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid'; import Grid from '@material-ui/core/Grid';
import { IGeoPoint } from 'model/common.model';
let Map; let Map;
let Marker; let Marker;
let TileLayer; let TileLayer;
interface ILocationMapProps extends React.ClassAttributes<any> { interface ILocationMapProps extends React.ClassAttributes<any> {
classes: any; classes?: any;
locations: [{id: number, lat: number, lng: number}]; locations: IGeoPoint[];
} }
const styles = (theme) => ({ const styles = (theme) => ({
...@@ -36,7 +37,7 @@ const styles = (theme) => ({ ...@@ -36,7 +37,7 @@ const styles = (theme) => ({
class LocationMap extends React.Component<ILocationMapProps, any> { class LocationMap extends React.Component<ILocationMapProps, any> {
constructor(props, context) { constructor(props?, context?) {
super(props, context); super(props, context);
if (typeof window !== 'undefined') { if (typeof window !== 'undefined') {
Map = require('react-leaflet').Map; Map = require('react-leaflet').Map;
......
...@@ -12,7 +12,7 @@ interface IProps<T> extends React.Props<any> { ...@@ -12,7 +12,7 @@ interface IProps<T> extends React.Props<any> {
roughItemHeight?: number; // px of height of element, defaults to 50px, determines when loadNextPage is called roughItemHeight?: number; // px of height of element, defaults to 50px, determines when loadNextPage is called
itemRenderer: (item: T, index?: number) => any; itemRenderer: (item: T, index?: number) => any;
loadingIndicator?: any; loadingIndicator?: any;
loadMore: (page: Page<T>) => void; loadMore: (page: Page<T>) => any;
} }
export default class TableInfiniteLoader<T> extends React.Component<IProps<T>, any> { export default class TableInfiniteLoader<T> extends React.Component<IProps<T>, any> {
......
...@@ -29,14 +29,15 @@ import PrettyDate from 'ui/common/time/PrettyDate'; ...@@ -29,14 +29,15 @@ import PrettyDate from 'ui/common/time/PrettyDate';
* ... * ...
* } * }
*/ */
interface IPrettyFiltersProps extends React.ClassAttributes<any> { interface IPrettyFiltersProps {
classes: any; classes?: any;
t?: any;
onSubmit: (newFilter) => any; onSubmit: (newFilter) => any;
showSnackbar: (snack: string) => void; showSnackbar: (snack: string) => any;
filterObj: object; filterObj: object;
lookups: object; lookups: object;
prefix: string; prefix: string;
t: any;
} }
const styles = (theme) => ({ const styles = (theme) => ({
...@@ -175,8 +176,6 @@ class PrettyFilters extends React.Component<IPrettyFiltersProps, any> { ...@@ -175,8 +176,6 @@ class PrettyFilters extends React.Component<IPrettyFiltersProps, any> {
} }
} }
const styled = withStyles(styles)(PrettyFilters);
const mapStateToProps = (state, ownProps) => ({ const mapStateToProps = (state, ownProps) => ({
lookups: { lookups: {
crop: [], crop: [],
...@@ -195,4 +194,4 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({ ...@@ -195,4 +194,4 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({
showSnackbar, showSnackbar,
}, dispatch); }, dispatch);
export default translate()(connect(mapStateToProps, mapDispatchToProps)(styled)); export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(translate()(PrettyFilters)));
...@@ -4,10 +4,10 @@ import {withStyles} from '@material-ui/core/styles'; ...@@ -4,10 +4,10 @@ import {withStyles} from '@material-ui/core/styles';
const styleSheet = {}; const styleSheet = {};
const BottomSection = ({classes}) => ( const BottomSection = ({ classes }) => (
<Grid container spacing={ 0 } className="back-gray-yellow p-20"> <Grid container spacing={ 0 } className="back-gray-yellow p-20">
* All fields marked with * are required. * All fields marked with * are required.
</Grid> </Grid>
); );
export default withStyles(styleSheet)<{}>(BottomSection); export default withStyles(styleSheet)(BottomSection);
...@@ -8,24 +8,23 @@ import {withStyles} from '@material-ui/core/styles'; ...@@ -8,24 +8,23 @@ import {withStyles} from '@material-ui/core/styles';
import {PublishState} from 'model/common.model'; import {PublishState} from 'model/common.model';
import Authorize from 'ui/common/authorized/Authorize'; import Authorize from 'ui/common/authorized/Authorize';
interface IStepNavigationProps extends React.ClassAttributes<any> { interface IStepNavigationProps {
classes: any; classes?: any;
t?: any;
steps: any; steps: any;
itemState: PublishState; itemState: PublishState;
uuid: string; uuid: string;
location: any; location: any;
disabled: boolean; disabled: boolean;
disabledNext: boolean; disabledNext: boolean;
onPublish: () => void; onPublish: any;
onApprove: () => void; onApprove: any;
onUnpublish: () => void; onUnpublish: any;
onGotoStep: (i: number) => () => void; onGotoStep: any;
onDelete: () => void; onDelete: any;
showStepName: boolean; showStepName: boolean;
topDivider: boolean; topDivider: boolean;
bottomDivider: boolean; bottomDivider: boolean;
t: any;
} }
const styles = (theme) => ({ const styles = (theme) => ({
...@@ -63,7 +62,7 @@ const styles = (theme) => ({ ...@@ -63,7 +62,7 @@ const styles = (theme) => ({
class StepNavigation extends React.Component<IStepNavigationProps, any> { class StepNavigation extends React.Component<IStepNavigationProps, any> {
constructor(props: any, context: any) { constructor(props?: any, context?: any) {
super(props, context); super(props, context);
this.state = { this.state = {
......
...@@ -2,7 +2,7 @@ import * as React from 'react'; ...@@ -2,7 +2,7 @@ import * as React from 'react';
import {withStyles} from '@material-ui/core/styles'; import {withStyles} from '@material-ui/core/styles';
import CheckCircle from '@material-ui/icons/CheckCircle'; import CheckCircle from '@material-ui/icons/CheckCircle';
interface IStepProgressProps extends React.ClassAttributes<any> { interface IStepProgressProps {
classes?: any; classes?: any;
value: number; value: number;
...@@ -69,4 +69,4 @@ class StepProgress extends React.Component<IStepProgressProps, any> { ...@@ -69,4 +69,4 @@ class StepProgress extends React.Component<IStepProgressProps, any> {
} }
export default withStyles(styleSheet)<any>(StepProgress); export default withStyles(styleSheet)(StepProgress);
...@@ -6,15 +6,14 @@ import ListItemText from '@material-ui/core/ListItemText'; ...@@ -6,15 +6,14 @@ import ListItemText from '@material-ui/core/ListItemText';
import StepProgress from './StepProgress'; import StepProgress from './StepProgress';
interface ICustomListItemProps extends React.ClassAttributes<any> { interface ICustomListItemProps {
classes?: any; classes?: any;
disabled: boolean; disabled: boolean;
index: number; index: number;
name: string; name: string;
completed: boolean;
active: boolean; active: boolean;
onClick: (event) => void; onClick: (event) => any;
} }
const styles = { const styles = {
...@@ -55,4 +54,4 @@ class CustomListItem extends React.Component<ICustomListItemProps, any> { ...@@ -55,4 +54,4 @@ class CustomListItem extends React.Component<ICustomListItemProps, any> {
} }
} }
export default withStyles(styles)<any>(CustomListItem); export default withStyles(styles)(CustomListItem);
...@@ -4,15 +4,16 @@ import * as React from 'react'; ...@@ -4,15 +4,16 @@ import * as React from 'react';
import FilteredPage from 'model/FilteredPage'; import FilteredPage from 'model/FilteredPage';
import { SortDirection } from 'model/Page'; import { SortDirection } from 'model/Page';
interface IBrowsePageProps<T> extends React.ClassAttributes<any> { interface IBrowsePageProps<T> {
t?: any;
paged: FilteredPage<T>; paged: FilteredPage<T>;
renderItem: (s: T, index: number) => any; renderItem: (s: T, index: number) => any;
filterCode: string; filterCode: string;
applyFilters: any; applyFilters: any;
loadMoreData: (paged?: FilteredPage<any>) => void; loadMoreData: (paged?: FilteredPage<any>) => any;
updateRoute: any; updateRoute: any;
currentTab: any; currentTab: any;
t?: any;
} }
class BrowsePage<T> extends React.Component<IBrowsePageProps<T> & any, any> { class BrowsePage<T> extends React.Component<IBrowsePageProps<T> & any, any> {
......