Merge branch 'master' of github.com:davidkpiano/react-redux-form

Author: davidkpiano

package-lock.json

@@ -93,7 +93,7 @@
     "lodash.get": "~4.4.2",
     "lodash.topath": "~4.5.2",
     "prop-types": "^15.5.6",
-    "shallow-compare": "1.2.2"
+    "shallow-compare": "^1.2.1"
   },
   "peerDependencies": {
     "react": "^15.3.0 || ^16.0.0",

package.json

@@ -1081,7 +1081,7 @@ interface Actions {
      * Can be dispatched to reset the validity and errors of any model at any time.
      * @param model The model
      */
-    resetValidity: (model: string) => ActionThunk;
+    resetValidity: (model: string) => FieldAction;
     /**
      * Can be dispatched to reset the validity and errors of any model at any time.
      * @param model The model

react-redux-form.d.ts

@@ -88,6 +88,7 @@ const propTypes = {
   component: PropTypes.any,
   dispatch: PropTypes.func,
   parser: PropTypes.func,
+  formatter: PropTypes.func,
   ignore: PropTypes.oneOfType([
     PropTypes.arrayOf(PropTypes.string),
     PropTypes.string,
@@ -149,7 +150,7 @@ function createControlClass(s = defaultStrategy) {
       this.willValidate = false;
 
       this.state = {
-        viewValue: props.modelValue,
+        viewValue: this.format(props.modelValue),
       };
     }
 
@@ -360,7 +361,12 @@ function createControlClass(s = defaultStrategy) {
 
     setViewValue(viewValue) {
       if (!this.props.isToggle) {
-        this.setState({ viewValue: this.parse(viewValue) });
+        if (this.props.formatter) {
+          const parsedValue = this.parse(viewValue);
+          this.setState({ viewValue: this.format(parsedValue) });
+        } else {
+          this.setState({ viewValue: this.parse(viewValue) });
+        }
       }
     }
 
@@ -403,15 +409,18 @@ function createControlClass(s = defaultStrategy) {
             return;
           }
           case 'validate':
+            if (containsEvent(validateOn, 'change')) {
+              this.validate({ clearIntents: intent });
+            }
+            return;
           case 'reset':
-            if (intent.type === 'reset') {
-              this.setViewValue(modelValue);
-              if (this.handleUpdate.cancel) {
-                this.handleUpdate.cancel();
-              }
+            this.setViewValue(modelValue);
+            if (this.handleUpdate.cancel) {
+              this.handleUpdate.cancel();
             }
+            dispatch(actions.clearIntents(model, intent));
             if (containsEvent(validateOn, 'change')) {
-              this.validate({ clearIntents: intent });
+              this.validate({});
             }
             return;
 
@@ -433,6 +442,12 @@ function createControlClass(s = defaultStrategy) {
         : value;
     }
 
+    format(value) {
+      return this.props.formatter
+        ? this.props.formatter(value)
+        : value;
+    }
+
     handleChange(event) {
       if (event && event.persist) event.persist();
 

src/components/control-component.js

@@ -31,7 +31,7 @@ const propTypes = {
   // Provided props
   model: PropTypes.string.isRequired,
   messages: PropTypes.objectOf(PropTypes.oneOfType([
-    PropTypes.string,
+    PropTypes.node,
     PropTypes.func,
     PropTypes.bool,
   ])),

src/components/errors-component.js

@@ -29,6 +29,7 @@ const fieldPropTypes = {
     PropTypes.string,
   ]),
   parser: PropTypes.func,
+  formatter: PropTypes.func,
   updateOn: PropTypes.oneOfType([
     PropTypes.arrayOf(PropTypes.string),
     PropTypes.string,
@@ -242,6 +243,7 @@ function createFieldClass(customControlPropsMap = {}, s = defaultStrategy) {
     updateOn: 'change',
     asyncValidateOn: 'blur',
     parser: identity,
+    formatter: identity,
     changeAction: actions.change,
     dynamic: true,
     component: 'div',

src/components/field-component.js

@@ -1097,20 +1097,48 @@ Object.keys(testContexts).forEach((testKey) => {
         test: modelReducer('test', initialState),
       });
 
-      TestUtils.renderIntoDocument(
-        <Provider store={store}>
-          <Control.text
-            model="test.foo"
-          />
-        </Provider>
-      );
-
       it('should reset the control to the last loaded value', () => {
+        TestUtils.renderIntoDocument(
+          <Provider store={store}>
+            <Control.text
+              model="test.foo"
+            />
+          </Provider>
+        );
+
         store.dispatch(actions.load('test.foo', 'new foo'));
         store.dispatch(actions.reset('test.foo'));
 
         assert.equal(get(store.getState().test, 'foo'), 'new foo');
       });
+
+      const onEvents = [
+        'change',
+        'focus',
+        'blur',
+      ];
+
+      onEvents.forEach((updateOn) => {
+        onEvents.forEach((validateOn) => {
+          const condition = `updateOn="${updateOn}", validateOn="${validateOn}"`;
+          it(`should clear reset intent when ${condition}`, () => {
+            TestUtils.renderIntoDocument(
+              <Provider store={store}>
+                <Control.text
+                  model="test.foo"
+                  updateOn={updateOn}
+                  validateOn={validateOn}
+                />
+              </Provider>
+            );
+
+            store.dispatch(actions.reset('test.foo'));
+            const hasResetIntent = store.getState().testForm.foo.intents
+              .some(intent => intent.type === 'reset');
+            assert.equal(hasResetIntent, false, 'has no pending reset intents');
+          });
+        });
+      });
     });
 
     describe('deep initial value after reset', () => {

test/control-component-spec.js

@@ -0,0 +1,67 @@
+import { assert } from 'chai';
+import React from 'react';
+import TestUtils from 'react-dom/test-utils';
+import { combineReducers, createStore } from 'redux';
+import { Provider } from 'react-redux';
+
+import { modelReducer, Field, formReducer } from '../src';
+
+describe('<Field formatter={...} />', () => {
+  it('should format the initial value immediately', () => {
+    const store = createStore(combineReducers({
+      test: modelReducer('test', { foo: 'initial' }),
+      testForm: formReducer('test', { foo: 'initial' }),
+    }));
+
+    const formatValue = val => val.toUpperCase();
+
+    const field = TestUtils.renderIntoDocument(
+      <Provider store={store}>
+        <Field
+          model="test.foo"
+          formatter={formatValue}
+        >
+          <input type="text" />
+        </Field>
+      </Provider>
+    );
+
+    const input = TestUtils.findRenderedDOMComponentWithTag(field, 'input');
+
+    assert.equal(input.value, 'INITIAL');
+
+    assert.equal(store.getState().test.foo, 'initial');
+  });
+
+  it('should update the viewValue with only the data returned by formatter', () => {
+    const initial = { foo: '0123456789' };
+    const expected = '0123';
+    const inputValue = '012345678912341268374612837';
+
+    const store = createStore(combineReducers({
+      test: modelReducer('test', initial),
+      testForm: formReducer('test', initial),
+    }));
+
+    const formatValue = val => val.substring(0, 4);
+
+    const field = TestUtils.renderIntoDocument(
+      <Provider store={store}>
+        <Field
+          model="test.foo"
+          formatter={formatValue}
+        >
+          <input type="text" />
+        </Field>
+      </Provider>
+    );
+
+    const input = TestUtils.findRenderedDOMComponentWithTag(field, 'input');
+    input.value = inputValue;
+    TestUtils.Simulate.change(input);
+
+    assert.equal(input.value, expected);
+
+    assert.equal(store.getState().test.foo, inputValue);
+  });
+});

test/field-formatter-spec.js

@@ -3816,9 +3816,9 @@ [email protected]:
   version "2.2.6"
   resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.2.6.tgz#17ddeddc5f722fb66501658895461977867315ba"
 
-[email protected]:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/shallow-compare/-/shallow-compare-1.2.1.tgz#6a42931a81f8ab52bfad229c14f1635e5488ba7a"
+shallow-compare@^1.2.1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/shallow-compare/-/shallow-compare-1.2.2.tgz#fa4794627bf455a47c4f56881d8a6132d581ffdb"
 
 shelljs@^0.6.0:
   version "0.6.1"