Refactor new date picker

src/ROUTES.js

@@ -70,8 +70,6 @@ export default {
     getReportShareCodeRoute: (reportID) => `r/${reportID}/details/shareCode`,
     REPORT_ATTACHMENTS: 'r/:reportID/attachment',
     getReportAttachmentRoute: (reportID, source) => `r/${reportID}/attachment?source=${encodeURI(source)}`,
-    SELECT_YEAR: 'select-year',
-    getYearSelectionRoute: (minYear, maxYear, currYear, backTo) => `select-year?min=${minYear}&max=${maxYear}&year=${currYear}&backTo=${backTo}`,
 
     /** This is a utility route used to go to the user's concierge chat, or the sign-in page if the user's not authenticated */
     CONCIERGE: 'concierge',

src/components/Modal/modalPropTypes.js

@@ -58,6 +58,14 @@ const propTypes = {
     /** Whether the modal should avoid the keyboard */
     avoidKeyboard: PropTypes.bool,
 
+    /**
+     * Whether the modal should hide its content while animating. On iOS, set to true
+     * if `useNativeDriver` is also true, to avoid flashes in the UI.
+     *
+     * See: https://github.com/react-native-modal/react-native-modal/pull/116
+     * */
+    hideModalContentWhileAnimating: PropTypes.bool,
+
     ...windowDimensionsPropTypes,
 };
 
@@ -75,6 +83,7 @@ const defaultProps = {
     innerContainerStyle: {},
     statusBarTranslucent: true,
     avoidKeyboard: false,
+    hideModalContentWhileAnimating: false,
 };
 
 export {propTypes, defaultProps};

src/components/CalendarPicker/ArrowIcon.js → src/components/NewDatePicker/CalendarPicker/ArrowIcon.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
-import styles from '../../styles/styles';
-import * as Expensicons from '../Icon/Expensicons';
-import * as StyleUtils from '../../styles/StyleUtils';
-import Icon from '../Icon';
-import CONST from '../../CONST';
+import styles from '../../../styles/styles';
+import * as Expensicons from '../../Icon/Expensicons';
+import * as StyleUtils from '../../../styles/StyleUtils';
+import Icon from '../../Icon';
+import CONST from '../../../CONST';
 
 const propTypes = {
     /** Specifies if the arrow icon should be disabled or not. */

src/components/NewDatePicker/CalendarPicker/YearPickerModal.js

@@ -0,0 +1,85 @@
+import React, {useEffect, useMemo, useState} from 'react';
+import PropTypes from 'prop-types';
+import _ from 'underscore';
+import HeaderWithBackButton from '../../HeaderWithBackButton';
+import CONST from '../../../CONST';
+import SelectionListRadio from '../../SelectionListRadio';
+import Modal from '../../Modal';
+import {radioListItemPropTypes} from '../../SelectionListRadio/selectionListRadioPropTypes';
+import useLocalize from '../../../hooks/useLocalize';
+
+const propTypes = {
+    /** Whether the modal is visible */
+    isVisible: PropTypes.bool.isRequired,
+
+    /** The list of years to render */
+    years: PropTypes.arrayOf(PropTypes.shape(radioListItemPropTypes)).isRequired,
+
+    /** Currently selected year */
+    currentYear: PropTypes.number,
+
+    /** Function to call when the user selects a year */
+    onYearChange: PropTypes.func,
+
+    /** Function to call when the user closes the year picker */
+    onClose: PropTypes.func,
+};
+
+const defaultProps = {
+    currentYear: new Date().getFullYear(),
+    onYearChange: () => {},
+    onClose: () => {},
+};
+
+function YearPickerModal(props) {
+    const {translate} = useLocalize();
+    const [searchText, setSearchText] = useState('');
+    const {sections, headerMessage} = useMemo(() => {
+        const yearsList = searchText === '' ? props.years : _.filter(props.years, (year) => year.text.includes(searchText));
+        return {
+            headerMessage: !yearsList.length ? translate('common.noResultsFound') : '',
+            sections: [{data: yearsList, indexOffset: 0}],
+        };
+    }, [props.years, searchText, translate]);
+
+    useEffect(() => {
+        if (props.isVisible) {
+            return;
+        }
+        setSearchText('');
+    }, [props.isVisible]);
+
+    return (
+        <Modal
+            type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
+            isVisible={props.isVisible}
+            onClose={props.onClose}
+            onModalHide={props.onClose}
+            hideModalContentWhileAnimating
+            useNativeDriver
+        >
+            <HeaderWithBackButton
+                title={translate('yearPickerPage.year')}
+                onBackButtonPress={props.onClose}
+            />
+            <SelectionListRadio
+                shouldDelayFocus
+                textInputLabel={translate('yearPickerPage.selectYear')}
+                textInputValue={searchText}
+                textInputMaxLength={4}
+                onChangeText={(text) => setSearchText(text.replace(CONST.REGEX.NON_NUMERIC, '').trim())}
+                keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
+                headerMessage={headerMessage}
+                sections={sections}
+                onSelectRow={(option) => props.onYearChange(option.value)}
+                initiallyFocusedOptionKey={props.currentYear.toString()}
+            />
+        </Modal>
+    );
+}
+
+YearPickerModal.propTypes = propTypes;
+YearPickerModal.defaultProps = defaultProps;
+YearPickerModal.displayName = 'YearPickerModal';
+
+export default YearPickerModal;

src/components/CalendarPicker/generateMonthMatrix.js → src/components/NewDatePicker/CalendarPicker/generateMonthMatrix.js

@@ -1,5 +1,5 @@
 import moment from 'moment';
-import CONST from '../../CONST';
+import CONST from '../../../CONST';
 
 /**
  * Generates a matrix representation of a month's calendar given the year and month.