Feat: New Date Picker Design

package.json

@@ -26,7 +26,7 @@
     "ios-build": "fastlane ios build",
     "android-build": "fastlane android build",
     "android-build-e2e": "bundle exec fastlane android build_e2e",
-    "test": "jest",
+    "test": "TZ=utc jest",
     "lint": "eslint . --max-warnings=0",
     "lint-watch": "npx eslint-watch --watch --changed",
     "shellcheck": "./scripts/shellCheck.sh",

src/CONST.js

@@ -8,6 +8,7 @@ const USE_EXPENSIFY_URL = 'https://use.expensify.com';
 const PLATFORM_OS_MACOS = 'Mac OS';
 const ANDROID_PACKAGE_NAME = 'com.expensify.chat';
 const USA_COUNTRY_NAME = 'United States';
+const CURRENT_YEAR = new Date().getFullYear();
 
 const CONST = {
     ANDROID_PACKAGE_NAME,
@@ -46,6 +47,23 @@ const CONST = {
         RESERVED_FIRST_NAMES: ['Expensify', 'Concierge'],
     },
 
+    CALENDAR_PICKER: {
+        // Numbers were arbitrarily picked.
+        MIN_YEAR: CURRENT_YEAR - 100,
+        MAX_YEAR: CURRENT_YEAR + 100,
+    },
+
+    DATE_BIRTH: {
+        MIN_AGE: 5,
+        MAX_AGE: 150,
+    },
+
+    // This is used to enable a rotation/transform style to any component.
+    DIRECTION: {
+        LEFT: 'left',
+        RIGHT: 'right',
+    },
+
     // Sizes needed for report empty state background image handling
     EMPTY_STATE_BACKGROUND: {
         SMALL_SCREEN: {

src/ROUTES.js

@@ -56,6 +56,8 @@ export default {
     REPORT,
     REPORT_WITH_ID: 'r/:reportID',
     getReportRoute: reportID => `r/${reportID}`,
+    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/CalendarPicker/ArrowIcon.js

@@ -0,0 +1,38 @@
+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';
+
+const propTypes = {
+    /** Specifies if the arrow icon should be disabled or not. */
+    disabled: PropTypes.bool,
+
+    /** Specifies direction of icon */
+    direction: PropTypes.oneOf([CONST.DIRECTION.LEFT, CONST.DIRECTION.RIGHT]),
+};
+
+const defaultProps = {
+    disabled: false,
+    direction: CONST.DIRECTION.RIGHT,
+};
+
+const ArrowIcon = props => (
+    <View style={[
+        styles.p1,
+        StyleUtils.getDirectionStyle(props.direction),
+        props.disabled ? styles.calendarButtonDisabled : {},
+    ]}
+    >
+        <Icon src={Expensicons.ArrowRight} />
+    </View>
+);
+
+ArrowIcon.displayName = 'ArrowIcon';
+ArrowIcon.propTypes = propTypes;
+ArrowIcon.defaultProps = defaultProps;
+
+export default ArrowIcon;

src/components/CalendarPicker/calendarPickerPropTypes.js

@@ -0,0 +1,34 @@
+import PropTypes from 'prop-types';
+import moment from 'moment';
+import CONST from '../../CONST';
+
+const propTypes = {
+    /** An initial value of date */
+    value: PropTypes.objectOf(Date),
+
+    /** A minimum date (oldest) allowed to select */
+    minDate: PropTypes.objectOf(Date),
+
+    /** A maximum date (earliest) allowed to select */
+    maxDate: PropTypes.objectOf(Date),
+
+    /** Default year to be set in the calendar picker. Used with navigation to set the correct year after going back to the view with calendar */
+    selectedYear: PropTypes.string,
+
+    /** A function that is called when the date changed inside the calendar component */
+    onChanged: PropTypes.func,
+
+    /** A function called when the date is selected */
+    onSelected: PropTypes.func,
+};
+
+const defaultProps = {
+    value: new Date(),
+    minDate: moment().year(CONST.CALENDAR_PICKER.MIN_YEAR).toDate(),
+    maxDate: moment().year(CONST.CALENDAR_PICKER.MAX_YEAR).toDate(),
+    selectedYear: null,
+    onChanged: () => {},
+    onSelected: () => {},
+};
+
+export {propTypes, defaultProps};

src/components/CalendarPicker/generateMonthMatrix.js

@@ -0,0 +1,60 @@
+import moment from 'moment';
+
+/**
+ * Generates a matrix representation of a month's calendar given the year and month.
+ *
+ * @param {Number} year - The year for which to generate the month matrix.
+ * @param {Number} month - The month (0-indexed) for which to generate the month matrix.
+ * @returns {Array<Array<Number|null>>} - A 2D array of the month's calendar days, with null values representing days outside the current month.
+ */
+export default function generateMonthMatrix(year, month) {
+    if (typeof year !== 'number') {
+        throw new TypeError('Year must be a number');
+    }
+    if (year < 0) {
+        throw new Error('Year cannot be less than 0');
+    }
+    if (typeof month !== 'number') {
+        throw new TypeError('Month must be a number');
+    }
+    if (month < 0) {
+        throw new Error('Month cannot be less than 0');
+    }
+    if (month > 11) {
+        throw new Error('Month cannot be greater than 11');
+    }
+
+    // Get the number of days in the month and the first day of the month
+    const daysInMonth = moment([year, month]).daysInMonth();
+    const firstDay = moment([year, month, 1]).locale('en');
+
+    // Create a matrix to hold the calendar days
+    const matrix = [];
+    let currentWeek = [];
+
+    // Add null values for days before the first day of the month
+    for (let i = 0; i < firstDay.weekday(); i++) {
+        currentWeek.push(null);
+    }
+
+    // Add calendar days to the matrix
+    for (let i = 1; i <= daysInMonth; i++) {
+        const day = moment([year, month, i]).locale('en');
+        currentWeek.push(day.date());
+
+        // Start a new row when the current week is full
+        if (day.weekday() === 6) {
+            matrix.push(currentWeek);
+            currentWeek = [];
+        }
+    }
+
+    // Add null values for days after the last day of the month
+    if (currentWeek.length > 0) {
+        for (let i = currentWeek.length; i < 7; i++) {
+            currentWeek.push(null);
+        }
+        matrix.push(currentWeek);
+    }
+    return matrix;
+}

src/components/CalendarPicker/index.js

@@ -0,0 +1,171 @@
+import _ from 'underscore';
+import React from 'react';
+import {View, TouchableOpacity, Pressable} from 'react-native';
+import moment from 'moment';
+import Text from '../Text';
+import ArrowIcon from './ArrowIcon';
+import styles from '../../styles/styles';
+import {propTypes as calendarPickerPropType, defaultProps as defaultCalendarPickerPropType} from './calendarPickerPropTypes';
+import generateMonthMatrix from './generateMonthMatrix';
+import withLocalize from '../withLocalize';
+import Navigation from '../../libs/Navigation/Navigation';
+import ROUTES from '../../ROUTES';
+import CONST from '../../CONST';
+import getButtonState from '../../libs/getButtonState';
+import * as StyleUtils from '../../styles/StyleUtils';
+
+class CalendarPicker extends React.PureComponent {
+    constructor(props) {
+        super(props);
+
+        this.monthNames = moment.localeData(props.preferredLocale).months();
+        this.daysOfWeek = moment.localeData(props.preferredLocale).weekdays();
+
+        let currentDateView = props.value;
+        if (props.selectedYear) {
+            currentDateView = moment(currentDateView).set('year', props.selectedYear).toDate();
+        }
+        if (props.maxDate < currentDateView) {
+            currentDateView = props.maxDate;
+        } else if (props.minDate > currentDateView) {
+            currentDateView = props.minDate;
+        }
+
+        this.state = {
+            currentDateView,
+        };
+
+        this.moveToPrevMonth = this.moveToPrevMonth.bind(this);
+        this.moveToNextMonth = this.moveToNextMonth.bind(this);
+        this.onYearPickerPressed = this.onYearPickerPressed.bind(this);
+        this.onDayPressed = this.onDayPressed.bind(this);
+    }
+
+    componentDidMount() {
+        if (this.props.minDate <= this.props.maxDate) {
+            return;
+        }
+        throw new Error('Minimum date cannot be greater than the maximum date.');
+    }
+
+    componentDidUpdate(prevProps) {
+        // Check if selectedYear has changed
+        if (this.props.selectedYear === prevProps.selectedYear) {
+            return;
+        }
+
+        // If the selectedYear prop has changed, update the currentDateView state with the new year value
+        this.setState(prev => ({currentDateView: moment(prev.currentDateView).set('year', this.props.selectedYear).toDate()}));
+    }
+
+    /**
+     * Handles the user pressing the year picker button.
+     * Opens the year selection screen with the minimum and maximum year range
+     * based on the props, the current year based on the state, and the active route.
+     */
+    onYearPickerPressed() {
+        const minYear = moment(this.props.minDate).year();
+        const maxYear = moment(this.props.maxDate).year();
+        const currentYear = this.state.currentDateView.getFullYear();
+        Navigation.navigate(ROUTES.getYearSelectionRoute(minYear, maxYear, currentYear, Navigation.getActiveRoute()));
+    }
+
+    /**
+     * Calls the onSelected function with the selected date.
+     * @param {Number} day - The day of the month that was selected.
+     */
+    onDayPressed(day) {
+        const selectedDate = new Date(this.state.currentDateView.getFullYear(), this.state.currentDateView.getMonth(), day);
+        this.props.onSelected(selectedDate);
+    }
+
+    moveToPrevMonth() {
+        this.setState(prev => ({currentDateView: moment(prev.currentDateView).subtract(1, 'M').toDate()}));
+    }
+
+    moveToNextMonth() {
+        this.setState(prev => ({currentDateView: moment(prev.currentDateView).add(1, 'M').toDate()}));
+    }
+
+    render() {
+        const currentMonthView = this.state.currentDateView.getMonth();
+        const currentYearView = this.state.currentDateView.getFullYear();
+        const calendarDaysMatrix = generateMonthMatrix(currentYearView, currentMonthView);
+        const hasAvailableDatesNextMonth = moment(this.props.maxDate).endOf('month').startOf('day') > moment(this.state.currentDateView).add(1, 'M');
+        const hasAvailableDatesPrevMonth = moment(this.props.minDate).startOf('day') < moment(this.state.currentDateView).subtract(1, 'M').endOf('month');
+
+        return (
+            <View>
+                <View style={[styles.calendarHeader, styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, styles.ph4, styles.pr1]}>
+                    <TouchableOpacity
+                        onPress={this.onYearPickerPressed}
+                        style={[styles.alignItemsCenter, styles.flexRow, styles.flex1, styles.justifyContentStart]}
+                    >
+                        <Text style={styles.sidebarLinkTextBold} testID="currentYearText" accessibilityLabel={this.props.translate('common.currentYear')}>{currentYearView}</Text>
+                        <ArrowIcon />
+                    </TouchableOpacity>
+                    <View style={[styles.alignItemsCenter, styles.flexRow, styles.flex1, styles.justifyContentEnd]}>
+                        <Text
+                            style={styles.sidebarLinkTextBold}
+                            testID="currentMonthText"
+                            accessibilityLabel={this.props.translate('common.currentMonth')}
+                        >
+                            {this.monthNames[currentMonthView]}
+                        </Text>
+                        <TouchableOpacity testID="prev-month-arrow" disabled={!hasAvailableDatesPrevMonth} onPress={this.moveToPrevMonth}>
+                            <ArrowIcon disabled={!hasAvailableDatesPrevMonth} direction={CONST.DIRECTION.LEFT} />
+                        </TouchableOpacity>
+                        <TouchableOpacity testID="next-month-arrow" disabled={!hasAvailableDatesNextMonth} onPress={this.moveToNextMonth}>
+                            <ArrowIcon disabled={!hasAvailableDatesNextMonth} />
+                        </TouchableOpacity>
+                    </View>
+                </View>
+                <View style={styles.flexRow}>
+                    {_.map(this.daysOfWeek, (dayOfWeek => (
+                        <View key={dayOfWeek} style={[styles.calendarDayRoot, styles.flex1, styles.justifyContentCenter, styles.alignItemsCenter]}>
+                            <Text style={styles.sidebarLinkTextBold}>{dayOfWeek[0]}</Text>
+                        </View>
+                    )))}
+                </View>
+                {_.map(calendarDaysMatrix, week => (
+                    <View key={`week-${week}`} style={styles.flexRow}>
+                        {_.map(week, (day, index) => {
+                            const currentDate = moment([currentYearView, currentMonthView, day]);
+                            const isBeforeMinDate = currentDate < moment(this.props.minDate).startOf('day');
+                            const isAfterMaxDate = currentDate > moment(this.props.maxDate).startOf('day');
+                            const isDisabled = !day || isBeforeMinDate || isAfterMaxDate;
+                            const isSelected = moment(this.props.value).isSame(moment([currentYearView, currentMonthView, day]), 'day');
+
+                            return (
+                                <Pressable
+                                    key={`${index}_day-${day}`}
+                                    disabled={isDisabled}
+                                    onPress={() => this.onDayPressed(day)}
+                                    style={styles.calendarDayRoot}
+                                    accessibilityLabel={day ? day.toString() : undefined}
+                                >
+                                    {({hovered, pressed}) => (
+                                        <View
+                                            style={[
+                                                styles.calendarDayContainer,
+                                                isSelected ? styles.calendarDayContainerSelected : {},
+                                                StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed)),
+                                            ]}
+                                        >
+                                            <Text style={isDisabled ? styles.calendarButtonDisabled : styles.dayText}>{day}</Text>
+                                        </View>
+                                    )}
+                                </Pressable>
+                            );
+                        })}
+                    </View>
+                ))}
+            </View>
+        );
+    }
+}
+
+CalendarPicker.propTypes = calendarPickerPropType;
+CalendarPicker.defaultProps = defaultCalendarPickerPropType;
+
+export default withLocalize(CalendarPicker);

src/components/DatePicker/index.js

@@ -19,12 +19,7 @@ class DatePicker extends React.Component {
         this.setDate = this.setDate.bind(this);
         this.showDatepicker = this.showDatepicker.bind(this);
 
-        /* We're using uncontrolled input otherwise it wont be possible to
-        * raise change events with a date value - each change will produce a date
-        * and make us reset the text input */
-        this.defaultValue = props.defaultValue
-            ? moment(props.defaultValue).format(CONST.DATE.MOMENT_FORMAT_STRING)
-            : '';
+        this.defaultValue = props.defaultValue ? moment(props.defaultValue).format(CONST.DATE.MOMENT_FORMAT_STRING) : '';
     }
 
     componentDidMount() {