Skip to content

Instantly share code, notes, and snippets.

@ALF-er

ALF-er/esnextbin.md

Created February 8, 2016 18:08
Show Gist options
  • Save ALF-er/0473b7376549cc3c6388 to your computer and use it in GitHub Desktop.
Save ALF-er/0473b7376549cc3c6388 to your computer and use it in GitHub Desktop.
Download ZIP
esnextbin sketch
Raw
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>
Raw
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"));
Raw
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"
}
}
Raw
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"));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment