Toolbar - React

toolbar for the schedule app and crew teaming

by Lio Fleishman

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.0.1.js"></script>
<script src="https://fb.me/react-dom-15.0.1.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css">
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">

</div>

SCSS

$toolsColor: #F36666;
$bgColor: #fff;
$menuIsHover: #4a96f6;
$menuItemsActive: #F76C6C;
$shadowColor: #ccc;
$popUpLettersColor: #000;
@mixin box-shadow($top: 0, $left:10px, $blur:15px, $color:$shadowColor, $inset: false) {
  @if $inset {
    -webkit-box-shadow: inset $top $left $blur $color;
    -moz-box-shadow: inset $top $left $blur $color;
    box-shadow: inset $top $left $blur $color;
  }
  @else {
    -webkit-box-shadow: $top $left $blur $color;
    -moz-box-shadow: $top $left $blur $color;
    box-shadow: $top $left $blur $color;
  }
}

.toolbar {
  width: 45px;
  float: right;
  //position: absolute;
  //left: 250px;
  .controls {
    width: 45px;
    margin: 0 auto;
    display: block;
    cursor: pointer;
    background: $bgColor;
    transition: all .5s ease;
    &:hover {
      background: $toolsColor;
    }
    &.isdown {
      overflow: hidden;
      .arrow {
        transform: rotate(180deg);
      }
    }
  }
  .logoControls {
    margin: 5px;
  }
  .arrow {
    margin: 1px;
    transition: all .2s ease;
  }
  .toolBarItems {
    transition: all .5s ease;
    display: block;
    @include box-shadow();
    background: $bgColor;
    ul {
      padding: 0;
      margin: 0 auto;
      text-align: center;
    }
    li {
      list-style-type: none;
      position: relative;
      padding: 10px 0;
      font-size: 25px;
      width: 45px;
      cursor: pointer;
      transition: all .3s ease;
      &:hover {
        background: $menuIsHover;
        color: $bgColor;
      }
      &.active {
        background: $menuItemsActive;
        color: $bgColor;
        .popup {
          opacity: 1;
          visibility: visible;
        }
      }
      .popup {
        position: absolute;
        width: 130px;
        height: 130px;
        background: $bgColor;
        @include box-shadow();
        right: 48px;
        top: 0;
        transition: all .4s ease;
        opacity: 0;
        color: $popUpLettersColor;
        font-family: 'Helvetica Neue',...

JavaScript 1.7

{/*comment on react */}

var itemsObj = [{name:'clock-o',ispopup: false},{name: 'user',ispopup:false},{name:'list-alt',ispopup:true, kind:'radio'},{name:'calendar',ispopup:true, kind:'calendar'}];

class Toolbar extends React.Component {
  constructor(props) {
    super(props);
		this.state = {
      ismenu: false
    }
    this.handleMenuClick = this.handleMenuClick.bind(this);
  }
	handleMenuClick(){
		this.setState({ismenu: !this.state.ismenu});
	}
  render() {
		const menuactivation = this.state.ismenu ? 'isdown' : 'isup';
    var {itemsclass, boxicon} = this.props
    let itemsclassarr = itemsclass;
    return ( < div >
      < div className = "toolbar" >
  		< span className = {`controls ${menuactivation}`}
      	id = "controls" onClick={this.handleMenuClick}>
      	< div className = {`logoControls fa fa-${boxicon}`} >< /div>
      	< div className = "arrow fa fa-angle-up" > < /div>
      < /span> 
      < span className = {`toolBarItems ${menuactivation}`}
      id = "toolBarItems" >
      < ul > {
        itemsclassarr.map((result, i) => {
          return <Itemtoolbar key = {i} itemsclass = {result} />;
        })
      }< /ul> < /span> < /div> < /div>
    );
  }
};

Toolbar.propTypes = {
  itemsclass: React.PropTypes.array.isRequired
};


class Itemtoolbar extends React.Component {
  constructor(props) {
    super(props);
		    this.state = {
      isactive: false
    }
    this.handleClick = this.handleClick.bind(this);
		this.stopPropagation = this.stopPropagation.bind(this);
  }
	stopPropagation(event){
    event.stopPropagation();
    event.nativeEvent.stopImmediatePropagation();
  }
	handleClick(event){
		this.stopPropagation(event);
		this.setState({isactive: !this.state.isactive});
	}
  render() {
	let { itemsclass } = this.props
	const text = this.state.isactive ? 'active' : ' ';
		var ispopup;
	if (itemsclass.ispopup) {
		ispopup = (<Popup kind={itemsclass.kind}/>);
	} else {
		ispopup = '';
	}
    return ( 
		< div >
      < li className =...