multiple react-drawer sample

multiple-react-drawer-sample.js

/**
 * This is a thrid party component created by Tony Li
 *
 * all right reserved by @author Tony Li
 *
 */
import React from 'react';
import ReactDOM from 'react-dom';
import ReactDrawer from '../src/ReactDrawer';

class Main extends React.Component {
  constructor() {
    super();
    this.state = {
      drawer_a_open: false,
      drawer_b_open: false,
      drawer_a_position: 'right',
      drawer_b_position: 'top',
      drawer_a_noOverlay: false,
      drawer_b_noOverlay: false
    };
    this.toggleADrawer = this.toggleADrawer.bind(this);
    this.toggleBDrawer = this.toggleBDrawer.bind(this);
    this.closeADrawer = this.closeADrawer.bind(this);
    this.closeBDrawer = this.closeBDrawer.bind(this);
    this.onDrawerAClose = this.onDrawerAClose.bind(this);
    this.onDrawerBClose = this.onDrawerBClose.bind(this);
    this.set_a_Position = this.set_a_Position.bind(this);
    this.set_b_Position = this.set_b_Position.bind(this);
    this.setANoOverlay = this.setANoOverlay.bind(this);
    this.setBNoOverlay = this.setBNoOverlay.bind(this);
  }
  set_a_Position(e) {
    this.setState({drawer_a_position: e.target.value});
  }
  set_b_Position(e) {
    this.setState({drawer_b_position: e.target.value});
  }
  setANoOverlay(e) {
    this.setState({drawer_a_noOverlay: e.target.checked});
  }
  setBNoOverlay(e) {
    this.setState({drawer_b_noOverlay: e.target.checked});
  }
  toggleADrawer() {
    this.setState({drawer_a_open: !this.state.open});
  }
  toggleBDrawer() {
    this.setState({drawer_b_open: !this.state.open});
  }
  closeADrawer() {
    this.setState({drawer_a_open: false});
  }
  closeBDrawer() {
    this.setState({drawer_b_open: false});
  }
  onDrawerAClose() {
    this.setState({drawer_a_open: false});
  }
  onDrawerBClose() {
    this.setState({drawer_b_open: false});
  }
  render() {
    return (
      <div>
        <div style={{margin: 200}}>
          <h1>React Drawer configuration</h1>
          <div style={{margin: 20}}>
            <label>set a Position</label>
            <select value={this.state.drawer_a_position} onChange={this.set_a_Position}>
              <option value="top">top</option>
              <option value="bottom">bottom</option>
              <option value="left">left</option>
              <option value="right">right</option>
            </select>
          </div>
          <div style={{margin: 20}}>
            <label>set b Position</label>
            <select value={this.state.drawer_b_position} onChange={this.set_b_Position}>
              <option value="top">top</option>
              <option value="bottom">bottom</option>
              <option value="left">left</option>
              <option value="right">right</option>
            </select>
          </div>
          <div style={{margin: 20}}>
            <input type="checkbox"
              checked={this.state.drawer_a_noOverlay}
              onChange={this.setANoOverlay}
            />
            <label>No overlay Drawer A</label>
            <small>(The overlay lets you close the drawer on click)</small>
          </div>
          <div style={{margin: 20}}>
            <input type="checkbox"
              checked={this.state.drawer_b_noOverlay}
              onChange={this.setBNoOverlay}
            />
            <label>No overlay Drawer B</label>
            <small>(The overlay lets you close the drawer on click)</small>
          </div>
          <button
            style={{margin: 20}}
            onClick={this.toggleADrawer}
            disabled={(this.state.drawer_a_open && !this.state.drawer_a_noOverlay) || (this.state.drawer_b_open && !this.state.drawer_b_noOverlay)}
            >
            {!this.state.drawer_a_open ? <span>show drawer A</span>: <span>close drawer A</span>}
          </button>
          <button
            style={{margin: 20}}
            onClick={this.toggleBDrawer}
            disabled={(this.state.drawer_a_open && !this.state.drawer_a_noOverlay) || (this.state.drawer_b_open && !this.state.drawer_b_noOverlay)}
            >
            {!this.state.drawer_b_open ? <span>show drawer B</span>: <span>close drawer B</span>}
          </button>
        </div>
        <ReactDrawer
          open={this.state.drawer_a_open}
          position={this.state.drawer_a_position}
          onClose={this.onDrawerAClose}
          noOverlay={this.state.drawer_a_noOverlay}>
          <i onClick={this.closeADrawer} className="icono-cross"></i>
          <h2>What a nice drawer a!</h2>
        </ReactDrawer>
        <ReactDrawer
          open={this.state.drawer_b_open}
          position={this.state.drawer_b_position}
          onClose={this.onDrawerBClose}
          noOverlay={this.state.drawer_b_noOverlay}>
          <i onClick={this.closeBDrawer} className="icono-cross"></i>
          <h2>What a nice drawer b!</h2>
        </ReactDrawer>
      </div>
    );
  }
}

ReactDOM.render(<Main />, document.getElementById('app'));