Skip to content

Commit fa94c4e

Browse files
javivelascojavivelasco
committed
Pure drawer
1 parent 6e6c1ce commit fa94c4e

File tree

4 files changed

+62
-73
lines changed

4 files changed

+62
-73
lines changed

‎components/drawer/index.jsx

Lines changed: 27 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,32 @@
11
import React from 'react';
22
import style from './style';
33

4-
class Drawer extends React.Component {
5-
static propTypes = {
6-
active: React.PropTypes.bool,
7-
className: React.PropTypes.string,
8-
hideable: React.PropTypes.bool,
9-
type: React.PropTypes.oneOf(['left', 'right'])
10-
};
11-
12-
static defaultProps = {
13-
className: '',
14-
hideable: true,
15-
type: 'left'
16-
};
17-
18-
state = {
19-
active: this.props.active
20-
};
21-
22-
handleOverlayClick = () => {
23-
if (this.props.hideable) {
24-
this.setState({active: false});
25-
}
26-
};
27-
28-
render () {
29-
let className = `${style.drawer} ${style[this.props.type]}`;
30-
if (this.state.active) className += ` ${style.active}`;
31-
if (this.props.className) className += ` ${this.props.className}`;
32-
33-
return (
34-
<div data-react-toolbox='drawer' className={className}>
35-
<div className={style.overlay} onClick={this.handleOverlayClick}></div>
36-
<aside className={style.content}>
37-
{ this.props.children }
38-
</aside>
39-
</div>
40-
);
41-
}
42-
43-
show () {
44-
this.setState({active: true});
45-
}
46-
47-
hide () {
48-
this.setState({active: false});
49-
}
50-
}
4+
const Drawer = (props) => {
5+
let className = `${style.drawer} ${style[props.type]}`;
6+
if (props.active) className += ` ${style.active}`;
7+
if (props.className) className += ` ${props.className}`;
8+
9+
return (
10+
<div data-react-toolbox='drawer' className={className}>
11+
<div className={style.overlay} onClick={props.onOverlayClick}></div>
12+
<aside className={style.content}>
13+
{ props.children }
14+
</aside>
15+
</div>
16+
);
17+
};
18+
19+
Drawer.propTypes = {
20+
active: React.PropTypes.bool,
21+
className: React.PropTypes.string,
22+
onOverlayClick: React.PropTypes.func,
23+
type: React.PropTypes.oneOf(['left', 'right'])
24+
};
25+
26+
Drawer.defaultProps = {
27+
active: false,
28+
className: '',
29+
type: 'left'
30+
};
5131

5232
export default Drawer;

‎components/drawer/readme.md

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,19 @@ The [navigation drawer](https://www.google.com/design/spec/patterns/navigation-d
77
import Drawer from 'react-toolbox/drawer';
88

99
class DrawerTest extends React.Component {
10-
handleClick = () => {
11-
this.refs.drawer.show();
10+
state = {
11+
active: false
12+
};
13+
14+
handleToggle = () => {
15+
this.setState({active: !this.state.active});
1216
};
1317

1418
render () {
1519
return (
1620
<div>
17-
<Button kind='raised' accent label='Show Drawer' onClick={this.handleClick} />
18-
<Drawer ref='drawer' hideable>
21+
<Button kind='raised' accent label='Show Drawer' onClick={this.handleToggle} />
22+
<Drawer active={this.state.active} onOverlayClick={this.handleToggle}>
1923
<h5>This is your Drawer.</h5>
2024
<p>You can embed any content you want, for example a Menu.</p>
2125
</Drawer>
@@ -29,15 +33,7 @@ class DrawerTest extends React.Component {
2933

3034
| Name | Type | Default | Description|
3135
|:-----|:-----|:-----|:-----|
32-
| `active` | `Boolean` | `false` | If true, the drawer will be active by default.|
36+
| `active` | `Boolean` | `false` | If true, the drawer will be visible.|
3337
| `className` | `String` | `''` | Sets a class to give customized styles to the drawer.|
34-
| `hideable` | `Bool` | `true` | If true, the drawer will be hidden by clicking the overlay.|
38+
| `onOverlayClick` | `Function` | | Callback function to be invoked when the overlay is clicked.|
3539
| `type` | `String` | `left` | Type of drawer. It can be left or right to display the drawer on the left or right side of the screen.|
36-
37-
## Methods
38-
39-
The Drawer has state to determine if it is being shown or not. It exposes methods to show and hide:
40-
41-
- `show` is used to show the drawer.
42-
- `hide` is used to hide the drawer.
43-

‎docs/app/components/layout/main/modules/examples/drawer_example_1.txt

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
11
class DrawerTest extends React.Component {
2-
handleClick = () => {
3-
this.refs.drawer.show();
2+
state = {
3+
active: false
4+
};
5+
6+
handleToggle = () => {
7+
this.setState({active: !this.state.active});
48
};
59

610
render () {
711
return (
812
<div>
9-
<Button kind='raised' accent label='Show Drawer' onClick={this.handleClick} />
10-
<Drawer ref='drawer' hideable>
13+
<Button kind='raised' accent label='Show Drawer' onClick={this.handleToggle} />
14+
<Drawer active={this.state.active} onOverlayClick={this.handleToggle}>
1115
<h5>This is your Drawer.</h5>
1216
<p>You can embed any content you want, for example a Menu.</p>
1317
</Drawer>

‎spec/components/drawer.jsx

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,29 +3,38 @@ import Button from '../../components/button';
33
import Drawer from '../../components/drawer';
44

55
class DrawerTest extends React.Component {
6-
handleClick = (ref, method) => {
7-
this.refs[ref][method]();
6+
state = {
7+
leftActive: false,
8+
rightActive: false
89
};
910

11+
handleToggleLeft = () => {
12+
this.setState({leftActive: !this.state.leftActive});
13+
};
14+
15+
handleToggleRight = () => {
16+
this.setState({rightActive: !this.state.rightActive});
17+
}
18+
1019
render () {
1120
return (
1221
<section>
1322
<h5>Drawer</h5>
14-
<p>You can navigate using a drawer to the left or right. They can be auto-closable or not.</p>
23+
<p>You can navigate using a drawer to the left or right.</p>
1524

16-
<Drawer ref='left' hideable={true}>
25+
<Drawer active={this.state.leftActive} onOverlayClick={this.handleToggleLeft}>
1726
<h5>Officia deserunt mollit.</h5>
1827
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
1928
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
2029
</Drawer>
2130

22-
<Drawer ref='right' type='right'>
23-
<Button label='Close' onClick={this.handleClick.bind(this, 'right', 'hide')} />
31+
<Drawer active={this.state.rightActive} type='right'>
32+
<Button label='Close' onClick={this.handleToggleRight} />
2433
</Drawer>
2534

2635
<nav>
27-
<Button accent label='Drawer left hideable' kind='raised' onClick={this.handleClick.bind(this, 'left', 'show')} />
28-
<Button primary label='Drawer right' kind='raised' onClick={this.handleClick.bind(this, 'right', 'show')} />
36+
<Button accent label='Drawer left' kind='raised' onClick={this.handleToggleLeft} />
37+
<Button primary label='Drawer right' kind='raised' onClick={this.handleToggleRight} />
2938
</nav>
3039
</section>
3140
);

0 commit comments

Comments
 (0)