Refactoring Control to use getValue and getCheckboxValue for #725

Author: davidkpiano

src/components/control-component.js

@@ -12,7 +12,7 @@ import omit from '../utils/omit';
 import actionTypes from '../action-types';
 import debounce from '../utils/debounce';
 
-import _getValue from '../utils/get-value';
+import _getValue, { getCheckboxValue } from '../utils/get-value';
 import getValidity from '../utils/get-validity';
 import invertValidity from '../utils/invert-validity';
 import getFieldFromState from '../utils/get-field-from-state';
@@ -33,21 +33,6 @@ const findDOMNode = !isNative
 
 const disallowedProps = ['changeAction', 'getFieldFromState', 'store'];
 
-function getToggleValue(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;
-  }
-}
-
 function mergeOrSetErrors(model, errors, options) {
   return actions.setErrors(model, errors, {
     merge: isPlainObject(errors),
@@ -223,20 +208,12 @@ function createControlClass(s = defaultStrategy) {
     }
 
     getChangeAction(event) {
-      const {
-        model,
-        modelValue,
-        changeAction,
-        getValue,
-      } = this.props;
-      const value = this.isToggle()
-        ? getToggleValue(this.props)
-        : event;
-
-      return changeAction(model, getValue(value), {
-        currentValue: modelValue,
-        external: false,
-      });
+      return this.props.changeAction(
+        this.props.model,
+        this.getValue(event), {
+          currentValue: this.props.modelValue,
+          external: false,
+        });
     }
 
     getValidateAction(value, eventName) {
@@ -361,6 +338,10 @@ function createControlClass(s = defaultStrategy) {
       }
     }
 
+    getValue(event) {
+      return this.props.getValue(event, this.props);
+    }
+
     isToggle() {
       const { component, controlProps } = this.props;
 
@@ -426,11 +407,9 @@ function createControlClass(s = defaultStrategy) {
     }
 
     handleChange(event) {
-      const { getValue } = this.props;
-
       if (event && event.persist) event.persist();
 
-      this.setViewValue(getValue(event));
+      this.setViewValue(this.getValue(event));
       this.handleUpdate(event);
     }
 
@@ -504,7 +483,6 @@ function createControlClass(s = defaultStrategy) {
         ignore,
         withField,
         fieldValue,
-        getValue,
       } = this.props;
 
       const eventAction = {
@@ -557,7 +535,7 @@ function createControlClass(s = defaultStrategy) {
           },
           dispatchBatchActions,
           parser,
-          getValue,
+          (e) => this.getValue(e),
           persistEventWithCallback(controlEventHandler || identity)
         )(event, withField ? fieldValue : undefined);
       };
@@ -740,6 +718,7 @@ function createControlClass(s = defaultStrategy) {
         ...controlPropsMap.checkbox,
         ...props.mapProps,
       }}
+      getValue={getCheckboxValue}
       changeAction={props.changeAction || s.actions.checkWithValue}
       {...omit(props, 'mapProps')}
     />

src/components/field-component.js

@@ -16,6 +16,7 @@ import shallowCompareWithoutChildren from '../utils/shallow-compare-without-chil
 import getModel from '../utils/get-model';
 import getFieldFromState from '../utils/get-field-from-state';
 import resolveModel from '../utils/resolve-model';
+import { getCheckboxValue } from '../utils/get-value';
 import initialFieldState from '../constants/initial-field-state';
 
 const fieldPropTypes = {
@@ -138,6 +139,7 @@ function createFieldClass(customControlPropsMap = {}, s = defaultStrategy) {
   const defaultControlPropsMap = {
     checkbox: {
       changeAction: s.actions.checkWithValue,
+      getValue: getCheckboxValue,
     },
   };
 

src/utils/get-value.js

@@ -1,3 +1,5 @@
+import isMulti from './is-multi';
+
 function isEvent(event) {
   return !!(event && event.stopPropagation && event.preventDefault);
 }
@@ -28,3 +30,13 @@ function getEventValue(event) {
 export default function getValue(value) {
   return isEvent(value) ? getEventValue(value) : value;
 }
+
+export function getCheckboxValue(_, props) {
+  const { controlProps } = props;
+
+  if (isMulti(props.model)) {
+    return controlProps.value;
+  }
+
+  return !props.modelValue;
+}