Merge pull request #20864 from Expensify/srikar-refactorDateTime

Convert Date Picker to Functional Component

Author: marcochavezf

src/components/DatePicker/index.js

@@ -1,102 +1,90 @@
-import React from 'react';
 import moment from 'moment';
+import React, {forwardRef, useEffect, useRef} from 'react';
 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 TextInput from '../TextInput';
+import {defaultProps, propTypes} from './datepickerPropTypes';
 import './styles.css';
 
 const datePickerPropTypes = {
     ...propTypes,
-    ...windowDimensionsPropTypes,
 };
 
-class DatePicker extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.setDate = this.setDate.bind(this);
-        this.showDatepicker = this.showDatepicker.bind(this);
+function DatePicker({defaultValue, maxDate, minDate, onInputChange, innerRef, label, value, placeholder, errorText, containerStyles, disabled, onBlur}) {
+    const inputRef = useRef(null);
+    const defaultDateValue = defaultValue ? moment(defaultValue).format(CONST.DATE.MOMENT_FORMAT_STRING) : '';
 
-        this.defaultValue = props.defaultValue ? moment(props.defaultValue).format(CONST.DATE.MOMENT_FORMAT_STRING) : '';
-    }
-
-    componentDidMount() {
-        // 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');
-    }
+    useEffect(() => {
+        inputRef.current.setAttribute('type', 'date');
+        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');
+    }, [maxDate, minDate]);
 
     /**
      * 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('');
+            onInputChange('');
             return;
         }
 
         const asMoment = moment(text, true);
         if (asMoment.isValid()) {
-            this.props.onInputChange(asMoment.format(CONST.DATE.MOMENT_FORMAT_STRING));
+            onInputChange(asMoment.format(CONST.DATE.MOMENT_FORMAT_STRING));
         }
-    }
+    };
 
     /**
      * Pops the datepicker up when we focus this field. This only works on mWeb chrome
      * 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 (
-            <TextInput
-                forceActiveLabel
-                ref={(el) => {
-                    this.inputRef = el;
+    return (
+        <TextInput
+            forceActiveLabel
+            ref={(el) => {
+                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}
-                defaultValue={this.defaultValue}
-                placeholder={this.props.placeholder}
-                errorText={this.props.errorText}
-                containerStyles={this.props.containerStyles}
-                disabled={this.props.disabled}
-                onBlur={this.props.onBlur}
-            />
-        );
-    }
+                if (_.isFunction(innerRef)) {
+                    innerRef(el);
+                }
+            }}
+            onFocus={showDatepicker}
+            label={label}
+            accessibilityLabel={label}
+            accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
+            onInputChange={setDate}
+            value={value}
+            defaultValue={defaultDateValue}
+            placeholder={placeholder}
+            errorText={errorText}
+            containerStyles={containerStyles}
+            disabled={disabled}
+            onBlur={onBlur}
+        />
+    );
 }
 
 DatePicker.propTypes = datePickerPropTypes;
 DatePicker.defaultProps = defaultProps;
+DatePicker.displayName = 'DatePicker';
 
-export default withWindowDimensions(
-    React.forwardRef((props, ref) => (
-        <DatePicker
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...props}
-            innerRef={ref}
-        />
-    )),
-);
+export default forwardRef((props, ref) => (
+    <DatePicker
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+        innerRef={ref}
+    />
+));