functional base page
-import { createStyles, withStyles, WithStyles } from "@material-ui/styles";
-import React from "react";
-import { SecondHeader } from "layout/SecondHeader";
import { Box, Container, Theme } from "@material-ui/core";
+import { createStyles, withStyles, WithStyles } from "@material-ui/styles";
import { APP_BAR_HEIGHT, LEFT_SECTION_OPEN_WIDTH, SECOND_HEADER_HEIGHT } from "layout/Constants";
+import { SecondHeader } from "layout/SecondHeader";
+import React from "react";
const styles = (theme: Theme) =>
createStyles({
@@ -20,11 +20,10 @@ export interface BasePageProps extends React.Props<any>, WithStyles<typeof style
fullContainer?: boolean;
}
-export class BasePageRaw extends React.PureComponent<BasePageProps> {
- public render() {
- const { children, leftDrawer, secondHeaderLeft, secondHeaderRight, fullContainer, classes } = this.props;
-
+export const BasePageRaw: React.FC<BasePageProps> = (props) => {
+ const { children, leftDrawer, secondHeaderLeft, secondHeaderRight, fullContainer, classes } = props;
const hasSecondHeader = !!secondHeaderLeft || !!secondHeaderRight;
+
return (
<Box display="flex" flexDirection="column" flex="1">
{hasSecondHeader && <SecondHeader left={secondHeaderLeft} right={secondHeaderRight} />}
@@ -46,7 +45,6 @@ export class BasePageRaw extends React.PureComponent<BasePageProps> {
</Box>
</Box>
);
- }
-}
+};
export const BasePage = withStyles(styles)(BasePageRaw);
