Merge pull request #34654 from software-mansion-labs/ts/ValuePicker

[TS migration] Migrate 'ValuePicker' component to TypeScript

src/components/DatePicker/CalendarPicker/YearPickerModal.tsx

@@ -6,14 +6,14 @@ import SelectionList from '@components/SelectionList';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
-import type CalendarPickerRadioItem from './types';
+import type CalendarPickerListItem from './types';
 
 type YearPickerModalProps = {
     /** Whether the modal is visible */
     isVisible: boolean;
 
     /** The list of years to render */
-    years: CalendarPickerRadioItem[];
+    years: CalendarPickerListItem[];
 
     /** Currently selected year */
     currentYear?: number;
@@ -72,7 +72,7 @@ function YearPickerModal({isVisible, years, currentYear = new Date().getFullYear
                     inputMode={CONST.INPUT_MODE.NUMERIC}
                     headerMessage={headerMessage}
                     sections={sections}
-                    onSelectRow={(option: CalendarPickerRadioItem) => {
+                    onSelectRow={(option) => {
                         onYearChange?.(option.value);
                     }}
                     initiallyFocusedOptionKey={currentYear.toString()}

src/components/DatePicker/CalendarPicker/index.tsx

@@ -13,7 +13,7 @@ import getButtonState from '@libs/getButtonState';
 import CONST from '@src/CONST';
 import ArrowIcon from './ArrowIcon';
 import generateMonthMatrix from './generateMonthMatrix';
-import type CalendarPickerRadioItem from './types';
+import type CalendarPickerListItem from './types';
 import YearPickerModal from './YearPickerModal';
 
 type CalendarPickerProps = {
@@ -59,7 +59,7 @@ function CalendarPicker({
     const minYear = getYear(new Date(minDate));
     const maxYear = getYear(new Date(maxDate));
 
-    const [years, setYears] = useState<CalendarPickerRadioItem[]>(
+    const [years, setYears] = useState<CalendarPickerListItem[]>(
         Array.from({length: maxYear - minYear + 1}, (v, i) => i + minYear).map((year) => ({
             text: year.toString(),
             value: year,

src/components/DatePicker/CalendarPicker/types.ts

@@ -1,8 +1,8 @@
-import type {RadioItem} from '@components/SelectionList/types';
+import type {ListItem} from '@components/SelectionList/types';
 
-type CalendarPickerRadioItem = RadioItem & {
+type CalendarPickerListItem = ListItem & {
     /** The value representing a year in the CalendarPicker */
     value: number;
 };
 
-export default CalendarPickerRadioItem;
+export default CalendarPickerListItem;

src/components/Form/types.ts

@@ -10,6 +10,7 @@ import type Picker from '@components/Picker';
 import type SingleChoiceQuestion from '@components/SingleChoiceQuestion';
 import type StatePicker from '@components/StatePicker';
 import type TextInput from '@components/TextInput';
+import type ValuePicker from '@components/ValuePicker';
 import type BusinessTypePicker from '@pages/ReimbursementAccount/BusinessInfo/substeps/TypeBusiness/BusinessTypePicker';
 import type {TranslationPaths} from '@src/languages/types';
 import type {OnyxFormKey, OnyxValues} from '@src/ONYXKEYS';
@@ -32,7 +33,8 @@ type ValidInputs =
     | typeof CountrySelector
     | typeof AmountForm
     | typeof BusinessTypePicker
-    | typeof StatePicker;
+    | typeof StatePicker
+    | typeof ValuePicker;
 
 type ValueTypeKey = 'string' | 'boolean' | 'date';
 type ValueTypeMap = {

src/components/SelectionList/BaseListItem.tsx

@@ -11,10 +11,10 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import RadioListItem from './RadioListItem';
-import type {BaseListItemProps, RadioItem, User} from './types';
+import type {BaseListItemProps, ListItem} from './types';
 import UserListItem from './UserListItem';
 
-function BaseListItem<TItem extends User | RadioItem>({
+function BaseListItem<TItem extends ListItem>({
     item,
     isFocused = false,
     isDisabled = false,

src/components/SelectionList/BaseSelectionList.tsx

@@ -23,9 +23,9 @@ import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import BaseListItem from './BaseListItem';
-import type {BaseSelectionListProps, ButtonOrCheckBoxRoles, FlattenedSectionsReturn, RadioItem, Section, SectionListDataType, User} from './types';
+import type {BaseSelectionListProps, ButtonOrCheckBoxRoles, FlattenedSectionsReturn, ListItem, Section, SectionListDataType} from './types';
 
-function BaseSelectionList<TItem extends User | RadioItem>(
+function BaseSelectionList<TItem extends ListItem>(
     {
         sections,
         canSelectMultiple = false,

src/components/SelectionList/RadioListItem.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 import {View} from 'react-native';
 import TextWithTooltip from '@components/TextWithTooltip';
 import useThemeStyles from '@hooks/useThemeStyles';
-import type {RadioListItemProps} from './types';
+import type {ListItemProps} from './types';
 
-function RadioListItem({item, showTooltip, textStyles, alternateTextStyles}: RadioListItemProps) {
+function RadioListItem({item, showTooltip, textStyles, alternateTextStyles}: ListItemProps) {
     const styles = useThemeStyles();
 
     return (

src/components/SelectionList/UserListItem.tsx

@@ -6,9 +6,9 @@ import TextWithTooltip from '@components/TextWithTooltip';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import type {UserListItemProps} from './types';
+import type {ListItemProps} from './types';
 
-function UserListItem({item, textStyles, alternateTextStyles, showTooltip, style, isFocused, isHovered}: UserListItemProps) {
+function UserListItem({item, textStyles, alternateTextStyles, showTooltip, style, isFocused, isHovered}: ListItemProps) {
     const styles = useThemeStyles();
     const theme = useTheme();
     const StyleUtils = useStyleUtils();

src/components/SelectionList/index.android.tsx

@@ -3,9 +3,9 @@ import type {ForwardedRef} from 'react';
 import {Keyboard} from 'react-native';
 import type {TextInput} from 'react-native';
 import BaseSelectionList from './BaseSelectionList';
-import type {BaseSelectionListProps, RadioItem, User} from './types';
+import type {BaseSelectionListProps, ListItem} from './types';
 
-function SelectionList<TItem extends User | RadioItem>(props: BaseSelectionListProps<TItem>, ref: ForwardedRef<TextInput>) {
+function SelectionList<TItem extends ListItem>(props: BaseSelectionListProps<TItem>, ref: ForwardedRef<TextInput>) {
     return (
         <BaseSelectionList
             // eslint-disable-next-line react/jsx-props-no-spreading

src/components/SelectionList/index.ios.tsx

@@ -3,9 +3,9 @@ import type {ForwardedRef} from 'react';
 import {Keyboard} from 'react-native';
 import type {TextInput} from 'react-native';
 import BaseSelectionList from './BaseSelectionList';
-import type {BaseSelectionListProps, RadioItem, User} from './types';
+import type {BaseSelectionListProps, ListItem} from './types';
 
-function SelectionList<TItem extends User | RadioItem>(props: BaseSelectionListProps<TItem>, ref: ForwardedRef<TextInput>) {
+function SelectionList<TItem extends ListItem>(props: BaseSelectionListProps<TItem>, ref: ForwardedRef<TextInput>) {
     return (
         <BaseSelectionList<TItem>
             // eslint-disable-next-line react/jsx-props-no-spreading

src/components/SelectionList/index.tsx

@@ -4,9 +4,9 @@ import {Keyboard} from 'react-native';
 import type {TextInput} from 'react-native';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import BaseSelectionList from './BaseSelectionList';
-import type {BaseSelectionListProps, RadioItem, User} from './types';
+import type {BaseSelectionListProps, ListItem} from './types';
 
-function SelectionList<TItem extends User | RadioItem>(props: BaseSelectionListProps<TItem>, ref: ForwardedRef<TextInput>) {
+function SelectionList<TItem extends ListItem>(props: BaseSelectionListProps<TItem>, ref: ForwardedRef<TextInput>) {
     const [isScreenTouched, setIsScreenTouched] = useState(false);
 
     const touchStart = () => setIsScreenTouched(true);

src/components/SelectionList/types.ts

@@ -32,7 +32,7 @@ type CommonListItemProps<TItem> = {
     rightHandSideComponent?: ((item: TItem) => ReactElement<TItem>) | ReactElement | null;
 };
 
-type User = {
+type ListItem = {
     /** Text to display */
     text: string;
 
@@ -49,7 +49,7 @@ type User = {
     isDisabled?: boolean;
 
     /** User accountID */
-    accountID?: number;
+    accountID?: number | null;
 
     /** User login */
     login?: string;
@@ -78,9 +78,9 @@ type User = {
     shouldShowSubscript?: boolean;
 };
 
-type UserListItemProps = CommonListItemProps<User> & {
+type ListItemProps = CommonListItemProps<ListItem> & {
     /** The section list item */
-    item: User;
+    item: ListItem;
 
     /** Additional styles to apply to text */
     style?: StyleProp<TextStyle>;
@@ -89,41 +89,13 @@ type UserListItemProps = CommonListItemProps<User> & {
     isHovered?: boolean;
 };
 
-type RadioItem = {
-    /** Text to display */
-    text: string;
-
-    /** Alternate text to display */
-    alternateText?: string;
-
-    /** Key used internally by React */
-    keyForList: string;
-
-    /** Whether this option is selected */
-    isSelected?: boolean;
-
-    /** Whether this option is disabled for selection */
-    isDisabled?: boolean;
-
-    /** Represents the index of the section it came from  */
-    sectionIndex?: number;
-
-    /** Represents the index of the option within the section it came from */
-    index?: number;
-};
-
-type RadioListItemProps = CommonListItemProps<RadioItem> & {
-    /** The section list item */
-    item: RadioItem;
-};
-
-type BaseListItemProps<TItem extends User | RadioItem> = CommonListItemProps<TItem> & {
+type BaseListItemProps<TItem extends ListItem> = CommonListItemProps<TItem> & {
     item: TItem;
     shouldPreventDefaultFocusOnSelectRow?: boolean;
     keyForList?: string;
 };
 
-type Section<TItem extends User | RadioItem> = {
+type Section<TItem extends ListItem> = {
     /** Title of the section */
     title?: string;
 
@@ -140,7 +112,7 @@ type Section<TItem extends User | RadioItem> = {
     shouldShow?: boolean;
 };
 
-type BaseSelectionListProps<TItem extends User | RadioItem> = Partial<ChildrenProps> & {
+type BaseSelectionListProps<TItem extends ListItem> = Partial<ChildrenProps> & {
     /** Sections for the section list */
     sections: Array<SectionListData<TItem, Section<TItem>>>;
 
@@ -252,7 +224,7 @@ type ItemLayout = {
     offset: number;
 };
 
-type FlattenedSectionsReturn<TItem extends User | RadioItem> = {
+type FlattenedSectionsReturn<TItem extends ListItem> = {
     allOptions: TItem[];
     selectedOptions: TItem[];
     disabledOptionsIndexes: number[];
@@ -262,17 +234,15 @@ type FlattenedSectionsReturn<TItem extends User | RadioItem> = {
 
 type ButtonOrCheckBoxRoles = 'button' | 'checkbox';
 
-type SectionListDataType<TItem extends User | RadioItem> = SectionListData<TItem, Section<TItem>>;
+type SectionListDataType<TItem extends ListItem> = SectionListData<TItem, Section<TItem>>;
 
 export type {
     BaseSelectionListProps,
     CommonListItemProps,
-    UserListItemProps,
     Section,
-    RadioListItemProps,
     BaseListItemProps,
-    User,
-    RadioItem,
+    ListItem,
+    ListItemProps,
     FlattenedSectionsReturn,
     ItemLayout,
     ButtonOrCheckBoxRoles,