okonet/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 -->
</body>
</html>

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

const styles = {
  display: 'block',
  width: '250px',
  height: '250px',
  border: '1px solid #000',
};

function getGradientString({ gradientType, cx, cy, fromColor, toColor }) {
  return `radial-gradient(circle ${gradientType} at ${cx * 100}% ${cy * 100}%, ${fromColor} 0%, ${toColor} 100%)`
}
const RadialGradient = (props) => (
  <div style={{
    ...styles,
    backgroundImage: getGradientString(props)
  }}>{ getGradientString(props) }</div>
);

class GradientSwitcher extends React.Component {

  state = {
    cx: 0.5,
    cy: 0.5,
    gradientType: 'closest-corner'
  }

  changeGradient(gradientType) {
    this.setState({gradientType})
  }

  updatePosition = () => {
    this.setState({
      cx: Math.random(),
      cy: Math.random(),
    })
  }

  render() {
    const { cx, cy, gradientType } = this.state;
    return <div>
      <button
        onClick={this.changeGradient.bind(this, 'closest-corner')}
        disabled={gradientType === 'closest-corner'}
      >closest-corner</button>

      <button
        onClick={this.changeGradient.bind(this, 'closest-side')}
        disabled={gradientType === 'closest-side'}
      >closest-side</button>

      <button onClick={this.updatePosition}>Update position</button>

      <RadialGradient
        cx={cx}
        cy={cy}
        gradientType={gradientType}
        fromColor="#F00"
        toColor="#FFF"
      />
    </div>
  }
}

ReactDOM.render(
  <GradientSwitcher />,
  document.body
)

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

## 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 _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

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 styles = {
  display: 'block',
  width: '250px',
  height: '250px',
  border: '1px solid #000'
};

function getGradientString(_ref) {
  var gradientType = _ref.gradientType;
  var cx = _ref.cx;
  var cy = _ref.cy;
  var fromColor = _ref.fromColor;
  var toColor = _ref.toColor;

  return 'radial-gradient(circle ' + gradientType + ' at ' + cx * 100 + '% ' + cy * 100 + '%, ' + fromColor + ' 0%, ' + toColor + ' 100%)';
}
var RadialGradient = function RadialGradient(props) {
  return _react2.default.createElement(
    'div',
    { style: (0, _extends3.default)({}, styles, {
        backgroundImage: getGradientString(props)
      }) },
    getGradientString(props)
  );
};

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

  function GradientSwitcher() {
    var _Object$getPrototypeO;

    var _temp, _this, _ret;

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

    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)(GradientSwitcher)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
      cx: 0.5,
      cy: 0.5,
      gradientType: 'closest-corner'
    }, _this.updatePosition = function () {
      _this.setState({
        cx: Math.random(),
        cy: Math.random()
      });
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  (0, _createClass3.default)(GradientSwitcher, [{
    key: 'changeGradient',
    value: function changeGradient(gradientType) {
      this.setState({ gradientType: gradientType });
    }
  }, {
    key: 'render',
    value: function render() {
      var _state = this.state;
      var cx = _state.cx;
      var cy = _state.cy;
      var gradientType = _state.gradientType;

      return _react2.default.createElement(
        'div',
        null,
        _react2.default.createElement(
          'button',
          {
            onClick: this.changeGradient.bind(this, 'closest-corner'),
            disabled: gradientType === 'closest-corner'
          },
          'closest-corner'
        ),
        _react2.default.createElement(
          'button',
          {
            onClick: this.changeGradient.bind(this, 'closest-side'),
            disabled: gradientType === 'closest-side'
          },
          'closest-side'
        ),
        _react2.default.createElement(
          'button',
          { onClick: this.updatePosition },
          'Update position'
        ),
        _react2.default.createElement(RadialGradient, {
          cx: cx,
          cy: cy,
          gradientType: gradientType,
          fromColor: '#F00',
          toColor: '#FFF'
        })
      );
    }
  }]);
  return GradientSwitcher;
}(_react2.default.Component);

