cbioley/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 -->
  <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>

## 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')
)

## 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"
  }
}

## 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'));
	<!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>
	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')
	)
	{
	"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"
	}
	}
	'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'));