ALF-er/esnextbin.md

## esnextbin.md

      
    Raw
  

              esnextbin.md
            
          
    made with esnextbin

  
## index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ESNextbin Sketch</title>
  <!-- put additional styles and scripts here -->
</head>
<body>
  <!-- put markup and other contents here -->
  <div id="root"></div>
</body>
</html>

## index.js
// write ES2015 code and import modules from npm
// and then press "Execute" to run your program

import React, { Component } from "react";
import { render } from "react-dom";
import shallowCompare from "react-addons-shallow-compare";

const Modal = ({ children, onClose }) => (
  <div>
    <h3>Modal</h3>
    {children}
    <button onClick={onClose}>Close</button>
  </div>
);

const Item = ({ children, onClick }) => <button onClick={onClick.bind(this, children)}>{children}</button>;

class Table extends Component {

  shouldComponentUpdate = (nextProps) => shallowCompare(this, nextProps)

  render() {
    const { items, onItemClick } = this.props;

    return (
      <div>
        <h3>Table</h3>
        {items.map(item =>
          <Item onClick={onItemClick}>{item}</Item>
        )}
      </div>
    );
  }

}

class Container extends Component {

  constructor(...args) {
    super(...args);

    this.state = {
      clickedItem: null
    };
  }

  onModalClose = () => this.setState({ clickedItem: null })

  onItemClick = (clickedItem) => this.setState({ clickedItem })

  render() {
    const { clickedItem } = this.state;

    return (
      <div>
        {!!clickedItem &&
          <Modal onClose={this.onModalClose}>{clickedItem}</Modal>
        }

        <Table
          items={["First", "Second", "Third"]}
          onItemClick={this.onItemClick}
        />
      </div>
    );
  }
}

render(<Container />, document.getElementById("root"));

## package.json
{
  "name": "esnextbin-sketch",
  "version": "0.0.0",
  "dependencies": {
    "react": "0.14.7",
    "react-dom": "0.14.7",
    "react-addons-shallow-compare": "0.14.7",
    "babel-runtime": "6.3.19"
  }
}

## transpiled.js
"use strict";

var _getPrototypeOf = require("babel-runtime/core-js/object/get-prototype-of");

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck");

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require("babel-runtime/helpers/createClass");

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require("babel-runtime/helpers/possibleConstructorReturn");

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require("babel-runtime/helpers/inherits");

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _reactDom = require("react-dom");

var _reactAddonsShallowCompare = require("react-addons-shallow-compare");

var _reactAddonsShallowCompare2 = _interopRequireDefault(_reactAddonsShallowCompare);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var Modal = function Modal(_ref) {
  var children = _ref.children;
  var onClose = _ref.onClose;
  return _react2.default.createElement(
    "div",
    null,
    _react2.default.createElement(
      "h3",
      null,
      "Modal"
    ),
    children,
    _react2.default.createElement(
      "button",
      { onClick: onClose },
      "Close"
    )
  );
}; // write ES2015 code and import modules from npm
// and then press "Execute" to run your program

var Item = function Item(_ref2) {
  var children = _ref2.children;
  var onClick = _ref2.onClick;
  return _react2.default.createElement(
    "button",
    { onClick: onClick.bind(undefined, children) },
    children
  );
};

