conorhastings/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>
  <div id="app"></div>
  <!-- put markup and other contents here -->
</body>
</html>

## index.js
import React from "react";
import { render } from "react-dom";
const grabbableComponent = Component => class Grabbing extends React.Component {
	constructor() {
		super();
		this.state = { isGrabbing: false }
	}
	render() {
		return (
			<span
				onMouseDown={() => this.setState({ isGrabbing: true })}
				onMouseUp={() => this.setState({ isGrabbing: false })}
			>
				<Component isGrabbing={this.state.isGrabbing} {...this.props} />
			</span>
		);
	}
}

class MyComponent extends React.Component {
  render() {
    return (
      <div style={{width: 500, height: 500, backgroundColor: this.props.isGrabbing ? "blue" : "red"}}>
        hi
      </div>
    );
  }
}

const GrabbableComponent = grabbableComponent(MyComponent);
render(<GrabbableComponent />, document.getElementById('app'));

## package.json
{
  "name": "esnextbin-sketch",
  "version": "0.0.0",
  "dependencies": {
    "react": "15.3.2",
    "react-dom": "15.3.2",
    "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");

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

var grabbableComponent = function grabbableComponent(Component) {
	return function (_React$Component) {
		(0, _inherits3.default)(Grabbing, _React$Component);

		function Grabbing() {
			(0, _classCallCheck3.default)(this, Grabbing);

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

			_this.state = { isGrabbing: false };
			return _this;
		}

		(0, _createClass3.default)(Grabbing, [{
			key: "render",
			value: function render() {
				var _this2 = this;

				return _react2.default.createElement(
					"span",
					{
						onMouseDown: function onMouseDown() {
							return _this2.setState({ isGrabbing: true });
						},
						onMouseUp: function onMouseUp() {
							return _this2.setState({ isGrabbing: false });
						}
					},
					_react2.default.createElement(Component, (0, _extends3.default)({ isGrabbing: this.state.isGrabbing }, this.props))
				);
			}
		}]);
		return Grabbing;
	}(_react2.default.Component);
};

var MyComponent = function (_React$Component2) {
	(0, _inherits3.default)(MyComponent, _React$Component2);

	function MyComponent() {
		(0, _classCallCheck3.default)(this, MyComponent);
		return (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(MyComponent).apply(this, arguments));
	}

	(0, _createClass3.default)(MyComponent, [{
		key: "render",
		value: function render() {
			return _react2.default.createElement(
				"div",
				{ style: { width: 500, height: 500, backgroundColor: this.props.isGrabbing ? "blue" : "red" } },
				"hi"
			);
		}
	}]);
	return MyComponent;
}(_react2.default.Component);

var GrabbableComponent = grabbableComponent(MyComponent);
(0, _reactDom.render)(_react2.default.createElement(GrabbableComponent, null), document.getElementById('app'));
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>ESNextbin Sketch</title>
	<!-- put additional styles and scripts here -->
	</head>
	<body>
	<div id="app"></div>
	<!-- put markup and other contents here -->
	</body>
	</html>
	import React from "react";
	import { render } from "react-dom";
	const grabbableComponent = Component => class Grabbing extends React.Component {
	constructor() {
	super();
	this.state = { isGrabbing: false }
	}
	render() {
	return (
	<span
	onMouseDown={() => this.setState({ isGrabbing: true })}
	onMouseUp={() => this.setState({ isGrabbing: false })}
	>
	<Component isGrabbing={this.state.isGrabbing} {...this.props} />
	</span>
	);
	}
	}

	class MyComponent extends React.Component {
	render() {
	return (
	<div style={{width: 500, height: 500, backgroundColor: this.props.isGrabbing ? "blue" : "red"}}>
	hi
	</div>
	);
	}
	}

	const GrabbableComponent = grabbableComponent(MyComponent);
	render(<GrabbableComponent />, document.getElementById('app'));
	{
	"name": "esnextbin-sketch",
	"version": "0.0.0",
	"dependencies": {
	"react": "15.3.2",
	"react-dom": "15.3.2",
	"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");

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

	var grabbableComponent = function grabbableComponent(Component) {
	return function (_React$Component) {
	(0, _inherits3.default)(Grabbing, _React$Component);

	function Grabbing() {
	(0, _classCallCheck3.default)(this, Grabbing);

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

	_this.state = { isGrabbing: false };
	return _this;
	}

	(0, _createClass3.default)(Grabbing, [{
	key: "render",
	value: function render() {
	var _this2 = this;

	return _react2.default.createElement(
	"span",
	{
	onMouseDown: function onMouseDown() {
	return _this2.setState({ isGrabbing: true });
	},
	onMouseUp: function onMouseUp() {
	return _this2.setState({ isGrabbing: false });
	}
	},
	_react2.default.createElement(Component, (0, _extends3.default)({ isGrabbing: this.state.isGrabbing }, this.props))
	);
	}
	}]);
	return Grabbing;
	}(_react2.default.Component);
	};

	var MyComponent = function (_React$Component2) {
	(0, _inherits3.default)(MyComponent, _React$Component2);

	function MyComponent() {
	(0, _classCallCheck3.default)(this, MyComponent);
	return (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(MyComponent).apply(this, arguments));
	}

	(0, _createClass3.default)(MyComponent, [{
	key: "render",
	value: function render() {
	return _react2.default.createElement(
	"div",
	{ style: { width: 500, height: 500, backgroundColor: this.props.isGrabbing ? "blue" : "red" } },
	"hi"
	);
	}
	}]);
	return MyComponent;
	}(_react2.default.Component);

	var GrabbableComponent = grabbableComponent(MyComponent);
	(0, _reactDom.render)(_react2.default.createElement(GrabbableComponent, null), document.getElementById('app'));