Merge pull request #984 from keattang/add_field_value

Added fieldValue to mapped props when withFieldValue provided to Control

Author: davidkpiano

docs/api/Control.md

@@ -163,7 +163,7 @@ const length = (val) => val.length > 8;
 ```
 
 ## `debounce={...}` {#prop-debounce}
-_(Number)_: The time in milliseconds, by which the change action will be debounced. 
+_(Number)_: The time in milliseconds, by which the change action will be debounced.
 
 ## `validateOn="..."` {#prop-validateOn}
 _(String | Array)_: A string/array of strings specifying when validation should occur. By default, validation happens with whatever `updateOn` is set to. The `validateOn` property can have these values:
@@ -395,4 +395,9 @@ For `<Control.checkbox />`, the default `getValue` function is:
 _(Boolean)_: Signifies that the control is a toggle (e.g., a checkbox or a radio). If `true`, then some optimizations are made.
 
 Default: `true` for `<Control.radio>` and `<Control.checkbox>`, `false` for all other controls.
+
+## `withFieldValue={false}` {#prop-withFieldValue}
+_(Boolean)_: When `true` the `fieldValue` prop is mapped on to the child component. This prop contains information about the field's state such as its validity and whether it has been touched. This is particularly useful when using a custom component as it allows you to dynamically alter the component based on the field's state.
+
+Default: `false`
 {% endraw %}

src/components/control-component.js

@@ -608,6 +608,7 @@ function createControlClass(s = defaultStrategy) {
         component,
         control,
         getRef,
+        fieldValue,
       } = this.props;
 
       const mappedProps = omit(this.getMappedProps(), disallowedProps);
@@ -616,6 +617,10 @@ function createControlClass(s = defaultStrategy) {
         mappedProps.getRef = getRef;
       }
 
+      if (controlProps.withFieldValue) {
+        mappedProps.fieldValue = fieldValue;
+      }
+
       // If there is an existing control, clone it
       if (control) {
         return cloneElement(

test/custom-control-component-spec.js

@@ -355,6 +355,60 @@ describe('custom <Control /> components', () => {
     assert.equal(input.className.trim(), 'touched');
   });
 
+  it('should pass the fieldValue object when withFieldValue is true', () => {
+    const store = testCreateStore({
+      testForm: formReducer('test'),
+      test: modelReducer('test', { foo: '' }),
+    });
+
+    class TextInput extends React.Component {
+      render() {
+        const { fieldValue, ...otherProps } = this.props;
+        const className = [
+          fieldValue.focus ? 'focus' : '',
+          fieldValue.touched ? 'touched' : '',
+        ].join(' ');
+
+        return (
+          <div>
+            <input
+              className={className}
+              {...otherProps}
+              onChange={this.props.onChangeText}
+            />
+          </div>
+        );
+      }
+    }
+
+    TextInput.propTypes = {
+      onChangeText: PropTypes.func,
+      focus: PropTypes.bool,
+      touched: PropTypes.bool,
+      fieldValue: PropTypes.object,
+    };
+
+    const field = TestUtils.renderIntoDocument(
+      <Provider store={store}>
+        <Control
+          model="test.foo"
+          component={TextInput}
+          withFieldValue
+        />
+      </Provider>
+    );
+
+    const input = TestUtils.findRenderedDOMComponentWithTag(field, 'input');
+
+    TestUtils.Simulate.focus(input);
+
+    assert.equal(input.className.trim(), 'focus');
+
+    TestUtils.Simulate.blur(input);
+
+    assert.equal(input.className.trim(), 'touched');
+  });
+
   it('should not pass default mapped props to custom controls', (done) => {
     const store = testCreateStore({
       testForm: formReducer('test'),