[TS migration] Migrate 'StatePicker' component to TypeScript

src/components/MenuItem.tsx

@@ -84,7 +84,7 @@ type MenuItemProps = (ResponsiveProps | UnresponsiveProps) &
         titleStyle?: ViewStyle;
 
         /** Any adjustments to style when menu item is hovered or pressed */
-        hoverAndPressStyle: StyleProp<AnimatedStyle<ViewStyle>>;
+        hoverAndPressStyle?: StyleProp<AnimatedStyle<ViewStyle>>;
 
         /** Additional styles to style the description text below the title */
         descriptionTextStyle?: StyleProp<TextStyle>;
@@ -174,7 +174,7 @@ type MenuItemProps = (ResponsiveProps | UnresponsiveProps) &
         isSelected?: boolean;
 
         /** Prop to identify if we should load avatars vertically instead of diagonally */
-        shouldStackHorizontally: boolean;
+        shouldStackHorizontally?: boolean;
 
         /** Prop to represent the size of the avatar images to be shown */
         avatarSize?: (typeof CONST.AVATAR_SIZE)[keyof typeof CONST.AVATAR_SIZE];
@@ -219,10 +219,10 @@ type MenuItemProps = (ResponsiveProps | UnresponsiveProps) &
         furtherDetails?: string;
 
         /** The function that should be called when this component is LongPressed or right-clicked. */
-        onSecondaryInteraction: () => void;
+        onSecondaryInteraction?: () => void;
 
         /** Array of objects that map display names to their corresponding tooltip */
