From aa7369a4a059e5be7d761fb8da75fd3037ca1a6e Mon Sep 17 00:00:00 2001 From: Mohammad Luthfi Fathur Rahman Date: Sat, 29 Oct 2022 00:14:23 +0700 Subject: [PATCH 1/6] fix datepicker doesn't show the value --- src/components/DatePicker/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/DatePicker/index.js b/src/components/DatePicker/index.js index 79dcd6e12585..b0223a9fa450 100644 --- a/src/components/DatePicker/index.js +++ b/src/components/DatePicker/index.js @@ -79,6 +79,7 @@ class DatePicker extends React.Component { onFocus={this.showDatepicker} label={this.props.label} onInputChange={this.setDate} + value={this.props.value} defaultValue={this.defaultValue} placeholder={this.props.placeholder} errorText={this.props.errorText} From 759020cb82463ab56c5d3b2fb9c3b4ad73fdb729 Mon Sep 17 00:00:00 2001 From: Mohammad Luthfi Fathur Rahman Date: Sat, 29 Oct 2022 00:15:12 +0700 Subject: [PATCH 2/6] refactor IdentityForm to works with Form.js --- .../ReimbursementAccount/IdentityForm.js | 45 +++++++++++++++++-- 1 file changed, 41 insertions(+), 4 deletions(-) diff --git a/src/pages/ReimbursementAccount/IdentityForm.js b/src/pages/ReimbursementAccount/IdentityForm.js index 7925133bbf1e..3bb5b6ce353f 100644 --- a/src/pages/ReimbursementAccount/IdentityForm.js +++ b/src/pages/ReimbursementAccount/IdentityForm.js @@ -1,9 +1,9 @@ import React from 'react'; import {View} from 'react-native'; import PropTypes from 'prop-types'; +import _ from 'underscore'; import TextInput from '../../components/TextInput'; import styles from '../../styles/styles'; -import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize'; import CONST from '../../CONST'; import DatePicker from '../../components/DatePicker'; import AddressForm from './AddressForm'; @@ -45,12 +45,39 @@ const propTypes = { /** Any errors that can arise from form validation */ errors: PropTypes.objectOf(PropTypes.bool), - ...withLocalizePropTypes, + /** The map for inputID of the inputs */ + inputKeys: PropTypes.shape({ + firstName: PropTypes.string, + lastName: PropTypes.string, + dob: PropTypes.string, + ssnLast4: PropTypes.string, + street: PropTypes.string, + city: PropTypes.string, + state: PropTypes.string, + zipCode: PropTypes.string, + }), + + /** Saves a draft of the input value when used in a form */ + shouldSaveDraft: PropTypes.bool, + + /** Returns translated string for given locale and phrase */ + translate: PropTypes.func.isRequired, }; const defaultProps = { style: {}, values: { + firstName: undefined, + lastName: undefined, + street: undefined, + city: undefined, + state: undefined, + zipCode: undefined, + dob: undefined, + ssnLast4: undefined, + }, + errors: {}, + inputKeys: { firstName: '', lastName: '', street: '', @@ -60,7 +87,7 @@ const defaultProps = { dob: '', ssnLast4: '', }, - errors: {}, + shouldSaveDraft: false, }; const IdentityForm = (props) => { @@ -73,6 +100,8 @@ const IdentityForm = (props) => { props.onFieldChange({firstName: value})} @@ -81,6 +110,8 @@ const IdentityForm = (props) => { props.onFieldChange({lastName: value})} @@ -89,6 +120,8 @@ const IdentityForm = (props) => { { maximumDate={new Date()} /> { maxLength={CONST.BANK_ACCOUNT.MAX_LENGTH.SSN} /> { IdentityForm.propTypes = propTypes; IdentityForm.defaultProps = defaultProps; IdentityForm.displayName = 'IdentityForm'; -export default withLocalize(IdentityForm); +export default IdentityForm; From b841838d3714ff1c415e9e18efd3b7b60f16abb3 Mon Sep 17 00:00:00 2001 From: Mohammad Luthfi Fathur Rahman Date: Sat, 29 Oct 2022 00:15:27 +0700 Subject: [PATCH 3/6] passing translate to IdentityForm --- src/pages/ReimbursementAccount/ACHContractStep.js | 1 + src/pages/ReimbursementAccount/RequestorStep.js | 1 + 2 files changed, 2 insertions(+) diff --git a/src/pages/ReimbursementAccount/ACHContractStep.js b/src/pages/ReimbursementAccount/ACHContractStep.js index a5b131922ac9..f6e21955b9b6 100644 --- a/src/pages/ReimbursementAccount/ACHContractStep.js +++ b/src/pages/ReimbursementAccount/ACHContractStep.js @@ -231,6 +231,7 @@ class ACHContractStep extends React.Component { {this.props.translate('beneficialOwnersStep.additionalOwner')} this.clearErrorAndSetBeneficialOwnerValues(index, values)} values={{ diff --git a/src/pages/ReimbursementAccount/RequestorStep.js b/src/pages/ReimbursementAccount/RequestorStep.js index 70e00a46b96e..05fc624d61be 100644 --- a/src/pages/ReimbursementAccount/RequestorStep.js +++ b/src/pages/ReimbursementAccount/RequestorStep.js @@ -221,6 +221,7 @@ class RequestorStep extends React.Component { ssnLast4: this.state.ssnLast4, }} errors={this.props.reimbursementAccount.errorFields} + translate={this.props.translate} /> Date: Wed, 2 Nov 2022 23:54:38 +0700 Subject: [PATCH 4/6] onFieldChange should be not required --- src/pages/ReimbursementAccount/IdentityForm.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/ReimbursementAccount/IdentityForm.js b/src/pages/ReimbursementAccount/IdentityForm.js index 3bb5b6ce353f..1c06061a44cb 100644 --- a/src/pages/ReimbursementAccount/IdentityForm.js +++ b/src/pages/ReimbursementAccount/IdentityForm.js @@ -13,7 +13,7 @@ const propTypes = { style: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]), /** Callback fired when a field changes. Passes args as {[fieldName]: val} */ - onFieldChange: PropTypes.func.isRequired, + onFieldChange: PropTypes.func, /** Form values */ values: PropTypes.shape({ @@ -88,6 +88,7 @@ const defaultProps = { ssnLast4: '', }, shouldSaveDraft: false, + onFieldChange: () => {}, }; const IdentityForm = (props) => { From bfcdb17619b7110e57e34e2846d52f8e0e53f0f4 Mon Sep 17 00:00:00 2001 From: Mohammad Luthfi Fathur Rahman Date: Thu, 3 Nov 2022 00:06:18 +0700 Subject: [PATCH 5/6] fix the date text to show on the text input --- src/components/DatePicker/index.android.js | 4 ++-- src/components/DatePicker/index.ios.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/DatePicker/index.android.js b/src/components/DatePicker/index.android.js index 77d7bbc705a2..813bf517d08b 100644 --- a/src/components/DatePicker/index.android.js +++ b/src/components/DatePicker/index.android.js @@ -39,7 +39,7 @@ class DatePicker extends React.Component { } render() { - const dateAsText = this.props.defaultValue ? moment(this.props.defaultValue).format(CONST.DATE.MOMENT_FORMAT_STRING) : ''; + const dateAsText = this.props.value || this.props.defaultValue ? moment(this.props.value || this.props.defaultValue).format(CONST.DATE.MOMENT_FORMAT_STRING) : ''; return ( <> @@ -62,7 +62,7 @@ class DatePicker extends React.Component { /> {this.state.isPickerVisible && ( Date: Thu, 3 Nov 2022 01:27:08 +0700 Subject: [PATCH 6/6] fix the error on controlled input --- src/components/DatePicker/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/DatePicker/index.js b/src/components/DatePicker/index.js index b0223a9fa450..9f3c93a50605 100644 --- a/src/components/DatePicker/index.js +++ b/src/components/DatePicker/index.js @@ -42,7 +42,7 @@ class DatePicker extends React.Component { */ setDate(text) { if (!text) { - this.props.onInputChange(null); + this.props.onInputChange(''); return; }