var Table = (function (_Component) {
  (0, _inherits3.default)(Table, _Component);

  function Table() {
    var _Object$getPrototypeO;

    var _temp, _this, _ret;

    (0, _classCallCheck3.default)(this, Table);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_Object$getPrototypeO = (0, _getPrototypeOf2.default)(Table)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.shouldComponentUpdate = function (nextProps) {
      return (0, _reactAddonsShallowCompare2.default)(_this, nextProps);
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  (0, _createClass3.default)(Table, [{
    key: "render",
    value: function render() {
      var _props = this.props;
      var items = _props.items;
      var onItemClick = _props.onItemClick;

      return _react2.default.createElement(
        "div",
        null,
        _react2.default.createElement(
          "h3",
          null,
          "Table"
        ),
        items.map(function (item) {
          return _react2.default.createElement(
            Item,
            { onClick: onItemClick },
            item
          );
        })
      );
    }
  }]);
  return Table;
})(_react.Component);

var Container = (function (_Component2) {
  (0, _inherits3.default)(Container, _Component2);

  function Container() {
    var _Object$getPrototypeO2;

    (0, _classCallCheck3.default)(this, Container);

    for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
      args[_key2] = arguments[_key2];
    }

    var _this2 = (0, _possibleConstructorReturn3.default)(this, (_Object$getPrototypeO2 = (0, _getPrototypeOf2.default)(Container)).call.apply(_Object$getPrototypeO2, [this].concat(args)));

    _this2.onModalClose = function () {
      return _this2.setState({ clickedItem: null });
    };

    _this2.onItemClick = function (clickedItem) {
      return _this2.setState({ clickedItem: clickedItem });
    };

    _this2.state = {
      clickedItem: null
    };
    return _this2;
  }

  (0, _createClass3.default)(Container, [{
    key: "render",
    value: function render() {
      var clickedItem = this.state.clickedItem;

      return _react2.default.createElement(
        "div",
        null,
        !!clickedItem && _react2.default.createElement(
          Modal,
          { onClose: this.onModalClose },
          clickedItem
        ),
        _react2.default.createElement(Table, {
          items: ["First", "Second", "Third"],
          onItemClick: this.onItemClick
        })
      );
    }
  }]);
  return Container;
})(_react.Component);

(0, _reactDom.render)(_react2.default.createElement(Container, null), document.getElementById("root"));
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>ESNextbin Sketch</title>
	<!-- put additional styles and scripts here -->
	</head>
	<body>
	<!-- put markup and other contents here -->
	<div id="root"></div>
	</body>
	</html>
	// write ES2015 code and import modules from npm
	// and then press "Execute" to run your program

	import React, { Component } from "react";
	import { render } from "react-dom";
	import shallowCompare from "react-addons-shallow-compare";

	const Modal = ({ children, onClose }) => (
	<div>
	<h3>Modal</h3>
	{children}
	<button onClick={onClose}>Close</button>
	</div>
	);

	const Item = ({ children, onClick }) => <button onClick={onClick.bind(this, children)}>{children}</button>;

	class Table extends Component {

	shouldComponentUpdate = (nextProps) => shallowCompare(this, nextProps)

	render() {
	const { items, onItemClick } = this.props;

	return (
	<div>
	<h3>Table</h3>
	{items.map(item =>
	<Item onClick={onItemClick}>{item}</Item>
	)}
	</div>
	);
	}

	}

	class Container extends Component {

	constructor(...args) {
	super(...args);

	this.state = {
	clickedItem: null
	};
	}

	onModalClose = () => this.setState({ clickedItem: null })

	onItemClick = (clickedItem) => this.setState({ clickedItem })

	render() {
	const { clickedItem } = this.state;

	return (
	<div>
	{!!clickedItem &&
	<Modal onClose={this.onModalClose}>{clickedItem}</Modal>
	}

	<Table
	items={["First", "Second", "Third"]}
	onItemClick={this.onItemClick}
	/>
	</div>
	);
	}
	}

	render(<Container />, document.getElementById("root"));
	{
	"name": "esnextbin-sketch",
	"version": "0.0.0",
	"dependencies": {
	"react": "0.14.7",
	"react-dom": "0.14.7",
	"react-addons-shallow-compare": "0.14.7",
	"babel-runtime": "6.3.19"
	}
	}
	"use strict";

	var _getPrototypeOf = require("babel-runtime/core-js/object/get-prototype-of");

	var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

	var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck");

	var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

	var _createClass2 = require("babel-runtime/helpers/createClass");

	var _createClass3 = _interopRequireDefault(_createClass2);

	var _possibleConstructorReturn2 = require("babel-runtime/helpers/possibleConstructorReturn");

	var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

	var _inherits2 = require("babel-runtime/helpers/inherits");

	var _inherits3 = _interopRequireDefault(_inherits2);

	var _react = require("react");

	var _react2 = _interopRequireDefault(_react);

	var _reactDom = require("react-dom");

	var _reactAddonsShallowCompare = require("react-addons-shallow-compare");

	var _reactAddonsShallowCompare2 = _interopRequireDefault(_reactAddonsShallowCompare);

	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

	var Modal = function Modal(_ref) {
	var children = _ref.children;
	var onClose = _ref.onClose;
	return _react2.default.createElement(
	"div",
	null,
	_react2.default.createElement(
	"h3",
	null,
	"Modal"
	),
	children,
	_react2.default.createElement(
	"button",
	{ onClick: onClose },
	"Close"
	)
	);
	}; // write ES2015 code and import modules from npm
	// and then press "Execute" to run your program

	var Item = function Item(_ref2) {
	var children = _ref2.children;
	var onClick = _ref2.onClick;
	return _react2.default.createElement(
	"button",
	{ onClick: onClick.bind(undefined, children) },
	children
	);
	};

	var Table = (function (_Component) {
	(0, _inherits3.default)(Table, _Component);

	function Table() {
	var _Object$getPrototypeO;

	var _temp, _this, _ret;

	(0, _classCallCheck3.default)(this, Table);

	for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
	args[_key] = arguments[_key];
	}

	return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_Object$getPrototypeO = (0, _getPrototypeOf2.default)(Table)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.shouldComponentUpdate = function (nextProps) {
	return (0, _reactAddonsShallowCompare2.default)(_this, nextProps);
	}, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
	}

	(0, _createClass3.default)(Table, [{
	key: "render",
	value: function render() {
	var _props = this.props;
	var items = _props.items;
	var onItemClick = _props.onItemClick;

	return _react2.default.createElement(
	"div",
	null,
	_react2.default.createElement(
	"h3",
	null,
	"Table"
	),
	items.map(function (item) {
	return _react2.default.createElement(
	Item,
	{ onClick: onItemClick },
	item
	);
	})
	);
	}
	}]);
	return Table;
	})(_react.Component);

	var Container = (function (_Component2) {
	(0, _inherits3.default)(Container, _Component2);

	function Container() {
	var _Object$getPrototypeO2;

	(0, _classCallCheck3.default)(this, Container);

	for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
	args[_key2] = arguments[_key2];
	}

	var _this2 = (0, _possibleConstructorReturn3.default)(this, (_Object$getPrototypeO2 = (0, _getPrototypeOf2.default)(Container)).call.apply(_Object$getPrototypeO2, [this].concat(args)));

	_this2.onModalClose = function () {
	return _this2.setState({ clickedItem: null });
	};

	_this2.onItemClick = function (clickedItem) {
	return _this2.setState({ clickedItem: clickedItem });
	};

	_this2.state = {
	clickedItem: null
	};
	return _this2;
	}

	(0, _createClass3.default)(Container, [{
	key: "render",
	value: function render() {
	var clickedItem = this.state.clickedItem;

	return _react2.default.createElement(
	"div",
	null,
	!!clickedItem && _react2.default.createElement(
	Modal,
	{ onClose: this.onModalClose },
	clickedItem
	),
	_react2.default.createElement(Table, {
	items: ["First", "Second", "Third"],
	onItemClick: this.onItemClick
	})
	);
	}
	}]);
	return Container;
	})(_react.Component);

	(0, _reactDom.render)(_react2.default.createElement(Container, null), document.getElementById("root"));