-        titleWithTooltips: DisplayNameWithTooltip[];
+        titleWithTooltips?: DisplayNameWithTooltip[];
     };
 
 function MenuItem(

src/components/StatePicker/StateSelectorModal.js → src/components/StatePicker/StateSelectorModal.tsx

@@ -1,48 +1,41 @@
 import {CONST as COMMON_CONST} from 'expensify-common/lib/CONST';
-import PropTypes from 'prop-types';
 import React, {useEffect, useMemo} 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 useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
-import searchCountryOptions from '@libs/searchCountryOptions';
+import searchCountryOptions, {type CountryData} from '@libs/searchCountryOptions';
 import StringUtils from '@libs/StringUtils';
 import CONST from '@src/CONST';
 
-const propTypes = {
+type State = keyof typeof COMMON_CONST.STATES;
+
+type StateSelectorModalProps = {
     /** Whether the modal is visible */
-    isVisible: PropTypes.bool.isRequired,
+    isVisible: boolean;
 
     /** State value selected  */
-    currentState: PropTypes.string,
+    currentState?: State | '';
 
     /** Function to call when the user selects a State */
-    onStateSelected: PropTypes.func,
+    onStateSelected?: (state: CountryData) => void;
 
     /** Function to call when the user closes the State modal */
-    onClose: PropTypes.func,
+    onClose?: () => void;
 
     /** The search value from the selection list */
-    searchValue: PropTypes.string.isRequired,
+    searchValue: string;
 
     /** Function to call when the user types in the search input */
-    setSearchValue: PropTypes.func.isRequired,
+    setSearchValue: (value: string) => void;
 
     /** Label to display on field */
-    label: PropTypes.string,
-};
-
-const defaultProps = {
-    currentState: '',
-    onClose: () => {},
-    onStateSelected: () => {},
-    label: undefined,
+    label?: string;
 };
 
-function StateSelectorModal({currentState, isVisible, onClose, onStateSelected, searchValue, setSearchValue, label}) {
+function StateSelectorModal({currentState = '', isVisible, onClose = () => {}, onStateSelected = () => {}, searchValue, setSearchValue, label}: StateSelectorModalProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
@@ -53,11 +46,11 @@ function StateSelectorModal({currentState, isVisible, onClose, onStateSelected,
         setSearchValue('');
     }, [isVisible, setSearchValue]);
 
-    const countryStates = useMemo(
+    const countryStates: CountryData[] = useMemo(
         () =>
-            _.map(_.keys(COMMON_CONST.STATES), (state) => {
-                const stateName = translate(`allStates.${state}.stateName`);
-                const stateISO = translate(`allStates.${state}.stateISO`);
+            Object.keys(COMMON_CONST.STATES).map((state) => {
+                const stateName = translate(`allStates.${state as State}.stateName`);
+                const stateISO = translate(`allStates.${state as State}.stateISO`);
                 return {
                     value: stateISO,
                     keyForList: stateISO,
@@ -81,20 +74,22 @@ function StateSelectorModal({currentState, isVisible, onClose, onStateSelected,
             hideModalContentWhileAnimating
             useNativeDriver
         >
+            {/* @ts-expect-error TODO: Remove this once ScreenWrapper (https://github.com/Expensify/App/issues/25128) is migrated to TypeScript. */}
             <ScreenWrapper
                 style={[styles.pb0]}
                 includePaddingTop={false}
                 includeSafeAreaPaddingBottom={false}
                 testID={StateSelectorModal.displayName}
             >
                 <HeaderWithBackButton
-                    title={label || translate('common.state')}
+                    title={label ?? translate('common.state')}
                     shouldShowBackButton
                     onBackButtonPress={onClose}
                 />
                 <SelectionList
+                    /* @ts-expect-error TODO: Remove this once SelectionList (https://github.com/Expensify/App/issues/31981) is migrated to TypeScript. */
                     headerMessage={headerMessage}
-                    textInputLabel={label || translate('common.state')}
+                    textInputLabel={label ?? translate('common.state')}
                     textInputValue={searchValue}
                     sections={[{data: searchResults, indexOffset: 0}]}
                     onSelectRow={onStateSelected}
@@ -108,8 +103,7 @@ function StateSelectorModal({currentState, isVisible, onClose, onStateSelected,
     );
 }
 
-StateSelectorModal.propTypes = propTypes;
-StateSelectorModal.defaultProps = defaultProps;
 StateSelectorModal.displayName = 'StateSelectorModal';
 
 export default StateSelectorModal;
+export type {State};

src/components/StatePicker/index.js → src/components/StatePicker/index.tsx

@@ -1,41 +1,28 @@
 import {CONST as COMMON_CONST} from 'expensify-common/lib/CONST';
-import PropTypes from 'prop-types';
-import React, {useState} from 'react';
+import React, {ForwardedRef, useState} from 'react';
 import {View} from 'react-native';
-import _ from 'underscore';
 import FormHelpMessage from '@components/FormHelpMessage';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
-import refPropTypes from '@components/refPropTypes';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
-import StateSelectorModal from './StateSelectorModal';
+import type {CountryData} from '@libs/searchCountryOptions';
+import StateSelectorModal, {type State} from './StateSelectorModal';
 
-const propTypes = {
+type StatePickerProps = {
     /** Error text to display */
-    errorText: PropTypes.string,
+    errorText?: string;
 
     /** State to display */
-    value: PropTypes.string,
+    value?: State;
 
     /** Callback to call when the input changes */
-    onInputChange: PropTypes.func,
-
-    /** A ref to forward to MenuItemWithTopDescription */
-    forwardedRef: refPropTypes,
+    onInputChange?: (value: string) => void;
 
     /** Label to display on field */
-    label: PropTypes.string,
-};
-
-const defaultProps = {
-    value: undefined,
-    forwardedRef: undefined,
-    errorText: '',
-    onInputChange: () => {},
-    label: undefined,
+    label?: string;
 };
 
-function StatePicker({value, errorText, onInputChange, forwardedRef, label}) {
+function StatePicker({value, onInputChange, label, errorText = ''}: StatePickerProps, ref: ForwardedRef<View>) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const [isPickerVisible, setIsPickerVisible] = useState(false);
@@ -49,23 +36,23 @@ function StatePicker({value, errorText, onInputChange, forwardedRef, label}) {
         setIsPickerVisible(false);
     };
 
-    const updateStateInput = (state) => {
+    const updateStateInput = (state: CountryData) => {
         if (state.value !== value) {
-            onInputChange(state.value);
+            onInputChange?.(state.value);
         }
         hidePickerModal();
     };
 
-    const title = value && _.keys(COMMON_CONST.STATES).includes(value) ? translate(`allStates.${value}.stateName`) : '';
+    const title = value && Object.keys(COMMON_CONST.STATES).includes(value) ? translate(`allStates.${value}.stateName`) : '';
     const descStyle = title.length === 0 ? styles.textNormal : null;
 
     return (
         <View>
             <MenuItemWithTopDescription
-                ref={forwardedRef}
+                ref={ref}
                 shouldShowRightIcon
                 title={title}
-                description={label || translate('common.state')}
+                description={label ?? translate('common.state')}
                 descriptionTextStyle={descStyle}
                 onPress={showPickerModal}
             />
@@ -85,18 +72,6 @@ function StatePicker({value, errorText, onInputChange, forwardedRef, label}) {
     );
 }
 
-StatePicker.propTypes = propTypes;
-StatePicker.defaultProps = defaultProps;
 StatePicker.displayName = 'StatePicker';
 
-const StatePickerWithRef = React.forwardRef((props, ref) => (
-    <StatePicker
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        forwardedRef={ref}
-    />
-));
-
-StatePickerWithRef.displayName = 'StatePickerWithRef';
-
-export default StatePickerWithRef;
+export default React.forwardRef(StatePicker);

src/libs/searchCountryOptions.ts

@@ -37,3 +37,4 @@ function searchCountryOptions(searchValue: string, countriesData: CountryData[])
 }
 
 export default searchCountryOptions;
+export type {CountryData};