From 18519a5fc316058cda24c60536b1308e333fa89a Mon Sep 17 00:00:00 2001 From: Shubham Agrawal Date: Sat, 29 Jul 2023 08:14:59 +0530 Subject: [PATCH 1/3] converted datepicker to functional component --- src/components/DatePicker/index.js | 107 +++++++++++++---------------- 1 file changed, 47 insertions(+), 60 deletions(-) diff --git a/src/components/DatePicker/index.js b/src/components/DatePicker/index.js index 265a7f239131..ab7ca7292093 100644 --- a/src/components/DatePicker/index.js +++ b/src/components/DatePicker/index.js @@ -1,47 +1,37 @@ -import React from 'react'; +import React, {useEffect, useRef} from 'react'; import moment from 'moment'; import _ from 'underscore'; import TextInput from '../TextInput'; import CONST from '../../CONST'; import * as Browser from '../../libs/Browser'; import {propTypes, defaultProps} from './datepickerPropTypes'; -import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions'; import './styles.css'; -const datePickerPropTypes = { - ...propTypes, - ...windowDimensionsPropTypes, -}; +function DatePicker(props) { + const inputRef = useRef(null); -class DatePicker extends React.Component { - constructor(props) { - super(props); - - this.setDate = this.setDate.bind(this); - this.showDatepicker = this.showDatepicker.bind(this); - } - - componentDidMount() { + useEffect(() => { // Adds nice native datepicker on web/desktop. Not possible to set this through props - this.inputRef.setAttribute('type', 'date'); - this.inputRef.setAttribute('max', moment(this.props.maxDate).format(CONST.DATE.MOMENT_FORMAT_STRING)); - this.inputRef.setAttribute('min', moment(this.props.minDate).format(CONST.DATE.MOMENT_FORMAT_STRING)); - this.inputRef.classList.add('expensify-datepicker'); - } + inputRef.current.setAttribute('type', 'date'); + inputRef.current.setAttribute('max', moment(props.maxDate).format(CONST.DATE.MOMENT_FORMAT_STRING)); + inputRef.current.setAttribute('min', moment(props.minDate).format(CONST.DATE.MOMENT_FORMAT_STRING)); + inputRef.current.classList.add('expensify-datepicker'); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); /** * Trigger the `onChange` handler when the user input has a complete date or is cleared * @param {String} text */ - setDate(text) { + const setDate = (text) => { if (!text) { - this.props.onInputChange(''); + props.onInputChange(''); return; } const asMoment = moment(text, true); if (asMoment.isValid()) { - this.props.onInputChange(asMoment.format(CONST.DATE.MOMENT_FORMAT_STRING)); + props.onInputChange(asMoment.format(CONST.DATE.MOMENT_FORMAT_STRING)); } } @@ -50,50 +40,47 @@ class DatePicker extends React.Component { * On mWeb chrome the user needs to tap on the field again in order to bring the datepicker. But our current styles * don't make this very obvious. To avoid confusion we open the datepicker when the user focuses the field */ - showDatepicker() { - if (!this.inputRef || !Browser.isMobileChrome()) { + const showDatepicker = () => { + if (!inputRef.current || !Browser.isMobileChrome()) { return; } - this.inputRef.click(); + inputRef.current.click(); } - render() { - return ( - { - this.inputRef = el; + return ( + { + inputRef.current = el; - if (_.isFunction(this.props.innerRef)) { - this.props.innerRef(el); - } - }} - onFocus={this.showDatepicker} - label={this.props.label} - accessibilityLabel={this.props.label} - accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT} - onInputChange={this.setDate} - value={this.props.value} - placeholder={this.props.placeholder} - errorText={this.props.errorText} - containerStyles={this.props.containerStyles} - disabled={this.props.disabled} - onBlur={this.props.onBlur} - /> - ); - } + if (_.isFunction(props.innerRef)) { + props.innerRef(el); + } + }} + onFocus={showDatepicker} + label={props.label} + accessibilityLabel={props.label} + accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT} + onInputChange={setDate} + value={props.value} + placeholder={props.placeholder} + errorText={props.errorText} + containerStyles={props.containerStyles} + disabled={props.disabled} + onBlur={props.onBlur} + /> + ); } -DatePicker.propTypes = datePickerPropTypes; +DatePicker.displayName = 'DatePicker'; +DatePicker.propTypes = propTypes; DatePicker.defaultProps = defaultProps; -export default withWindowDimensions( - React.forwardRef((props, ref) => ( - - )), -); +export default React.forwardRef((props, ref) => ( + +)); From 2d97567486708eef09dd38053319225fb537f7de Mon Sep 17 00:00:00 2001 From: Shubham Agrawal Date: Sat, 29 Jul 2023 08:33:54 +0530 Subject: [PATCH 2/3] added destructuring props --- src/components/DatePicker/index.js | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/src/components/DatePicker/index.js b/src/components/DatePicker/index.js index ab7ca7292093..a95e55afbd16 100644 --- a/src/components/DatePicker/index.js +++ b/src/components/DatePicker/index.js @@ -7,14 +7,14 @@ import * as Browser from '../../libs/Browser'; import {propTypes, defaultProps} from './datepickerPropTypes'; import './styles.css'; -function DatePicker(props) { +function DatePicker({maxDate, minDate, onInputChange, innerRef, label, value, placeholder, errorText, containerStyles, disabled, onBlur}) { const inputRef = useRef(null); useEffect(() => { // Adds nice native datepicker on web/desktop. Not possible to set this through props inputRef.current.setAttribute('type', 'date'); - inputRef.current.setAttribute('max', moment(props.maxDate).format(CONST.DATE.MOMENT_FORMAT_STRING)); - inputRef.current.setAttribute('min', moment(props.minDate).format(CONST.DATE.MOMENT_FORMAT_STRING)); + inputRef.current.setAttribute('max', moment(maxDate).format(CONST.DATE.MOMENT_FORMAT_STRING)); + inputRef.current.setAttribute('min', moment(minDate).format(CONST.DATE.MOMENT_FORMAT_STRING)); inputRef.current.classList.add('expensify-datepicker'); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); @@ -25,13 +25,13 @@ function DatePicker(props) { */ const setDate = (text) => { if (!text) { - props.onInputChange(''); + onInputChange(''); return; } const asMoment = moment(text, true); if (asMoment.isValid()) { - props.onInputChange(asMoment.format(CONST.DATE.MOMENT_FORMAT_STRING)); + onInputChange(asMoment.format(CONST.DATE.MOMENT_FORMAT_STRING)); } } @@ -54,21 +54,21 @@ function DatePicker(props) { ref={(el) => { inputRef.current = el; - if (_.isFunction(props.innerRef)) { - props.innerRef(el); + if (_.isFunction(innerRef)) { + innerRef(el); } }} onFocus={showDatepicker} - label={props.label} - accessibilityLabel={props.label} + label={label} + accessibilityLabel={label} accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT} onInputChange={setDate} - value={props.value} - placeholder={props.placeholder} - errorText={props.errorText} - containerStyles={props.containerStyles} - disabled={props.disabled} - onBlur={props.onBlur} + value={value} + placeholder={placeholder} + errorText={errorText} + containerStyles={containerStyles} + disabled={disabled} + onBlur={onBlur} /> ); } From f60a4dbb0cbe46cd7b8ed0ae3c6685b1ae3170f6 Mon Sep 17 00:00:00 2001 From: Shubham Agrawal Date: Tue, 1 Aug 2023 09:35:11 +0530 Subject: [PATCH 3/3] prettier lint --- src/components/DatePicker/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/DatePicker/index.js b/src/components/DatePicker/index.js index a95e55afbd16..d14886fd1c59 100644 --- a/src/components/DatePicker/index.js +++ b/src/components/DatePicker/index.js @@ -16,7 +16,7 @@ function DatePicker({maxDate, minDate, onInputChange, innerRef, label, value, pl inputRef.current.setAttribute('max', moment(maxDate).format(CONST.DATE.MOMENT_FORMAT_STRING)); inputRef.current.setAttribute('min', moment(minDate).format(CONST.DATE.MOMENT_FORMAT_STRING)); inputRef.current.classList.add('expensify-datepicker'); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-hooks/exhaustive-deps }, []); /** @@ -33,7 +33,7 @@ function DatePicker({maxDate, minDate, onInputChange, innerRef, label, value, pl if (asMoment.isValid()) { onInputChange(asMoment.format(CONST.DATE.MOMENT_FORMAT_STRING)); } - } + }; /** * Pops the datepicker up when we focus this field. This only works on mWeb chrome @@ -46,7 +46,7 @@ function DatePicker({maxDate, minDate, onInputChange, innerRef, label, value, pl } inputRef.current.click(); - } + }; return (