_reactDom2.default.render(_react2.default.createElement(GradientSwitcher, null), document.body);
	<!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 -->
	</body>
	</html>
	import React from 'react'
	import ReactDOM from 'react-dom'

	const styles = {
	display: 'block',
	width: '250px',
	height: '250px',
	border: '1px solid #000',
	};

	function getGradientString({ gradientType, cx, cy, fromColor, toColor }) {
	return `radial-gradient(circle ${gradientType} at ${cx * 100}% ${cy * 100}%, ${fromColor} 0%, ${toColor} 100%)`
	}
	const RadialGradient = (props) => (
	<div style={{
	...styles,
	backgroundImage: getGradientString(props)
	}}>{ getGradientString(props) }</div>
	);

	class GradientSwitcher extends React.Component {

	state = {
	cx: 0.5,
	cy: 0.5,
	gradientType: 'closest-corner'
	}

	changeGradient(gradientType) {
	this.setState({gradientType})
	}

	updatePosition = () => {
	this.setState({
	cx: Math.random(),
	cy: Math.random(),
	})
	}

	render() {
	const { cx, cy, gradientType } = this.state;
	return <div>
	<button
	onClick={this.changeGradient.bind(this, 'closest-corner')}
	disabled={gradientType === 'closest-corner'}
	>closest-corner</button>

	<button
	onClick={this.changeGradient.bind(this, 'closest-side')}
	disabled={gradientType === 'closest-side'}
	>closest-side</button>

	<button onClick={this.updatePosition}>Update position</button>

	<RadialGradient
	cx={cx}
	cy={cy}
	gradientType={gradientType}
	fromColor="#F00"
	toColor="#FFF"
	/>
	</div>
	}
	}

	ReactDOM.render(
	<GradientSwitcher />,
	document.body
	)
	{
	"name": "esnextbin-sketch",
	"version": "0.0.0",
	"dependencies": {
	"react": "15.1.0",
	"react-dom": "15.1.0",
	"babel-runtime": "6.9.2"
	}
	}
	'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 _extends2 = require('babel-runtime/helpers/extends');

	var _extends3 = _interopRequireDefault(_extends2);

	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 styles = {
	display: 'block',
	width: '250px',
	height: '250px',
	border: '1px solid #000'
	};

	function getGradientString(_ref) {
	var gradientType = _ref.gradientType;
	var cx = _ref.cx;
	var cy = _ref.cy;
	var fromColor = _ref.fromColor;
	var toColor = _ref.toColor;

	return 'radial-gradient(circle ' + gradientType + ' at ' + cx * 100 + '% ' + cy * 100 + '%, ' + fromColor + ' 0%, ' + toColor + ' 100%)';
	}
	var RadialGradient = function RadialGradient(props) {
	return _react2.default.createElement(
	'div',
	{ style: (0, _extends3.default)({}, styles, {
	backgroundImage: getGradientString(props)
	}) },
	getGradientString(props)
	);
	};

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

	function GradientSwitcher() {
	var _Object$getPrototypeO;

	var _temp, _this, _ret;

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

	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)(GradientSwitcher)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
	cx: 0.5,
	cy: 0.5,
	gradientType: 'closest-corner'
	}, _this.updatePosition = function () {
	_this.setState({
	cx: Math.random(),
	cy: Math.random()
	});
	}, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
	}

	(0, _createClass3.default)(GradientSwitcher, [{
	key: 'changeGradient',
	value: function changeGradient(gradientType) {
	this.setState({ gradientType: gradientType });
	}
	}, {
	key: 'render',
	value: function render() {
	var _state = this.state;
	var cx = _state.cx;
	var cy = _state.cy;
	var gradientType = _state.gradientType;

	return _react2.default.createElement(
	'div',
	null,
	_react2.default.createElement(
	'button',
	{
	onClick: this.changeGradient.bind(this, 'closest-corner'),
	disabled: gradientType === 'closest-corner'
	},
	'closest-corner'
	),
	_react2.default.createElement(
	'button',
	{
	onClick: this.changeGradient.bind(this, 'closest-side'),
	disabled: gradientType === 'closest-side'
	},
	'closest-side'
	),
	_react2.default.createElement(
	'button',
	{ onClick: this.updatePosition },
	'Update position'
	),
	_react2.default.createElement(RadialGradient, {
	cx: cx,
	cy: cy,
	gradientType: gradientType,
	fromColor: '#F00',
	toColor: '#FFF'
	})
	);
	}
	}]);
	return GradientSwitcher;
	}(_react2.default.Component);

	_reactDom2.default.render(_react2.default.createElement(GradientSwitcher, null), document.body);