PageLayout.tsx 3.08 KB
Newer Older
Matija Obreza's avatar
Matija Obreza committed
1
2
3
import * as React from 'react';

import { withStyles } from '@material-ui/core/styles';
Oleksii Savran's avatar
Oleksii Savran committed
4
import Card, {CardHeader, CardContent, CardActions} from 'ui/common/Card';
Matija Obreza's avatar
Matija Obreza committed
5
// import * as classnames from 'classnames';
Matija Obreza's avatar
Matija Obreza committed
6

Matija Obreza's avatar
Matija Obreza committed
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import Footer from './Footer';
import SidebarWrapper from './sidebar/SidebarWrapper';

const styles = (theme) => ({
  root: {
    display: 'flex' as 'flex',
    flexDirection: 'row' as 'row',
    height: 'auto',
    width: '100%',
    overflow: 'visible' as 'visible',
    position: 'absolute' as 'absolute',
  },
  content: {
    flexGrow: 1,
    display: 'flex' as 'flex',
22
    minHeight: 'calc(100vh - 83px)',
Matija Obreza's avatar
Matija Obreza committed
23
    flexDirection: 'column' as 'column',
Oleksii Savran's avatar
Oleksii Savran committed
24
    maxWidth: '100%',
Oleksii Savran's avatar
Oleksii Savran committed
25
26
27
    [theme.breakpoints.down('md')]: {
      minHeight: 'calc(100vh - 3.5rem)',
    },
Matija Obreza's avatar
Matija Obreza committed
28
29
  },
  children: {
30
    flex: '1',
Matija Obreza's avatar
Matija Obreza committed
31
32
33
    width: '100%',
  },
  footer: {
34
    marginTop: '2em',
Matija Obreza's avatar
Matija Obreza committed
35
36
    flexGrow: 'initial' as 'initial',
  },
Matija Obreza's avatar
Subsets    
Matija Obreza committed
37
38
  // Spacing for PageContents
  pageContents: {
Matija Obreza's avatar
Matija Obreza committed
39
40
    paddingLeft: '1em',
    paddingRight: '1em',
Matija Obreza's avatar
Subsets    
Matija Obreza committed
41
  },
Matija Obreza's avatar
Matija Obreza committed
42
  mainSection: {
43
    marginBottom: '1em',
Matija Obreza's avatar
Matija Obreza committed
44
45
46
47
48
  },
  mainSectionTitle: {
    // color: 'Blue',
  },
  section: {
49
    height: '100%',
50
    marginBottom: '1em',
Matija Obreza's avatar
Matija Obreza committed
51
52
53
54
55
  },
  sectionTitle: {
    fontSize: '1.3rem',
    // color: 'Red',
  },
56
57
58
59
  sectionAction: {
    margin: 0,
    alignSelf: 'center' as 'center',
  },
Matija Obreza's avatar
Matija Obreza committed
60
61
62
63
64
65
});

interface ILayoutProps extends React.Props<any> {
  classes?: any;
  children?: any;
  sidebar?: any;
Oleksii Savran's avatar
Oleksii Savran committed
66
  withFooter?: any;
Matija Obreza's avatar
Matija Obreza committed
67
68
}

Oleksii Savran's avatar
Oleksii Savran committed
69
const Layout = ({classes, children = null, sidebar = null, withFooter = false}: ILayoutProps) => (
Matija Obreza's avatar
Matija Obreza committed
70
    <div>
71
       <div className={ classes.root }>
Matija Obreza's avatar
Matija Obreza committed
72
73
74
75
76
77
78
          { sidebar && <SidebarWrapper sidebarContent={ sidebar }/> }
          { children && (
            <div className={ classes.content }>
              <div className={ classes.children }>
                { children }
              </div>
              <div className={ classes.footer }>
Oleksii Savran's avatar
Oleksii Savran committed
79
                { withFooter && <Footer /> }
Matija Obreza's avatar
Matija Obreza committed
80
81
82
83
84
85
86
              </div>
            </div>
          ) }
      </div>
    </div>
);

Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
87
const Contents = ({classes, style = {}, children = null, className = ''}) => children && <div style={ style } className={ `${className} ${classes.pageContents}` }>{ children }</div>;
Oleksii Savran's avatar
Oleksii Savran committed
88
const Section1 = ({classes, className = '', title, children = null, cardActions = null}) => children && (
Matija Obreza's avatar
Matija Obreza committed
89
  <Card className={ classes.mainSection }>
Matija Obreza's avatar
Matija Obreza committed
90
    <CardHeader classes={ { title: classes.mainSectionTitle } } className={ className } title={ title } />
Matija Obreza's avatar
Matija Obreza committed
91
    <CardContent>{ children }</CardContent>
Oleksii Savran's avatar
Oleksii Savran committed
92
93
94
    { cardActions &&
      <CardActions>{ cardActions }</CardActions>
    }
Matija Obreza's avatar
Matija Obreza committed
95
96
97
  </Card>
);

98
const Section2 = ({classes, title, action = null, children = null, subheader = null}) => children && (
Matija Obreza's avatar
Matija Obreza committed
99
  <Card className={ classes.section }>
100
    <CardHeader classes={ { title: classes.sectionTitle, action: classes.sectionAction } } title={ title } action={ action } subheader={ subheader }/>
Matija Obreza's avatar
Matija Obreza committed
101
102
103
    <CardContent>{ children }</CardContent>
  </Card>
);
Matija Obreza's avatar
Subsets    
Matija Obreza committed
104
105

export const PageContents = withStyles(styles)(Contents);
Matija Obreza's avatar
Matija Obreza committed
106
107
export const MainSection = withStyles(styles)(Section1);
export const PageSection = withStyles(styles)(Section2);
Matija Obreza's avatar
Subsets    
Matija Obreza committed
108

Matija Obreza's avatar
Matija Obreza committed
109
export default withStyles(styles)(Layout);