Exporting internal utils, simplifying control component, making text fields controlled, giving all unit tests an initial state to avoid uncontrolled component warnings (will re-explore default values). Fixes #184, #169

Author: davidkpiano

package.json

@@ -55,7 +55,7 @@
     "immutable": "^3.7.6",
     "jsdom": "^8.0.4",
     "mocha": "^2.4.5",
-    "react": "^15.0.1",
+    "react": "^15.0.2",
     "react-addons-test-utils": "^15.0.1",
     "react-dom": "^15.0.1",
     "react-redux": "^4.4.0",

src/components/control-component.js

@@ -2,39 +2,26 @@ import { Component, createElement, PropTypes } from 'react';
 import connect from 'react-redux/lib/components/connect';
 
 import _get from 'lodash/get';
-import memoize from 'lodash/memoize';
 import { sequenceEventActions } from '../utils/sequence';
 import actions from '../actions';
 
-const createControlProps = memoize((props) => {
-  const { model, modelValue, controlProps, mapProps } = props;
+function mapStateToProps(state, props) {
+  const { model, controlProps, mapProps } = props;
+  const modelString = typeof model === 'function'
+    ? model(state)
+    : model;
 
   if (!mapProps) {
-    return false;
+    return props;
   }
 
   return mapProps({
     model,
-    modelValue,
+    modelValue: _get(state, modelString),
+    ...props,
     ...controlProps,
     ...sequenceEventActions(props),
   });
-});
-
-function selector(state, props) {
-  const controlProps = createControlProps(props);
-
-  const model = props.model;
-
-  const modelString = typeof model === 'function'
-    ? model(state)
-    : model;
-
-  return {
-    model: modelString,
-    modelValue: _get(state, modelString),
-    ...controlProps,
-  };
 }
 
 class Control extends Component {
@@ -94,4 +81,4 @@ Control.defaultProps = {
   updateOn: 'change',
 };
 
-export default connect(selector)(Control);
+export default connect(mapStateToProps)(Control);

src/components/field-component.js

@@ -14,7 +14,7 @@ const {
   change,
 } = actions;
 
-function selector(state, { model }) {
+function mapStateToProps(state, { model }) {
   const modelString = typeof model === 'function'
     ? model(state)
     : model;
@@ -56,7 +56,9 @@ const controlPropsMap = {
   }),
   text: (props) => ({
     ...props,
-    defaultValue: props.modelValue,
+    value: props.updateOn === 'change' && !props.defaultValue
+      ? props.modelValue
+      : undefined,
     name: props.model,
   }),
   textarea: (props) => controlPropsMap.text(props),
@@ -217,7 +219,7 @@ function createFieldClass(customControlPropsMap = {}, defaultProps = {}) {
     ...defaultProps,
   };
 
-  return connect(selector)(Field);
+  return connect(mapStateToProps)(Field);
 }
 
 export {

src/index.js

@@ -22,6 +22,8 @@ import {
   track,
 } from './utils/track';
 
+import * as utils from './utils';
+
 export {
   actions,
   actionTypes,
@@ -41,4 +43,5 @@ export {
   initialFieldState,
   modeled,
   track,
+  utils,
 };

test/errors-component-spec.js

@@ -15,8 +15,8 @@ describe('<Errors />', () => {
 
   describe('displaying errors from messages', () => {
     const store = applyMiddleware(thunk)(createStore)(combineReducers({
-      testForm: formReducer('test', {}),
-      test: modelReducer('test'),
+      testForm: formReducer('test', { foo: '' }),
+      test: modelReducer('test', { foo: '' }),
     }));
 
     const form = TestUtils.renderIntoDocument(
@@ -115,8 +115,8 @@ describe('<Errors />', () => {
 
   describe('displaying errors from form .errors', () => {
     const store = applyMiddleware(thunk)(createStore)(combineReducers({
-      testForm: formReducer('test', {}),
-      test: modelReducer('test'),
+      testForm: formReducer('test', { foo: '' }),
+      test: modelReducer('test', { foo: '' }),
     }));
 
     let formValid = false;
@@ -161,8 +161,8 @@ describe('<Errors />', () => {
 
   describe('displaying custom messages', () => {
     const store = applyMiddleware(thunk)(createStore)(combineReducers({
-      testForm: formReducer('test', {}),
-      test: modelReducer('test'),
+      testForm: formReducer('test', { foo: '' }),
+      test: modelReducer('test', { foo: '' }),
     }));
 
     const form = TestUtils.renderIntoDocument(

test/field-component-spec.js

@@ -516,7 +516,10 @@ describe('<Field /> component', () => {
     const reducer = formReducer('test');
     const store = applyMiddleware(thunk)(createStore)(combineReducers({
       testForm: reducer,
-      test: modelReducer('test', {}),
+      test: modelReducer('test', {
+        foo: '',
+        blur: '',
+      }),
     }));
 
     it('should set the proper field state for validation', () => {
@@ -1150,7 +1153,7 @@ describe('<Field /> component', () => {
   });
 
   describe('syncing control defaultValue on load', () => {
-    const reducer = modelReducer('test');
+    const reducer = modelReducer('test', { foo: '' });
     const store = applyMiddleware(thunk)(createStore)(combineReducers({
       test: reducer,
     }));
@@ -1207,7 +1210,7 @@ describe('<Field /> component', () => {
   });
 
   describe('changeAction prop', () => {
-    const reducer = modelReducer('test');
+    const reducer = modelReducer('test', { foo: '' });
     const store = applyMiddleware(thunk)(createStore)(combineReducers({
       test: reducer,
     }));
@@ -1244,7 +1247,7 @@ describe('<Field /> component', () => {
   });
 
   describe('event handlers on control', () => {
-    const reducer = modelReducer('test');
+    const reducer = modelReducer('test', { foo: '' });
     const store = applyMiddleware(thunk)(createStore)(combineReducers({
       test: reducer,
     }));

test/field-parser-spec.js

@@ -8,8 +8,8 @@ import { modelReducer, formReducer, Field } from '../src';
 
 describe('<Field parser={...} />', () => {
   const store = createStore(combineReducers({
-    test: modelReducer('test'),
-    testForm: formReducer('test'),
+    test: modelReducer('test', { foo: '' }),
+    testForm: formReducer('test', { foo: '' }),
   }));
 
   const parseValue = val => ({