SectionHeader.tsx 1.92 KB
Newer Older
Oleksii Savran's avatar
Oleksii Savran committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
import * as React from 'react';
import { createStyles, WithStyles, withStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';

interface IProps {
  title: string | React.ReactNode;
  subTitle?: string | React.ReactNode;
  className?: string;
  actions?: any;
}


const styles = (theme) => createStyles({
  root: {
    'margin': '2rem 0 1rem',
    'fontFamily': 'Roboto-Light',
    'borderBottom': 'solid 2px #808080',
    'display': 'flex',
    'flexDirection': 'row',
    'justifyContent': 'space-between',
    '&:first-child': {
      marginTop: 0,
    },
    '& h2': {
      margin: 0,
    },
  },
  rightArea: {
    'display': 'flex',
    'alignItems': 'center',
    'overflow': 'hidden',
    'height': '48px',
    'left': '100%',
    '& > * > button': {
      'marginLeft': '15px',
      'html[dir="rtl"] &' : {
        marginRight: '15px',
        marginLeft: '0',
      },
      [theme.breakpoints.down('sm')]: {
        marginTop: '5px',
        marginBottom: '5px',
      },
      [theme.breakpoints.down('xs')]: {
        'marginLeft': '5px',
        'width': '100%',
        'html[dir="rtl"] &' : {
          marginRight: '5px',
          marginLeft: '0',
        },
      },
    },
    [theme.breakpoints.down('sm')]: {
      'overflow': 'initial',
      'padding': '0',
      'height': 'auto',
      '& > *': {
        width: '100%',
      },
    },
    'actionsArea': {
      alignSelf: 'flex-end',
    },
  },
});

const SectionHeader = ({ title, subTitle = null, classes, className = null, actions = null }: IProps & WithStyles) => (
  <Grid container className={ `${classes.root} ${className}` }>
    <Grid item className={ `float-left ${classes.actionsArea}` }>
      <h2>{ title }</h2>
      { subTitle && <p>{ subTitle }</p> }
    </Grid>
    { actions &&
    <Grid item className={ `float-right ${classes.rightArea}` }>
      { actions }
    </Grid>
    }
  </Grid>
);

export default withStyles(styles)(SectionHeader);