Skip to content

Instantly share code, notes, and snippets.

@jameshy

jameshy/esnextbin.md

Created December 7, 2016 22:02
Show Gist options
  • Save jameshy/774e09eda300aa56313d2718790e8334 to your computer and use it in GitHub Desktop.
Save jameshy/774e09eda300aa56313d2718790e8334 to your computer and use it in GitHub Desktop.
Download ZIP
esnextbin sketch
Raw
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 -->
<div id="app"></div>
</body>
</html>
Raw
index.js
import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import {
createStore,
combineReducers,
applyMiddleware
} from 'redux';
import { connect, Provider } from 'react-redux';
import {
Form,
Control,
actions,
combineForms,
} from 'react-redux-form';
import thunk from 'redux-thunk';
import createLogger from 'redux-logger';
const store = createStore(combineForms({
user: {
anArray: []
},
}), applyMiddleware(thunk, createLogger()));
// custom control that prints the dataArray and
// logs it to console
class CustomControl extends Component {
render(){
console.log('CustomControl value=', this.props.value)
return <h3>{this.props.value.join(',')}</h3>
}
}
let dataArray = []
class App extends Component {
constructor() {
super()
// when the 'Reset Form' button is clicked
// dispatch rrf/reset and clear dataArray
this.onClickResetForm = () => {
this.props.dispatch(
actions.reset('user')
)
dataArray.length = 0
}
// when the 'Append' button is clicked
// add 'item' to the dataArray array
this.onClickAppend = () => {
dataArray = [...dataArray, 'item']
this.props.dispatch(
actions.change('user.anArray', [...dataArray])
)
}
}
render() {
return (
<div>
<Form
model="user"
>
<label>Custom Control:</label>
<Control
component={CustomControl}
model=".anArray"
mapProps={{
value: (props) => props.viewValue
}}
/>
</Form>
<button onClick={this.onClickResetForm}>Reset Form</button>
<button onClick={this.onClickAppend}>Append</button>
</div>
);
}
}
App = connect()(App)
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>
, document.querySelector('#app'));
Raw
package.json
{
"name": "esnextbin-sketch",
"version": "0.0.0",
"dependencies": {
"react": "15.3.1",
"react-dom": "15.3.1",
"redux": "3.6.0",
"react-redux": "4.4.6",
"react-redux-form": "1.3.2",
"redux-thunk": "2.1.0",
"redux-logger": "2.6.1",
"babel-runtime": "6.18.0"
}
}
Raw
transpiled.js
'use strict';
var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');
var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
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);
var _redux = require('redux');
var _reactRedux = require('react-redux');
var _reactReduxForm = require('react-redux-form');
var _reduxThunk = require('redux-thunk');
var _reduxThunk2 = _interopRequireDefault(_reduxThunk);
var _reduxLogger = require('redux-logger');
var _reduxLogger2 = _interopRequireDefault(_reduxLogger);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var store = (0, _redux.createStore)((0, _reactReduxForm.combineForms)({
user: {
anArray: []
}
}), (0, _redux.applyMiddleware)(_reduxThunk2.default, (0, _reduxLogger2.default)()));
// custom control that prints the dataArray and
// logs it to console
var CustomControl = function (_Component) {
(0, _inherits3.default)(CustomControl, _Component);
function CustomControl() {
(0, _classCallCheck3.default)(this, CustomControl);
return (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(CustomControl).apply(this, arguments));
}
(0, _createClass3.default)(CustomControl, [{
key: 'render',
value: function render() {
console.log('CustomControl value=', this.props.value);
return _react2.default.createElement(
'h3',
null,
this.props.value.join(',')
);
}
}]);
return CustomControl;
}(_react.Component);
var dataArray = [];
var App = function (_Component2) {
(0, _inherits3.default)(App, _Component2);
function App() {
(0, _classCallCheck3.default)(this, App);
// when the 'Reset Form' button is clicked
// dispatch rrf/reset and clear dataArray
var _this2 = (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(App).call(this));
_this2.onClickResetForm = function () {
_this2.props.dispatch(_reactReduxForm.actions.reset('user'));
dataArray.length = 0;
};
// when the 'Append' button is clicked
// add 'item' to the dataArray array
_this2.onClickAppend = function () {
dataArray = [].concat((0, _toConsumableArray3.default)(dataArray), ['item']);
_this2.props.dispatch(_reactReduxForm.actions.change('user.anArray', [].concat((0, _toConsumableArray3.default)(dataArray))));
};
return _this2;
}
(0, _createClass3.default)(App, [{
key: 'render',
value: function render() {
return _react2.default.createElement(
'div',
null,
_react2.default.createElement(
_reactReduxForm.Form,
{
model: 'user'
},
_react2.default.createElement(
'label',
null,
'Custom Control:'
),
_react2.default.createElement(_reactReduxForm.Control, {
component: CustomControl,
model: '.anArray',
mapProps: {
value: function value(props) {
return props.viewValue;
}
}
})
),
_react2.default.createElement(
'button',
{ onClick: this.onClickResetForm },
'Reset Form'
),
_react2.default.createElement(
'button',
{ onClick: this.onClickAppend },
'Append'
)
);
}
}]);
return App;
}(_react.Component);
App = (0, _reactRedux.connect)()(App);
_reactDom2.default.render(_react2.default.createElement(
_reactRedux.Provider,
{ store: store },
_react2.default.createElement(App, null)
), document.querySelector('#app'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment