From ee883a3d9c5835128af4f862b016f58540f4664a Mon Sep 17 00:00:00 2001 From: jayeshmangwani Date: Sat, 23 Apr 2022 11:51:06 +0530 Subject: [PATCH 1/8] statepicker refactored to compatible with form --- src/components/StatePicker.js | 38 ++++++++++++++++--- src/pages/ReimbursementAccount/CompanyStep.js | 3 +- .../settings/Payments/AddDebitCardPage.js | 4 +- src/stories/Form.stories.js | 11 ++++++ 4 files changed, 48 insertions(+), 8 deletions(-) diff --git a/src/components/StatePicker.js b/src/components/StatePicker.js index 11d4cad09f55..b7d6cef476d6 100644 --- a/src/components/StatePicker.js +++ b/src/components/StatePicker.js @@ -1,9 +1,10 @@ import _ from 'underscore'; -import React from 'react'; +import React,{forwardRef} from 'react'; import PropTypes from 'prop-types'; import {CONST} from 'expensify-common/lib/CONST'; import Picker from './Picker'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; +import * as FormUtils from '../libs/FormUtils'; const STATES = _.map(CONST.STATES, ({stateISO}) => ({ value: stateISO, @@ -15,30 +16,57 @@ const propTypes = { label: PropTypes.string, /** A callback method that is called when the value changes and it received the selected value as an argument */ - onChange: PropTypes.func.isRequired, + onInputChange: PropTypes.func.isRequired, /** The value that needs to be selected */ value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + /** Indicates that the input is being used with the Form component */ + isFormInput: PropTypes.bool, + + /** + * The ID used to uniquely identify the input + * + * @param {Object} props - props passed to the input + * @returns {Object} - returns an Error object if isFormInput is supplied but inputID is falsey or not a string + */ + inputID: props => FormUtils.validateInputIDProps(props), + + /** Saves a draft of the input value when used in a form */ + shouldSaveDraft: PropTypes.bool, + + /** Callback that is called when the text input is blurred */ + onBlur: PropTypes.func, + + /** Error text to display */ + errorText: PropTypes.string, + ...withLocalizePropTypes, }; const defaultProps = { label: '', value: '', + errorText: '', + shouldSaveDraft: false, }; -const StatePicker = props => ( +const StatePicker = forwardRef((props, ref) => ( -); +)); StatePicker.propTypes = propTypes; StatePicker.defaultProps = defaultProps; diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js index 384a7bfeba05..e0bf9e1eb4e9 100644 --- a/src/pages/ReimbursementAccount/CompanyStep.js +++ b/src/pages/ReimbursementAccount/CompanyStep.js @@ -287,8 +287,9 @@ class CompanyStep extends React.Component { this.clearErrorAndSetValue('incorporationState', value)} + onInputChange={value => this.clearErrorAndSetValue('incorporationState', value)} value={this.state.incorporationState} + errorText={this.getErrorText('incorporationState')} hasError={this.getErrors().incorporationState} /> diff --git a/src/pages/settings/Payments/AddDebitCardPage.js b/src/pages/settings/Payments/AddDebitCardPage.js index e6a8406c1cea..11ee8175c9e1 100644 --- a/src/pages/settings/Payments/AddDebitCardPage.js +++ b/src/pages/settings/Payments/AddDebitCardPage.js @@ -299,9 +299,9 @@ class DebitCardPage extends Component { this.clearErrorAndSetValue('addressState', value)} + onInputChange={value => this.clearErrorAndSetValue('addressState', value)} value={this.state.addressState} - hasError={lodashGet(this.state.errors, 'addressState', false)} + errorText={this.getErrorText('addressState')} /> diff --git a/src/stories/Form.stories.js b/src/stories/Form.stories.js index 262a9f3a1c90..1d84e64abd36 100644 --- a/src/stories/Form.stories.js +++ b/src/stories/Form.stories.js @@ -2,6 +2,7 @@ import React, {useState} from 'react'; import {View} from 'react-native'; import TextInput from '../components/TextInput'; import Picker from '../components/Picker'; +import StatePicker from '../components/StatePicker'; import AddressSearch from '../components/AddressSearch'; import Form from '../components/Form'; import * as FormActions from '../libs/actions/FormActions'; @@ -97,6 +98,12 @@ const Template = (args) => { ]} isFormInput /> + Date: Mon, 25 Apr 2022 10:50:05 +0530 Subject: [PATCH 2/8] Update src/components/StatePicker.js Co-authored-by: Rajat Parashar --- src/components/StatePicker.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/StatePicker.js b/src/components/StatePicker.js index b7d6cef476d6..ba5bbf444927 100644 --- a/src/components/StatePicker.js +++ b/src/components/StatePicker.js @@ -15,7 +15,7 @@ const propTypes = { /** The label for the field */ label: PropTypes.string, - /** A callback method that is called when the value changes and it received the selected value as an argument */ + /** A callback method that is called when the value changes and it receives the selected value as an argument. */ onInputChange: PropTypes.func.isRequired, /** The value that needs to be selected */ From 339d4416fb26d3237fee58c656d46b651ddfd720 Mon Sep 17 00:00:00 2001 From: jayeshmangwani Date: Mon, 25 Apr 2022 16:40:43 +0530 Subject: [PATCH 3/8] Removed hasError & containerStyles, changed value to undefined --- src/components/StatePicker.js | 4 +--- src/stories/Form.stories.js | 1 - 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/StatePicker.js b/src/components/StatePicker.js index b7d6cef476d6..9dc06146cda5 100644 --- a/src/components/StatePicker.js +++ b/src/components/StatePicker.js @@ -46,7 +46,7 @@ const propTypes = { const defaultProps = { label: '', - value: '', + value: undefined, errorText: '', shouldSaveDraft: false, }; @@ -59,10 +59,8 @@ const StatePicker = forwardRef((props, ref) => ( onInputChange={props.onInputChange} value={props.value} label={props.label || props.translate('common.state')} - hasError={props.hasError} errorText={props.errorText} onBlur={props.onBlur} - containerStyles={props.containerStyles} isFormInput={props.isFormInput} shouldSaveDraft={props.shouldSaveDraft} /> diff --git a/src/stories/Form.stories.js b/src/stories/Form.stories.js index 1d84e64abd36..79f65148a928 100644 --- a/src/stories/Form.stories.js +++ b/src/stories/Form.stories.js @@ -100,7 +100,6 @@ const Template = (args) => { /> From cee55cbf688e7ed7f9de61cbe3695852f83f33e6 Mon Sep 17 00:00:00 2001 From: jayeshmangwani Date: Mon, 25 Apr 2022 16:55:46 +0530 Subject: [PATCH 4/8] removed hasError prop from AddressForm & CompanyStep --- src/pages/ReimbursementAccount/AddressForm.js | 1 - src/pages/ReimbursementAccount/CompanyStep.js | 1 - 2 files changed, 2 deletions(-) diff --git a/src/pages/ReimbursementAccount/AddressForm.js b/src/pages/ReimbursementAccount/AddressForm.js index fdf0150f92d2..d8c866ae6463 100644 --- a/src/pages/ReimbursementAccount/AddressForm.js +++ b/src/pages/ReimbursementAccount/AddressForm.js @@ -72,7 +72,6 @@ const AddressForm = props => ( value={props.values.state} onChange={value => props.onFieldChange({state: value})} errorText={props.errors.state ? props.translate('bankAccount.error.addressState') : ''} - hasError={Boolean(props.errors.state)} /> diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js index e0bf9e1eb4e9..ed295e9e293b 100644 --- a/src/pages/ReimbursementAccount/CompanyStep.js +++ b/src/pages/ReimbursementAccount/CompanyStep.js @@ -290,7 +290,6 @@ class CompanyStep extends React.Component { onInputChange={value => this.clearErrorAndSetValue('incorporationState', value)} value={this.state.incorporationState} errorText={this.getErrorText('incorporationState')} - hasError={this.getErrors().incorporationState} /> Date: Tue, 26 Apr 2022 01:33:43 +0530 Subject: [PATCH 5/8] updated default props in StatePicker, defined incorporationState --- src/components/StatePicker.js | 10 +++++++--- src/pages/ReimbursementAccount/AddressForm.js | 2 +- src/pages/ReimbursementAccount/CompanyStep.js | 1 + src/stories/Form.stories.js | 13 ++++++++----- 4 files changed, 17 insertions(+), 9 deletions(-) diff --git a/src/components/StatePicker.js b/src/components/StatePicker.js index 62c769d669dd..a63452def986 100644 --- a/src/components/StatePicker.js +++ b/src/components/StatePicker.js @@ -1,5 +1,5 @@ import _ from 'underscore'; -import React,{forwardRef} from 'react'; +import React, {forwardRef} from 'react'; import PropTypes from 'prop-types'; import {CONST} from 'expensify-common/lib/CONST'; import Picker from './Picker'; @@ -31,7 +31,7 @@ const propTypes = { * @returns {Object} - returns an Error object if isFormInput is supplied but inputID is falsey or not a string */ inputID: props => FormUtils.validateInputIDProps(props), - + /** Saves a draft of the input value when used in a form */ shouldSaveDraft: PropTypes.bool, @@ -40,7 +40,7 @@ const propTypes = { /** Error text to display */ errorText: PropTypes.string, - + ...withLocalizePropTypes, }; @@ -49,11 +49,15 @@ const defaultProps = { value: undefined, errorText: '', shouldSaveDraft: false, + isFormInput: false, + inputID: undefined, + onBlur: () => {}, }; const StatePicker = forwardRef((props, ref) => ( ( props.onFieldChange({state: value})} + onInputChange={value => props.onFieldChange({state: value})} errorText={props.errors.state ? props.translate('bankAccount.error.addressState') : ''} /> diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js index ed295e9e293b..2e63c83ea2ea 100644 --- a/src/pages/ReimbursementAccount/CompanyStep.js +++ b/src/pages/ReimbursementAccount/CompanyStep.js @@ -85,6 +85,7 @@ class CompanyStep extends React.Component { incorporationDateFuture: 'bankAccount.error.incorporationDateFuture', incorporationType: 'bankAccount.error.companyType', hasNoConnectionToCannabis: 'bankAccount.error.restrictedBusiness', + incorporationState: 'bankAccount.error.incorporationState', }; this.getErrorText = inputKey => ReimbursementAccountUtils.getErrorText(this.props, this.errorTranslationKeys, inputKey); diff --git a/src/stories/Form.stories.js b/src/stories/Form.stories.js index 79f65148a928..1e966a499f50 100644 --- a/src/stories/Form.stories.js +++ b/src/stories/Form.stories.js @@ -23,6 +23,7 @@ const story = { AddressSearch, CheckboxWithLabel, Picker, + StatePicker, }, }; @@ -98,11 +99,13 @@ const Template = (args) => { ]} isFormInput /> - + + + Date: Tue, 26 Apr 2022 23:53:25 +0530 Subject: [PATCH 6/8] added default value for pickState --- src/stories/Form.stories.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/stories/Form.stories.js b/src/stories/Form.stories.js index 1e966a499f50..faca0e83f20e 100644 --- a/src/stories/Form.stories.js +++ b/src/stories/Form.stories.js @@ -196,6 +196,7 @@ const defaultArgs = { accountNumber: '1111222233331111', pickFruit: 'orange', pickAnotherFruit: 'apple', + pickState: 'AL', checkbox: false, }, }; From cae92e8963b3dd7255dfd6d82d39e7eaa210d64c Mon Sep 17 00:00:00 2001 From: jayeshmangwani Date: Wed, 27 Apr 2022 23:45:55 +0530 Subject: [PATCH 7/8] added defaultValue prop to StatePicker --- src/components/StatePicker.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/StatePicker.js b/src/components/StatePicker.js index a63452def986..52e7c9b56c14 100644 --- a/src/components/StatePicker.js +++ b/src/components/StatePicker.js @@ -41,6 +41,9 @@ const propTypes = { /** Error text to display */ errorText: PropTypes.string, + /** The default value of the state picker */ + defaultValue: PropTypes.string, + ...withLocalizePropTypes, }; @@ -62,6 +65,7 @@ const StatePicker = forwardRef((props, ref) => ( items={STATES} onInputChange={props.onInputChange} value={props.value} + defaultValue={props.defaultValue} label={props.label || props.translate('common.state')} errorText={props.errorText} onBlur={props.onBlur} From dcdb112fbdcc0def51fe6b24d0ee62ad94631d96 Mon Sep 17 00:00:00 2001 From: jayeshmangwani Date: Thu, 28 Apr 2022 13:16:20 +0530 Subject: [PATCH 8/8] added conditional value to StatePicker --- src/components/StatePicker.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/StatePicker.js b/src/components/StatePicker.js index 52e7c9b56c14..96b1a01d596c 100644 --- a/src/components/StatePicker.js +++ b/src/components/StatePicker.js @@ -50,6 +50,7 @@ const propTypes = { const defaultProps = { label: '', value: undefined, + defaultValue: undefined, errorText: '', shouldSaveDraft: false, isFormInput: false, @@ -64,8 +65,7 @@ const StatePicker = forwardRef((props, ref) => ( placeholder={{value: '', label: '-'}} items={STATES} onInputChange={props.onInputChange} - value={props.value} - defaultValue={props.defaultValue} + value={props.value ? props.value : props.defaultValue} label={props.label || props.translate('common.state')} errorText={props.errorText} onBlur={props.onBlur}