divmain/esnextbin.md

## esnextbin.md

      
    Raw
  

              esnextbin.md
            
          
    made with esnextbin

  
## index.html
<!doctype html>
<html>
<head>
</head>
<body>
  <div id="app"></div>
</body>
</html>

## index.js
import React from 'react'
import ReactDOM from 'react-dom'


const buildOptions = sizeOptions => sizeOptions.map((option, idx) =>
  <option value={option} key={idx}>{option}</option>
);

const MyComponent = stateful(props => {
  const { sizeOptions, setState } = props;
  const { currentValue = sizeOptions[0] } = props;
  const onChange = ev => setState({ currentValue: ev.target.value });

  console.log("current value:", currentValue);

  return (
    <div>
      <select
        value={ currentValue }
        onChange={ onChange }
      >
        { buildOptions(sizeOptions) }
      </select>
    </div>
  );
});

function stateful (fn, initialState = {}) {
  class Stateful extends React.Component {
    constructor (props) {
      super(props);
      this.state = initialState;
    }
    render () {
      const componentProps = Object.assign({}, this.props, this.state, {
        setState: this.setState.bind(this)
      });
      return fn(componentProps);
    }
  }

  Stateful.Stateless = fn;
  return Stateful;
}

ReactDOM.render(
  <MyComponent
    sizeOptions={["a", "b", "c"]}
  />,
  document.getElementById('app'),
)

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

## transpiled.js
'use strict';

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

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 _reactDom2 = _interopRequireDefault(_reactDom);

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

var buildOptions = function buildOptions(sizeOptions) {
  return sizeOptions.map(function (option, idx) {
    return _react2.default.createElement(
      'option',
      { value: option, key: idx },
      option
    );
  });
};

var MyComponent = stateful(function (props) {
  var sizeOptions = props.sizeOptions;
  var setState = props.setState;
  var _props$currentValue = props.currentValue;
  var currentValue = _props$currentValue === undefined ? sizeOptions[0] : _props$currentValue;

  var onChange = function onChange(ev) {
    return setState({ currentValue: ev.target.value });
  };

  console.log("current value:", currentValue);

  return _react2.default.createElement(
    'div',
    null,
    _react2.default.createElement(
      'select',
      {
        value: currentValue,
        onChange: onChange
      },
      buildOptions(sizeOptions)
    )
  );
});

function stateful(fn) {
  var initialState = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];

  var Stateful = function (_React$Component) {
    (0, _inherits3.default)(Stateful, _React$Component);

    function Stateful(props) {
      (0, _classCallCheck3.default)(this, Stateful);

      var _this = (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(Stateful).call(this, props));

      _this.state = initialState;
      return _this;
    }

    (0, _createClass3.default)(Stateful, [{
      key: 'render',
      value: function render() {
        var componentProps = (0, _extends3.default)({}, this.props, this.state, {
          setState: this.setState.bind(this)
        });
        return fn(componentProps);
      }
    }]);
    return Stateful;
  }(_react2.default.Component);

  Stateful.Stateless = fn;
  return Stateful;
}

_reactDom2.default.render(_react2.default.createElement(MyComponent, {
  sizeOptions: ["a", "b", "c"]
}), document.getElementById('app'));
	<!doctype html>
	<html>
	<head>
	</head>
	<body>
	<div id="app"></div>
	</body>
	</html>
	import React from 'react'
	import ReactDOM from 'react-dom'


	const buildOptions = sizeOptions => sizeOptions.map((option, idx) =>
	<option value={option} key={idx}>{option}</option>
	);

	const MyComponent = stateful(props => {
	const { sizeOptions, setState } = props;
	const { currentValue = sizeOptions[0] } = props;
	const onChange = ev => setState({ currentValue: ev.target.value });

	console.log("current value:", currentValue);

	return (
	<div>
	<select
	value={ currentValue }
	onChange={ onChange }
	>
	{ buildOptions(sizeOptions) }
	</select>
	</div>
	);
	});

	function stateful (fn, initialState = {}) {
	class Stateful extends React.Component {
	constructor (props) {
	super(props);
	this.state = initialState;
	}
	render () {
	const componentProps = Object.assign({}, this.props, this.state, {
	setState: this.setState.bind(this)
	});
	return fn(componentProps);
	}
	}

	Stateful.Stateless = fn;
	return Stateful;
	}

	ReactDOM.render(
	<MyComponent
	sizeOptions={["a", "b", "c"]}
	/>,
	document.getElementById('app'),
	)
	{
	"name": "esnextbin-sketch",
	"version": "0.0.0",
	"dependencies": {
	"react": "0.14.7",
	"react-dom": "0.14.7",
	"babel-runtime": "6.11.6"
	}
	}
	'use strict';

	var _extends2 = require('babel-runtime/helpers/extends');

	var _extends3 = _interopRequireDefault(_extends2);

	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 _reactDom2 = _interopRequireDefault(_reactDom);

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

	var buildOptions = function buildOptions(sizeOptions) {
	return sizeOptions.map(function (option, idx) {
	return _react2.default.createElement(
	'option',
	{ value: option, key: idx },
	option
	);
	});
	};

	var MyComponent = stateful(function (props) {
	var sizeOptions = props.sizeOptions;
	var setState = props.setState;
	var _props$currentValue = props.currentValue;
	var currentValue = _props$currentValue === undefined ? sizeOptions[0] : _props$currentValue;

	var onChange = function onChange(ev) {
	return setState({ currentValue: ev.target.value });
	};

	console.log("current value:", currentValue);

	return _react2.default.createElement(
	'div',
	null,
	_react2.default.createElement(
	'select',
	{
	value: currentValue,
	onChange: onChange
	},
	buildOptions(sizeOptions)
	)
	);
	});

	function stateful(fn) {
	var initialState = arguments.length <= 1 \|\| arguments[1] === undefined ? {} : arguments[1];

	var Stateful = function (_React$Component) {
	(0, _inherits3.default)(Stateful, _React$Component);

	function Stateful(props) {
	(0, _classCallCheck3.default)(this, Stateful);

	var _this = (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(Stateful).call(this, props));

	_this.state = initialState;
	return _this;
	}

	(0, _createClass3.default)(Stateful, [{
	key: 'render',
	value: function render() {
	var componentProps = (0, _extends3.default)({}, this.props, this.state, {
	setState: this.setState.bind(this)
	});
	return fn(componentProps);
	}
	}]);
	return Stateful;
	}(_react2.default.Component);

	Stateful.Stateless = fn;
	return Stateful;
	}

	_reactDom2.default.render(_react2.default.createElement(MyComponent, {
	sizeOptions: ["a", "b", "c"]
	}), document.getElementById('app'));