Making mapProps assignable from existing mapProps if specified. Addresses #416

Author: davidkpiano

docs/guides/custom-controls.md

@@ -84,6 +84,44 @@ By default, any props on `<Control>` that are _not_ part of the `Control.propTyp
 />
 ```
 
+## Model and View Values
+
+One important thing to keep in mind is that there is no single `value` for a `<Control>`; rather, there are two types of values (that are equivalent, more often than not):
+
+- `modelValue` - the exact value of the model in the store's state
+- `viewValue` - the _displayed_ value of the model in the component's state
+
+For example, if a text control has `updateOn="blur"`, its `viewValue` will represent what is being typed in the input, whereas the `modelValue` will represent the persisted value, once the input is blurred.
+
+Because of this, you will want to map the `viewValue` to a custom control's `value` if you wish to externally update the value:
+
+```jsx
+const CustomInput = (props) => (
+  <div className="custom-input">
+    <input type="text" {...props} />
+  </div>
+);
+
+const CustomInputControl = (props) => (
+  <Control
+    component={CustomInput}
+    mapProps={{
+      value: (props) => props.viewValue,
+    }}
+    {...props}
+  />
+);
+```
+
+Alternatively, you can just _assign_ existing mapped props to your custom control:
+
+```jsx
+// the prop mapping of Control.text is used below:
+const CustomInputControl = (props) => (
+  <Control.text component={CustomInput} />
+);
+```
+
 ## Advanced Custom Controls
 
 Some custom controls won't have prop keys that match up exactly with the standard event handler props, such as `onChangeText` in React Native's `<TextInput>` component corresponding to `onChange`. You can specify a prop mapping in the `mapProps={{...}}` prop to specify the mapping:

src/components/control-component.js

@@ -540,26 +540,36 @@ Control.defaultProps = {
 
 const ConnectedControl = resolveModel(connect(mapStateToProps)(Control));
 
+/* eslint-disable react/prop-types */
 ConnectedControl.input = (props) => (
   <ConnectedControl
     component="input"
-    mapProps={controlPropsMap.default}
+    mapProps={{
+      ...controlPropsMap.default,
+      ...props.mapProps,
+    }}
     {...props}
   />
 );
 
 ConnectedControl.text = (props) => (
   <ConnectedControl
     component="input"
-    mapProps={controlPropsMap.text}
+    mapProps={{
+      ...controlPropsMap.text,
+      ...props.mapProps,
+    }}
     {...props}
   />
 );
 
 ConnectedControl.textarea = (props) => (
   <ConnectedControl
     component="textarea"
-    mapProps={controlPropsMap.textarea}
+    mapProps={{
+      ...controlPropsMap.textarea,
+      ...props.mapProps,
+    }}
     {...props}
   />
 );
@@ -568,7 +578,10 @@ ConnectedControl.radio = (props) => (
   <ConnectedControl
     component="input"
     type="radio"
-    mapProps={controlPropsMap.radio}
+    mapProps={{
+      ...controlPropsMap.radio,
+      ...props.mapProps,
+    }}
     {...props}
   />
 );
@@ -577,7 +590,10 @@ ConnectedControl.checkbox = (props) => (
   <ConnectedControl
     component="input"
     type="checkbox"
-    mapProps={controlPropsMap.checkbox}
+    mapProps={{
+      ...controlPropsMap.checkbox,
+      ...props.mapProps,
+    }}
     {...props}
   />
 );
@@ -586,15 +602,21 @@ ConnectedControl.file = (props) => (
   <ConnectedControl
     component="input"
     type="file"
-    mapProps={controlPropsMap.file}
+    mapProps={{
+      ...controlPropsMap.file,
+      ...props.mapProps,
+    }}
     {...props}
   />
 );
 
 ConnectedControl.select = (props) => (
   <ConnectedControl
     component="select"
-    mapProps={controlPropsMap.select}
+    mapProps={{
+      ...controlPropsMap.select,
+      ...props.mapProps,
+    }}
     {...props}
   />
 );
@@ -603,7 +625,10 @@ ConnectedControl.reset = (props) => (
   <ConnectedControl
     component="button"
     type="reset"
-    mapProps={controlPropsMap.reset}
+    mapProps={{
+      ...controlPropsMap.reset,
+      ...props.mapProps,
+    }}
     {...props}
   />
 );