Exposing isToggle and updating docs. Fixes #725

Author: davidkpiano

docs/api/Control.md

@@ -17,6 +17,8 @@
 - [`disabled`](#disabled)
 - [`getRef`](#prop-getRef)
 - [`persist`](#prop-persist)
+- [`getValue`](#prop-getValue)
+- [`isToggle`](#prop-isToggle)
 
 ## `<Control>`
 
@@ -372,3 +374,26 @@ _(Boolean)_: Signifies that the field state (validation, etc.) should not persis
   persist
 />
 ```
+
+## `getValue={(event, props) => ...}`
+_(Function)_: Determines the value given the `event` (from `onChange`) and optionally the control component's `props`.
+
+By default, the `getValue` function returns the value by hecking if the `event` is a DOM event.
+- If so, it returns `event.target.value`
+- If not, it returns the `event`.
+
+For `<Control.checkbox />`, the default `getValue` function is:
+- the original `value={...}` passed into the control, for multi-checkboxes (e.g., `model="user.hobbies[]"`)
+- the inverse boolean value of the `modelValue`.
+
+```jsx
+<Control.text
+  model="user.name"
+  getValue={(event) => event.target.value}
+/>
+```
+
+## `isToggle={false}`
+_(Boolean)_: Signifies that the control is a toggle (e.g., a checkbox or a radio). If `true`, then some optimizations are made.
+
+Default: `true` for `<Control.radio>` and `<Control.checkbox>`, `false` for all other controls.

src/components/control-component.js

@@ -100,6 +100,7 @@ const propTypes = {
   debounce: PropTypes.number,
   persist: PropTypes.bool,
   getValue: PropTypes.func,
+  isToggle: PropTypes.bool,
 };
 
 const defaultStrategy = {
@@ -333,7 +334,7 @@ function createControlClass(s = defaultStrategy) {
     }
 
     setViewValue(viewValue) {
-      if (!this.isToggle()) {
+      if (!this.props.isToggle) {
         this.setState({ viewValue: this.parse(viewValue) });
       }
     }
@@ -342,12 +343,6 @@ function createControlClass(s = defaultStrategy) {
       return this.props.getValue(event, this.props);
     }
 
-    isToggle() {
-      const { component, controlProps } = this.props;
-
-      return component === 'input' && ~['radio', 'checkbox'].indexOf(controlProps.type);
-    }
-
     handleIntents() {
       const {
         model,
@@ -371,7 +366,7 @@ function createControlClass(s = defaultStrategy) {
 
             if ((focused && this.node.focus)
               && (
-                !this.isToggle()
+                !this.props.isToggle
                 || typeof intent.value === 'undefined'
                 || intent.value === controlProps.value
               )) {
@@ -517,7 +512,7 @@ function createControlClass(s = defaultStrategy) {
             : event;
         }
 
-        if (this.isToggle()) {
+        if (this.props.isToggle) {
           return compose(
             dispatchBatchActions,
             persistEventWithCallback(controlEventHandler || identity)
@@ -626,6 +621,7 @@ function createControlClass(s = defaultStrategy) {
     withField: true,
     persist: false,
     getValue: _getValue,
+    isToggle: false,
   };
 
   function mapStateToProps(state, props) {
@@ -702,6 +698,7 @@ function createControlClass(s = defaultStrategy) {
     <ConnectedControl
       component="input"
       type="radio"
+      isToggle
       mapProps={{
         ...controlPropsMap.radio,
         ...props.mapProps,
@@ -714,6 +711,7 @@ function createControlClass(s = defaultStrategy) {
     <ConnectedControl
       component="input"
       type="checkbox"
+      isToggle
       mapProps={{
         ...controlPropsMap.checkbox,
         ...props.mapProps,

src/components/field-component.js

@@ -140,6 +140,10 @@ function createFieldClass(customControlPropsMap = {}, s = defaultStrategy) {
     checkbox: {
       changeAction: s.actions.checkWithValue,
       getValue: getCheckboxValue,
+      isToggle: true,
+    },
+    radio: {
+      isToggle: true,
     },
   };