Skip to content

Instantly share code, notes, and snippets.

@theadam

theadam/esnextbin.md

Created November 9, 2016 19:50
Show Gist options
  • Save theadam/6141f3b392851d36c8bff9332bb56fb2 to your computer and use it in GitHub Desktop.
Save theadam/6141f3b392851d36c8bff9332bb56fb2 to your computer and use it in GitHub Desktop.
Download ZIP
esnextbin sketch
Raw
index.html
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div id="app"></div>
</body>
</html>
Raw
index.js
import React, { Component } from 'react';
import { render } from 'react-dom';
/*
@form(from({
field: isRequired,
}))
class Form extends Component {
render() {
const { field } = this.props.field;
return (
<form onSubmit={e => { e.preventDefault(); alert(JSON.stringify(this.state.data, 2, 2)); }}>
<ErrorInput
id="field"
{...field}
/>
<input type="submit" value="Submit"/>
</form>
);
}
}
*/
class Form extends Component {
state = {
data: {},
errors: {},
blurred: {},
}
validate(data) {
const errors = {};
if (!data.field) errors['field'] = 'Is Required';
return errors;
}
componentWillMount() {
this.setState({ errors: this.validate(this.state.data) });
}
handleBlur = name => e => this.setState({
blurred: {
...this.state.blurred,
[name]: true,
},
})
handleChange = name => e => {
const data = {
...this.state.data,
[name]: e.target.value,
};
this.setState({ data, errors: this.validate(data) });
}
render() {
const { data, errors, blurred } = this.state;
return (
<form onSubmit={e => { e.preventDefault(); alert(JSON.stringify(this.state.data, 2, 2)); }}>
<input
id="field"
onBlur={this.handleBlur('field')}
onChange={this.handleChange('field')}
value={data.field || ''}
/>
<span style={{color: 'red'}}>{blurred.field ? errors.field : ''}</span>
<input
type="submit" value="Submit"/>
</form>
);
}
}
render(<Form />, document.getElementById('app'));
Raw
package.json
{
"name": "esnextbin-sketch",
"version": "0.0.0",
"dependencies": {
"react": "15.3.2",
"react-dom": "15.3.2",
"babel-runtime": "6.18.0"
}
}
Raw
transpiled.js
'use strict';
var _stringify = require('babel-runtime/core-js/json/stringify');
var _stringify2 = _interopRequireDefault(_stringify);
var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
var _extends4 = require('babel-runtime/helpers/extends');
var _extends5 = _interopRequireDefault(_extends4);
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 }; }
/*
@form(from({
field: isRequired,
}))
class Form extends Component {
render() {
const { field } = this.props.field;
return (
<form onSubmit={e => { e.preventDefault(); alert(JSON.stringify(this.state.data, 2, 2)); }}>
<ErrorInput
id="field"
{...field}
/>
<input type="submit" value="Submit"/>
</form>
);
}
}
*/
var Form = function (_Component) {
(0, _inherits3.default)(Form, _Component);
function Form() {
var _Object$getPrototypeO;
var _temp, _this, _ret;
(0, _classCallCheck3.default)(this, Form);
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)(Form)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
data: {},
errors: {},
blurred: {}
}, _this.handleBlur = function (name) {
return function (e) {
return _this.setState({
blurred: (0, _extends5.default)({}, _this.state.blurred, (0, _defineProperty3.default)({}, name, true))
});
};
}, _this.handleChange = function (name) {
return function (e) {
var data = (0, _extends5.default)({}, _this.state.data, (0, _defineProperty3.default)({}, name, e.target.value));
_this.setState({ data: data, errors: _this.validate(data) });
};
}, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
}
(0, _createClass3.default)(Form, [{
key: 'validate',
value: function validate(data) {
var errors = {};
if (!data.field) errors['field'] = 'Is Required';
return errors;
}
}, {
key: 'componentWillMount',
value: function componentWillMount() {
this.setState({ errors: this.validate(this.state.data) });
}
}, {
key: 'render',
value: function render() {
var _this2 = this;
var _state = this.state;
var data = _state.data;
var errors = _state.errors;
var blurred = _state.blurred;
return _react2.default.createElement(
'form',
{ onSubmit: function onSubmit(e) {
e.preventDefault();alert((0, _stringify2.default)(_this2.state.data, 2, 2));
} },
_react2.default.createElement('input', {
id: 'field',
onBlur: this.handleBlur('field'),
onChange: this.handleChange('field'),
value: data.field || ''
}),
_react2.default.createElement(
'span',
{ style: { color: 'red' } },
blurred.field ? errors.field : ''
),
_react2.default.createElement('input', {
type: 'submit', value: 'Submit' })
);
}
}]);
return Form;
}(_react.Component);
(0, _reactDom.render)(_react2.default.createElement(Form, null), document.getElementById('app'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment