Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="http://fb.me/react-with-addons-0.12.0.js"></script>
  <script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
  
  <script type="text/jsx">
    var ReactTransitionGroup = React.addons.TransitionGroup;
    
​
    var Drawer = React.createClass({
      getInitialState: function() {
        return {
          open: false
        };
      },
      componentWillMount: function() {
        this.setState({
          open: this.props.open
        });
      },
      componentWillReceiveProps: function(props) {
        this.setState({
          open: props.open
        });
      },
      open: function() {
        this.setState({
          open: true
        });
      },
      close: function() {
        this.setState({
          open: false
        });
      },
      toggle: function() {
        this.setState({
          open: !this.state.open
        });
      },
      render: function() {
        return (
          <ReactTransitionGroup transitionName="test" component="div">
            {this.state.open && <DrawerInner key="content">{this.props.children}</DrawerInner>}
          </ReactTransitionGroup>
        );
      }
    });
    
    var DrawerInner = React.createClass({
      componentWillEnter: function(cb) {
        var $el = $(this.getDOMNode());
        var height = $el[0].scrollHeight;
        $el.stop(true).height(0).animate({height:height}, 200, cb);
      },
      componentWillLeave: function(cb) {
        var $el = $(this.getDOMNode());
        $el.stop(true).animate({height:0}, 200, cb);
      },
      render: function() {
        return <div className="drawer" ref="drawer">{this.props.children}</div>;
      }
    });
    
    
    var Test = React.createClass({
      getInitialState: function() {
        return {
          drawerOpen: false
        };
      },
      openDrawer: function() {
        console.log('openDrawer');
        this.setState({
          drawerOpen: true
        });
      },
      closeDrawer: function() {
        console.log('closeDrawer');
        this.setState({
          drawerOpen: false
        });
      },
      render: function() {
        return (
          <div>
            <button onClick={this.openDrawer}>Open</button>
            <button onClick={this.closeDrawer}>Close</button>
            <Drawer ref="drawer" open={this.state.drawerOpen}>
              <p className="testChild">Children</p>
            </Drawer>
          </div>
        );
      }
    });
​
    React.render(
      <Test/>,
      document.body
    );
  </script>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers