checkbox

Author: Sasha Kondrashov

src/modules/Checkbox/Checkbox.d.ts

@@ -43,33 +43,61 @@ export interface StrictCheckboxProps {
    * Called when the user attempts to change the checked state.
    *
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
-   * @param {object} data - All props and proposed checked/indeterminate state.
+   * @param {object} props - All props.
+   * @param {boolean} checked - Current checked state.
+   * @param {boolean} indeterminate - Current indeterminate state.
    */
-  onChange?: (event: React.FormEvent<HTMLInputElement>, data: CheckboxProps) => void
+  onChange?: (
+    event: React.FormEvent<HTMLInputElement>,
+    props: CheckboxProps,
+    checked: boolean,
+    indeterminate: boolean,
+  ) => void
 
   /**
    * Called when the checkbox or label is clicked.
    *
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
-   * @param {object} data - All props and current checked/indeterminate state.
+   * @param {object} props - All props.
+   * @param {boolean} checked - Current checked state.
+   * @param {boolean} indeterminate - Current indeterminate state.
    */
-  onClick?: (event: React.MouseEvent<HTMLInputElement>, data: CheckboxProps) => void
+  onClick?: (
+    event: React.MouseEvent<HTMLInputElement>,
+    props: CheckboxProps,
+    checked: boolean,
+    indeterminate: boolean,
+  ) => void
 
   /**
    * Called when the user presses down on the mouse.
    *
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
-   * @param {object} data - All props and current checked/indeterminate state.
+   * @param {object} props - All props.
+   * @param {boolean} checked - Current checked state.
+   * @param {boolean} indeterminate - Current indeterminate state.
    */
-  onMouseDown?: (event: React.MouseEvent<HTMLInputElement>, data: CheckboxProps) => void
+  onMouseDown?: (
+    event: React.MouseEvent<HTMLInputElement>,
+    props: CheckboxProps,
+    checked: boolean,
+    indeterminate: boolean,
+  ) => void
 
   /**
    * Called when the user releases the mouse.
    *
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
-   * @param {object} data - All props and current checked/indeterminate state.
+   * @param {object} props - All props.
+   * @param {boolean} checked - Current checked state.
+   * @param {boolean} indeterminate - Current indeterminate state.
    */
-  onMouseUp?: (event: React.MouseEvent<HTMLInputElement>, data: CheckboxProps) => void
+  onMouseUp?: (
+    event: React.MouseEvent<HTMLInputElement>,
+    props: CheckboxProps,
+    checked: boolean,
+    indeterminate: boolean,
+  ) => void
 
   /** Format as a radio element. This means it is an exclusive option. */
   radio?: boolean

src/modules/Checkbox/Checkbox.js

@@ -96,11 +96,7 @@ const Checkbox = React.forwardRef(function (props, ref) {
 
     debug('handleChange()', _.get(e, 'target.tagName'))
 
-    _.invoke(props, 'onChange', e, {
-      ...props,
-      checked: !checked,
-      indeterminate: false,
-    })
+    _.invoke(props, 'onChange', e, props, !checked, false)
     setChecked(!checked)
     setIndeterminate(false)
   }
@@ -117,11 +113,7 @@ const Checkbox = React.forwardRef(function (props, ref) {
 
     // https://github.com/Semantic-Org/Semantic-UI-React/pull/3351
     if (!isLabelClickAndForwardedToInput) {
-      _.invoke(props, 'onClick', e, {
-        ...props,
-        checked: !checked,
-        indeterminate: !!indeterminate,
-      })
+      _.invoke(props, 'onClick', e, props, !checked, !!indeterminate)
     }
 
     if (isClickFromMouse.current) {
@@ -147,11 +139,7 @@ const Checkbox = React.forwardRef(function (props, ref) {
   const handleMouseDown = (e) => {
     debug('handleMouseDown()')
 
-    _.invoke(props, 'onMouseDown', e, {
-      ...props,
-      checked: !!checked,
-      indeterminate: !!indeterminate,
-    })
+    _.invoke(props, 'onMouseDown', e, props, !!checked, !!indeterminate)
 
     if (!e.defaultPrevented) {
       _.invoke(inputRef.current, 'focus')
@@ -166,11 +154,7 @@ const Checkbox = React.forwardRef(function (props, ref) {
     debug('handleMouseUp()')
 
     isClickFromMouse.current = true
-    _.invoke(props, 'onMouseUp', e, {
-      ...props,
-      checked: !!checked,
-      indeterminate: !!indeterminate,
-    })
+    _.invoke(props, 'onMouseUp', e, props, !!checked, !!indeterminate)
   }
 
   // ----------------------------------------

test/specs/modules/Checkbox/Checkbox-test.js

@@ -223,7 +223,7 @@ describe('Checkbox', () => {
   })
 
   describe('onChange', () => {
-    it('is called with (e, data) on mouse up', () => {
+    it('is called on mouse up', () => {
       const onChange = sandbox.spy()
       const props = { name: 'foo', value: 'bar', checked: false, indeterminate: true }
 
@@ -233,17 +233,10 @@ describe('Checkbox', () => {
       wrapper.find('label').simulate('click')
 
       onChange.should.have.been.calledOnce()
-      onChange.should.have.been.calledWithMatch(
-        {},
-        {
-          ...props,
-          checked: true,
-          indeterminate: false,
-        },
-      )
+      onChange.should.have.been.calledWithMatch({}, props, true, false)
     })
 
-    it('is not called when on change when "id" is passed', () => {
+    it('is not called on change when "id" is passed', () => {
       const onChange = sandbox.spy()
       wrapperMount(<Checkbox id='foo' onChange={onChange} />)
 
@@ -264,22 +257,16 @@ describe('Checkbox', () => {
   })
 
   describe('onClick', () => {
-    it('is called with (event, data) on click', () => {
+    it('is called on click', () => {
       const onClick = sandbox.spy()
       const props = { name: 'foo', value: 'bar', checked: false, indeterminate: true }
       mount(<Checkbox onClick={onClick} {...props} />).simulate('click')
 
       onClick.should.have.been.calledOnce()
-      onClick.should.have.been.calledWithMatch(
-        {},
-        {
-          ...props,
-          checked: true,
-        },
-      )
+      onClick.should.have.been.calledWithMatch({}, props, true, true)
     })
 
-    it('is not called when "id" is passed', () => {
+    it('is not called on click if "id" is passed', () => {
       const onClick = sandbox.spy()
       wrapperMount(<Checkbox id='foo' onClick={onClick} />)
 
@@ -290,13 +277,13 @@ describe('Checkbox', () => {
   })
 
   describe('onMouseDown', () => {
-    it('is called with (event, data) on mouse down', () => {
+    it('is called on mouse down without changing the checked status', () => {
       const onMousedDown = sandbox.spy()
       const props = { name: 'foo', value: 'bar', checked: false, indeterminate: true }
       mount(<Checkbox onMouseDown={onMousedDown} {...props} />).simulate('mousedown')
 
       onMousedDown.should.have.been.calledOnce()
-      onMousedDown.should.have.been.calledWithMatch({}, props)
+      onMousedDown.should.have.been.calledWithMatch({}, props, false, true)
     })
 
     it('sets focus to container', () => {
@@ -307,7 +294,7 @@ describe('Checkbox', () => {
       document.activeElement.should.equal(input)
     })
 
-    it('will not set focus to container, if default is prevented', () => {
+    it('does not set focus to container, if default is prevented', () => {
       wrapperMount(<Checkbox onMouseDown={(e) => e.preventDefault()} />)
 
       domEvent.fire('.ui.checkbox input', 'mousedown')
@@ -316,20 +303,24 @@ describe('Checkbox', () => {
   })
 
   describe('onMouseUp', () => {
-    it('is called with (event, data) on mouse up', () => {
+    it('is called on mouse up without changing the checked status', () => {
       const onMouseUp = sandbox.spy()
       const props = { name: 'foo', value: 'bar', checked: false, indeterminate: true }
       mount(<Checkbox onMouseUp={onMouseUp} {...props} />).simulate('mouseup')
 
       onMouseUp.should.have.been.calledOnce()
-      onMouseUp.should.have.been.calledWithMatch({}, props)
+      onMouseUp.should.have.been.calledWithMatch({}, props, false, true)
     })
 
-    it('is called with (event, data) on mouse up with right button', () => {
+    it('is called on mouse up with right button without changing the checked status', () => {
       const onMouseUp = sandbox.spy()
-      mount(<Checkbox id='foo' onMouseUp={onMouseUp} />).simulate('mouseup', { button: 2 })
+      const props = { name: 'foo', value: 'bar', checked: false, indeterminate: true }
+      mount(<Checkbox id='foo' onMouseUp={onMouseUp} {...props} />).simulate('mouseup', {
+        button: 2,
+      })
 
       onMouseUp.should.have.been.calledOnce()
+      onMouseUp.should.have.been.calledWithMatch({}, props, false, true)
     })
   })