Skip to content

Instantly share code, notes, and snippets.

@conorhastings
Created October 10, 2016 19:14
Show Gist options
  • Save conorhastings/896a60521c374f69654d15124aef5685 to your computer and use it in GitHub Desktop.
Save conorhastings/896a60521c374f69654d15124aef5685 to your computer and use it in GitHub Desktop.
esnextbin sketch
<!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'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment