From 0a425120bf85187ba10b072c14043be0eec372fa Mon Sep 17 00:00:00 2001 From: iman Date: Wed, 14 Sep 2022 11:58:15 +0430 Subject: [PATCH 1/9] refactor: migrating to ts [WIP] --- .../src/components/checkbox/checkbox.tsx | 104 ++++++++++++++++++ .../src/components/checkbox/checkbox.types.ts | 1 + 2 files changed, 105 insertions(+) create mode 100644 packages/components/src/components/checkbox/checkbox.tsx create mode 100644 packages/components/src/components/checkbox/checkbox.types.ts diff --git a/packages/components/src/components/checkbox/checkbox.tsx b/packages/components/src/components/checkbox/checkbox.tsx new file mode 100644 index 000000000000..e15dfb883631 --- /dev/null +++ b/packages/components/src/components/checkbox/checkbox.tsx @@ -0,0 +1,104 @@ +import classNames from 'classnames'; +import PropTypes from 'prop-types'; +import React, { MouseEventHandler, HTMLProps } from 'react'; +import Icon from '../icon'; +import Text from '../text'; + +type ICheckBoxProps = Omit, 'value'> & { + className: string; + classNameLabel: string; + defaultChecked: boolean; + disabled: boolean; + greyDisabled: boolean; + id: string; + label: string; //or object + onChange: MouseEventHandler; + value: boolean; + withTabIndex: string; +}; + +const Checkbox = React.forwardRef( + ( + { + className, + classNameLabel, + disabled, + id, + label, + defaultChecked, + onChange, // This needs to be here so it's not included in `otherProps` + value, + withTabIndex, + greyDisabled = false, + ...otherProps + }: ICheckBoxProps, + ref: React.Ref + ) => { + const [checked, setChecked] = React.useState(defaultChecked || value); + const input_ref = React.useRef(); + + const setRef = (el_input: HTMLInputElement) => { + input_ref.current = el_input; + if (ref) ref.current = el_input; + }; + + React.useEffect(() => { + setChecked(defaultChecked || value); + }, [value, defaultChecked]); + + const onInputChange = (e: any) => { + e.persist(); + setChecked(!checked); + onChange(e); + }; + + const handleKeyDown = (e: React.KeyboardEvent & { keyCode: number }): void => { + // Enter or space + if (!disabled && (e.key === 'Enter' || e.keyCode === 32)) { + onChange({ target: { name: input_ref.current.name, checked: !checked } }); + setChecked(!checked); + } + }; + + return ( + + ); + } +); + +Checkbox.displayName = 'Checkbox'; + +export default Checkbox; diff --git a/packages/components/src/components/checkbox/checkbox.types.ts b/packages/components/src/components/checkbox/checkbox.types.ts new file mode 100644 index 000000000000..aaf4046419cc --- /dev/null +++ b/packages/components/src/components/checkbox/checkbox.types.ts @@ -0,0 +1 @@ +import React from 'react'; From 5e17ec75e10b8d38e404adb86b665c611e16c38b Mon Sep 17 00:00:00 2001 From: iman Date: Wed, 14 Sep 2022 14:09:03 +0430 Subject: [PATCH 2/9] fix : fixed all TS errors [WIP] --- .../src/components/checkbox/checkbox.jsx | 104 ------------------ .../src/components/checkbox/checkbox.tsx | 28 ++--- .../checkbox/{index.js => index.ts} | 2 +- .../composite-checkbox/composite-checkbox.jsx | 2 +- 4 files changed, 12 insertions(+), 124 deletions(-) delete mode 100644 packages/components/src/components/checkbox/checkbox.jsx rename packages/components/src/components/checkbox/{index.js => index.ts} (57%) diff --git a/packages/components/src/components/checkbox/checkbox.jsx b/packages/components/src/components/checkbox/checkbox.jsx deleted file mode 100644 index 105c934b020e..000000000000 --- a/packages/components/src/components/checkbox/checkbox.jsx +++ /dev/null @@ -1,104 +0,0 @@ -import classNames from 'classnames'; -import PropTypes from 'prop-types'; -import React from 'react'; -import Icon from '../icon'; -import Text from '../text'; - -const Checkbox = React.forwardRef( - ( - { - className, - classNameLabel, - disabled, - id, - label, - defaultChecked, - onChange, // This needs to be here so it's not included in `otherProps` - value, - withTabIndex, - greyDisabled = false, - ...otherProps - }, - ref - ) => { - const [checked, setChecked] = React.useState(defaultChecked || value); - const input_ref = React.useRef(); - - const setRef = el_input => { - input_ref.current = el_input; - if (ref) ref.current = el_input; - }; - - React.useEffect(() => { - setChecked(defaultChecked || value); - }, [value, defaultChecked]); - - const onInputChange = e => { - e.persist(); - setChecked(!checked); - onChange(e); - }; - - const handleKeyDown = e => { - // Enter or space - if (!disabled && (e.key === 'Enter' || e.keyCode === 32)) { - onChange({ target: { name: input_ref.current.name, checked: !checked } }); - setChecked(!checked); - } - }; - - return ( - - ); - } -); - -Checkbox.displayName = 'Checkbox'; - -Checkbox.propTypes = { - className: PropTypes.string, - classNameLabel: PropTypes.string, - defaultChecked: PropTypes.bool, - disabled: PropTypes.bool, - greyDisabled: PropTypes.bool, - id: PropTypes.string, - label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), - onChange: PropTypes.func, - value: PropTypes.bool, - withTabIndex: PropTypes.string, -}; - -export default Checkbox; diff --git a/packages/components/src/components/checkbox/checkbox.tsx b/packages/components/src/components/checkbox/checkbox.tsx index e15dfb883631..beac0c99611d 100644 --- a/packages/components/src/components/checkbox/checkbox.tsx +++ b/packages/components/src/components/checkbox/checkbox.tsx @@ -1,23 +1,22 @@ import classNames from 'classnames'; -import PropTypes from 'prop-types'; import React, { MouseEventHandler, HTMLProps } from 'react'; import Icon from '../icon'; import Text from '../text'; -type ICheckBoxProps = Omit, 'value'> & { +type TCheckBoxProps = Omit, 'value'> & { className: string; classNameLabel: string; defaultChecked: boolean; disabled: boolean; greyDisabled: boolean; id: string; - label: string; //or object + label: string; //or object : packages/p2p/src/components/order-details/order-details-confirm-modal.jsx onChange: MouseEventHandler; value: boolean; withTabIndex: string; }; -const Checkbox = React.forwardRef( +const Checkbox = React.forwardRef( ( { className, @@ -31,22 +30,15 @@ const Checkbox = React.forwardRef( withTabIndex, greyDisabled = false, ...otherProps - }: ICheckBoxProps, - ref: React.Ref + }, + ref ) => { - const [checked, setChecked] = React.useState(defaultChecked || value); - const input_ref = React.useRef(); - - const setRef = (el_input: HTMLInputElement) => { - input_ref.current = el_input; - if (ref) ref.current = el_input; - }; - + const [checked, setChecked] = React.useState(defaultChecked); React.useEffect(() => { setChecked(defaultChecked || value); }, [value, defaultChecked]); - const onInputChange = (e: any) => { + const onInputChange = (e: React.FormEvent): void => { e.persist(); setChecked(!checked); onChange(e); @@ -55,7 +47,7 @@ const Checkbox = React.forwardRef( const handleKeyDown = (e: React.KeyboardEvent & { keyCode: number }): void => { // Enter or space if (!disabled && (e.key === 'Enter' || e.keyCode === 32)) { - onChange({ target: { name: input_ref.current.name, checked: !checked } }); + onChange(e); setChecked(!checked); } }; @@ -72,7 +64,7 @@ const Checkbox = React.forwardRef( className='dc-checkbox__input' type='checkbox' id={id} - ref={setRef} + ref={ref} disabled={disabled} onChange={onInputChange} defaultChecked={checked} @@ -86,7 +78,7 @@ const Checkbox = React.forwardRef( 'dc-checkbox--grey-disabled': disabled && greyDisabled, })} {...(withTabIndex?.length > 0 ? { tabIndex: withTabIndex } : {})} - tabIndex='0' + tabIndex={0} onKeyDown={handleKeyDown} > {!!checked && } diff --git a/packages/components/src/components/checkbox/index.js b/packages/components/src/components/checkbox/index.ts similarity index 57% rename from packages/components/src/components/checkbox/index.js rename to packages/components/src/components/checkbox/index.ts index af3383d8b430..3122c24cf599 100644 --- a/packages/components/src/components/checkbox/index.js +++ b/packages/components/src/components/checkbox/index.ts @@ -1,4 +1,4 @@ -import Checkbox from './checkbox.jsx'; +import Checkbox from './checkbox'; import './checkbox.scss'; export default Checkbox; diff --git a/packages/components/src/components/composite-checkbox/composite-checkbox.jsx b/packages/components/src/components/composite-checkbox/composite-checkbox.jsx index 0b327d56c4c8..e097f7ce1419 100644 --- a/packages/components/src/components/composite-checkbox/composite-checkbox.jsx +++ b/packages/components/src/components/composite-checkbox/composite-checkbox.jsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; import PropTypes from 'prop-types'; import React from 'react'; -import Checkbox from '../checkbox/checkbox.jsx'; +import Checkbox from '../checkbox/checkbox'; import Text from '../text'; const CompositeCheckbox = ({ name, value, onChange, className, label, id, description, children, ...props }) => { From b34b25851dbe57379ad231d9c894420f83a9722f Mon Sep 17 00:00:00 2001 From: iman Date: Wed, 14 Sep 2022 17:49:54 +0430 Subject: [PATCH 3/9] fix: added missed value --- .../components/src/components/checkbox/checkbox.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/components/src/components/checkbox/checkbox.tsx b/packages/components/src/components/checkbox/checkbox.tsx index beac0c99611d..e0ac31e277ca 100644 --- a/packages/components/src/components/checkbox/checkbox.tsx +++ b/packages/components/src/components/checkbox/checkbox.tsx @@ -33,7 +33,7 @@ const Checkbox = React.forwardRef( }, ref ) => { - const [checked, setChecked] = React.useState(defaultChecked); + const [checked, setChecked] = React.useState(defaultChecked || value); React.useEffect(() => { setChecked(defaultChecked || value); }, [value, defaultChecked]); @@ -81,11 +81,11 @@ const Checkbox = React.forwardRef( tabIndex={0} onKeyDown={handleKeyDown} > - {!!checked && } + {/* {!!checked && } */} - - {label} - + {/* */} + {label} + {/* */} ); } From 68214d6ce5f5718be532220b5619bf622923b435 Mon Sep 17 00:00:00 2001 From: iman Date: Wed, 14 Sep 2022 17:50:39 +0430 Subject: [PATCH 4/9] chore: uncomment Icon and Text component usage --- packages/components/src/components/checkbox/checkbox.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/components/src/components/checkbox/checkbox.tsx b/packages/components/src/components/checkbox/checkbox.tsx index e0ac31e277ca..4e346b1b0f49 100644 --- a/packages/components/src/components/checkbox/checkbox.tsx +++ b/packages/components/src/components/checkbox/checkbox.tsx @@ -81,11 +81,11 @@ const Checkbox = React.forwardRef( tabIndex={0} onKeyDown={handleKeyDown} > - {/* {!!checked && } */} + {!!checked && } - {/* */} - {label} - {/* */} + + {label} + ); } From d365b504a5b86f8eb8b48cb73d92583d49453bd9 Mon Sep 17 00:00:00 2001 From: iman Date: Wed, 14 Sep 2022 18:09:37 +0430 Subject: [PATCH 5/9] chore: removed checkbox.types.ts --- packages/components/src/components/checkbox/checkbox.types.ts | 1 - 1 file changed, 1 deletion(-) delete mode 100644 packages/components/src/components/checkbox/checkbox.types.ts diff --git a/packages/components/src/components/checkbox/checkbox.types.ts b/packages/components/src/components/checkbox/checkbox.types.ts deleted file mode 100644 index aaf4046419cc..000000000000 --- a/packages/components/src/components/checkbox/checkbox.types.ts +++ /dev/null @@ -1 +0,0 @@ -import React from 'react'; From 8c6a137e98aeb345b4bcb0d3938f2fba2cc82f4b Mon Sep 17 00:00:00 2001 From: Shayan Khaleghparast <100833613+iman-fs@users.noreply.github.com> Date: Thu, 15 Sep 2022 12:23:16 +0430 Subject: [PATCH 6/9] Update packages/components/src/components/checkbox/checkbox.tsx Co-authored-by: Maryia <103177211+maryia-binary@users.noreply.github.com> --- packages/components/src/components/checkbox/checkbox.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/components/checkbox/checkbox.tsx b/packages/components/src/components/checkbox/checkbox.tsx index 4e346b1b0f49..af9cc3de31cd 100644 --- a/packages/components/src/components/checkbox/checkbox.tsx +++ b/packages/components/src/components/checkbox/checkbox.tsx @@ -10,7 +10,7 @@ type TCheckBoxProps = Omit, 'value'> & { disabled: boolean; greyDisabled: boolean; id: string; - label: string; //or object : packages/p2p/src/components/order-details/order-details-confirm-modal.jsx + label: string; onChange: MouseEventHandler; value: boolean; withTabIndex: string; From cc419d0fedc50a4de607ac6e2fb411c118e8d7e7 Mon Sep 17 00:00:00 2001 From: iman Date: Thu, 15 Sep 2022 16:03:54 +0430 Subject: [PATCH 7/9] refactor: added pr review suggestions --- .../components/src/components/checkbox/checkbox.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/components/src/components/checkbox/checkbox.tsx b/packages/components/src/components/checkbox/checkbox.tsx index 4e346b1b0f49..a214efbb669a 100644 --- a/packages/components/src/components/checkbox/checkbox.tsx +++ b/packages/components/src/components/checkbox/checkbox.tsx @@ -10,8 +10,8 @@ type TCheckBoxProps = Omit, 'value'> & { disabled: boolean; greyDisabled: boolean; id: string; - label: string; //or object : packages/p2p/src/components/order-details/order-details-confirm-modal.jsx - onChange: MouseEventHandler; + label: string; + onChange: (e: React.ChangeEvent | React.KeyboardEvent) => void; value: boolean; withTabIndex: string; }; @@ -33,18 +33,18 @@ const Checkbox = React.forwardRef( }, ref ) => { - const [checked, setChecked] = React.useState(defaultChecked || value); + const [checked, setChecked] = React.useState(defaultChecked || value); React.useEffect(() => { setChecked(defaultChecked || value); }, [value, defaultChecked]); - const onInputChange = (e: React.FormEvent): void => { + const onInputChange: React.ChangeEventHandler = e => { e.persist(); setChecked(!checked); onChange(e); }; - const handleKeyDown = (e: React.KeyboardEvent & { keyCode: number }): void => { + const handleKeyDown: React.KeyboardEventHandler = e => { // Enter or space if (!disabled && (e.key === 'Enter' || e.keyCode === 32)) { onChange(e); From 50af559409ef0c86985d3c76e415ecde347c17ba Mon Sep 17 00:00:00 2001 From: iman Date: Wed, 28 Sep 2022 19:43:57 +0330 Subject: [PATCH 8/9] chore: added some changes --- .../src/components/checkbox/checkbox.tsx | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/components/src/components/checkbox/checkbox.tsx b/packages/components/src/components/checkbox/checkbox.tsx index a214efbb669a..9dde00b3259b 100644 --- a/packages/components/src/components/checkbox/checkbox.tsx +++ b/packages/components/src/components/checkbox/checkbox.tsx @@ -1,19 +1,19 @@ import classNames from 'classnames'; -import React, { MouseEventHandler, HTMLProps } from 'react'; +import React from 'react'; import Icon from '../icon'; import Text from '../text'; -type TCheckBoxProps = Omit, 'value'> & { - className: string; - classNameLabel: string; - defaultChecked: boolean; - disabled: boolean; - greyDisabled: boolean; - id: string; +type TCheckBoxProps = Omit, 'value'> & { + className?: string; + classNameLabel?: string; + defaultChecked?: boolean; + disabled?: boolean; + greyDisabled?: boolean; + id?: string; label: string; onChange: (e: React.ChangeEvent | React.KeyboardEvent) => void; - value: boolean; - withTabIndex: string; + value?: boolean; + withTabIndex?: string; }; const Checkbox = React.forwardRef( @@ -21,12 +21,12 @@ const Checkbox = React.forwardRef( { className, classNameLabel, - disabled, + disabled = false, id, label, defaultChecked, onChange, // This needs to be here so it's not included in `otherProps` - value, + value = false, withTabIndex, greyDisabled = false, ...otherProps @@ -77,7 +77,7 @@ const Checkbox = React.forwardRef( 'dc-checkbox__box--disabled': disabled, 'dc-checkbox--grey-disabled': disabled && greyDisabled, })} - {...(withTabIndex?.length > 0 ? { tabIndex: withTabIndex } : {})} + {...(withTabIndex && withTabIndex?.length > 0 ? { tabIndex: withTabIndex } : {})} tabIndex={0} onKeyDown={handleKeyDown} > From 2e7e8e02b041613628a7a330ba8acce3f524e644 Mon Sep 17 00:00:00 2001 From: iman Date: Sun, 2 Oct 2022 09:19:42 +0330 Subject: [PATCH 9/9] fix: resolve pr comments --- .../src/Components/personal-details/personal-details.jsx | 2 +- packages/components/src/components/checkbox/checkbox.tsx | 7 +++---- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/account/src/Components/personal-details/personal-details.jsx b/packages/account/src/Components/personal-details/personal-details.jsx index db43f3f7ddf2..aac707303ff6 100644 --- a/packages/account/src/Components/personal-details/personal-details.jsx +++ b/packages/account/src/Components/personal-details/personal-details.jsx @@ -562,7 +562,7 @@ const PersonalDetails = ({ {title} )} - withTabIndex='0' + withTabIndex={0} data-testid='tax_identification_confirm' /> )} diff --git a/packages/components/src/components/checkbox/checkbox.tsx b/packages/components/src/components/checkbox/checkbox.tsx index 9dde00b3259b..7e1400c895fb 100644 --- a/packages/components/src/components/checkbox/checkbox.tsx +++ b/packages/components/src/components/checkbox/checkbox.tsx @@ -13,7 +13,7 @@ type TCheckBoxProps = Omit, 'value'> & { label: string; onChange: (e: React.ChangeEvent | React.KeyboardEvent) => void; value?: boolean; - withTabIndex?: string; + withTabIndex?: number; }; const Checkbox = React.forwardRef( @@ -27,7 +27,7 @@ const Checkbox = React.forwardRef( defaultChecked, onChange, // This needs to be here so it's not included in `otherProps` value = false, - withTabIndex, + withTabIndex = 0, greyDisabled = false, ...otherProps }, @@ -77,8 +77,7 @@ const Checkbox = React.forwardRef( 'dc-checkbox__box--disabled': disabled, 'dc-checkbox--grey-disabled': disabled && greyDisabled, })} - {...(withTabIndex && withTabIndex?.length > 0 ? { tabIndex: withTabIndex } : {})} - tabIndex={0} + tabIndex={withTabIndex} onKeyDown={handleKeyDown} > {!!checked && }