Adding docs on disabled attribute

Author: davidkpiano

docs/api/Control.md

@@ -29,6 +29,7 @@ The following pre-defined `<Control>`s are available:
 - `<Control.checkbox>` for `<input type="checkbox" />`
 - `<Control.file>` for `<input type="file" />`
 - `<Control.select>` for `<select></select>`
+- `<Control.button>` for `<button></button>`
 
 For making custom controls that work with React Redux Form, see the [custom controls documentation](../guides/custom-controls.md).
 
@@ -304,3 +305,26 @@ For instance, if you don't care whether a `<Control>` is focused or blurred:
   ignore={['focus', 'blur']}
 />
 ```
+
+### `disabled={...}`
+_(Any)_: The `disabled` prop works just like you'd expect for controls that support the HTML5 `disabled` attribute.
+
+However, in `<Control>`, it can be a boolean, or a function, string, or object as a [Lodash iteratee](https://lodash.com/docs#iteratee). 
+
+```jsx
+// Disable the submit button when the form is invalid
+<Control.button
+  model="user"
+  disabled={{ valid: false }}
+>
+  Submit!
+</Control.button>
+```
+
+For example:
+- `disabled={true}` or `disabled={false}` will disable or enable the control respectively, as will any other primitive value, such as `undefined`, `null`, or a number
+- `disabled="touched"` will disable if the field is `touched` (works with any property on the field)
+- `disabled={{ valid: false, touched: true }}` will disable if the field is both `touched` and not `valid`
+- `disabled={(fieldValue) => !fieldValue.valid}` will call the function provided with the `fieldValue` to determine its `disabled` state.
+
+(since: version 1.2.6)

examples/quick-start/components/user-form.js

@@ -35,8 +35,6 @@ class UserForm extends React.Component {
     dispatch(actions.submit('user', somePromise));
   }
   render() {
-    const { forms: { user }, dispatch } = this.props;
-
     return (
       <Form model="user" onSubmit={this.handleSubmit.bind(this)}>
         <div>
@@ -71,9 +69,9 @@ class UserForm extends React.Component {
           </label>
         </Field>
 
-        <Control.submit model="user" disabled={{ valid: false }}>
+        <Control.button model="user" disabled={{ valid: false }}>
           Finish registration!
-        </Control.submit>
+        </Control.button>
         <input type="reset" value="Reset" title="reset"/>
       </Form>
     );

src/constants/control-props-map.js

@@ -24,70 +24,54 @@ function createControlPropsMap() {
     return !!props.modelValue;
   }
 
-  const textPropsMap = {
-    value: (props) => ((!props.defaultValue && !props.hasOwnProperty('value'))
-      ? getTextValue(props.viewValue)
-      : props.value),
+  const standardPropsMap = {
     name: (props) => props.name || props.model,
+    disabled: ({ fieldValue, disabled }) => iterateeValue(fieldValue, disabled),
     onChange: ({ onChange }) => onChange,
     onBlur: ({ onBlur }) => onBlur,
     onFocus: ({ onFocus }) => onFocus,
     onKeyPress: ({ onKeyPress }) => onKeyPress,
   };
 
+  const textPropsMap = {
+    ...standardPropsMap,
+    value: (props) => ((!props.defaultValue && !props.hasOwnProperty('value'))
+      ? getTextValue(props.viewValue)
+      : props.value),
+  };
+
   return {
     default: textPropsMap,
     checkbox: {
-      name: (props) => props.name || props.model,
+      ...standardPropsMap,
       checked: (props) => (props.defaultChecked
         ? props.checked
         : isChecked(props)),
-      onChange: ({ onChange }) => onChange,
-      onBlur: ({ onBlur }) => onBlur,
-      onFocus: ({ onFocus }) => onFocus,
-      onKeyPress: ({ onKeyPress }) => onKeyPress,
     },
     radio: {
-      name: (props) => props.name || props.model,
+      ...standardPropsMap,
       checked: (props) => (props.defaultChecked
         ? props.checked
         : props.modelValue === props.value),
       value: (props) => props.value,
-      onChange: ({ onChange }) => onChange,
-      onBlur: ({ onBlur }) => onBlur,
-      onFocus: ({ onFocus }) => onFocus,
-      onKeyPress: ({ onKeyPress }) => onKeyPress,
     },
     select: {
-      name: (props) => (props.name || props.model),
+      ...standardPropsMap,
       value: (props) => (props.modelValue),
-      onChange: ({ onChange }) => onChange,
-      onBlur: ({ onBlur }) => onBlur,
-      onFocus: ({ onFocus }) => onFocus,
-      onKeyPress: ({ onKeyPress }) => onKeyPress,
     },
     text: {
       ...textPropsMap,
       type: 'text',
     },
     textarea: textPropsMap,
-    file: {
-      name: (props) => props.name || props.model,
-      onChange: ({ onChange }) => onChange,
-      onBlur: ({ onBlur }) => onBlur,
-      onFocus: ({ onFocus }) => onFocus,
-      onKeyPress: ({ onKeyPress }) => onKeyPress,
-    },
-    button: {
-      disabled: ({ fieldValue, disabled }) => iterateeValue(fieldValue, disabled),
-    },
+    file: standardPropsMap,
+    button: standardPropsMap,
     reset: {
+      ...standardPropsMap,
       onClick: (props) => (event) => {
         event.preventDefault();
         props.dispatch(actions.reset(props.model));
       },
-      onFocus: ({ onFocus }) => onFocus,
-      onBlur: ({ onBlur }) => onBlur,
     },
   };
 }