Merge pull request Expensify#35642 from software-mansion-labs/ts-migr…

…ation/new-date-picker

[TS Migration] NewDatePicker

src/components/DatePicker/CalendarPicker/ArrowIcon.js → src/components/DatePicker/CalendarPicker/ArrowIcon.tsx

@@ -1,32 +1,27 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
+import type {ValueOf} from 'type-fest';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 
-const propTypes = {
+type ArrowIconProps = {
     /** Specifies if the arrow icon should be disabled or not. */
-    disabled: PropTypes.bool,
+    disabled?: boolean;
 
     /** Specifies direction of icon */
-    direction: PropTypes.oneOf([CONST.DIRECTION.LEFT, CONST.DIRECTION.RIGHT]),
+    direction?: ValueOf<typeof CONST.DIRECTION>;
 };
 
-const defaultProps = {
-    disabled: false,
-    direction: CONST.DIRECTION.RIGHT,
-};
-
-function ArrowIcon(props) {
+function ArrowIcon({disabled = false, direction = CONST.DIRECTION.RIGHT}: ArrowIconProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     return (
-        <View style={[styles.p1, StyleUtils.getDirectionStyle(props.direction), props.disabled ? styles.buttonOpacityDisabled : {}]}>
+        <View style={[styles.p1, StyleUtils.getDirectionStyle(direction), disabled ? styles.buttonOpacityDisabled : {}]}>
             <Icon
                 fill={theme.icon}
                 src={Expensicons.ArrowRight}
@@ -36,7 +31,5 @@ function ArrowIcon(props) {
 }
 
 ArrowIcon.displayName = 'ArrowIcon';
-ArrowIcon.propTypes = propTypes;
-ArrowIcon.defaultProps = defaultProps;
 
 export default ArrowIcon;

src/components/DatePicker/CalendarPicker/YearPickerModal.js → src/components/DatePicker/CalendarPicker/YearPickerModal.tsx

@@ -1,63 +1,55 @@
-import PropTypes from 'prop-types';
 import React, {useEffect, useMemo, useState} from 'react';
-import _ from 'underscore';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Modal from '@components/Modal';
 import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
-import {radioListItemPropTypes} from '@components/SelectionList/selectionListPropTypes';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
+import type CalendarPickerRadioItem from './types';
 
-const propTypes = {
+type YearPickerModalProps = {
     /** Whether the modal is visible */
-    isVisible: PropTypes.bool.isRequired,
+    isVisible: boolean;
 
     /** The list of years to render */
-    years: PropTypes.arrayOf(PropTypes.shape(radioListItemPropTypes.item)).isRequired,
+    years: CalendarPickerRadioItem[];
 
     /** Currently selected year */
-    currentYear: PropTypes.number,
+    currentYear?: number;
 
     /** Function to call when the user selects a year */
-    onYearChange: PropTypes.func,
+    onYearChange?: (year: number) => void;
 
     /** Function to call when the user closes the year picker */
-    onClose: PropTypes.func,
+    onClose?: () => void;
 };
 
-const defaultProps = {
-    currentYear: new Date().getFullYear(),
-    onYearChange: () => {},
-    onClose: () => {},
-};
-
-function YearPickerModal(props) {
+function YearPickerModal({isVisible, years, currentYear = new Date().getFullYear(), onYearChange, onClose}: YearPickerModalProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const [searchText, setSearchText] = useState('');
     const {sections, headerMessage} = useMemo(() => {
-        const yearsList = searchText === '' ? props.years : _.filter(props.years, (year) => year.text.includes(searchText));
+        const yearsList = searchText === '' ? years : years.filter((year) => year.text.includes(searchText));
         return {
             headerMessage: !yearsList.length ? translate('common.noResultsFound') : '',
             sections: [{data: yearsList, indexOffset: 0}],
         };
-    }, [props.years, searchText, translate]);
+    }, [years, searchText, translate]);
 
     useEffect(() => {
-        if (props.isVisible) {
+        if (isVisible) {
             return;
         }
         setSearchText('');
-    }, [props.isVisible]);
+    }, [isVisible]);
 
     return (
         <Modal
             type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
-            isVisible={props.isVisible}
-            onClose={props.onClose}
-            onModalHide={props.onClose}
+            isVisible={isVisible}
+            onClose={() => onClose?.()}
+            onModalHide={onClose}
             hideModalContentWhileAnimating
             useNativeDriver
         >
@@ -69,7 +61,7 @@ function YearPickerModal(props) {
             >
                 <HeaderWithBackButton
                     title={translate('yearPickerPage.year')}
-                    onBackButtonPress={props.onClose}
+                    onBackButtonPress={onClose}
                 />
                 <SelectionList
                     shouldDelayFocus
@@ -80,8 +72,10 @@ function YearPickerModal(props) {
                     inputMode={CONST.INPUT_MODE.NUMERIC}
                     headerMessage={headerMessage}
                     sections={sections}
-                    onSelectRow={(option) => props.onYearChange(option.value)}
-                    initiallyFocusedOptionKey={props.currentYear.toString()}
+                    onSelectRow={(option: CalendarPickerRadioItem) => {
+                        onYearChange?.(option.value);
+                    }}
+                    initiallyFocusedOptionKey={currentYear.toString()}
                     showScrollIndicator
                     shouldStopPropagation
                 />
@@ -90,8 +84,6 @@ function YearPickerModal(props) {
     );
 }
 
-YearPickerModal.propTypes = propTypes;
-YearPickerModal.defaultProps = defaultProps;
 YearPickerModal.displayName = 'YearPickerModal';
 
 export default YearPickerModal;

src/components/DatePicker/CalendarPicker/generateMonthMatrix.js → src/components/DatePicker/CalendarPicker/generateMonthMatrix.ts

@@ -4,20 +4,14 @@ import DateUtils from '@libs/DateUtils';
 /**
  * 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.
+ * @param year - The year for which to generate the month matrix.
+ * @param month - The month (0-indexed) for which to generate the month matrix.
+ * @returns 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');
-    }
+export default function generateMonthMatrix(year: number, month: 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');
     }
@@ -51,14 +45,14 @@ export default function generateMonthMatrix(year, month) {
     // 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);
+            currentWeek.push(undefined);
         }
         matrix.push(currentWeek);
     }
 
     // Add null values for days before the first day of the month
     for (let i = matrix[0].length; i < 7; i++) {
-        matrix[0].unshift(null);
+        matrix[0].unshift(undefined);
     }
 
     return matrix;