change tabbar to component
@@ -95,7 +95,17 @@ interface Props extends WithStyles<typeof styles> {
isAdmin?: boolean; // refactor this option and layout, temporary solution
}
-const TabBarComponentRaw = ({ classes, dispatch, title, isAdmin, tabOptions }: Props) => {
+interface State {
+ currentTab: string;
+}
+
+class TabBarComponentRaw extends React.PureComponent<Props, State> {
+ private headerRef = React.createRef<React.ReactNode>();
+
+ constructor(props: Props) {
+ super(props);
+
+ const { tabOptions } = props;
let pathname = "/";
if (window.location.pathname !== "/") {
@@ -109,18 +119,16 @@ const TabBarComponentRaw = ({ classes, dispatch, title, isAdmin, tabOptions }: P
}
}
}
- const [value, setValue] = React.useState(pathname);
- const handleChange = (event: object, value: any) => {
- // console.log("tab value", value);
- setValue(value);
+ this.state = {
+ currentTab: pathname
};
+ }
- const headerRef = React.createRef();
-
+ public componentDidMount() {
// Shrink header
window.onscroll = () => {
- if (headerRef.current) {
+ if (this.headerRef.current) {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
// @ts-ignore
headerRef.current.style.top = `${TABS_HEIGHT - HEADER_HEIGHT}px`;
@@ -130,9 +138,13 @@ const TabBarComponentRaw = ({ classes, dispatch, title, isAdmin, tabOptions }: P
}
}
};
+ }
+
+ render() {
+ const { classes, title, isAdmin, tabOptions } = this.props;
return (
- <AppBar ref={headerRef} id="header" position="relative" className={classes.appBar}>
+ <AppBar ref={this.headerRef} id="header" position="relative" className={classes.appBar}>
<div className={classes.barContainer}>
<FlexRowItemCenterBox>
<Link className={classes.barTitle} to="/">
@@ -147,8 +159,11 @@ const TabBarComponentRaw = ({ classes, dispatch, title, isAdmin, tabOptions }: P
</div>
<Tabs
- value={value}
- onChange={handleChange}
+ value={this.state.currentTab}
+ onChange={(event: object, value: any) => {
+ // console.log("tab value", value);
+ this.setState({ currentTab: value });
+ }}
className={classes.tabs}
variant="scrollable"
scrollButtons="auto"
@@ -182,6 +197,7 @@ const TabBarComponentRaw = ({ classes, dispatch, title, isAdmin, tabOptions }: P
</div>
</AppBar>
);
-};
+ }
+}
export const TabBarComponent = connect(mapStateToProps)(withStyles(styles)(TabBarComponentRaw));
