Merge pull request #29970 from VickyStash/ts-migration/radioButtons-c…

…omponent [No QA][TS migration] Migrate 'RadioButtons.js' component to TypeScript
Expensify · Oct 27, 2023 · de3ec13 · de3ec13
2 parents 28a1b81 + 84e6c26
commit de3ec13
Showing 1 changed file with 13 additions and 16 deletions.
diff --git a/src/components/RadioButtons.js → src/components/RadioButtons.tsx b/src/components/RadioButtons.js → src/components/RadioButtons.tsx
@@ -1,36 +1,34 @@
 import React, {useState} from 'react';
 import {View} from 'react-native';
-import PropTypes from 'prop-types';
-import _ from 'underscore';
 import RadioButtonWithLabel from './RadioButtonWithLabel';
 import styles from '../styles/styles';
 
-const propTypes = {
+type Choice = {
+    label: string;
+    value: string;
+};
+
+type RadioButtonsProps = {
     /** List of choices to display via radio buttons */
-    items: PropTypes.arrayOf(
-        PropTypes.shape({
-            label: PropTypes.string.isRequired,
-            value: PropTypes.string.isRequired,
-        }),
-    ).isRequired,
+    items: Choice[];
 
     /** Callback to fire when selecting a radio button */
-    onPress: PropTypes.func.isRequired,
+    onPress: (value: string) => void;
 };
 
-function RadioButtons(props) {
+function RadioButtons({items, onPress}: RadioButtonsProps) {
     const [checkedValue, setCheckedValue] = useState('');
 
     return (
         <View>
-            {_.map(props.items, (item, index) => (
+            {items.map((item) => (
                 <RadioButtonWithLabel
-                    key={`${item.label}-${index}`}
+                    key={item.value}
                     isChecked={item.value === checkedValue}
-                    style={[styles.mt4]}
+                    style={styles.mt4}
                     onPress={() => {
                         setCheckedValue(item.value);
-                        return props.onPress(item.value);
+                        return onPress(item.value);
                     }}
                     label={item.label}
                 />
@@ -39,7 +37,6 @@ function RadioButtons(props) {
     );
 }
 
-RadioButtons.propTypes = propTypes;
 RadioButtons.displayName = 'RadioButtons';
 
 export default RadioButtons;