Pure drawer

components/drawer/index.jsx

@@ -1,52 +1,32 @@
 import React from 'react';
 import style from './style';
 
-class Drawer extends React.Component {
-  static propTypes = {
-    active: React.PropTypes.bool,
-    className: React.PropTypes.string,
-    hideable: React.PropTypes.bool,
-    type: React.PropTypes.oneOf(['left', 'right'])
-  };
-
-  static defaultProps = {
-    className: '',
-    hideable: true,
-    type: 'left'
-  };
-
-  state = {
-    active: this.props.active
-  };
-
-  handleOverlayClick = () => {
-    if (this.props.hideable) {
-      this.setState({active: false});
-    }
-  };
-
-  render () {
-    let className = `${style.drawer} ${style[this.props.type]}`;
-    if (this.state.active) className += ` ${style.active}`;
-    if (this.props.className) className += ` ${this.props.className}`;
-
-    return (
-      <div data-react-toolbox='drawer' className={className}>
-        <div className={style.overlay} onClick={this.handleOverlayClick}></div>
-        <aside className={style.content}>
-          { this.props.children }
-        </aside>
-      </div>
-    );
-  }
-
-  show () {
-    this.setState({active: true});
-  }
-
-  hide () {
-    this.setState({active: false});
-  }
-}
+const Drawer = (props) => {
+  let className = `${style.drawer} ${style[props.type]}`;
+  if (props.active) className += ` ${style.active}`;
+  if (props.className) className += ` ${props.className}`;
+
+  return (
+    <div data-react-toolbox='drawer' className={className}>
+      <div className={style.overlay} onClick={props.onOverlayClick}></div>
+      <aside className={style.content}>
+        { props.children }
+      </aside>
+    </div>
+  );
+};
+
+Drawer.propTypes = {
+  active: React.PropTypes.bool,
+  className: React.PropTypes.string,
+  onOverlayClick: React.PropTypes.func,
+  type: React.PropTypes.oneOf(['left', 'right'])
+};
+
+Drawer.defaultProps = {
+  active: false,
+  className: '',
+  type: 'left'
+};
 
 export default Drawer;

components/drawer/readme.md

@@ -7,15 +7,19 @@ The [navigation drawer](https://www.google.com/design/spec/patterns/navigation-d
 import Drawer from 'react-toolbox/drawer';
 
 class DrawerTest extends React.Component {
-  handleClick = () => {
-    this.refs.drawer.show();
+  state = {
+    active: false
+  };
+
+  handleToggle = () => {
+    this.setState({active: !this.state.active});
   };
 
   render () {
     return (
       <div>
-        <Button kind='raised' accent label='Show Drawer' onClick={this.handleClick} />
-        <Drawer ref='drawer' hideable>
+        <Button kind='raised' accent label='Show Drawer' onClick={this.handleToggle} />
+        <Drawer active={this.state.active} onOverlayClick={this.handleToggle}>
           <h5>This is your Drawer.</h5>
           <p>You can embed any content you want, for example a Menu.</p>
         </Drawer>
@@ -29,15 +33,7 @@ class DrawerTest extends React.Component {
 
 | Name              | Type          | Default         | Description|
 |:-----|:-----|:-----|:-----|
-| `active`        | `Boolean`       |  `false`        | If true, the drawer will be active by default.|
+| `active`        | `Boolean`       |  `false`        | If true, the drawer will be visible.|
 | `className`     | `String`        |     `''`        | Sets a class to give customized styles to the drawer.|
-| `hideable`      | `Bool`          | `true`           | If true, the drawer will be hidden by clicking the overlay.|
+| `onOverlayClick` | `Function`     |            | Callback function to be invoked when the overlay is clicked.|
 | `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.|
-
-## Methods
-
-The Drawer has state to determine if it is being shown or not. It exposes methods to show and hide:
-
-- `show` is used to show the drawer.
-- `hide` is used to hide the drawer.
-

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

@@ -1,13 +1,17 @@
 class DrawerTest extends React.Component {
-  handleClick = () => {
-    this.refs.drawer.show();
+  state = {
+    active: false
+  };
+
+  handleToggle = () => {
+    this.setState({active: !this.state.active});
   };
 
   render () {
     return (
       <div>
-        <Button kind='raised' accent label='Show Drawer' onClick={this.handleClick} />
-        <Drawer ref='drawer' hideable>
+        <Button kind='raised' accent label='Show Drawer' onClick={this.handleToggle} />
+        <Drawer active={this.state.active} onOverlayClick={this.handleToggle}>
           <h5>This is your Drawer.</h5>
           <p>You can embed any content you want, for example a Menu.</p>
         </Drawer>

spec/components/drawer.jsx

@@ -3,29 +3,38 @@ import Button from '../../components/button';
 import Drawer from '../../components/drawer';
 
 class DrawerTest extends React.Component {
-  handleClick = (ref, method) => {
-    this.refs[ref][method]();
+  state = {
+    leftActive: false,
+    rightActive: false
   };
 
+  handleToggleLeft = () => {
+    this.setState({leftActive: !this.state.leftActive});
+  };
+
+  handleToggleRight = () => {
+    this.setState({rightActive: !this.state.rightActive});
+  }
+
   render () {
     return (
       <section>
         <h5>Drawer</h5>
-        <p>You can navigate using a drawer to the left or right. They can be auto-closable or not.</p>
+        <p>You can navigate using a drawer to the left or right.</p>
 
-        <Drawer ref='left' hideable={true}>
+        <Drawer active={this.state.leftActive} onOverlayClick={this.handleToggleLeft}>
           <h5>Officia deserunt mollit.</h5>
           <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>
           <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>
         </Drawer>
 
-        <Drawer ref='right' type='right'>
-          <Button label='Close' onClick={this.handleClick.bind(this, 'right', 'hide')} />
+        <Drawer active={this.state.rightActive} type='right'>
+          <Button label='Close' onClick={this.handleToggleRight} />
         </Drawer>
 
         <nav>
-          <Button accent label='Drawer left hideable' kind='raised' onClick={this.handleClick.bind(this, 'left', 'show')} />
-          <Button primary label='Drawer right' kind='raised' onClick={this.handleClick.bind(this, 'right', 'show')} />
+          <Button accent label='Drawer left' kind='raised' onClick={this.handleToggleLeft} />
+          <Button primary label='Drawer right' kind='raised' onClick={this.handleToggleRight} />
         </nav>
       </section>
     );