Merge pull request #32660 from callstack-internal/pac-guerreiro/refac…

…tor/migrate-singleoptionselector-to-typescript [TS migration] Migrate 'SingleOptionSelector.js' component to TypeScript
Expensify · Dec 18, 2023 · c4659d6 · c4659d6
2 parents aac3674 + 8cd7767
commit c4659d6
Showing 1 changed file with 15 additions and 24 deletions.
diff --git a/src/components/SingleOptionSelector.js → src/components/SingleOptionSelector.tsx b/src/components/SingleOptionSelector.js → src/components/SingleOptionSelector.tsx
@@ -1,42 +1,35 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
-import _ from 'underscore';
+import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
+import {TranslationPaths} from '@src/languages/types';
 import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
 import SelectCircle from './SelectCircle';
 import Text from './Text';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
 
-const propTypes = {
+type Item = {
+    key: string;
+    label: TranslationPaths;
+};
+
+type SingleOptionSelectorProps = {
     /** Array of options for the selector, key is a unique identifier, label is a localize key that will be translated and displayed */
-    options: PropTypes.arrayOf(
-        PropTypes.shape({
-            key: PropTypes.string,
-            label: PropTypes.string,
-        }),
-    ),
+    options?: Item[];
 
     /** Key of the option that is currently selected */
-    selectedOptionKey: PropTypes.string,
+    selectedOptionKey?: string;
 
     /** Function to be called when an option is selected */
-    onSelectOption: PropTypes.func,
-    ...withLocalizePropTypes,
-};
-
-const defaultProps = {
-    options: [],
-    selectedOptionKey: undefined,
-    onSelectOption: () => {},
+    onSelectOption?: (item: Item) => void;
 };
 
-function SingleOptionSelector({options, selectedOptionKey, onSelectOption, translate}) {
+function SingleOptionSelector({options = [], selectedOptionKey, onSelectOption = () => {}}: SingleOptionSelectorProps) {
     const styles = useThemeStyles();
+    const {translate} = useLocalize();
     return (
         <View style={styles.pt4}>
-            {_.map(options, (option) => (
+            {options.map((option) => (
                 <View
                     style={styles.flexRow}
                     key={option.key}
@@ -61,8 +54,6 @@ function SingleOptionSelector({options, selectedOptionKey, onSelectOption, trans
     );
 }
 
-SingleOptionSelector.propTypes = propTypes;
-SingleOptionSelector.defaultProps = defaultProps;
 SingleOptionSelector.displayName = 'SingleOptionSelector';
 
-export default withLocalize(SingleOptionSelector);
+export default SingleOptionSelector;