Support passing callback passed from Field to the underlying componen…

…ts (#68) * Pass callbacks defined on the Field to the wrapped component * Handle component callbacks * Renamed callbacks by suffixing it with Func
erikras · Dec 1, 2016 · 43a8476 · 43a8476
1 parent b97b455
commit 43a8476
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 12 deletions.
diff --git a/example/src/Form.js b/example/src/Form.js
@@ -82,7 +82,11 @@ class Form extends Component {
           <Field name="thinCrust" component={Toggle} label="Thin Crust" labelPosition="right"/>
         </div>
         <div>
-          <Field name="pepperoni" component={Checkbox} label="Pepperoni"/>
+          <Field name="pepperoni" component={Checkbox}
+            onCheck={value => {
+              console.log('onCheck ', value )
+            }}
+            label="Pepperoni"/>
         </div>
         <div>
           <Field name="mushrooms" component={Checkbox} label="Mushrooms"/>
@@ -95,13 +99,19 @@ class Form extends Component {
             component={DatePicker}
             defaultValue={null} // DatePicker requires an object,
                                 // and redux-form defaults to ''
+            onChange={(value) => {
+              console.log('date changed ', value)
+            }}
             hintText="Day of delivery?"/>
         </div>
         <div>
           <Field name="at"
             component={TimePicker}
             defaultValue={null} // TimePicker requires an object,
                                 // and redux-form defaults to ''
+            onChange={(value) => {
+              console.log('time changed ', value)
+            }}
             hintText="At what time?"/>
         </div>
         <div>
@@ -120,6 +130,9 @@ class Form extends Component {
             floatingLabelText="Cheese"
             openOnFocus={true}
             filter={MUIAutoComplete.fuzzyFilter}
+            onNewRequest={value => {
+              console.log('AutoComplete ', value)
+            }}
             dataSource={[ 'Cheddar', 'Mozzarella', 'Parmesan', 'Provolone' ]}
             />
         </div>
@@ -136,7 +149,9 @@ export default reduxForm({
   form: 'example',
   initialValues: {
     delivery: 'delivery',
-    name: 'Jane Doe'
+    name: 'Jane Doe',
+    at: new Date(),
+    cheese: 'Cheddar'
   },
   validate
 })(Form)
diff --git a/src/AutoComplete.js b/src/AutoComplete.js
@@ -4,9 +4,14 @@ import mapError from './mapError'
 
 export default createComponent(
   AutoComplete,
-  ({ input: { onChange, value, ...inputProps }, ...props }) => ({
+  ({ input: { value, ...inputProps }, onNewRequest: onNewRequestFunc, dataSourceConfig, ...props }) => ({
     ...mapError(props),
     ...inputProps,
-    searchText: value,
-    onNewRequest: value => onChange(value)
+    searchText: dataSourceConfig ? value[dataSourceConfig.text] : value,
+    onNewRequest: value => {
+      inputProps.onChange(value)
+      if(onNewRequestFunc && typeof onNewRequestFunc === 'function') {
+        onNewRequestFunc(value)
+      }
+    }
   }))
diff --git a/src/Checkbox.js b/src/Checkbox.js
@@ -10,11 +10,17 @@ export default createComponent(
       ...inputProps
     },
     meta, // eslint-disable-line no-unused-vars
+    onCheck: onCheckFunc,
     ...props
   }) => ({
     ...inputProps,
     ...props,
     checked: value ? true : false,
-    onCheck: onChange
+    onCheck: (event, isInputChecked) => {
+      onChange(isInputChecked)
+      if(onCheckFunc && typeof onCheckFunc === 'function') {
+        onCheckFunc(isInputChecked)
+      }
+    }
   })
 )
diff --git a/src/DatePicker.js b/src/DatePicker.js
@@ -7,13 +7,18 @@ export default createComponent(
   ({
     input: {
       onBlur, // eslint-disable-line no-unused-vars
-      onChange,
       ...inputProps
     },
+    onChange: onChangeFunc,
     ...props
   }) => ({
     ...inputProps,
     ...mapError(props),
-    onChange: (event, value) => onChange(value)
+    onChange: (event, value) => {
+      inputProps.onChange(value)
+      if(onChangeFunc && typeof onChangeFunc === 'function') {
+        onChangeFunc(value)
+      }
+    }
   })
 )
diff --git a/src/Slider.js b/src/Slider.js
@@ -4,9 +4,14 @@ import mapError from './mapError'
 
 export default createComponent(
   Slider,
-  ({ input: { onDragStart, ...inputProps }, ...props }) =>  // eslint-disable-line no-unused-vars
+  ({ input: { onDragStart, ...inputProps }, onChange: onChangeFunc, ...props }) =>  // eslint-disable-line no-unused-vars
     ({
       ...mapError({ ...props, input: inputProps }, 'error'),
-      onChange: (event, value) => inputProps.onChange(value)
+      onChange: (event, value) => {
+        inputProps.onChange(value)
+        if(onChangeFunc && typeof onChangeFunc === 'function') {
+          onChangeFunc(value)
+        }
+      }
     })
 )
diff --git a/src/TimePicker.js b/src/TimePicker.js
@@ -7,13 +7,18 @@ export default createComponent(
   ({
     input: {
       onBlur, // eslint-disable-line no-unused-vars
-      onChange,
       ...inputProps
     },
+    onChange: onChangeFunc,
     ...props
   }) => ({
     ...inputProps,
     ...mapError(props),
-    onChange: (event, value) => onChange(value)
+    onChange: (event, value) => {
+      inputProps.onChange(value)
+      if(onChangeFunc && typeof onChangeFunc === 'function') {
+        onChangeFunc(value)
+      }
+    }
   })
 )