JSFiddle - React, Tailwind, and code Playground

by evgkch

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<div id="app"></div>

SCSS

$widget-color: rgb(240,240,240);
$green-color: rgb(29, 182, 119);
$yellow-color: rgb(255, 191, 31);
$red-color: rgb(214, 0, 0);

body {
  background-color: white;
}

.widget {
  .header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    height: 25px;
    border: solid 1px $widget-color;
    background-color: $widget-color;
    .expand, .toggle, .close {
      width: 15px;
      height: 15px;
      border-radius: 100%;
      margin: 5px 5px 5px 0;
    }
    .expand {
      background-color: $green-color;
    }
    .toggle {
      background-color: $yellow-color;
    }
    .close {
      background-color: $red-color;
    }
  }
  .label {
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 15px;
    border-left: solid 1px $widget-color;
    border-right: solid 1px $widget-color;
    border-bottom: solid 1px $widget-color;
    .resize {
      width: 15px;
      height: 15px;
      background-color: $widget-color;
      position: absolute;
      right: 0px;
      bottom: 0px;
    }
  }
}

Babel + JSX

class Store {
	constructor(storeID, data) {
  	this.storeID = storeID;
    this.data = data || {};
  }
	update(state) {
  	let bufferStore = Object.assign({}, this.data, state);
  	this.data = bufferStore;
    updateApp();
    this.view();
  }
  view() {
  	console.log(this)
  }
}

const updateApp = () => React.render(
	<App />,
  document.getElementById('app')
);

class App extends React.Component {
	constructor(props) {
  	super(props);
  }
  render() {
  	return (
    	<Widget>
    	  <div>new Widget</div>
    	</Widget>
    );
  }
}

class Widget extends React.Component {
	constructor(props) {
  	super(props);
    this.state = { _isHide: false, _isExpand: false, _isResizeAvalable: true };
  }
  toggle() {
  	console.log(this.state._isHide)
  	this.setState({ _isHide: !this.state._isHide });
  }
  resize() {
  	if (this.state._isResizeAvalable) {
    	return state;
    }
  }
  stopResize() {
  	this.setState({ _isResizeAvalable: false });
  }
  render() {
  	const { isHide } = this.state;
  	return (
    	<div className="widget">
        <div className="header">
          <div className="expand"></div>
          <div className="toggle" onClick={() => this.toggle()}></div>
          <div className="close"></div>
        </div>
        {
        	!isHide
          	? <div className="label" onMouseMove={(e) => {}}>
                {this.props.children}
                <div
                  className="resize"
                  onMouseDown={(e) => this.resize(e)}
                  onMouseUp={() => this.stopResize()}>
                </div>
              </div>
            : null
        }
      </div>
    );
  }
}

updateApp();