SidebarWrapper.tsx 6.9 KB
Newer Older
Matija Obreza's avatar
Matija Obreza committed
1
import * as React from 'react';
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
2
import {bindActionCreators, compose} from 'redux';
3
import {connect} from 'react-redux';
Matija Obreza's avatar
Matija Obreza committed
4
5
6
7
8
import {withStyles} from '@material-ui/core/styles';
import SidebarDrawer from './SidebarDrawer';
import ChevronRight from '@material-ui/icons/ChevronRight';
import ChevronLeft from '@material-ui/icons/ChevronLeft';

9
import { collapseSidebar } from 'actions/layout';
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
10
11
import withWidth from '@material-ui/core/withWidth/withWidth';
import {Breakpoint} from '@material-ui/core/styles/createBreakpoints';
12

Matija Obreza's avatar
Matija Obreza committed
13
14
15
interface ISidebarProps extends React.ClassAttributes<any> {
    classes: any;
    sidebarContent: any;
16
17
    collapseSidebar: (isOpen: boolean) => void;
    isOpen: boolean;
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
18
    width: Breakpoint;
Oleksii Savran's avatar
Oleksii Savran committed
19
    customHeight?: boolean;
Matija Obreza's avatar
Matija Obreza committed
20
21
}

Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
22
23
const mobile = ['sm', 'xs'] as Breakpoint[];

Matija Obreza's avatar
Matija Obreza committed
24
25
26
27
28
29
const styles = (theme) => ({

    /* tslint:disable */
    drawer: {
        position: 'sticky' as 'sticky',
        top: '72px',
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
30
        zIndex: 10,
Matija Obreza's avatar
Matija Obreza committed
31
32
33
34
35
36
        height: 'calc(100vh - 72px)',
        '& > div': {
            top: 'auto' as 'auto',
            position: 'initial' as 'initial',
            height: '100%' as '100%'
        },
Oleksii Savran's avatar
Oleksii Savran committed
37
      [theme.breakpoints.down('md')]: {
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
38
39
        height: 'calc(100vh - 3rem)',
        top: '3rem',
Oleksii Savran's avatar
Oleksii Savran committed
40
41
      },
      [theme.breakpoints.down('sm')]: {
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
42
43
44
45
46
        maxWidth: '90%',
        position: 'fixed' as 'fixed',
        zIndex: 15,
      }
    },
Oleksii Savran's avatar
Oleksii Savran committed
47
48
49
50
51
52
53
54
    drawerHeightV2: {
      top: '83px',
      height: 'calc(100vh - 83px)',
      [theme.breakpoints.down('md')]: {
        height: 'calc(100vh - 3.5rem)',
        top: '3.5rem',
      },
    },
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
55
56
57
58
59
    drawerCollapsed: {
      [theme.breakpoints.down('sm')]: {
        width: 'auto',
        position: 'sticky' as 'sticky',
      }
Matija Obreza's avatar
Matija Obreza committed
60
61
62
63
    },
    sidebar: {
        whiteSpace: 'nowrap' as 'nowrap',
        minWidth: '240px',
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
64
        height: '100%',
Matija Obreza's avatar
Matija Obreza committed
65
66
67
68
69
70
71
72
73
74
75
        transition: theme.transitions.create('min-width', {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.enteringScreen,
        }),
    },
    sidebarCollapsed: {
        overflowX: 'hidden' as  'hidden',
        transition: theme.transitions.create('min-width', {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.leavingScreen,
        }),
76
77
        cursor: 'e-resize',
        minWidth: theme.spacing.unit * 3,
Matija Obreza's avatar
Matija Obreza committed
78
79
80
81
82
        // maxWidth: theme.spacing.unit * 7,
        [theme.breakpoints.up('sm')]: {
            maxWidth: theme.spacing.unit * 9,
        },
    },
83
84
85
86
87
88
89
90
    collapsedText: {
      transform: 'rotate(90deg)',
      transformOrigin: 'bottom' as 'bottom',
      width: 0,
      color: '#999494',
      fontWeight: 'bold' as 'bold',
      fontSize: '1.2rem',
    },
Matija Obreza's avatar
Matija Obreza committed
91
92
    sidebarContents: {
        width: '100%',
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
93
        minHeight: 'calc(100% - 2rem)',
94
        height: 'auto' as 'auto',
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
95
96
97
98
99
100
101
102
103
        [theme.breakpoints.down('sm')]: {
          minHeight: 'calc(100% - 3rem)',
        },
    },
    sidebarContentsCollapsed: {
      minHeight: 'calc(100% - 52px)',
      [theme.breakpoints.down('sm')]: {
        minHeight: 'calc(100% - 38px)',
      },
Matija Obreza's avatar
Matija Obreza committed
104
105
106
    },
    /* tslint:disable */
    collapseButton: {
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
107
108
109
110
        width: '100%',
        position: 'sticky' as 'sticky',
        backgroundColor: '#e6e6e6',
        height: '2rem',
Matija Obreza's avatar
Matija Obreza committed
111
112
113
114
115
116
117
118
        bottom: 0,
        transition: theme.transitions.create('width', {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.enteringScreen,
        }),
        '&:hover': {
            backgroundColor: '#ccc',
        },
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
119
120
121
122
        '& > span': {
          display: 'flex' as 'flex',
          alignItems: 'center' as 'center',
          height: '100%',
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
123
124
125
126
          fontSize: '16px',
          [theme.breakpoints.down('sm')]: {
            fontSize: '1.5rem',
          },
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
127
        },
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
128
129
130
131
        '& > span > svg':{
            'html[dir="rtl"] &' : {
                transform: 'rotate(180deg)',
            },
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
132
133
134
135
        },
        [theme.breakpoints.down('sm')]: {
            height: '3rem',
        },
Matija Obreza's avatar
Matija Obreza committed
136
137
    },
    buttonCollapsed: {
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
138
        top: '100%',
Matija Obreza's avatar
Matija Obreza committed
139
140
141
142
143
        // width: '72px',
        transition: theme.transitions.create('width', {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.leavingScreen,
        }),
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
144
145
146
147
148
        '&  > svg':{
            'html[dir="rtl"] &' : {
                transform: 'rotate(180deg)',
            },
        }
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
149
150
151
152
153
154
155
156
157
158
159
160
161
162
    },
    pageContent: {
      zIndex: -2,
      backgroundColor: '#878787',
      opacity: 0.4,
      position: 'fixed' as 'fixed',
      width: '100%',
      height: '100%',
      top: 0,
      left: 0,
      [theme.breakpoints.up('md')]: {
        display: 'none' as 'none',
      },
    },
Matija Obreza's avatar
Matija Obreza committed
163
164
165
166
});

