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

Author: davidkpiano

.gitignore

@@ -46,3 +46,4 @@ examples/sandbox
 
 # Other
 .vscode/
+.idea/

.travis.yml

@@ -3,10 +3,22 @@ language: node_js
 node_js:
   - "4.0"
   - "4"
+  - "7"
   - "stable"
 
+# before_install:
+#   - npm config set ignore-scripts true
+
 script:
-  - npm test
+  - yarn test
+  - yarn run lint
+  - yarn run build
+  - yarn run tsdef
+
+cache: yarn
+# cache:
+#   directories:
+#     - node_modules
 
 branches:
   except:

package.json

@@ -17,7 +17,7 @@
     "build:lib": "babel src --out-dir lib",
     "analyze": "webpack src/index.js dist/index.js --config webpack.config.prod.js --json > stats.json",
     "preversion": "npm run test && npm run lint",
-    "prepublish": "npm test && npm run lint && npm run build && npm run tsdef",
+    "prepublishOnly": "npm test && npm run lint && npm run build && npm run tsdef",
     "postversion": "git push && git push --tags",
     "publish:beta": "npm publish --tag beta",
     "tsdef": "cp -f immutable.d.ts lib/",

src/actions/model-actions.js

@@ -96,7 +96,10 @@ export function createModelActions(s = defaultStrategies) {
       return change(model, multiValue);
     }
 
-    return change(model, !currentValue);
+    if (typeof value === 'undefined') {
+      return change(model, !currentValue);
+    }
+    return change(model, value);
   };
 
   const check = (model, value) => (dispatch, getState) => {

src/components/control-component.js

@@ -28,6 +28,8 @@ import isNative from '../utils/is-native';
 import initialFieldState from '../constants/initial-field-state';
 import containsEvent from '../utils/contains-event';
 
+import ComponentWrapper from './control-strip-defaults-component';
+
 const findDOMNode = !isNative
   ? require('react-dom').findDOMNode
   : null;
@@ -611,23 +613,29 @@ function createControlClass(s = defaultStrategy) {
       const mappedProps = omit(this.getMappedProps(), disallowedProps);
 
       if (getRef) {
-        mappedProps.ref = getRef;
+        mappedProps.getRef = getRef;
       }
 
       // If there is an existing control, clone it
       if (control) {
         return cloneElement(
           control,
-          mappedProps,
-          controlProps.children);
+          {
+            ...mappedProps,
+            defaultValue: undefined,
+            defaultChecked: undefined,
+          },
+          controlProps.children
+        );
       }
-
       return createElement(
-        component,
+        ComponentWrapper,
         {
+          component,
           ...controlProps,
           ...mappedProps,
-        });
+        }
+      );
     }
   }
 
