From 99e4be9c7f2331f50174bcb7761c378959a8bef2 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Mon, 25 Apr 2022 12:56:18 -0600 Subject: [PATCH 01/20] add DatePicker to Form stories --- src/stories/Form.stories.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/stories/Form.stories.js b/src/stories/Form.stories.js index 262a9f3a1c90..f391fdaabf56 100644 --- a/src/stories/Form.stories.js +++ b/src/stories/Form.stories.js @@ -3,6 +3,7 @@ import {View} from 'react-native'; import TextInput from '../components/TextInput'; import Picker from '../components/Picker'; import AddressSearch from '../components/AddressSearch'; +import DatePicker from '../components/DatePicker'; import Form from '../components/Form'; import * as FormActions from '../libs/actions/FormActions'; import styles from '../styles/styles'; @@ -22,6 +23,7 @@ const story = { AddressSearch, CheckboxWithLabel, Picker, + DatePicker, }, }; @@ -54,6 +56,12 @@ const Template = (args) => { containerStyles={[styles.mt4]} isFormInput /> + Date: Mon, 25 Apr 2022 12:56:46 -0600 Subject: [PATCH 02/20] call onInputChange in setDate --- src/components/DatePicker/index.android.js | 8 ++++---- src/components/DatePicker/index.ios.js | 1 + src/components/DatePicker/index.js | 10 +++++----- 3 files changed, 10 insertions(+), 9 deletions(-) diff --git a/src/components/DatePicker/index.android.js b/src/components/DatePicker/index.android.js index bc6a8ea54222..0dc5111f9efc 100644 --- a/src/components/DatePicker/index.android.js +++ b/src/components/DatePicker/index.android.js @@ -14,7 +14,7 @@ class DatePicker extends React.Component { }; this.showPicker = this.showPicker.bind(this); - this.raiseDateChange = this.raiseDateChange.bind(this); + this.setDate = this.setDate.bind(this); } /** @@ -29,9 +29,9 @@ class DatePicker extends React.Component { * @param {Event} event * @param {Date} selectedDate */ - raiseDateChange(event, selectedDate) { + setDate(event, selectedDate) { if (event.type === 'set') { - this.props.onChange(selectedDate); + this.props.onInputChange(selectedDate); } this.setState({isPickerVisible: false}); @@ -57,7 +57,7 @@ class DatePicker extends React.Component { )} diff --git a/src/components/DatePicker/index.ios.js b/src/components/DatePicker/index.ios.js index 6a1bd98de987..dd88c3078af7 100644 --- a/src/components/DatePicker/index.ios.js +++ b/src/components/DatePicker/index.ios.js @@ -61,6 +61,7 @@ class Datepicker extends React.Component { * @param {Date} selectedDate */ updateLocalDate(event, selectedDate) { + this.props.onInputChange(selectedDate); this.setState({selectedDate}); } diff --git a/src/components/DatePicker/index.js b/src/components/DatePicker/index.js index a324c25ae878..032ce8b4e715 100644 --- a/src/components/DatePicker/index.js +++ b/src/components/DatePicker/index.js @@ -16,7 +16,7 @@ class Datepicker extends React.Component { constructor(props) { super(props); - this.raiseDateChange = this.raiseDateChange.bind(this); + this.setDate = this.setDate.bind(this); this.showDatepicker = this.showDatepicker.bind(this); /* We're using uncontrolled input otherwise it wont be possible to @@ -40,15 +40,15 @@ class Datepicker extends React.Component { * Trigger the `onChange` handler when the user input has a complete date or is cleared * @param {String} text */ - raiseDateChange(text) { + setDate(text) { if (!text) { - this.props.onChange(null); + this.props.onInputChange(null); return; } const asMoment = moment(text); if (asMoment.isValid()) { - this.props.onChange(asMoment.format(CONST.DATE.MOMENT_FORMAT_STRING)); + this.props.onInputChange(asMoment.format(CONST.DATE.MOMENT_FORMAT_STRING)); } } @@ -72,7 +72,7 @@ class Datepicker extends React.Component { ref={input => this.inputRef = input} onFocus={this.showDatepicker} label={this.props.label} - onChangeText={this.raiseDateChange} + onInputChange={this.setDate} defaultValue={this.defaultValue} placeholder={this.props.placeholder} hasError={this.props.hasError} From 941f184dc5c5b370779ead9198d9750de40692ff Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Mon, 25 Apr 2022 12:57:41 -0600 Subject: [PATCH 03/20] rename onInputChange in all calls of DatePicker --- src/pages/EnablePayments/AdditionalDetailsStep.js | 2 +- src/pages/ReimbursementAccount/CompanyStep.js | 2 +- src/pages/ReimbursementAccount/IdentityForm.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/EnablePayments/AdditionalDetailsStep.js b/src/pages/EnablePayments/AdditionalDetailsStep.js index b4842ca7792a..e41dab46cc64 100644 --- a/src/pages/EnablePayments/AdditionalDetailsStep.js +++ b/src/pages/EnablePayments/AdditionalDetailsStep.js @@ -320,7 +320,7 @@ class AdditionalDetailsStep extends React.Component { this.clearErrorAndSetValue('dob', val)} + onInputChange={val => this.clearErrorAndSetValue('dob', val)} value={this.props.walletAdditionalDetailsDraft.dob || ''} placeholder={this.props.translate('common.dob')} errorText={this.getErrorText('dob')} diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js index 384a7bfeba05..c61c7a59ab11 100644 --- a/src/pages/ReimbursementAccount/CompanyStep.js +++ b/src/pages/ReimbursementAccount/CompanyStep.js @@ -277,7 +277,7 @@ class CompanyStep extends React.Component { { containerStyles={[styles.mt4]} placeholder={props.translate('common.dateFormat')} value={props.values.dob} - onChange={value => props.onFieldChange({dob: value})} + onInputChange={value => props.onFieldChange({dob: value})} errorText={dobErrorText} maximumDate={new Date()} /> From 7284e8a49b7f72ad4e9f9e6150a0f05f6ce37727 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Mon, 25 Apr 2022 12:58:37 -0600 Subject: [PATCH 04/20] rm hasError --- src/components/DatePicker/index.android.js | 1 - src/components/DatePicker/index.ios.js | 1 - src/components/DatePicker/index.js | 1 - 3 files changed, 3 deletions(-) diff --git a/src/components/DatePicker/index.android.js b/src/components/DatePicker/index.android.js index 0dc5111f9efc..1b69b7167add 100644 --- a/src/components/DatePicker/index.android.js +++ b/src/components/DatePicker/index.android.js @@ -46,7 +46,6 @@ class DatePicker extends React.Component { label={this.props.label} value={dateAsText} placeholder={this.props.placeholder} - hasError={this.props.hasError} errorText={this.props.errorText} containerStyles={this.props.containerStyles} onPress={this.showPicker} diff --git a/src/components/DatePicker/index.ios.js b/src/components/DatePicker/index.ios.js index dd88c3078af7..d4a607e05245 100644 --- a/src/components/DatePicker/index.ios.js +++ b/src/components/DatePicker/index.ios.js @@ -73,7 +73,6 @@ class Datepicker extends React.Component { label={this.props.label} value={dateAsText} placeholder={this.props.placeholder} - hasError={this.props.hasError} errorText={this.props.errorText} containerStyles={this.props.containerStyles} onPress={this.showPicker} diff --git a/src/components/DatePicker/index.js b/src/components/DatePicker/index.js index 032ce8b4e715..138a07fa734b 100644 --- a/src/components/DatePicker/index.js +++ b/src/components/DatePicker/index.js @@ -75,7 +75,6 @@ class Datepicker extends React.Component { onInputChange={this.setDate} defaultValue={this.defaultValue} placeholder={this.props.placeholder} - hasError={this.props.hasError} errorText={this.props.errorText} containerStyles={this.props.containerStyles} disabled={this.props.disabled} From 381945d96ca9443248078c057c22ce04f75536a6 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Mon, 25 Apr 2022 13:01:43 -0600 Subject: [PATCH 05/20] fix datepicker validate error --- src/stories/Form.stories.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stories/Form.stories.js b/src/stories/Form.stories.js index f391fdaabf56..5e45076a8c7a 100644 --- a/src/stories/Form.stories.js +++ b/src/stories/Form.stories.js @@ -167,7 +167,7 @@ const defaultArgs = { errors.accountNumber = 'Please enter an account number'; } if (!values.dob) { - errors.accountNumber = 'Please enter your date of birth'; + errors.dob = 'Please enter your date of birth'; } if (!values.pickFruit) { errors.pickFruit = 'Please select a fruit'; From 76e35a468f5bbe945b16e7ad3415435ed4c51212 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Mon, 25 Apr 2022 13:09:26 -0600 Subject: [PATCH 06/20] add defaultValue --- src/components/DatePicker/index.android.js | 6 +++--- src/components/DatePicker/index.ios.js | 6 +++--- src/components/DatePicker/index.js | 4 ++-- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/DatePicker/index.android.js b/src/components/DatePicker/index.android.js index 1b69b7167add..f79a8a7b486a 100644 --- a/src/components/DatePicker/index.android.js +++ b/src/components/DatePicker/index.android.js @@ -38,13 +38,13 @@ class DatePicker extends React.Component { } render() { - const dateAsText = this.props.value ? moment(this.props.value).format(CONST.DATE.MOMENT_FORMAT_STRING) : ''; + const dateAsText = this.props.defaultValue ? moment(this.props.defaultValue).format(CONST.DATE.MOMENT_FORMAT_STRING) : ''; return ( <> {this.state.isPickerVisible && ( Date: Mon, 25 Apr 2022 13:25:17 -0600 Subject: [PATCH 07/20] forward ref --- src/components/DatePicker/index.android.js | 14 +++++++++++++- src/components/DatePicker/index.ios.js | 14 +++++++++++++- src/components/DatePicker/index.js | 16 ++++++++++++++-- 3 files changed, 40 insertions(+), 4 deletions(-) diff --git a/src/components/DatePicker/index.android.js b/src/components/DatePicker/index.android.js index f79a8a7b486a..4f761a05a4fa 100644 --- a/src/components/DatePicker/index.android.js +++ b/src/components/DatePicker/index.android.js @@ -51,6 +51,15 @@ class DatePicker extends React.Component { onPress={this.showPicker} editable={false} disabled={this.props.disabled} + ref={(input) => { + if (!this.props.innerRef) { + return; + } + + if (_.isFunction(this.props.innerRef)) { + this.props.innerRef(input); + } + }} /> {this.state.isPickerVisible && ( ( + /* eslint-disable-next-line react/jsx-props-no-spreading */ + +)); diff --git a/src/components/DatePicker/index.ios.js b/src/components/DatePicker/index.ios.js index ed5e81c11432..3667785b46f1 100644 --- a/src/components/DatePicker/index.ios.js +++ b/src/components/DatePicker/index.ios.js @@ -78,6 +78,15 @@ class Datepicker extends React.Component { onPress={this.showPicker} editable={false} disabled={this.props.disabled} + ref={(input) => { + if (!this.props.innerRef) { + return; + } + + if (_.isFunction(this.props.innerRef)) { + this.props.innerRef(input); + } + }} /> ( + /* eslint-disable-next-line react/jsx-props-no-spreading */ + +))); diff --git a/src/components/DatePicker/index.js b/src/components/DatePicker/index.js index 0e3efb2b9004..236ea35e00c8 100644 --- a/src/components/DatePicker/index.js +++ b/src/components/DatePicker/index.js @@ -69,7 +69,16 @@ class Datepicker extends React.Component { return ( this.inputRef = input} + ref={(input) => { + this.inputRef = input; + if (!this.props.innerRef) { + return; + } + + if (_.isFunction(this.props.innerRef)) { + this.props.innerRef(input); + } + }} onFocus={this.showDatepicker} label={this.props.label} onInputChange={this.setDate} @@ -86,4 +95,7 @@ class Datepicker extends React.Component { Datepicker.propTypes = datePickerPropTypes; Datepicker.defaultProps = defaultProps; -export default withWindowDimensions(Datepicker); +export default withWindowDimensions(React.forwardRef((props, ref) => ( + /* eslint-disable-next-line react/jsx-props-no-spreading */ + +))); From 0d71ee02d5c7ac81a4f6ec3afba018017553b2fe Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Mon, 25 Apr 2022 13:27:51 -0600 Subject: [PATCH 08/20] pass onBLur --- src/components/DatePicker/index.android.js | 1 + src/components/DatePicker/index.ios.js | 1 + src/components/DatePicker/index.js | 1 + 3 files changed, 3 insertions(+) diff --git a/src/components/DatePicker/index.android.js b/src/components/DatePicker/index.android.js index 4f761a05a4fa..1dd11ae1a893 100644 --- a/src/components/DatePicker/index.android.js +++ b/src/components/DatePicker/index.android.js @@ -51,6 +51,7 @@ class DatePicker extends React.Component { onPress={this.showPicker} editable={false} disabled={this.props.disabled} + onBlur={this.props.onBlur} ref={(input) => { if (!this.props.innerRef) { return; diff --git a/src/components/DatePicker/index.ios.js b/src/components/DatePicker/index.ios.js index 3667785b46f1..9c2edd8d520b 100644 --- a/src/components/DatePicker/index.ios.js +++ b/src/components/DatePicker/index.ios.js @@ -78,6 +78,7 @@ class Datepicker extends React.Component { onPress={this.showPicker} editable={false} disabled={this.props.disabled} + onBlur={this.props.onBlur} ref={(input) => { if (!this.props.innerRef) { return; diff --git a/src/components/DatePicker/index.js b/src/components/DatePicker/index.js index 236ea35e00c8..6b61e4805403 100644 --- a/src/components/DatePicker/index.js +++ b/src/components/DatePicker/index.js @@ -87,6 +87,7 @@ class Datepicker extends React.Component { errorText={this.props.errorText} containerStyles={this.props.containerStyles} disabled={this.props.disabled} + onBlur={this.props.onBlur} /> ); } From fdd741f651babcd7b1e38ac3a81ba7afb7b65fbf Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Mon, 25 Apr 2022 13:37:20 -0600 Subject: [PATCH 09/20] import underscore --- src/components/DatePicker/index.android.js | 1 + src/components/DatePicker/index.ios.js | 1 + src/components/DatePicker/index.js | 1 + 3 files changed, 3 insertions(+) diff --git a/src/components/DatePicker/index.android.js b/src/components/DatePicker/index.android.js index 1dd11ae1a893..aaed22a8588d 100644 --- a/src/components/DatePicker/index.android.js +++ b/src/components/DatePicker/index.android.js @@ -1,6 +1,7 @@ import React from 'react'; import RNDatePicker from '@react-native-community/datetimepicker'; import moment from 'moment'; +import _ from 'underscore'; import TextInput from '../TextInput'; import CONST from '../../CONST'; import {propTypes, defaultProps} from './datepickerPropTypes'; diff --git a/src/components/DatePicker/index.ios.js b/src/components/DatePicker/index.ios.js index 9c2edd8d520b..98770eda621f 100644 --- a/src/components/DatePicker/index.ios.js +++ b/src/components/DatePicker/index.ios.js @@ -3,6 +3,7 @@ import React from 'react'; import {Button, View} from 'react-native'; import RNDatePicker from '@react-native-community/datetimepicker'; import moment from 'moment'; +import _ from 'underscore'; import TextInput from '../TextInput'; import withLocalize, {withLocalizePropTypes} from '../withLocalize'; import Popover from '../Popover'; diff --git a/src/components/DatePicker/index.js b/src/components/DatePicker/index.js index 6b61e4805403..b9a63909795c 100644 --- a/src/components/DatePicker/index.js +++ b/src/components/DatePicker/index.js @@ -1,5 +1,6 @@ import React from 'react'; import moment from 'moment'; +import _ from 'underscore'; import TextInput from '../TextInput'; import CONST from '../../CONST'; import {propTypes, defaultProps} from './datepickerPropTypes'; From 8cd24f80fd1d845a5ac00c1f6784b6e712a73e0d Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Mon, 25 Apr 2022 14:52:56 -0600 Subject: [PATCH 10/20] fix js lint --- src/components/DatePicker/index.android.js | 24 +++++++++++----------- src/components/DatePicker/index.ios.js | 2 +- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src/components/DatePicker/index.android.js b/src/components/DatePicker/index.android.js index aaed22a8588d..136d8ccd5939 100644 --- a/src/components/DatePicker/index.android.js +++ b/src/components/DatePicker/index.android.js @@ -6,7 +6,7 @@ import TextInput from '../TextInput'; import CONST from '../../CONST'; import {propTypes, defaultProps} from './datepickerPropTypes'; -class DatePicker extends React.Component { +class Datepicker extends React.Component { constructor(props) { super(props); @@ -18,14 +18,6 @@ class DatePicker extends React.Component { this.setDate = this.setDate.bind(this); } - /** - * @param {Event} event - */ - showPicker(event) { - this.setState({isPickerVisible: true}); - event.preventDefault(); - } - /** * @param {Event} event * @param {Date} selectedDate @@ -38,6 +30,14 @@ class DatePicker extends React.Component { this.setState({isPickerVisible: false}); } + /** + * @param {Event} event + */ + showPicker(event) { + this.setState({isPickerVisible: true}); + event.preventDefault(); + } + render() { const dateAsText = this.props.defaultValue ? moment(this.props.defaultValue).format(CONST.DATE.MOMENT_FORMAT_STRING) : ''; @@ -57,7 +57,7 @@ class DatePicker extends React.Component { if (!this.props.innerRef) { return; } - + if (_.isFunction(this.props.innerRef)) { this.props.innerRef(input); } @@ -76,8 +76,8 @@ class DatePicker extends React.Component { } } -DatePicker.propTypes = propTypes; -DatePicker.defaultProps = defaultProps; +Datepicker.propTypes = propTypes; +Datepicker.defaultProps = defaultProps; export default React.forwardRef((props, ref) => ( /* eslint-disable-next-line react/jsx-props-no-spreading */ diff --git a/src/components/DatePicker/index.ios.js b/src/components/DatePicker/index.ios.js index 98770eda621f..d52e9ef55094 100644 --- a/src/components/DatePicker/index.ios.js +++ b/src/components/DatePicker/index.ios.js @@ -84,7 +84,7 @@ class Datepicker extends React.Component { if (!this.props.innerRef) { return; } - + if (_.isFunction(this.props.innerRef)) { this.props.innerRef(input); } From a10ae9c71c40b59c1914bd728cd2830473dc0d89 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Mon, 25 Apr 2022 14:56:12 -0600 Subject: [PATCH 11/20] use defaultValue --- src/pages/EnablePayments/AdditionalDetailsStep.js | 2 +- src/pages/ReimbursementAccount/CompanyStep.js | 2 +- src/pages/ReimbursementAccount/IdentityForm.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/EnablePayments/AdditionalDetailsStep.js b/src/pages/EnablePayments/AdditionalDetailsStep.js index e41dab46cc64..2d679b1118f4 100644 --- a/src/pages/EnablePayments/AdditionalDetailsStep.js +++ b/src/pages/EnablePayments/AdditionalDetailsStep.js @@ -321,7 +321,7 @@ class AdditionalDetailsStep extends React.Component { containerStyles={[styles.mt4]} label={this.props.translate(this.fieldNameTranslationKeys.dob)} onInputChange={val => this.clearErrorAndSetValue('dob', val)} - value={this.props.walletAdditionalDetailsDraft.dob || ''} + defaultValue={this.props.walletAdditionalDetailsDraft.dob || ''} placeholder={this.props.translate('common.dob')} errorText={this.getErrorText('dob')} maximumDate={new Date()} diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js index c61c7a59ab11..d687bddd96c7 100644 --- a/src/pages/ReimbursementAccount/CompanyStep.js +++ b/src/pages/ReimbursementAccount/CompanyStep.js @@ -278,7 +278,7 @@ class CompanyStep extends React.Component { { label={`${props.translate('common.dob')}`} containerStyles={[styles.mt4]} placeholder={props.translate('common.dateFormat')} - value={props.values.dob} + defaultValue={props.values.dob} onInputChange={value => props.onFieldChange({dob: value})} errorText={dobErrorText} maximumDate={new Date()} From 95f0832dfcecc43076c307324fed03a75df48e9b Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Mon, 25 Apr 2022 15:19:51 -0600 Subject: [PATCH 12/20] fix onInputChange in ios --- src/components/DatePicker/index.ios.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/DatePicker/index.ios.js b/src/components/DatePicker/index.ios.js index d52e9ef55094..dc208834962d 100644 --- a/src/components/DatePicker/index.ios.js +++ b/src/components/DatePicker/index.ios.js @@ -50,11 +50,11 @@ class Datepicker extends React.Component { /** * Accept the current spinner changes, close the spinner and propagate the change - * to the parent component (props.onChange) + * to the parent component (props.onInputChange) */ selectDate() { this.setState({isPickerVisible: false}); - this.props.onChange(this.state.selectedDate); + this.props.onInputChange(this.state.selectedDate); } /** From a0de7d2bae3d09c10d7892b13f9c07aa3d047d97 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Mon, 25 Apr 2022 16:44:40 -0600 Subject: [PATCH 13/20] rename input to el --- src/components/DatePicker/index.android.js | 4 ++-- src/components/DatePicker/index.ios.js | 6 +++--- src/components/DatePicker/index.js | 6 +++--- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/DatePicker/index.android.js b/src/components/DatePicker/index.android.js index 136d8ccd5939..c69ae03d4d04 100644 --- a/src/components/DatePicker/index.android.js +++ b/src/components/DatePicker/index.android.js @@ -53,13 +53,13 @@ class Datepicker extends React.Component { editable={false} disabled={this.props.disabled} onBlur={this.props.onBlur} - ref={(input) => { + ref={(el) => { if (!this.props.innerRef) { return; } if (_.isFunction(this.props.innerRef)) { - this.props.innerRef(input); + this.props.innerRef(el); } }} /> diff --git a/src/components/DatePicker/index.ios.js b/src/components/DatePicker/index.ios.js index dc208834962d..435295052ecb 100644 --- a/src/components/DatePicker/index.ios.js +++ b/src/components/DatePicker/index.ios.js @@ -62,7 +62,6 @@ class Datepicker extends React.Component { * @param {Date} selectedDate */ updateLocalDate(event, selectedDate) { - this.props.onInputChange(selectedDate); this.setState({selectedDate}); } @@ -80,13 +79,14 @@ class Datepicker extends React.Component { editable={false} disabled={this.props.disabled} onBlur={this.props.onBlur} - ref={(input) => { + ref={(el) => { + this.textInput = el; if (!this.props.innerRef) { return; } if (_.isFunction(this.props.innerRef)) { - this.props.innerRef(input); + this.props.innerRef(el); } }} /> diff --git a/src/components/DatePicker/index.js b/src/components/DatePicker/index.js index b9a63909795c..c2fc7f5505e2 100644 --- a/src/components/DatePicker/index.js +++ b/src/components/DatePicker/index.js @@ -70,14 +70,14 @@ class Datepicker extends React.Component { return ( { - this.inputRef = input; + ref={(el) => { + this.inputRef = el; if (!this.props.innerRef) { return; } if (_.isFunction(this.props.innerRef)) { - this.props.innerRef(input); + this.props.innerRef(el); } }} onFocus={this.showDatepicker} From b5ee7e4f8e13c3e49b3c632ab365b4a2c800e04b Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Mon, 25 Apr 2022 17:43:23 -0600 Subject: [PATCH 14/20] use value on native --- src/components/DatePicker/index.android.js | 2 +- src/components/DatePicker/index.ios.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/DatePicker/index.android.js b/src/components/DatePicker/index.android.js index c69ae03d4d04..28ad03634645 100644 --- a/src/components/DatePicker/index.android.js +++ b/src/components/DatePicker/index.android.js @@ -45,7 +45,7 @@ class Datepicker extends React.Component { <> Date: Mon, 25 Apr 2022 17:50:47 -0600 Subject: [PATCH 15/20] fix bug with datepicker errors --- src/pages/ReimbursementAccount/CompanyStep.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js index d687bddd96c7..59dd4149abcb 100644 --- a/src/pages/ReimbursementAccount/CompanyStep.js +++ b/src/pages/ReimbursementAccount/CompanyStep.js @@ -119,8 +119,7 @@ class CompanyStep extends React.Component { * @param {String} value */ clearDateErrorsAndSetValue(value) { - this.clearError('incorporationDate'); - this.clearError('incorporationDateFuture'); + this.clearErrors(['incorporationDate', 'incorporationDateFuture']); this.setValue({incorporationDate: value}); } From b4ca680d4394b7e9b3701ac7456d2c25c37206b4 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Tue, 26 Apr 2022 12:56:13 -0600 Subject: [PATCH 16/20] add defaultValue to propTypes --- src/components/DatePicker/datepickerPropTypes.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/DatePicker/datepickerPropTypes.js b/src/components/DatePicker/datepickerPropTypes.js index 8f3bd03c75e0..4a681ec90c49 100644 --- a/src/components/DatePicker/datepickerPropTypes.js +++ b/src/components/DatePicker/datepickerPropTypes.js @@ -9,10 +9,16 @@ const propTypes = { /** * The datepicker supports any value that `moment` can parse. - * `onChange` would always be called with a Date (or null) + * `onInputChange` would always be called with a Date (or null) */ value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]), + /** + * The datepicker supports any defaultValue that `moment` can parse. + * `onInputChange` would always be called with a Date (or null) + */ + defaultValue: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]), + /* Restricts for selectable max date range for the picker */ maximumDate: PropTypes.instanceOf(Date), }; From ebdaada4123b99a39f7223a0c7966e9597da0dd1 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Tue, 26 Apr 2022 13:21:16 -0600 Subject: [PATCH 17/20] fix datepicker prefilled story --- src/stories/Datepicker.stories.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/stories/Datepicker.stories.js b/src/stories/Datepicker.stories.js index 0fb3cd31c2b6..08f39b104c7e 100644 --- a/src/stories/Datepicker.stories.js +++ b/src/stories/Datepicker.stories.js @@ -13,7 +13,7 @@ export default { onChange: {action: 'date changed'}, }, args: { - value: '', + defaultValue: '', label: 'Select Date', placeholder: 'Date Placeholder', errorText: '', @@ -34,7 +34,7 @@ Default.args = { PreFilled.args = { label: 'Select Date', - value: new Date(2018, 7, 21), + defaultValue: new Date(2018, 7, 21), }; export { From fd25c39dc6ff99b4d7fe91fb94de023bb5f65fe6 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Wed, 27 Apr 2022 11:12:51 -0600 Subject: [PATCH 18/20] remove early return --- src/components/DatePicker/index.android.js | 4 ---- src/components/DatePicker/index.ios.js | 5 ----- src/components/DatePicker/index.js | 3 --- 3 files changed, 12 deletions(-) diff --git a/src/components/DatePicker/index.android.js b/src/components/DatePicker/index.android.js index 28ad03634645..456e3f8dd524 100644 --- a/src/components/DatePicker/index.android.js +++ b/src/components/DatePicker/index.android.js @@ -54,10 +54,6 @@ class Datepicker extends React.Component { disabled={this.props.disabled} onBlur={this.props.onBlur} ref={(el) => { - if (!this.props.innerRef) { - return; - } - if (_.isFunction(this.props.innerRef)) { this.props.innerRef(el); } diff --git a/src/components/DatePicker/index.ios.js b/src/components/DatePicker/index.ios.js index 6df088ac6316..35cb5d2e927c 100644 --- a/src/components/DatePicker/index.ios.js +++ b/src/components/DatePicker/index.ios.js @@ -80,11 +80,6 @@ class Datepicker extends React.Component { disabled={this.props.disabled} onBlur={this.props.onBlur} ref={(el) => { - this.textInput = el; - if (!this.props.innerRef) { - return; - } - if (_.isFunction(this.props.innerRef)) { this.props.innerRef(el); } diff --git a/src/components/DatePicker/index.js b/src/components/DatePicker/index.js index c2fc7f5505e2..80ca2b4de44a 100644 --- a/src/components/DatePicker/index.js +++ b/src/components/DatePicker/index.js @@ -72,9 +72,6 @@ class Datepicker extends React.Component { forceActiveLabel={!canUseTouchScreen()} ref={(el) => { this.inputRef = el; - if (!this.props.innerRef) { - return; - } if (_.isFunction(this.props.innerRef)) { this.props.innerRef(el); From 9caf22987f4e040b88a8b38eed3ed5588d156d29 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Wed, 27 Apr 2022 11:17:42 -0600 Subject: [PATCH 19/20] fix lint --- src/components/DatePicker/index.android.js | 5 +++-- src/components/DatePicker/index.ios.js | 5 +++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/DatePicker/index.android.js b/src/components/DatePicker/index.android.js index 456e3f8dd524..a10bad426671 100644 --- a/src/components/DatePicker/index.android.js +++ b/src/components/DatePicker/index.android.js @@ -54,9 +54,10 @@ class Datepicker extends React.Component { disabled={this.props.disabled} onBlur={this.props.onBlur} ref={(el) => { - if (_.isFunction(this.props.innerRef)) { - this.props.innerRef(el); + if (!_.isFunction(this.props.innerRef)) { + return; } + this.props.innerRef(el); }} /> {this.state.isPickerVisible && ( diff --git a/src/components/DatePicker/index.ios.js b/src/components/DatePicker/index.ios.js index 35cb5d2e927c..53d5a4165425 100644 --- a/src/components/DatePicker/index.ios.js +++ b/src/components/DatePicker/index.ios.js @@ -80,9 +80,10 @@ class Datepicker extends React.Component { disabled={this.props.disabled} onBlur={this.props.onBlur} ref={(el) => { - if (_.isFunction(this.props.innerRef)) { - this.props.innerRef(el); + if (!_.isFunction(this.props.innerRef)) { + return; } + this.props.innerRef(el); }} /> Date: Wed, 27 Apr 2022 11:22:10 -0600 Subject: [PATCH 20/20] rename Datepicker to DatePicker --- src/components/DatePicker/index.android.js | 8 ++++---- src/components/DatePicker/index.ios.js | 8 ++++---- src/components/DatePicker/index.js | 8 ++++---- 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/components/DatePicker/index.android.js b/src/components/DatePicker/index.android.js index a10bad426671..77d7bbc705a2 100644 --- a/src/components/DatePicker/index.android.js +++ b/src/components/DatePicker/index.android.js @@ -6,7 +6,7 @@ import TextInput from '../TextInput'; import CONST from '../../CONST'; import {propTypes, defaultProps} from './datepickerPropTypes'; -class Datepicker extends React.Component { +class DatePicker extends React.Component { constructor(props) { super(props); @@ -73,10 +73,10 @@ class Datepicker extends React.Component { } } -Datepicker.propTypes = propTypes; -Datepicker.defaultProps = defaultProps; +DatePicker.propTypes = propTypes; +DatePicker.defaultProps = defaultProps; export default React.forwardRef((props, ref) => ( /* eslint-disable-next-line react/jsx-props-no-spreading */ - + )); diff --git a/src/components/DatePicker/index.ios.js b/src/components/DatePicker/index.ios.js index 53d5a4165425..879a102ac1ad 100644 --- a/src/components/DatePicker/index.ios.js +++ b/src/components/DatePicker/index.ios.js @@ -17,7 +17,7 @@ const datepickerPropTypes = { ...withLocalizePropTypes, }; -class Datepicker extends React.Component { +class DatePicker extends React.Component { constructor(props) { super(props); @@ -123,8 +123,8 @@ class Datepicker extends React.Component { } } -Datepicker.propTypes = datepickerPropTypes; -Datepicker.defaultProps = defaultProps; +DatePicker.propTypes = datepickerPropTypes; +DatePicker.defaultProps = defaultProps; /** * We're applying localization here because we present a modal (with buttons) ourselves @@ -134,5 +134,5 @@ Datepicker.defaultProps = defaultProps; */ export default withLocalize(React.forwardRef((props, ref) => ( /* eslint-disable-next-line react/jsx-props-no-spreading */ - + ))); diff --git a/src/components/DatePicker/index.js b/src/components/DatePicker/index.js index 80ca2b4de44a..0077e4cf9add 100644 --- a/src/components/DatePicker/index.js +++ b/src/components/DatePicker/index.js @@ -13,7 +13,7 @@ const datePickerPropTypes = { ...windowDimensionsPropTypes, }; -class Datepicker extends React.Component { +class DatePicker extends React.Component { constructor(props) { super(props); @@ -91,10 +91,10 @@ class Datepicker extends React.Component { } } -Datepicker.propTypes = datePickerPropTypes; -Datepicker.defaultProps = defaultProps; +DatePicker.propTypes = datePickerPropTypes; +DatePicker.defaultProps = defaultProps; export default withWindowDimensions(React.forwardRef((props, ref) => ( /* eslint-disable-next-line react/jsx-props-no-spreading */ - + )));