class SidebarWrapper extends React.Component<ISidebarProps, any> {

167
168
    setIsCollapsed = (isCollapsed: boolean) => {
        this.props.collapseSidebar(! isCollapsed);
Matija Obreza's avatar
Matija Obreza committed
169
170
171
172
173
174
175
    };

    public constructor(props: any) {
        super(props);
    }

    public render() {
Oleksii Savran's avatar
Oleksii Savran committed
176
        const { sidebarContent, classes, isOpen, width, customHeight } = this.props;
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
177
        const isMobile = mobile.indexOf(width) !== -1;
178

Matija Obreza's avatar
Matija Obreza committed
179
180
        return (
            <SidebarDrawer
Oleksii Savran's avatar
Oleksii Savran committed
181
                className={ `${classes.drawer} ${!isOpen ? classes.drawerCollapsed : ''} ${customHeight ? classes.drawerHeightV2 : ''}` }
Matija Obreza's avatar
Matija Obreza committed
182
183
184
                isOpen={ isOpen }
                variant={ 'permanent' }
            >
185
186
              { isOpen &&
                <div className={ `${ classes.sidebar }` }>
Matija Obreza's avatar
Matija Obreza committed
187
                    <div className={ classes.sidebarContents }>
188
189
190
191
192
193
194
                        { sidebarContent }
                    </div>
                    <div
                        onClick={() => { this.setIsCollapsed(true); }}
                        className={ `${classes.collapseButton}` }>
                        <span><ChevronLeft /> Collapse</span>
                    </div>
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
195
                  <div className={classes.pageContent}  onClick={() => { isMobile ? this.setIsCollapsed(true) : null; } }> </div>
196
197
198
199
                </div>
              }
              { !isOpen &&
                <div className={ `${ classes.sidebar } ${classes.sidebarCollapsed}` }>
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
200
                    <div className={ `${classes.sidebarContents} ${classes.sidebarContentsCollapsed}` } onClick={() => { this.setIsCollapsed(false); }}>
201
                        <p className={ classes.collapsedText }>Open sidebar</p>
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
202
203
                    </div>
                    <div
204
205
                        onClick={() => { this.setIsCollapsed(false); }}
                        className={ `${classes.collapseButton} ${classes.buttonCollapsed}` }
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
206
                    >
207
                        <ChevronRight />
Matija Obreza's avatar
Matija Obreza committed
208
209
                    </div>
                </div>
210
              }
Matija Obreza's avatar
Matija Obreza committed
211
212
213
214
215
            </SidebarDrawer>
        );
    }
}

216
const mapStateToProps = (state, ownProps) => ({
217
    isOpen: state.user.public.sidebarOpen,
218
219
220
221
222
223
});

const mapDispatchToProps = (dispatch) => bindActionCreators({
    collapseSidebar,
}, dispatch);

Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
224
export default connect(mapStateToProps, mapDispatchToProps)(compose(withWidth(), withStyles(styles))(SidebarWrapper));