Skip to content

Instantly share code, notes, and snippets.

@wojciech-bilicki
Last active August 13, 2016 11:16
Show Gist options
  • Save wojciech-bilicki/98f7dbcd1046839f32629ac622664480 to your computer and use it in GitHub Desktop.
Save wojciech-bilicki/98f7dbcd1046839f32629ac622664480 to your computer and use it in GitHub Desktop.
esnextbin sketch
<!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>
import React from 'react'
import ReactDOM from 'react-dom'
import { createStore, combineReducers, applyMiddleware } from 'redux'
import { Provider, connect } from 'react-redux'
import thunk from 'redux-thunk'
import { modelReducer, formReducer, Field, Form, Errors, actions } from 'react-redux-form'
import createLogger from 'redux-logger';
const store = applyMiddleware(createLogger(), thunk)(createStore)(
combineReducers({
animal: modelReducer('animal'),
animalForm: formReducer('animal')
}));
class AnimalForm extends React.Component {
render() {
let { userForm } = this.props;
return (
<Form model="animal">
<div>
<Field model="animal.photos">
Photos:
<input type="file" multiple />
</Field>
</div>
<button>Submit</button>
</Form>
);
}
}
function mapStateToProps({ userForm }) {
return { userForm }
}
AnimalFormConnected = connect(mapStateToProps)(AnimalForm);
const App = () => (
<Provider store={ store }>
<AnimalFormConnected />
</Provider>
)
ReactDOM.render(<App />, document.getElementById('app'))
{
"name": "esnextbin-sketch",
"version": "0.0.0",
"dependencies": {
"react": "15.2.1",
"react-dom": "15.2.1",
"redux": "3.5.2",
"react-redux": "4.4.5",
"redux-thunk": "2.1.0",
"react-redux-form": "0.14.4",
"redux-logger": "2.6.1",
"babel-runtime": "6.11.6"
}
}
'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 _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 _reduxThunk = require('redux-thunk');
var _reduxThunk2 = _interopRequireDefault(_reduxThunk);
var _reactReduxForm = require('react-redux-form');
var _reduxLogger = require('redux-logger');
var _reduxLogger2 = _interopRequireDefault(_reduxLogger);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var store = (0, _redux.applyMiddleware)((0, _reduxLogger2.default)(), _reduxThunk2.default)(_redux.createStore)((0, _redux.combineReducers)({
animal: (0, _reactReduxForm.modelReducer)('animal'),
animalForm: (0, _reactReduxForm.formReducer)('animal')
}));
var AnimalForm = function (_React$Component) {
(0, _inherits3.default)(AnimalForm, _React$Component);
function AnimalForm() {
(0, _classCallCheck3.default)(this, AnimalForm);
return (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(AnimalForm).apply(this, arguments));
}
(0, _createClass3.default)(AnimalForm, [{
key: 'render',
value: function render() {
var userForm = this.props.userForm;
return _react2.default.createElement(
_reactReduxForm.Form,
{ model: 'animal' },
_react2.default.createElement(
'div',
null,
_react2.default.createElement(
_reactReduxForm.Field,
{ model: 'animal.photos' },
'Photos:',
_react2.default.createElement('input', { type: 'file', multiple: true })
)
),
_react2.default.createElement(
'button',
null,
'Submit'
)
);
}
}]);
return AnimalForm;
}(_react2.default.Component);
function mapStateToProps(_ref) {
var userForm = _ref.userForm;
return { userForm: userForm };
}
AnimalFormConnected = (0, _reactRedux.connect)(mapStateToProps)(AnimalForm);
var App = function App() {
return _react2.default.createElement(
_reactRedux.Provider,
{ store: store },
_react2.default.createElement(AnimalFormConnected, null)
);
};
_reactDom2.default.render(_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