Sample changer

by Matias Guijarro

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-15.1.0.js"></script>
<script src="https://fb.me/react-dom-15.1.0.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://rawgit.com/react-bootstrap/react-bootstrap-bower/master/react-bootstrap.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

.treeNode {
  display: none;
}
.treeNode ~ ul {
 display: none;
}
.treeNode:checked ~ ul {
 display: block;
}
.treeNodeLabel {
  font-family: Consolas, Lucida Console, monospace;
  font-weight: normal;
  cursor: pointer;
  margin-right: 0.7em;
  margin-left: 0.3em;
  margin-top: 5px;
}
.treeNodeLabel:hover {
  font-weight: bold;
  color: hsl(208, 56%, 35%);
}
.treeUl {
  background-color: #fff;
  cursor: pointer;
}
.treeLi {
  display: block;
  padding-top: 0.2em;
  padding-left: 0.2em;
}
.treeLi:hover {
  background-clip: content-box;
  background-color: #d9edf7;
}
.custom-btn-color {
  color: hsl(0,0%,50%) !important;
}
.custom-btn-color:hover {
  color: hsl(0,0%,0%) !important;
}

JavaScript 1.7

var Panel = ReactBootstrap.Panel;
var Button = ReactBootstrap.Button;
var OverlayTrigger = ReactBootstrap.OverlayTrigger;
var Tooltip = ReactBootstrap.Tooltip;
var Glyphicon = ReactBootstrap.Glyphicon;
var ButtonToolbar = ReactBootstrap.ButtonToolbar;

var Tree = React.createClass({
    render: function() {
      return <Panel header={this.props.title} bsStyle="primary">
        {this.props.children}
      </Panel>
    }
})

var TreeNode = React.createClass({
    getInitialState() {
         return {};
     },
     
     getUniqueId() {
       if (TreeNode._uid_count === undefined) {
           TreeNode._uid_count = 0;
       }
       return 'id' + TreeNode._uid_count++;
     },
    
     render() {
        const input_id = this.getUniqueId();
        const scanTooltip = (
            <Tooltip>Scan</Tooltip>
        );
        const selectTooltip = (
            <Tooltip>Select</Tooltip>
        );
        return <li className="treeLi">
           <input type="checkbox" className="treeNode" id={input_id}/>
           <OverlayTrigger placement="top" overlay={selectTooltip}><span><Button bsClass="btn btn-xs btn-link custom-btn-color" bsSize="xsmall"><Glyphicon glyph="record"/></Button></span></OverlayTrigger>
           <label htmlFor={input_id} className="treeNodeLabel">{this.props.label}</label>
           <OverlayTrigger placement="right" overlay={scanTooltip}><Button bsStyle="default" bsSize="xsmall"><Glyphicon glyph="qrcode"/></Button></OverlayTrigger> 
           <ul className="treeUl">
             {this.props.children}
           </ul>
         </li>;
    }
})

var TreeItem = React.createClass({
  getInitialState() {
    this.itemClicked = this.itemClicked.bind(this);
    return { allow_control: false };
  },
  
  itemClicked: function() {
    this.setState({allow_control: !this.state.allow_control})
  },
  
  render: function() {
    const load_tooltip = (<Tooltip>Load this sample</Tooltip>);
    const unload_tooltip = (<Tooltip>Unload sample to this...