Merge remote-tracking branch 'davidkpiano/master'

Author: skrdaniel

.babelrc

@@ -1,6 +1,7 @@
 {
   "plugins": [
-    "lodash"
+    "lodash",
+    ["transform-react-remove-prop-types", {"mode": "wrap"}]
   ],
   "presets": ["es2015", "react", "stage-2"]
 }

README.md

@@ -3,7 +3,7 @@
 [![Join the chat at https://gitter.im/react-redux-form/Lobby](https://badges.gitter.im/react-redux-form/Lobby.svg)](https://gitter.im/react-redux-form/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 [![Build Status](https://travis-ci.org/davidkpiano/react-redux-form.svg?branch=master)](https://travis-ci.org/davidkpiano/react-redux-form) [![npm version](https://badge.fury.io/js/react-redux-form.svg)](https://badge.fury.io/js/react-redux-form)
 
-## [🆕 Read the Documentation](https://davidkpiano.github.io/react-redux-form)
+## [🆕 Read the Documentation](https://davidkpiano.github.io/react-redux-form/docs.html)
 
 Or, if you're using an old version, [read the v0.14.x documentation](https://davidkpiano.gitbooks.io/react-redux-form/content/)
 

SUMMARY.md

@@ -18,6 +18,7 @@
   * [modelReducer](docs/api/modelReducer.md)
   * [formReducer](docs/api/formReducer.md)
   * [combineForms](docs/api/combineForms.md)
+  * [createForms](docs/api/createForms.md)
   * [action creators](docs/api/actions.md)
 * [Recipes and Examples](docs/recipes/README.md)
   * [Quick Start](docs/recipes/quickstart.md)

docs/api/Form.md

@@ -146,3 +146,6 @@ _(Any)_ The `component` that the `<Form>` should be rendered to (default: `"form
 
 ### Notes
 - For React Native, the `View` component is used to render the form, if you `import { Form } from 'react-redux-form/native'`.
+- In HTML, you are not allowed to nest forms. If you do want to nest forms, you will have to do one of the following:
+  - If you want a nested form that doesn't submit, you can set the nested form's component to something other than `'form'`, like `<Form component="div" ...>`
+  - If you _do_ want a "form" inside a form that does submit, you'll have to set the component and submit manually by dispatching `actions.validSubmit(model, promise)`.

docs/api/actions.md

@@ -368,7 +368,7 @@ The "touched" state indicates that this model has been interacted with.
 
 <h2 id="actions-setUntouched"></h2>
 ## `actions.setUntouched(model)`
-Returns an action that, when handled by a [`formReducer`](TODO), changes the `.touched` state to `true`.
+Returns an action that, when handled by a [`formReducer`](TODO), changes the `.touched` state to `false`.
 
 An "untouched" field indicates that this model has not been interacted with yet.
 

docs/api/combineForms.md

@@ -1,6 +1,6 @@
 # `combineForms(forms, [model], [options])`
 
-Similar to [`combineReducers()`](TODO) in `redux`, the `combineForms()` helper function takes a `forms` object where:
+Similar to [`combineReducers()`](http://redux.js.org/docs/api/combineReducers.html) in `redux`, the `combineForms()` helper function takes a `forms` object where:
 
 - each key is a string model path
 - each value is either:
@@ -10,7 +10,7 @@ Similar to [`combineReducers()`](TODO) in `redux`, the `combineForms()` helper f
 and turns it into a single reducing function (using `combineReducers()` internally) where essentially:
 
 - each key/value pair is a `modelReducer()`
-- a `'forms'` key on the same object is a single `formReducer()` that handles all forms for all models.
+- a `'forms'` key on the same object is a single `formReducer()` that handles all forms for all models. (configurable in `options`)
 
 ### Arguments
 

docs/api/createForms.md

@@ -0,0 +1,58 @@
+# `createForms(forms, [model], [options])`
+
+```jsx
+import { combineReducers } from 'redux';
+import { createForms } from 'react-redux-form';
+
+const initialUserState = {};
+const initialGoatState = {};
+
+const reducer = combineReducers({
+  foo: fooReducer,
+  bar: barReducer,
+  ...createForms({
+    user: initialUserState,
+    goat: initialGoatState,
+  }),
+});
+
+// reducer state shape will be:
+// {
+//   foo: fooReducer,
+//   bar: barReducer,
+//   user: modelReducer('user', initialUserState),
+//   goat: modelReducer('goat', initialGoatState),
+//   forms: formReducer(''),
+// }
+```
+
+The `createForms()` helper function takes a `forms` object where:
+
+- each key is a string model path
+- each value is either:
+  - _(Any)_ an initial state, or
+  - _(Function)_ an existing reducer
+
+and turns it into an **object** where:
+
+- each key/value pair is a `modelReducer()`
+- a `'forms'` key on the same object is a single `formReducer()` that handles all forms for all models. (configurable in `options`)
+
+### Arguments
+
+1. `forms` _(Object)_: An object whose keys correspond to relative string model paths and whose values correspond to:
+  - _(Any)_ an initial state for the model, or
+  - _(Function)_ an existing reducer for the model.
+2. `[model = '']` _(String)_: The string representation of the parent model containing the child models in the `forms` object. Defaults to an empty string.
+3. `[options]` _(Object)_: An options object to override the default options for `combineForms()`:
+
+  - `key` _(String)_: The single `formReducer` key. Defaults to `'forms'`.
+  - `plugins` _(Array<Function>)_: An array of plugins to pass into the `formReducer()`. Defaults to no plugins.
+
+### Returns
+
+_(Object)_: An object that is the mapping of each reducer or initial state to a `modelReducer()` and a `.forms` prop that contains the `formReducer`.
+
+### Notes
+
+- The `createForms()` function is meant to be used with [`combineReducers()`](http://redux.js.org/docs/api/combineReducers.html) from `redux`. Use it when you want a flatter combined reducer structure.

examples/immutable/components/submit-button.js

@@ -11,7 +11,11 @@ SubmitButton.propTypes = {
   user: React.PropTypes.instanceOf(Immutable.Map).isRequired,
 };
 
-const mapStateToProps = ({ user }) => ({ user });
+const mapStateToProps = (state) => {
+  // Enable one of the two:
+  return { user: state.user };  // Enable when using redux
+  // return { user: state.get('user') };  // Enable when using redux-immutable
+};
 
 export default connect(mapStateToProps)(SubmitButton);
 

examples/immutable/components/user-form.js

@@ -1,10 +1,20 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { Field, Form, actions } from 'react-redux-form/immutable';
+import Immutable from 'immutable';
+import { Field, Form, Errors, actions } from 'react-redux-form/immutable';
 
 import SubmitButton from './submit-button';
 
 
+const isRequired = (val) => val && val.length > 0;
+const lessThan10 = (val) => {
+  const lessThan = 10;
+  if (!(val < 10)) {
+    return { lessThan };
+  }
+  return false;
+};
+
 class UserForm extends React.Component {
   constructor(props) {
     super(props);
@@ -20,7 +30,7 @@ class UserForm extends React.Component {
     // etc.
     const somePromise = new Promise((resolve) => {
       /* eslint-disable no-console */
-      console.log(user);
+      console.log(user.toJS());
       /* eslint-enable no-console */
       setTimeout(() => { resolve(true); }, 1000);
     });
@@ -33,19 +43,43 @@ class UserForm extends React.Component {
         model="user"
         onSubmit={this.handleSubmit}
       >
-        <Field model="user.firstName">
+        <Field model="user.firstName" validators={{ isRequired }}>
           <label>First name: </label>
           <input type="text" />
+          <Errors
+            wrapper="span"
+            show={{ touched: true, focus: false }}
+            model="user.firstName"
+            messages={{
+              isRequired: 'Please provide a first name.',
+            }}
+          />
         </Field>
 
-        <Field model="user.lastName">
+        <Field model="user.lastName" validators={{ isRequired }}>
           <label>Last name: </label>
           <input type="text" />
+          <Errors
+            wrapper="span"
+            show={{ touched: true, focus: false }}
+            model="user.lastName"
+            messages={{
+              isRequired: 'Please provide a last name.',
+            }}
+          />
         </Field>
 
-        <Field model="user.dob">
-          <label>A number: </label>
+        <Field model="user.dob" errors={{ lessThan10 }} validateOn="change">
+          <label>A number less than 10: </label>
           <input type="number" />
+          <Errors
+            wrapper="span"
+            show={{ pristine: false }}
+            model="user.dob"
+            messages={{
+              lessThan10: (value, { lessThan }) => `Error: ${value} is not less than ${lessThan}`,
+            }}
+          />
         </Field>
 
         <SubmitButton />

examples/immutable/store.js

@@ -1,13 +1,14 @@
 // ./store.js
 import {
   createStore,
-  combineReducers,
   applyMiddleware,
 } from 'redux';
-import {
-  modelReducer,
-  formReducer,
-} from 'react-redux-form/immutable';
+
+// Enable one of the two:
+import { combineReducers } from 'redux';
+//import { combineReducers } from 'redux-immutable';
+
+import { createForms } from 'react-redux-form/immutable';
 import thunk from 'redux-thunk';
 import Immutable from 'immutable';
 
@@ -18,8 +19,9 @@ const initialUserState = Immutable.fromJS({
 });
 
 const store = applyMiddleware(thunk)(createStore)(combineReducers({
-  user: modelReducer('user', initialUserState),
-  userForm: formReducer('user', initialUserState),
+  ...createForms({
+    user: initialUserState,
+  })
 }));
 
 export default store;