Removing redundant modelValue prop from <Field> and adding support for Immutable <Field> component. Fixes #319

Author: davidkpiano

src/components/control-component.js

@@ -10,7 +10,7 @@ import { sequenceEventActions } from '../utils/sequence';
 import actions from '../actions';
 
 function mapStateToProps(state, props) {
-  const { model, mapProps } = props;
+  const { model, mapProps, getter = _get } = props;
 
   if (!mapProps) return props;
 
@@ -21,7 +21,7 @@ function mapStateToProps(state, props) {
 
   return {
     model,
-    modelValue: _get(state, modelString),
+    modelValue: getter(state, modelString),
     fieldValue,
   };
 }
@@ -186,12 +186,14 @@ Control.propTypes = {
   component: PropTypes.any,
   dispatch: PropTypes.func,
   parser: PropTypes.func,
-  componentMap: PropTypes.object,
+  componentMap: PropTypes.object, // will be deprecated
+  getter: PropTypes.func,
 };
 
 Control.defaultProps = {
   changeAction: actions.change,
   updateOn: 'change',
+  getter: _get,
 };
 
 export default connect(mapStateToProps)(Control);

src/components/field-component.js

@@ -21,7 +21,6 @@ function mapStateToProps(state, { model }) {
 
   return {
     model: modelString,
-    modelValue: _get(state, modelString),
   };
 }
 
@@ -160,7 +159,6 @@ function createFieldControlComponent(control, props, options) {
   return (
     <Control
       {...controlProps}
-      modelValue={props.modelValue}
       control={control}
       controlProps={control.props}
       component={control.type}
@@ -243,7 +241,6 @@ function createFieldClass(customControlPropsMap = {}, defaultProps = {}) {
       PropTypes.func,
       PropTypes.object,
     ]),
-    modelValue: PropTypes.any,
     mapProps: PropTypes.func,
     componentMap: PropTypes.object,
     dispatch: PropTypes.func,

src/immutable/index.js

@@ -1,5 +1,7 @@
 import { createModeler } from '../reducers/model-reducer';
 import { createModelReducerEnhancer } from '../enhancers/modeled-enhancer';
+import { createFieldClass } from '../components/field-component';
+import toPath from '../utils/to-path';
 
 function immutableGet(state, path, defaultValue) {
   try {
@@ -19,6 +21,24 @@ function immutableSet(state, path, value) {
   }
 }
 
+function immutableGetFromState(state, modelString) {
+  const path = toPath(modelString);
+
+  return path.reduce((subState, subPath) => {
+    // Current subState is immutable
+    if ('get' in subState) {
+      return subState.get(subPath);
+    }
+
+    // Current subState is a plain object/array
+    return subState[subPath];
+  }, state);
+}
+
+const ImmutableField = createFieldClass(undefined, {
+  getter: immutableGetFromState,
+});
+
 const modelReducer = createModeler(immutableGet, immutableSet);
 const modelReducerEnhancer = createModelReducerEnhancer(modelReducer);
 
@@ -33,4 +53,5 @@ export {
   createModelReducer,
   modelReducer,
   modelReducerEnhancer as modeled,
+  ImmutableField as Field,
 };

test/immutable-field-component-spec.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { assert } from 'chai';
+import Immutable from 'immutable';
+import { createStore, combineReducers, applyMiddleware } from 'redux';
+import { Provider } from 'react-redux';
+import thunk from 'redux-thunk';
+import TestUtils from 'react-addons-test-utils';
+
+import { formReducer, actions } from '../src';
+import {
+  modelReducer as immutableModelReducer,
+  Field as ImmutableField,
+} from '../src/immutable';
+
+describe('<Field> with Immutable.js', () => {
+  const reducer = immutableModelReducer('test',
+    Immutable.fromJS({ foo: 'bar' }));
+
+  const store = createStore(combineReducers({
+    test: reducer,
+    testForm: formReducer('test', { foo: 'bar' }),
+  }), applyMiddleware(thunk));
+
+  const field = TestUtils.renderIntoDocument(
+    <Provider store={store}>
+      <ImmutableField model="test.foo">
+        <input />
+      </ImmutableField>
+    </Provider>
+  );
+
+  const input = TestUtils.findRenderedDOMComponentWithTag(field, 'input');
+
+  it('control should have the immutable model value', () => {
+    assert.equal(input.value, 'bar');
+  });
+
+  it('should be able to change the value', () => {
+    input.value = 'new';
+
+    TestUtils.Simulate.change(input);
+
+    assert.equal(store.getState().test.get('foo'), 'new');
+    assert.equal(input.value, 'new');
+  });
+
+  it('should be able to externally change the value', () => {
+    store.dispatch(actions.change('test.foo', 'external'));
+
+    assert.equal(store.getState().test.get('foo'), 'external');
+    assert.equal(input.value, 'external');
+  });
+});