diff --git a/src/CONST.ts b/src/CONST.ts index e3cce4b613af..5807552bd461 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -3128,4 +3128,8 @@ const CONST = { MINI_CONTEXT_MENU_MAX_ITEMS: 4, } as const; +type Country = keyof typeof CONST.ALL_COUNTRIES; + +export type {Country}; + export default CONST; diff --git a/src/components/CountrySelector.js b/src/components/CountrySelector.tsx similarity index 62% rename from src/components/CountrySelector.js rename to src/components/CountrySelector.tsx index 68a6486bce48..589530cd7879 100644 --- a/src/components/CountrySelector.js +++ b/src/components/CountrySelector.tsx @@ -1,39 +1,30 @@ -import PropTypes from 'prop-types'; -import React, {useEffect} from 'react'; +import React, {forwardRef, useEffect} from 'react'; +import type {ForwardedRef} from 'react'; import {View} from 'react-native'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; +import type {Country} from '@src/CONST'; import ROUTES from '@src/ROUTES'; import FormHelpMessage from './FormHelpMessage'; import MenuItemWithTopDescription from './MenuItemWithTopDescription'; -import refPropTypes from './refPropTypes'; -const propTypes = { +type CountrySelectorProps = { /** Form error text. e.g when no country is selected */ - errorText: PropTypes.string, + errorText?: string; /** Callback called when the country changes. */ - onInputChange: PropTypes.func.isRequired, + onInputChange: (value?: string) => void; /** Current selected country */ - value: PropTypes.string, + value?: Country; /** inputID used by the Form component */ // eslint-disable-next-line react/no-unused-prop-types - inputID: PropTypes.string.isRequired, - - /** React ref being forwarded to the MenuItemWithTopDescription */ - forwardedRef: refPropTypes, -}; - -const defaultProps = { - errorText: '', - value: undefined, - forwardedRef: () => {}, + inputID: string; }; -function CountrySelector({errorText, value: countryCode, onInputChange, forwardedRef}) { +function CountrySelector({errorText = '', value: countryCode, onInputChange}: CountrySelectorProps, ref: ForwardedRef) { const styles = useThemeStyles(); const {translate} = useLocalize(); @@ -51,12 +42,12 @@ function CountrySelector({errorText, value: countryCode, onInputChange, forwarde { const activeRoute = Navigation.getActiveRouteWithoutParams(); - Navigation.navigate(ROUTES.SETTINGS_PERSONAL_DETAILS_ADDRESS_COUNTRY.getRoute(countryCode, activeRoute)); + Navigation.navigate(ROUTES.SETTINGS_PERSONAL_DETAILS_ADDRESS_COUNTRY.getRoute(countryCode ?? '', activeRoute)); }} /> @@ -66,18 +57,6 @@ function CountrySelector({errorText, value: countryCode, onInputChange, forwarde ); } -CountrySelector.propTypes = propTypes; -CountrySelector.defaultProps = defaultProps; CountrySelector.displayName = 'CountrySelector'; -const CountrySelectorWithRef = React.forwardRef((props, ref) => ( - -)); - -CountrySelectorWithRef.displayName = 'CountrySelectorWithRef'; - -export default CountrySelectorWithRef; +export default forwardRef(CountrySelector); diff --git a/src/languages/en.ts b/src/languages/en.ts index b6da38df21a0..0a754a883d07 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -1,6 +1,7 @@ import {CONST as COMMON_CONST} from 'expensify-common/lib/CONST'; import Str from 'expensify-common/lib/str'; import CONST from '@src/CONST'; +import type {Country} from '@src/CONST'; import type { AddressLineParams, AlreadySignedInParams, @@ -106,7 +107,7 @@ type StateValue = { type States = Record; -type AllCountries = Record; +type AllCountries = Record; /* eslint-disable max-len */ export default {