[TS migration] Migrate 'ValuePicker' component to TypeScript

src/components/ValuePicker/ValueSelectorModal.js → src/components/ValuePicker/ValueSelectorModal.tsx

@@ -1,51 +1,26 @@
-import _ from 'lodash';
-import PropTypes from 'prop-types';
 import React, {useEffect, useState} from 'react';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Modal from '@components/Modal';
 import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
+import type {ValuePickerItem, ValueSelectorModalProps} from './types';
 
-const propTypes = {
-    /** Whether the modal is visible */
-    isVisible: PropTypes.bool.isRequired,
-
-    /** Items to pick from */
-    items: PropTypes.arrayOf(PropTypes.shape({value: PropTypes.string, label: PropTypes.string})),
-
-    /** The selected item */
-    selectedItem: PropTypes.shape({value: PropTypes.string, label: PropTypes.string}),
-
-    /** Label for values */
-    label: PropTypes.string,
-
-    /** Function to call when the user selects a item */
-    onItemSelected: PropTypes.func,
-
-    /** Function to call when the user closes the modal */
-    onClose: PropTypes.func,
-
-    /** Whether to show the toolip text */
-    shouldShowTooltips: PropTypes.bool,
-};
-
-const defaultProps = {
-    items: [],
-    selectedItem: {},
-    label: '',
-    onClose: () => {},
-    onItemSelected: () => {},
-    shouldShowTooltips: true,
-};
-
-function ValueSelectorModal({items, selectedItem, label, isVisible, onClose, onItemSelected, shouldShowTooltips}) {
+function ValueSelectorModal({items = [], selectedItem, label = '', isVisible, onClose, onItemSelected, shouldShowTooltips}: ValueSelectorModalProps) {
     const styles = useThemeStyles();
-    const [sectionsData, setSectionsData] = useState([]);
+    const [sectionsData, setSectionsData] = useState<ValuePickerItem[]>([]);
 
     useEffect(() => {
-        const itemsData = _.map(items, (item) => ({value: item.value, alternateText: item.description, keyForList: item.value, text: item.label, isSelected: item === selectedItem}));
+        const itemsData = items.map((item, index) => ({
+            value: item?.value,
+            alternateText: item?.description,
+            keyForList: item.value ?? '',
+            text: item?.label ?? '',
+            isSelected: item === selectedItem,
+            sectionIndex: 0,
+            index,
+        }));
         setSectionsData(itemsData);
     }, [items, selectedItem]);
 
@@ -71,7 +46,7 @@ function ValueSelectorModal({items, selectedItem, label, isVisible, onClose, onI
                 <SelectionList
                     sections={[{data: sectionsData}]}
                     onSelectRow={onItemSelected}
-                    initiallyFocusedOptionKey={selectedItem.value}
+                    initiallyFocusedOptionKey={selectedItem?.value}
                     shouldStopPropagation
                     shouldShowTooltips={shouldShowTooltips}
                 />
@@ -80,8 +55,6 @@ function ValueSelectorModal({items, selectedItem, label, isVisible, onClose, onI
     );
 }
 
-ValueSelectorModal.propTypes = propTypes;
-ValueSelectorModal.defaultProps = defaultProps;
 ValueSelectorModal.displayName = 'ValueSelectorModal';
 
 export default ValueSelectorModal;

src/components/ValuePicker/index.tsx

@@ -0,0 +1,64 @@
+import React, {forwardRef, useState} from 'react';
+import type {ForwardedRef} from 'react';
+import {View} from 'react-native';
+import FormHelpMessage from '@components/FormHelpMessage';
+import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
+import variables from '@styles/variables';
+import type {ValuePickerItem, ValuePickerProps} from './types';
+import ValueSelectorModal from './ValueSelectorModal';
+
+function ValuePicker({value, label, items, placeholder = '', errorText = '', onInputChange, furtherDetails, shouldShowTooltips = true}: ValuePickerProps, forwardedRef: ForwardedRef<View>) {
+    const styles = useThemeStyles();
+    const StyleUtils = useStyleUtils();
+    const [isPickerVisible, setIsPickerVisible] = useState(false);
+
+    const showPickerModal = () => {
+        setIsPickerVisible(true);
+    };
+
+    const hidePickerModal = () => {
+        setIsPickerVisible(false);
+    };
+
+    const updateInput = (item: ValuePickerItem) => {
+        if (item?.value && item.value !== value) {
+            onInputChange?.(item.value);
+        }
+        hidePickerModal();
+    };
+
+    const descStyle = value?.length === 0 ? StyleUtils.getFontSizeStyle(variables.fontSizeLabel) : null;
+    const selectedItem = items?.find((item) => item.value === value);
+
+    return (
+        <View>
+            <MenuItemWithTopDescription
+                ref={forwardedRef}
+                shouldShowRightIcon
+                title={selectedItem?.label ?? placeholder ?? ''}
+                descriptionTextStyle={descStyle}
+                description={label}
+                onPress={showPickerModal}
+                furtherDetails={furtherDetails}
+            />
+            <View style={styles.ml5}>
+                <FormHelpMessage message={errorText} />
+            </View>
+            <ValueSelectorModal
+                isVisible={isPickerVisible}
+                label={label}
+                selectedItem={selectedItem}
+                items={items}
+                onClose={hidePickerModal}
+                onItemSelected={updateInput}
+                shouldShowTooltips={shouldShowTooltips}
+            />
+        </View>
+    );
+}
+
+ValuePicker.displayName = 'ValuePicker';
+
+export default forwardRef(ValuePicker);

src/components/ValuePicker/types.ts

@@ -0,0 +1,58 @@
+import type {RadioItem} from '@components/SelectionList/types';
+
+type ValuePickerItem = RadioItem & {
+    value?: string;
+    label?: string;
+    description?: string;
+};
+
+type ValueSelectorModalProps = {
+    /** Whether the modal is visible */
+    isVisible: boolean;
+
+    /** Items to pick from */
+    items?: ValuePickerItem[];
+
+    /** The selected item */
+    selectedItem?: ValuePickerItem;
+
+    /** Label for values */
+    label?: string;
+
+    /** Function to call when the user selects a item */
+    onItemSelected: (item: ValuePickerItem) => void;
+
+    /** Function to call when the user closes the modal */
+    onClose: () => void;
+
+    /** Whether to show the toolip text */
+    shouldShowTooltips?: boolean;
+};
+
+type ValuePickerProps = {
+    /** Item to display */
+    value?: string;
+
+    /** Label of picker */
+    label?: string;
+
+    /** Items to pick from */
+    items?: ValuePickerItem[];
+
+    /** A placeholder value to display */
+    placeholder?: string;
+
+    /** Form Error description */
+    errorText?: string;
+
+    /** Callback to call when the input changes */
+    onInputChange?: (value: string) => void;
+
+    /** Text to display under the main menu item */
+    furtherDetails?: string;
+
+    /** Whether to show the toolip text */
+    shouldShowTooltips?: boolean;
+};
+
+export type {ValuePickerItem, ValueSelectorModalProps, ValuePickerProps};