@@ -665,23 +673,24 @@ function createControlClass(s = defaultStrategy) {
     const modelString = getModel(model, state);
     const fieldValue = s.getFieldFromState(state, modelString)
       || initialFieldState;
+    const modelValue = s.get(state, modelString);
 
     return {
       model: modelString,
-      modelValue: s.get(state, modelString),
+      modelValue,
       fieldValue,
       controlProps: finalControlProps,
     };
   }
 
   const ConnectedControl = resolveModel(connect(mapStateToProps, null, null, {
-    areOwnPropsEqual(ownProps, nextOwnProps) {
-      return shallowEqual(ownProps, nextOwnProps, {
+    areOwnPropsEqual(nextOwnProps, ownProps) {
+      return shallowEqual(nextOwnProps, ownProps, {
         omitKeys: ['mapProps'],
       });
     },
-    areStatePropsEqual(stateProps, nextStateProps) {
-      return shallowEqual(stateProps, nextStateProps, {
+    areStatePropsEqual(nextStateProps, stateProps) {
+      return shallowEqual(nextStateProps, stateProps, {
         deepKeys: ['controlProps'],
       });
     },

src/components/control-strip-defaults-component.js

@@ -0,0 +1,30 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+// Prevents the defaultValue/defaultChecked fields from rendering with value/checked
+class ComponentWrapper extends Component {
+  render() {
+    /* eslint-disable no-unused-vars */
+    const {
+      defaultValue,
+      defaultChecked,
+      component,
+      getRef,
+      ...otherProps,
+    } = this.props;
+    /* eslint-enable */
+
+    if (getRef) {
+      otherProps.ref = getRef;
+    }
+    const WrappedComponent = component;
+    return <WrappedComponent {...otherProps} />;
+  }
+}
+ComponentWrapper.propTypes = {
+  component: PropTypes.any,
+  defaultValue: PropTypes.any,
+  defaultChecked: PropTypes.any,
+  getRef: PropTypes.func,
+};
+export default ComponentWrapper;

src/constants/control-props-map.js

@@ -17,6 +17,11 @@ function isChecked(props) {
     return props.modelValue.some((item) =>
       item === props.value);
   }
+  if (typeof props.modelValue === 'undefined') {
+    if (typeof props.defaultChecked !== 'undefined') {
+      return props.defaultChecked;
+    }
+  }
 
   return !!props.modelValue;
 }
@@ -57,9 +62,7 @@ const controlPropsMap = {
   },
   checkbox: {
     ...standardPropsMap,
-    checked: (props) => (props.defaultChecked
-      ? props.checked
-      : isChecked(props)),
+    checked: isChecked,
   },
   radio: {
     ...standardPropsMap,

test/control-component-spec.js

@@ -325,12 +325,14 @@ Object.keys(testContexts).forEach((testKey) => {
         assert.equal(
           get(store.getState().test, 'single'),
           false, 'false');
+        assert.equal(checkbox.checked, false);
 
         TestUtils.Simulate.change(checkbox);
 
         assert.equal(
           get(store.getState().test, 'single'),
           true, 'true');
+        assert.equal(checkbox.checked, true);
       });
 
       it('should check/uncheck the checkbox when model is externally changed', () => {
@@ -350,6 +352,114 @@ Object.keys(testContexts).forEach((testKey) => {
       });
     });
 
+    describe('with <Control.checkbox /> (single toggle, dynamic form, defaultChecked)', () => {
+      const initialState = getInitialState({ single: true });
+      const store = testCreateStore({
+        testForm: formReducer('test'),
+        test: modelReducer('test', initialState),
+      });
+
+      const field = TestUtils.renderIntoDocument(
+        <Provider store={store}>
+          <Control.checkbox model="test.other" defaultChecked />
+        </Provider>
+      );
+
+      const checkbox = TestUtils.findRenderedDOMComponentWithTag(field, 'input');
+
+      it('should initially set the checkbox to checked when defaultChecked is true', () => {
+        assert.equal(checkbox.checked, true);
+      });
+
+      it('should give each radio input a name attribute of the model', () => {
+        assert.equal(checkbox.name, 'test.other');
+      });
+
+      it('should dispatch a change event when changed', () => {
+        TestUtils.Simulate.change(checkbox);
+
+        assert.equal(
+          get(store.getState().test, 'other'),
+          false, 'false');
+        assert.equal(checkbox.checked, false);
+
+        TestUtils.Simulate.change(checkbox);
+
+        assert.equal(
+          get(store.getState().test, 'other'),
+          true, 'true');
+        assert.equal(checkbox.checked, true);
+      });
+
+      it('should check/uncheck the checkbox when model is externally changed', () => {
+        store.dispatch(actions.change('test.other', true));
+        assert.equal(checkbox.checked, true);
+
+        store.dispatch(actions.change('test.other', false));
+        assert.equal(checkbox.checked, false);
+      });
+
+      it('should uncheck the checkbox for any falsey value', () => {
+        store.dispatch(actions.change('test.other', ''));
+
+        assert.equal(checkbox.checked, false);
+      });
+    });
+
+    describe('with <Control.checkbox /> (single toggle, dynamic form, !defaultChecked)', () => {
+      const initialState = getInitialState({ single: true });
+      const store = testCreateStore({
+        testForm: formReducer('test'),
+        test: modelReducer('test', initialState),
+      });
+
+      const field = TestUtils.renderIntoDocument(
+        <Provider store={store}>
+          <Control.checkbox model="test.other" defaultChecked={false} />
+        </Provider>
+      );
+
+      const checkbox = TestUtils.findRenderedDOMComponentWithTag(field, 'input');
+
+      it('should initially set the checkbox to unchecked when defaultChecked is false', () => {
+        assert.equal(checkbox.checked, false);
+      });
+
+      it('should give each radio input a name attribute of the model', () => {
+        assert.equal(checkbox.name, 'test.other');
+      });
+
+      it('should dispatch a change event when changed', () => {
+        TestUtils.Simulate.change(checkbox);
+
+        assert.equal(
+          get(store.getState().test, 'other'),
+          true, 'true');
+
+        TestUtils.Simulate.change(checkbox);
+
+        assert.equal(
+          get(store.getState().test, 'other'),
+          false, 'false');
+      });
+
+      it('should check/uncheck the checkbox when model is externally changed', () => {
+        store.dispatch(actions.change('test.other', false));
+
+        assert.equal(checkbox.checked, false);
+
+        store.dispatch(actions.change('test.other', true));
+
+        assert.equal(checkbox.checked, true);
+      });
+
+      it('should uncheck the checkbox for any falsey value', () => {
+        store.dispatch(actions.change('test.other', ''));
+
+        assert.equal(checkbox.checked, false);
+      });
+    });
+
     describe('with <Control.checkbox /> (multi toggle)', () => {
       const initialState = getInitialState({ foo: [1] });
       const store = testCreateStore({