Merge pull request davidkpiano#985 from brycesenz/master

Adding in formatter functionality

Author: davidkpiano

src/components/control-component.js

@@ -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) });
+        }
       }
     }
 
@@ -436,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/field-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',

test/field-formatter-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);
+  });
+});