From f8376371a9f7a26148c5ce65282487d89ba90e27 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Mon, 18 Apr 2022 14:20:48 -0600 Subject: [PATCH 1/5] rm default value and event handler from form stories --- src/stories/Form.stories.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/stories/Form.stories.js b/src/stories/Form.stories.js index e0e551bb17c9..262a9f3a1c90 100644 --- a/src/stories/Form.stories.js +++ b/src/stories/Form.stories.js @@ -26,8 +26,6 @@ const story = { }; const Template = (args) => { - const [isChecked, setIsChecked] = useState(args.draftValues.checkbox); - // Form consumes data from Onyx, so we initialize Onyx with the necessary data here FormActions.setIsSubmitting(args.formID, args.formState.isSubmitting); FormActions.setServerErrorMessage(args.formID, args.formState.serverErrorMessage); @@ -101,10 +99,7 @@ const Template = (args) => { /> { setIsChecked(prev => !prev); }} isFormInput shouldSaveDraft LabelComponent={() => ( From ce5d2e1d3bfdeeb28cc979661ee0d404918c1f95 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Mon, 18 Apr 2022 14:49:59 -0600 Subject: [PATCH 2/5] rename onChange in usages of CheckboxWithLabel --- src/components/CheckboxWithLabel.js | 12 ++++-------- src/pages/EnablePayments/TermsStep.js | 4 ++-- src/pages/ReimbursementAccount/ACHContractStep.js | 8 ++++---- src/pages/ReimbursementAccount/BankAccountStep.js | 2 +- src/pages/ReimbursementAccount/CompanyStep.js | 2 +- src/pages/ReimbursementAccount/RequestorStep.js | 2 +- src/pages/settings/Payments/AddDebitCardPage.js | 2 +- src/pages/settings/Profile/ProfilePage.js | 2 +- 8 files changed, 15 insertions(+), 19 deletions(-) diff --git a/src/components/CheckboxWithLabel.js b/src/components/CheckboxWithLabel.js index f494895af102..9b76374ce65c 100644 --- a/src/components/CheckboxWithLabel.js +++ b/src/components/CheckboxWithLabel.js @@ -10,13 +10,10 @@ import * as FormUtils from '../libs/FormUtils'; const propTypes = { /** Whether the checkbox is checked */ - isChecked: PropTypes.bool.isRequired, + isChecked: PropTypes.bool, /** Called when the checkbox or label is pressed */ - onPress: PropTypes.func.isRequired, - - /** Called when the checkbox or label is pressed */ - onChange: PropTypes.func, + onInputChange: PropTypes.func.isRequired, /** Container styles */ style: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]), @@ -46,7 +43,6 @@ const propTypes = { }; const defaultProps = { - onChange: () => {}, isFormInput: false, inputID: undefined, style: [], @@ -54,6 +50,7 @@ const defaultProps = { LabelComponent: undefined, errorText: '', shouldSaveDraft: false, + isChecked: false, }; const CheckboxWithLabel = React.forwardRef((props, ref) => { @@ -62,8 +59,7 @@ const CheckboxWithLabel = React.forwardRef((props, ref) => { const wrapperStyles = _.isArray(props.style) ? [...defaultStyles, ...props.style] : [...defaultStyles, props.style]; function toggleCheckbox() { - props.onPress(!props.isChecked); - props.onChange(!props.isChecked); + props.onInputChange(!props.isChecked); } if (!props.label && !LabelComponent) { diff --git a/src/pages/EnablePayments/TermsStep.js b/src/pages/EnablePayments/TermsStep.js index 823c61739649..c1da54aa6aec 100644 --- a/src/pages/EnablePayments/TermsStep.js +++ b/src/pages/EnablePayments/TermsStep.js @@ -76,7 +76,7 @@ class TermsStep extends React.Component { ( {`${this.props.translate('termsStep.haveReadAndAgree')}`} @@ -88,7 +88,7 @@ class TermsStep extends React.Component { /> ( <> diff --git a/src/pages/ReimbursementAccount/ACHContractStep.js b/src/pages/ReimbursementAccount/ACHContractStep.js index 30b99f2f9f05..20c9d5f663ec 100644 --- a/src/pages/ReimbursementAccount/ACHContractStep.js +++ b/src/pages/ReimbursementAccount/ACHContractStep.js @@ -185,7 +185,7 @@ class ACHContractStep extends React.Component { this.toggleCheckbox('ownsMoreThan25Percent')} + onInputChange={() => this.toggleCheckbox('ownsMoreThan25Percent')} LabelComponent={() => ( {this.props.translate('beneficialOwnersStep.iOwnMoreThan25Percent')} @@ -196,7 +196,7 @@ class ACHContractStep extends React.Component { { + onInputChange={() => { this.setState((prevState) => { const hasOtherBeneficialOwners = !prevState.hasOtherBeneficialOwners; const newState = { @@ -259,7 +259,7 @@ class ACHContractStep extends React.Component { this.toggleCheckbox('acceptTermsAndConditions')} + onInputChange={() => this.toggleCheckbox('acceptTermsAndConditions')} LabelComponent={() => ( {this.props.translate('common.iAcceptThe')} @@ -274,7 +274,7 @@ class ACHContractStep extends React.Component { this.toggleCheckbox('certifyTrueInformation')} + onInputChange={() => this.toggleCheckbox('certifyTrueInformation')} LabelComponent={() => ( {this.props.translate('beneficialOwnersStep.certifyTrueAndAccurate')} )} diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js index a3dff5c46aff..0f57fba0cf57 100644 --- a/src/pages/ReimbursementAccount/BankAccountStep.js +++ b/src/pages/ReimbursementAccount/BankAccountStep.js @@ -302,7 +302,7 @@ class BankAccountStep extends React.Component { ( diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js index 6a95f2e56b44..384a7bfeba05 100644 --- a/src/pages/ReimbursementAccount/CompanyStep.js +++ b/src/pages/ReimbursementAccount/CompanyStep.js @@ -294,7 +294,7 @@ class CompanyStep extends React.Component { { + onInputChange={() => { this.setState((prevState) => { const newState = {hasNoConnectionToCannabis: !prevState.hasNoConnectionToCannabis}; BankAccounts.updateReimbursementAccountDraft(newState); diff --git a/src/pages/ReimbursementAccount/RequestorStep.js b/src/pages/ReimbursementAccount/RequestorStep.js index 04237bda2c21..1e2506ac3f0a 100644 --- a/src/pages/ReimbursementAccount/RequestorStep.js +++ b/src/pages/ReimbursementAccount/RequestorStep.js @@ -211,7 +211,7 @@ class RequestorStep extends React.Component { /> { + onInputChange={() => { this.setState((prevState) => { const newState = {isControllingOfficer: !prevState.isControllingOfficer}; BankAccounts.updateReimbursementAccountDraft(newState); diff --git a/src/pages/settings/Payments/AddDebitCardPage.js b/src/pages/settings/Payments/AddDebitCardPage.js index 84b45ed49170..e6a8406c1cea 100644 --- a/src/pages/settings/Payments/AddDebitCardPage.js +++ b/src/pages/settings/Payments/AddDebitCardPage.js @@ -318,7 +318,7 @@ class DebitCardPage extends Component { { + onInputChange={() => { this.setState(prevState => ({ acceptedTerms: !prevState.acceptedTerms, errors: { diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js index 333412eac91d..ad58f15e3a6f 100755 --- a/src/pages/settings/Profile/ProfilePage.js +++ b/src/pages/settings/Profile/ProfilePage.js @@ -298,7 +298,7 @@ class ProfilePage extends Component { From f0f097005eafc556cb28498ab3e7707ba8762754 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Mon, 18 Apr 2022 15:11:49 -0600 Subject: [PATCH 3/5] use local isChecked --- src/components/CheckboxWithLabel.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/CheckboxWithLabel.js b/src/components/CheckboxWithLabel.js index 9b76374ce65c..3cc0b2b74d57 100644 --- a/src/components/CheckboxWithLabel.js +++ b/src/components/CheckboxWithLabel.js @@ -57,9 +57,11 @@ const CheckboxWithLabel = React.forwardRef((props, ref) => { const LabelComponent = props.LabelComponent; const defaultStyles = [styles.flexRow, styles.alignItemsCenter]; const wrapperStyles = _.isArray(props.style) ? [...defaultStyles, ...props.style] : [...defaultStyles, props.style]; + let isChecked = props.defaultValue ? props.defaultValue : props.isChecked; function toggleCheckbox() { - props.onInputChange(!props.isChecked); + props.onInputChange(!isChecked); + isChecked = !isChecked; } if (!props.label && !LabelComponent) { @@ -69,7 +71,7 @@ const CheckboxWithLabel = React.forwardRef((props, ref) => { <> Date: Mon, 18 Apr 2022 16:06:08 -0600 Subject: [PATCH 4/5] declare and spread props --- src/components/CheckboxWithLabel.js | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/src/components/CheckboxWithLabel.js b/src/components/CheckboxWithLabel.js index 3cc0b2b74d57..b8558595914b 100644 --- a/src/components/CheckboxWithLabel.js +++ b/src/components/CheckboxWithLabel.js @@ -30,6 +30,12 @@ const propTypes = { /** Indicates that the input is being used with the Form component */ isFormInput: PropTypes.bool, + /** The default value for the checkbox */ + defaultValue: PropTypes.bool, + + /** React ref being forwarded to the Checkbox input */ + forwardedRef: PropTypes.func, + /** * The ID used to uniquely identify the input * @@ -51,9 +57,11 @@ const defaultProps = { errorText: '', shouldSaveDraft: false, isChecked: false, + defaultValue: false, + forwardedRef: () => {}, }; -const CheckboxWithLabel = React.forwardRef((props, ref) => { +const CheckboxWithLabel = (props) => { const LabelComponent = props.LabelComponent; const defaultStyles = [styles.flexRow, styles.alignItemsCenter]; const wrapperStyles = _.isArray(props.style) ? [...defaultStyles, ...props.style] : [...defaultStyles, props.style]; @@ -75,7 +83,7 @@ const CheckboxWithLabel = React.forwardRef((props, ref) => { onPress={toggleCheckbox} label={props.label} hasError={Boolean(props.errorText)} - forwardedRef={ref} + forwardedRef={props.forwardedRef} isFormInput={props.isFormInput} inputID={props.inputID} shouldSaveDraft={props.shouldSaveDraft} @@ -105,10 +113,13 @@ const CheckboxWithLabel = React.forwardRef((props, ref) => { ); -}); +}; CheckboxWithLabel.propTypes = propTypes; CheckboxWithLabel.defaultProps = defaultProps; CheckboxWithLabel.displayName = 'CheckboxWithLabel'; -export default CheckboxWithLabel; +export default React.forwardRef((props, ref) => ( + // eslint-disable-next-line react/jsx-props-no-spreading + +)); From 187aa689128668e5ed0e3ccf1ace61b0d503423e Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Mon, 18 Apr 2022 17:05:44 -0600 Subject: [PATCH 5/5] add comment --- src/components/CheckboxWithLabel.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/CheckboxWithLabel.js b/src/components/CheckboxWithLabel.js index b8558595914b..0b355d05fa21 100644 --- a/src/components/CheckboxWithLabel.js +++ b/src/components/CheckboxWithLabel.js @@ -65,6 +65,8 @@ const CheckboxWithLabel = (props) => { const LabelComponent = props.LabelComponent; const defaultStyles = [styles.flexRow, styles.alignItemsCenter]; const wrapperStyles = _.isArray(props.style) ? [...defaultStyles, ...props.style] : [...defaultStyles, props.style]; + + // We keep track of the checkbox "state" in a local variable so that this component has an uncontrolled input interface let isChecked = props.defaultValue ? props.defaultValue : props.isChecked; function toggleCheckbox() {