refactor(checkbox): align 'on' function handlers

BREAKING CHANGE: `onChange` is called with two parameters: First parameter an object with properties for `checked`, `name`, and `value`. The second is the React `event` object.
dhis2 · Nov 25, 2019 · 53c700d · 53c700d
1 parent 611a394
commit 53c700d
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 11 deletions.
diff --git a/src/Checkbox.js b/src/Checkbox.js
@@ -26,6 +26,49 @@ class Checkbox extends Component {
         }
     }
 
+    handleChange = e => {
+        const { onChange, disabled } = this.props
+
+        if (disabled) {
+            return
+        }
+
+        if (onChange) {
+            onChange(
+                {
+                    value: this.props.value,
+                    name: this.props.name,
+                    checked: !this.props.checked,
+                },
+                e
+            )
+        }
+    }
+
+    handleBlur = e => {
+        const { onBlur, disabled } = this.props
+
+        if (disabled) {
+            return
+        }
+
+        if (onBlur) {
+            onBlur(e)
+        }
+    }
+
+    handleFocus = e => {
+        const { onFocus, disabled } = this.props
+
+        if (disabled) {
+            return
+        }
+
+        if (onFocus) {
+            onFocus(e)
+        }
+    }
+
     render() {
         const {
             checked = false,
@@ -35,13 +78,10 @@ class Checkbox extends Component {
             error,
             label,
             name,
-            onChange,
             tabIndex,
             valid,
             value,
             warning,
-            onFocus,
-            onBlur,
             dense,
         } = this.props
 
@@ -69,9 +109,9 @@ class Checkbox extends Component {
                     checked={checked}
                     disabled={disabled}
                     tabIndex={tabIndex}
-                    onChange={onChange}
-                    onFocus={onFocus}
-                    onBlur={onBlur}
+                    onChange={this.handleChange}
+                    onFocus={this.handleFocus}
+                    onBlur={this.handleBlur}
                 />
 
                 <div className={cx('icon', { dense })}>
@@ -150,7 +190,7 @@ class Checkbox extends Component {
  * @static
  * @prop {string} value
  * @prop {Node} label
- * @prop {function} [onChange]
+ * @prop {function} [onChange] - called with the signature `object, event`
  * @prop {string} [name]
  * @prop {string} [className]
  * @prop {string} [tabIndex]

diff --git a/stories/Checkbox.stories.js b/stories/Checkbox.stories.js
@@ -3,7 +3,8 @@ import React from 'react'
 
 import { Checkbox } from '../src'
 
-const logger = ({ target }) => console.info(`${target.name}: ${target.value}`)
+const logger = ({ name, value, checked }) =>
+    console.info(`name: ${name}, value: ${value}, checked: ${checked}`)
 
 storiesOf('Checkbox', module)
     // Regular

diff --git a/stories/CheckboxField.stories.js b/stories/CheckboxField.stories.js
@@ -3,7 +3,8 @@ import React from 'react'
 
 import { CheckboxField } from '../src'
 
-const logger = ({ target }) => console.info(`${target.name}: ${target.value}`)
+const logger = ({ name, value, checked }) =>
+    console.info(`name: ${name}, value: ${value}, checked: ${checked}`)
 
 storiesOf('CheckboxField', module)
     // Regular

diff --git a/stories/CheckboxGroup.stories.js b/stories/CheckboxGroup.stories.js
@@ -3,7 +3,8 @@ import React from 'react'
 
 import { Checkbox, CheckboxGroup } from '../src'
 
-const logger = ({ target }) => console.info(`${target.name}: ${target.value}`)
+const logger = ({ name, value, checked }) =>
+    console.info(`name: ${name}, value: ${value}, checked: ${checked}`)
 
 storiesOf('CheckboxGroup', module)
     .add('Default', () => (

diff --git a/stories/CheckboxGroupField.stories.js b/stories/CheckboxGroupField.stories.js
@@ -3,7 +3,8 @@ import React from 'react'
 
 import { Checkbox, CheckboxGroupField } from '../src'
 
-const logger = ({ target }) => console.info(`${target.name}: ${target.value}`)
+const logger = ({ name, value, checked }) =>
+    console.info(`name: ${name}, value: ${value}, checked: ${checked}`)
 
 storiesOf('CheckboxGroupField', module)
     .add('Default', () => (