Adding button component

Author: davidkpiano

SUMMARY.md

@@ -25,5 +25,6 @@
   * [action creators](docs/api/actions.md)
 * [Recipes and Examples](docs/recipes/README.md)
   * [Quick Start](docs/recipes/quickstart.md)
+  * [Redux Form Examples](docs/recipes/redux-form.md)
   * [Simple Form](docs/recipes/simple.md)
   * [Sync Validation](docs/recipes/sync-validation.md)

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

@@ -71,9 +71,9 @@ class UserForm extends React.Component {
           </label>
         </Field>
 
-        <button type="submit" disabled={!user.$form.valid}>
+        <Control.submit model="user" disabled={{ valid: false }}>
           Finish registration!
-        </button>
+        </Control.submit>
         <input type="reset" value="Reset" title="reset"/>
       </Form>
     );

src/components/control-component.js

@@ -698,6 +698,17 @@ function createControlClass(customControlPropsMap = {}, s = defaultStrategy) {
     />
   );
 
+  ConnectedControl.button = (props) => (
+    <ConnectedControl
+      component="button"
+      mapProps={{
+        ...controlPropsMap.button,
+        ...props.mapProps,
+      }}
+      {...omit(props, 'mapProps')}
+    />
+  );
+
   ConnectedControl.reset = (props) => (
     <ConnectedControl
       component="button"

src/constants/control-props-map.js

@@ -1,4 +1,5 @@
 import isMulti from '../utils/is-multi';
+import { iterateeValue } from '../utils/iteratee';
 import actions from '../actions';
 
 function createControlPropsMap() {
@@ -77,6 +78,9 @@ function createControlPropsMap() {
       onFocus: ({ onFocus }) => onFocus,
       onKeyPress: ({ onKeyPress }) => onKeyPress,
     },
+    button: {
+      disabled: ({ fieldValue, disabled }) => iterateeValue(fieldValue, disabled),
+    },
     reset: {
       onClick: (props) => (event) => {
         event.preventDefault();

src/utils/iteratee.js

@@ -28,3 +28,17 @@ export default function iteratee(value) {
 
   return propChecker(value);
 }
+
+export function iterateeValue(data, value) {
+  if (typeof value === 'function') {
+    return value(data);
+  }
+
+  if (!Array.isArray(value)
+    && typeof value !== 'object'
+    && typeof value !== 'string') {
+    return !!value;
+  }
+
+  return iteratee(value)(data);
+}

test/control-component-spec.js

@@ -1633,6 +1633,43 @@ Object.keys(testContexts).forEach((testKey) => {
       });
     });
 
+    describe('with <Control.button>', () => {
+      it('should exist', () => {
+        assert.isFunction(Control.button);
+      });
+
+      const disabledProps = [
+        true,
+        { valid: false },
+        (fieldValue) => !fieldValue.valid,
+      ];
+
+      disabledProps.forEach((disabled) => {
+        it(`should be disabled with ${typeof disabled} as disabled prop value`, () => {
+          const initialState = getInitialState({ foo: '' });
+          const store = testCreateStore({
+            testForm: formReducer('test', initialState),
+          });
+
+          const field = testRender(
+            <Control.button model="test" disabled={disabled} />,
+            store);
+
+          const button = TestUtils.findRenderedDOMComponentWithTag(field, 'button');
+
+          store.dispatch(actions.setValidity('test', false));
+
+          assert.isTrue(button.disabled);
+
+          if (disabled !== true) {
+            store.dispatch(actions.setValidity('test', true));
+
+            assert.isFalse(button.disabled);
+          }
+        });
+      });
+    });
+
     describe('manual focus/blur', () => {
       const initialState = getInitialState({ foo: 'bar' });
       const store = testCreateStore({