[TS migration] Migrate 'CountrySelector.js' component to TypeScript

src/components/CountrySelector.js → src/components/CountrySelector.tsx

@@ -1,39 +1,33 @@
-import PropTypes from 'prop-types';
-import React, {useEffect} from 'react';
+import React, {type ForwardedRef, useEffect} 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 CONST 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?: keyof typeof CONST.ALL_COUNTRIES;
 
     /** 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,
+    inputID: string;
 };
 
-const defaultProps = {
-    errorText: '',
-    value: undefined,
-    forwardedRef: () => {},
+type CountrySelectorPropsWithForwardedRef = CountrySelectorProps & {
+    forwardedRef: ForwardedRef<View>;
 };
 
-function CountrySelector({errorText, value: countryCode, onInputChange, forwardedRef}) {
+function CountrySelector({errorText = '', value: countryCode, onInputChange, forwardedRef = () => {}}: CountrySelectorPropsWithForwardedRef) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
@@ -56,7 +50,7 @@
                 description={translate('common.country')}
                 onPress={() => {
                     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));
                 }}
             />
             <View style={styles.ml5}>
@@ -66,18 +60,14 @@
     );
 }
 
-CountrySelector.propTypes = propTypes;
-CountrySelector.defaultProps = defaultProps;
 CountrySelector.displayName = 'CountrySelector';
 
-const CountrySelectorWithRef = React.forwardRef((props, ref) => (
+const CountrySelectorWithRef = React.forwardRef((props: CountrySelectorProps, ref: ForwardedRef<View>) => (
     <CountrySelector
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
         forwardedRef={ref}
     />
 ));
 
-CountrySelectorWithRef.displayName = 'CountrySelectorWithRef';
-
 export default CountrySelectorWithRef;