From 49b866ad29d9c088f05cd429e40c7961d70aeb1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ja=CC=81n=20Mikla=CC=81s=CC=8C?= <neosinner@gmail.com>
Date: Tue, 19 May 2020 10:50:28 +0200
Subject: [PATCH] Replace onChange prop with onCheck for Radio and Checkbox

onChange is already defined for HTML inputs and returns event, but we want to return boolean/array of values

[MAILPOET-2773]
---
 assets/js/src/common/form/checkbox/_stories/checkbox.tsx | 8 ++++----
 assets/js/src/common/form/checkbox/checkbox.tsx          | 6 +++---
 assets/js/src/common/form/checkbox/group.tsx             | 2 +-
 assets/js/src/common/form/radio/_stories/radio.tsx       | 8 ++++----
 assets/js/src/common/form/radio/group.tsx                | 4 ++--
 assets/js/src/common/form/radio/radio.tsx                | 6 +++---
 6 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/assets/js/src/common/form/checkbox/_stories/checkbox.tsx b/assets/js/src/common/form/checkbox/_stories/checkbox.tsx
index b38ca0d1ba..5831be8500 100644
--- a/assets/js/src/common/form/checkbox/_stories/checkbox.tsx
+++ b/assets/js/src/common/form/checkbox/_stories/checkbox.tsx
@@ -19,14 +19,14 @@ export const Checkboxes = () => (
     <Heading level={3}>Inline individual checkboxes</Heading>
     <div>
       <Checkbox
-        onChange={action('checkbox-individual-1')}
+        onCheck={action('checkbox-individual-1')}
         name="story"
         value="1"
       >
         Option 1
       </Checkbox>
       <Checkbox
-        onChange={action('checkbox-individual-2')}
+        onCheck={action('checkbox-individual-2')}
         name="story"
         value="2"
       >
@@ -39,7 +39,7 @@ export const Checkboxes = () => (
     <div>
       <Checkbox
         isFullWidth
-        onChange={action('checkbox-full-individual-1')}
+        onCheck={action('checkbox-full-individual-1')}
         name="story-full"
         value="1"
       >
@@ -47,7 +47,7 @@ export const Checkboxes = () => (
       </Checkbox>
       <Checkbox
         isFullWidth
-        onChange={action('checkbox-full-individual-2')}
+        onCheck={action('checkbox-full-individual-2')}
         name="story-full"
         value="2"
       >
diff --git a/assets/js/src/common/form/checkbox/checkbox.tsx b/assets/js/src/common/form/checkbox/checkbox.tsx
index a268e6dd84..6cd701a375 100644
--- a/assets/js/src/common/form/checkbox/checkbox.tsx
+++ b/assets/js/src/common/form/checkbox/checkbox.tsx
@@ -2,15 +2,15 @@ import React, { InputHTMLAttributes } from 'react';
 import classnames from 'classnames';
 
 type Props = InputHTMLAttributes<HTMLInputElement> & {
+  onCheck: (isChecked: boolean) => void,
   children?: React.ReactNode,
   isFullWidth?: boolean,
-  onChange?: (boolean) => void,
 };
 
 const Checkbox = ({
   children,
   isFullWidth,
-  onChange,
+  onCheck,
   ...attributes
 }: Props) => (
   <label
@@ -23,7 +23,7 @@ const Checkbox = ({
   >
     <input
       type="checkbox"
-      onChange={(e) => onChange(e.target.checked)}
+      onChange={(e) => onCheck(e.target.checked)}
       {...attributes}
     />
     <span className="mailpoet-form-checkbox-control" />
diff --git a/assets/js/src/common/form/checkbox/group.tsx b/assets/js/src/common/form/checkbox/group.tsx
index 47e6f36ae5..3464daf3c5 100644
--- a/assets/js/src/common/form/checkbox/group.tsx
+++ b/assets/js/src/common/form/checkbox/group.tsx
@@ -45,7 +45,7 @@ const CheckboxGroup = ({
           key={label}
           name={name}
           value={value}
-          onChange={(isChecked) => handleChange(value, isChecked)}
+          onCheck={(isChecked) => handleChange(value, isChecked)}
           isFullWidth={isFullWidth}
           {...attributes} // eslint-disable-line react/jsx-props-no-spreading
         >
diff --git a/assets/js/src/common/form/radio/_stories/radio.tsx b/assets/js/src/common/form/radio/_stories/radio.tsx
index 30bf5a5640..c7aceec25e 100644
--- a/assets/js/src/common/form/radio/_stories/radio.tsx
+++ b/assets/js/src/common/form/radio/_stories/radio.tsx
@@ -19,14 +19,14 @@ export const Radios = () => (
     <Heading level={3}>Inline individual radios</Heading>
     <div>
       <Radio
-        onChange={action('radio-individual-1')}
+        onCheck={action('radio-individual-1')}
         name="story"
         value="1"
       >
         Option 1
       </Radio>
       <Radio
-        onChange={action('radio-individual-2')}
+        onCheck={action('radio-individual-2')}
         name="story"
         value="2"
       >
@@ -39,7 +39,7 @@ export const Radios = () => (
     <div>
       <Radio
         isFullWidth
-        onChange={action('radio-full-individual-1')}
+        onCheck={action('radio-full-individual-1')}
         name="story-full"
         value="1"
       >
@@ -47,7 +47,7 @@ export const Radios = () => (
       </Radio>
       <Radio
         isFullWidth
-        onChange={action('radio-full-individual-2')}
+        onCheck={action('radio-full-individual-2')}
         name="story-full"
         value="2"
       >
diff --git a/assets/js/src/common/form/radio/group.tsx b/assets/js/src/common/form/radio/group.tsx
index ca5bdf3b5b..1bcfee48cf 100644
--- a/assets/js/src/common/form/radio/group.tsx
+++ b/assets/js/src/common/form/radio/group.tsx
@@ -12,7 +12,7 @@ type Props = {
   options: RadioProps[],
   defaultValue?: RadioValueType,
   isFullWidth?: boolean,
-  onChange?: (RadioValueType) => void,
+  onChange?: (value: RadioValueType) => void,
 };
 
 const RadioGroup = ({
@@ -37,7 +37,7 @@ const RadioGroup = ({
           key={label}
           name={name}
           value={value}
-          onChange={() => handleChange(value)}
+          onCheck={() => handleChange(value)}
           isFullWidth={isFullWidth}
           {...attributes} // eslint-disable-line react/jsx-props-no-spreading
         >
diff --git a/assets/js/src/common/form/radio/radio.tsx b/assets/js/src/common/form/radio/radio.tsx
index 9e1d6ae37f..ae1db59470 100644
--- a/assets/js/src/common/form/radio/radio.tsx
+++ b/assets/js/src/common/form/radio/radio.tsx
@@ -2,15 +2,15 @@ import React, { InputHTMLAttributes } from 'react';
 import classnames from 'classnames';
 
 type Props = InputHTMLAttributes<HTMLInputElement> & {
+  onCheck: (isChecked: boolean) => void,
   children?: React.ReactNode,
   isFullWidth?: boolean,
-  onChange?: (boolean) => void,
 };
 
 const Radio = ({
   children,
   isFullWidth,
-  onChange,
+  onCheck,
   ...attributes
 }: Props) => (
   <label
@@ -23,7 +23,7 @@ const Radio = ({
   >
     <input
       type="radio"
-      onChange={(e) => onChange(e.target.checked)}
+      onChange={(e) => onCheck(e.target.checked)}
       {...attributes}
     />
     <span className="mailpoet-form-radio-control" />