Skip to content

Instantly share code, notes, and snippets.

@cyr-l

cyr-l/esnextbin.md

Last active April 28, 2016 21:46
Show Gist options
  • Save cyr-l/ef02f9309b028ac558cc42950376b61c to your computer and use it in GitHub Desktop.
Save cyr-l/ef02f9309b028ac558cc42950376b61c 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 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin="anonymous">
</head>
<body>
<!-- put markup and other contents here -->
<div id="app"></div>
</body>
</html>
Raw
index.js
import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore, applyMiddleware, combineReducers, compose } from 'redux'
import createLogger from 'redux-logger'
import thunkMiddleware from 'redux-thunk'
import { modelReducer, formReducer } from 'react-redux-form'
let middlewares = [thunkMiddleware]
let initialState = {}
let storeEnhancers = applyMiddleware(...[...middlewares, createLogger()])
let formInitialState = {
checked: false,
checkedInput: false
}
const reducers = combineReducers({
example: modelReducer('example', formInitialState),
exampleForm: formReducer('example', formInitialState)
})
const store = createStore(reducers, initialState, storeEnhancers)
import { connect } from 'react-redux'
import { Form, Field, createFieldClass, controls } from 'react-redux-form'
import { Checkbox } from 'react-bootstrap'
const CheckboxField = createFieldClass({
'Checkbox': props => ({
...props,
onChange: (e) => {
console.log(e)
props.onChange(e)
}
})
})
class App extends React.Component {
render() {
const { checked, checkedInput }= this.props
return (
<div>
<Form model="example">
<CheckboxField model="example.checked">
<Checkbox inline>React Bootstrap</Checkbox>
</CheckboxField>
<br />
<Field model="example.checkedInput">
<label className="checkbox-inline">
<input type="checkbox" />
<span>Input Component </span>
</label>
</Field>
</Form>
Checked With react-bootstrap component: {checked.toString()}
<br/>
Checked with pure input: {checkedInput.toString()}
</div>
)
}
}
const mapStateToProps = (state) => {
return {
checked: state.example.checked,
checkedInput: state.example.checkedInput
}
}
App = connect(mapStateToProps)(App)
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('app')
)
Raw
package.json
{
"name": "react-form-with-bootstrap",
"version": "0.0.0",
"dependencies": {
"react": "0.14.8",
"react-dom": "0.14.8",
"react-redux": "4.4.5",
"redux": "3.5.2",
"redux-logger": "2.6.1",
"redux-thunk": "2.0.1",
"react-redux-form": "0.11.5",
"react-bootstrap": "0.29.3",
"babel-runtime": "6.6.1"
}
}
Raw
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 _reactRedux = require('react-redux');
var _redux = require('redux');
var _reduxLogger = require('redux-logger');
var _reduxLogger2 = _interopRequireDefault(_reduxLogger);
var _reduxThunk = require('redux-thunk');
var _reduxThunk2 = _interopRequireDefault(_reduxThunk);
var _reactReduxForm = require('react-redux-form');
var _reactBootstrap = require('react-bootstrap');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var middlewares = [_reduxThunk2.default];
var initialState = {};
var storeEnhancers = _redux.applyMiddleware.apply(undefined, [].concat(middlewares, [(0, _reduxLogger2.default)()]));
var formInitialState = {
checked: false,
checkedInput: false
};
var reducers = (0, _redux.combineReducers)({
example: (0, _reactReduxForm.modelReducer)('example', formInitialState),
exampleForm: (0, _reactReduxForm.formReducer)('example', formInitialState)
});
var store = (0, _redux.createStore)(reducers, initialState, storeEnhancers);
var CheckboxField = (0, _reactReduxForm.createFieldClass)({
'Checkbox': function Checkbox(props) {
return (0, _extends3.default)({}, props, {
onChange: function onChange(e) {
console.log(e);
props.onChange(e);
}
});
}
});
var App = (function (_React$Component) {
(0, _inherits3.default)(App, _React$Component);
function App() {
(0, _classCallCheck3.default)(this, App);
return (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(App).apply(this, arguments));
}
(0, _createClass3.default)(App, [{
key: 'render',
value: function render() {
var _props = this.props;
var checked = _props.checked;
var checkedInput = _props.checkedInput;
return _react2.default.createElement(
'div',
null,
_react2.default.createElement(
_reactReduxForm.Form,
{ model: 'example' },
_react2.default.createElement(
CheckboxField,
{ model: 'example.checked' },
_react2.default.createElement(
_reactBootstrap.Checkbox,
{ inline: true },
'React Bootstrap'
)
),
_react2.default.createElement('br', null),
_react2.default.createElement(
_reactReduxForm.Field,
{ model: 'example.checkedInput' },
_react2.default.createElement(
'label',
{ className: 'checkbox-inline' },
_react2.default.createElement('input', { type: 'checkbox' }),
_react2.default.createElement(
'span',
null,
'Input Component '
)
)
)
),
'Checked With react-bootstrap component: ',
checked.toString(),
_react2.default.createElement('br', null),
'Checked with pure input: ',
checkedInput.toString()
);
}
}]);
return App;
})(_react2.default.Component);
var mapStateToProps = function mapStateToProps(state) {
return {
checked: state.example.checked,
checkedInput: state.example.checkedInput
};
};
App = (0, _reactRedux.connect)(mapStateToProps)(App);
(0, _reactDom.render)(_react2.default.createElement(
_reactRedux.Provider,
{ store: store },
_react2.default.createElement(App, null)
), document.getElementById('app'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment