var Panel = ReactPanels.Panel;

var FloatingPanel = ReactPanels.FloatingPanel;

var Tab = ReactPanels.Tab;

var Toolbar = ReactPanels.Toolbar;

var Content = ReactPanels.Content;

var Footer = ReactPanels.Footer;

var ToggleButton = ReactPanels.ToggleButton;

​

var ComponentExample = React.createClass({

​

  getInitialState: function () {

    return {toolbars: true};

  },

​

  handleToggleToolbars: function () {

    this.setState({toolbars: !this.state.toolbars});

  },

​

  render: function () {

    var extraTabProps = {

      transitionName: "animated-tab",

      transitionEnter: true,

      transitionLeave: true

    }, extraPanelProps = {

      transitionName: "animated-flex-panel",

      transitionEnter: true,

      transitionLeave: true,

      transitionAppear: true,

    };

​

    return (

      <FloatingPanel theme="flexbox2" renderPanelBorder={false} ref="panel" useAvailableHeight={true} 

      {...extraPanelProps}

      buttons={[

        <ToggleButton title="Toggle Toolbar" active={this.state.toolbars} onChange={this.handleToggleToolbars}>

          <i className="fa fa-wrench"></i>

        </ToggleButton>

      ]} style={{

        boxShadow: "0 0 0 1px black",

        height: 300,

        width: 520

      }}>

        <Tab title="One" icon="fa fa-plane" showToolbar={this.state.toolbars} {...extraTabProps} >

          <Toolbar>Toolbar content of One</Toolbar>

          <Content>Content of One</Content>

          <Footer>Footer content of One</Footer>

        </Tab>

        <Tab title="Two" icon="fa fa-fire" showToolbar={this.state.toolbars} {...extraTabProps} >

          <Content>Content of Two</Content>

        </Tab>

      </FloatingPanel>

    );

  }

​

});

​

React.render(<ComponentExample/>, mountNode);