-
Notifications
You must be signed in to change notification settings - Fork 21
/
App.js
143 lines (135 loc) · 4.55 KB
/
App.js
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import {
ResponsiveDrawer,
ResponsiveAppBar,
BodyContainer,
toggleDrawerOpen,
toggleDrawerDock,
setResponsive
} from '../../src/index.js'
import RaisedButton from 'material-ui/RaisedButton'
import FlatButton from 'material-ui/FlatButton'
import Toggle from 'material-ui/Toggle'
import { connect } from 'react-redux'
import FontIcon from 'material-ui/FontIcon'
import SvgIcon from 'material-ui/SvgIcon'
import IconButton from 'material-ui/IconButton'
const styles = {
drawer_container: {
backgroundColor: 'green',
height: '100%'
},
drawer_header: {
margin: '0px',
paddingBottom: '10px'
},
drawer_header_container: {
padding: '10px'
},
body_header: {
margin: '0px',
padding: '10px'
},
responsive_toggler: {
width: 250,
paddingTop: 15
}
}
class App extends Component {
render () {
const {
toggleDrawerOpen,
browser,
responsiveDrawer,
toggleDrawerDock,
setResponsive
} = this.props
return (
<div>
<div>
<ResponsiveDrawer openSecondary={false}>
<div style={styles.drawer_container}>
<div style={styles.drawer_header_container}>
<h1 style={styles.drawer_header}>Drawer</h1>
<RaisedButton
label={responsiveDrawer.open ? 'Close drawer' : 'Open drawer'}
primary
onClick={toggleDrawerOpen}
/>
</div>
</div>
</ResponsiveDrawer>
<BodyContainer openSecondary={false}>
<ResponsiveAppBar
title={'Responsive Material-UI Drawer DEMO'}
iconElementRight={
<FlatButton
href='https://github.com/TarikHuber/material-ui-responsive-drawer'
target='_blank'
secondary
icon={
<SvgIcon width={22} height={22} viewBox='0 0 1800 1800' >
<path d={'M1664 896q0 251-146.5 451.5t-378.5 277.5q-27 5-39.5-7t-12.5-30v-211q0-97-52-142 57-6 102.5-18t94-39 81-66.5 53-105 20.5-150.5q0-121-79-206 37-91-8-204-28-9-81 11t-92 44l-38 24q-93-26-192-26t-192 26q-16-11-42.5-27t-83.5-38.5-86-13.5q-44 113-7 204-79 85-79 206 0 85 20.5 150t52.5 105 80.5 67 94 39 102.5 18q-40 36-49 103-21 10-45 15t-57 5-65.5-21.5-55.5-62.5q-19-32-48.5-52t-49.5-24l-20-3q-21 0-29 4.5t-5 11.5 9 14 13 12l7 5q22 10 43.5 38t31.5 51l10 23q13 38 44 61.5t67 30 69.5 7 55.5-3.5l23-4q0 38 .5 89t.5 54q0 18-13 30t-40 7q-232-77-378.5-277.5t-146.5-451.5q0-209 103-385.5t279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z'} />
</SvgIcon>
}
/>
}
/>
<div style={{ margin: '10px' }}>
<h1 style={styles.body_header}>Body</h1>
<RaisedButton
label={responsiveDrawer.open ? 'Close drawer' : 'Open drawer'}
primary
onClick={toggleDrawerOpen}
/>
<Toggle
label={responsiveDrawer.responsive ? 'Disable responsive' : 'Enable responsive'}
labelPosition='right'
style={styles.responsive_toggler}
toggled={responsiveDrawer.responsive}
onToggle={() => { setResponsive(!responsiveDrawer.responsive) }}
/>
<Toggle
label={responsiveDrawer.docked ? 'Disable docked' : 'Enable docked'}
labelPosition='right'
style={styles.responsive_toggler}
toggled={responsiveDrawer.docked}
onToggle={toggleDrawerDock}
/>
</div>
</BodyContainer>
</div>
</div>
)
}
}
App.propTypes = {
toggleDrawerOpen: PropTypes.func.isRequired,
toggleDrawerDock: PropTypes.func.isRequired,
setResponsive: PropTypes.func.isRequired
}
const mapStateToProps = (state) => {
const { browser, responsiveDrawer } = state
return {
browser,
responsiveDrawer
}
}
const mapDispatchToProps = (dispatch) => {
return {
toggleDrawerOpen: () => {
dispatch(toggleDrawerOpen())
},
toggleDrawerDock: () => {
dispatch(toggleDrawerDock())
},
setResponsive: (isResponsive) => {
dispatch(setResponsive(isResponsive))
}
}
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(App)