More refactoring. Adding value to changeAction for checkbox. Fixes #474

Author: davidkpiano

src/actions/model-actions.js

@@ -85,6 +85,23 @@ export function createModelActions(s = defaultStrategies) {
 
   const toggle = createModifierAction((value) => !value, undefined, 1);
 
+  const check = (model, value) => (dispatch, getState) => {
+    const modelValue = s.get(getState(), model);
+
+    if (isMulti(model)) {
+      const valueWithItem = modelValue || s.array;
+      const valueWithoutItem = (valueWithItem || s.array)
+        .filter(item => item !== value);
+      const multiValue = (s.length(valueWithoutItem) === s.length(valueWithItem))
+        ? s.push(valueWithItem, value)
+        : valueWithoutItem;
+
+      dispatch(change(model, multiValue));
+    } else {
+      dispatch(change(model, !modelValue));
+    }
+  };
+
   const filter = createModifierAction((value, iteratee) => value.filter(iteratee), s.array, 2);
 
   const reset = (model) => ({
@@ -132,6 +149,7 @@ export function createModelActions(s = defaultStrategies) {
     xor,
     push,
     toggle,
+    check,
     filter,
     reset,
     map,

src/components/control-component.js

@@ -39,6 +39,22 @@ function containsEvent(events, event) {
   return !!~events.indexOf(event);
 }
 
+function getReadOnlyValue(props) {
+  const { modelValue, controlProps } = props;
+
+  switch (controlProps.type) {
+    case 'checkbox':
+      return typeof controlProps.value !== 'undefined'
+        ? controlProps.value
+        : !modelValue; // simple checkbox
+
+    case 'radio':
+    default:
+      return controlProps.value;
+  }
+}
+
+
 const propTypes = {
   model: PropTypes.oneOfType([
     PropTypes.func,
@@ -227,7 +243,7 @@ function createControlClass(customControlPropsMap = {}, s = defaultStrategy) {
         changeAction = this.props.changeAction,
       } = this.getMappedProps();
       const value = isReadOnlyValue(controlProps)
-        ? controlProps.value
+        ? getReadOnlyValue(this.props)
         : event;
 
       return changeAction(model, getValue(value));
@@ -681,8 +697,8 @@ function createControlClass(customControlPropsMap = {}, s = defaultStrategy) {
       mapProps={{
         ...controlPropsMap.checkbox,
         ...props.mapProps,
-        changeAction: props.changeAction || controlPropsMap.checkbox.changeAction,
       }}
+      changeAction={props.changeAction || s.actions.check}
       {...omit(props, 'mapProps')}
     />
   );

src/components/field-component.js

@@ -97,6 +97,7 @@ function getControlType(control, props, options) {
 const defaultStrategy = {
   Control,
   getFieldFromState,
+  actions,
 };
 
 function createFieldClass(customControlPropsMap = {}, s = defaultStrategy) {
@@ -122,6 +123,13 @@ function createFieldClass(customControlPropsMap = {}, s = defaultStrategy) {
     },
   };
 
+  // TODO: refactor
+  const defaultControlPropsMap = {
+    checkbox: {
+      changeAction: s.actions.check,
+    },
+  };
+
   class Field extends Component {
     shouldComponentUpdate(nextProps) {
       const { dynamic } = this.props;
@@ -165,6 +173,7 @@ function createFieldClass(customControlPropsMap = {}, s = defaultStrategy) {
           controlProps: control.props,
           component: control.type,
           mapProps,
+          ...(defaultControlPropsMap[controlType] || {}),
         });
     }
 

src/constants/control-props-map.js

@@ -2,14 +2,7 @@ import isMulti from '../utils/is-multi';
 import i from 'icepick';
 import actions from '../actions';
 
-const defaultStrategies = {
-  array: [],
-  object: {},
-  length: (val) => val.length,
-  push: i.push,
-};
-
-function createControlPropsMap(s = defaultStrategies) {
+function createControlPropsMap() {
   function getTextValue(value) {
     if (typeof value === 'string' || typeof value === 'number') {
       return `${value}`;
@@ -47,22 +40,6 @@ function createControlPropsMap(s = defaultStrategies) {
       checked: (props) => (props.defaultChecked
         ? props.checked
         : isChecked(props)),
-      changeAction: (props) => (model) => {
-        const { modelValue, value } = props;
-
-        if (isMulti(model)) {
-          const valueWithItem = modelValue || s.array;
-          const valueWithoutItem = (valueWithItem || s.array)
-            .filter(item => item !== value);
-          const multiValue = (s.length(valueWithoutItem) === s.length(valueWithItem))
-            ? s.push(valueWithItem, value)
-            : valueWithoutItem;
-
-          return actions.change(model, multiValue);
-        }
-
-        return actions.change(model, !modelValue);
-      },
       onChange: ({ onChange }) => onChange,
       onBlur: ({ onBlur }) => onBlur,
       onFocus: ({ onFocus }) => onFocus,

src/immutable.js

@@ -114,7 +114,7 @@ const immutableActions = {
 
 const immutableModelReducer = createModeler(immutableStrategy);
 const immutableModelReducerEnhancer = createModelReducerEnhancer(immutableModelReducer);
-const immutableControlPropsMap = createControlPropsMap(immutableStrategy);
+const immutableControlPropsMap = createControlPropsMap();
 const ImmutableControl = createControlClass(immutableControlPropsMap, {
   get: immutableGetFromState,
   getFieldFromState: immutableGetFieldFromState,
@@ -125,6 +125,7 @@ const ImmutableField = createFieldClass(immutableControlPropsMap, {
   getter: immutableGetFromState,
   getFieldFromState: immutableGetFieldFromState,
   changeAction: immutableModelActions.change,
+  actions: immutableModelActions,
 });
 const ImmutableErrors = createErrorsClass(immutableStrategy);
 const ImmutableForm = createFormClass({

test/control-component-spec.js

@@ -1307,6 +1307,25 @@ Object.keys(testContexts).forEach((testKey) => {
 
         assert.isTrue(customChanged);
       });
+
+      it('should provide the inverse of the model value (checkbox)', (done) => {
+        const field = TestUtils.renderIntoDocument(
+          <Provider store={store}>
+            <Control.checkbox
+              model="test.customChecked"
+              changeAction={(model, value) => {
+                assert.equal(model, 'test.customChecked');
+                assert.equal(value, true); // initial value is false
+                done();
+              }}
+            />
+          </Provider>
+        );
+
+        const control = TestUtils.findRenderedDOMComponentWithTag(field, 'input');
+
+        TestUtils.Simulate.change(control);
+      });
     });
 
     describe('event handlers on control', () => {