diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 93f59d358eb3..53bf81d1e53d 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -51,9 +51,7 @@ function BaseSelectionList({ rightHandSideComponent, alternateNumberOfSupportedLines, selectedItems = CONST.EMPTY_ARRAY, - listStyle, - listItemTitleStyles, - listItemWrapperStyle, + style, isSelected, isSmallScreenWidth, isLoadingNewOptions, @@ -311,8 +309,8 @@ function BaseSelectionList({ isAlternateTextMultilineSupported={!!alternateNumberOfSupportedLines} alternateTextNumberOfLines={alternateNumberOfSupportedLines} shouldIgnoreFocus={shouldIgnoreFocus} - wrapperStyle={listItemWrapperStyle} - titleStyles={listItemTitleStyles} + wrapperStyle={style?.listItemWrapperStyle} + titleStyles={style?.listItemTitleStyles} singleExecution={singleExecution} /> ); @@ -365,7 +363,7 @@ function BaseSelectionList({ useImperativeHandle(ref, () => ({scrollAndHighlightItem, scrollToIndex}), [scrollAndHighlightItem, scrollToIndex]); return ( - + {textInputComponent({shouldBeInsideList: false})} {data.length === 0 ? ( renderListEmptyContent() @@ -391,7 +389,7 @@ function BaseSelectionList({ showsVerticalScrollIndicator={showScrollIndicator} onEndReached={onEndReached} onEndReachedThreshold={onEndReachedThreshold} - style={listStyle as ViewStyle} + style={style?.listStyle as ViewStyle} initialScrollIndex={initialFocusedIndex} onScrollBeginDrag={onScrollBeginDrag} ListHeaderComponent={ diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index 5b4247e4f724..1b4f086605a6 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -64,14 +64,19 @@ type SelectionListProps = { /** Array of selected item keys */ selectedItems?: readonly string[]; - /** Styles to apply to the list */ - listStyle?: StyleProp; + style?: { + /** Styles to apply to the list */ + listStyle?: StyleProp; - /** Styles applied for the title of the list item */ - listItemTitleStyles?: StyleProp; + /** Styles applied for the title of the list item */ + listItemTitleStyles?: StyleProp; - /** Styles for the list item wrapper */ - listItemWrapperStyle?: StyleProp; + /** Styles for the list item wrapper */ + listItemWrapperStyle?: StyleProp; + + /** Styles to apply to the list container */ + containerStyle?: StyleProp; + }; /** Function that determines if an item is selected */ isSelected?: (item: TItem) => boolean; diff --git a/src/pages/workspace/accounting/netsuite/export/NetSuiteInvoiceItemPreferenceSelectPage.tsx b/src/pages/workspace/accounting/netsuite/export/NetSuiteInvoiceItemPreferenceSelectPage.tsx index e711e4450445..c6bdb04b5a44 100644 --- a/src/pages/workspace/accounting/netsuite/export/NetSuiteInvoiceItemPreferenceSelectPage.tsx +++ b/src/pages/workspace/accounting/netsuite/export/NetSuiteInvoiceItemPreferenceSelectPage.tsx @@ -5,9 +5,9 @@ import type {ValueOf} from 'type-fest'; import ConnectionLayout from '@components/ConnectionLayout'; import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; -import SelectionList from '@components/SelectionListWithSections'; -import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; -import type {ListItem} from '@components/SelectionListWithSections/types'; +import SelectionList from '@components/SelectionList'; +import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; +import type {ListItem} from '@components/SelectionList/types'; import type {SelectorType} from '@components/SelectionScreen'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -40,7 +40,7 @@ function NetSuiteInvoiceItemPreferenceSelectPage({policy}: WithPolicyConnections const selectedValue = Object.values(CONST.NETSUITE_INVOICE_ITEM_PREFERENCE).find((value) => value === config?.invoiceItemPreference) ?? CONST.NETSUITE_INVOICE_ITEM_PREFERENCE.CREATE; - const data: MenuListItem[] = Object.values(CONST.NETSUITE_INVOICE_ITEM_PREFERENCE).map((postingPreference) => ({ + const options: MenuListItem[] = Object.values(CONST.NETSUITE_INVOICE_ITEM_PREFERENCE).map((postingPreference) => ({ value: postingPreference, text: translate(`workspace.netsuite.invoiceItem.values.${postingPreference}.label`), keyForList: postingPreference, @@ -85,13 +85,13 @@ function NetSuiteInvoiceItemPreferenceSelectPage({policy}: WithPolicyConnections contentContainerStyle={[styles.flexGrow1, styles.flexShrink1]} > selectInvoicePreference(selection as MenuListItem)} - sections={[{data}]} ListItem={RadioListItem} showScrollIndicator shouldUpdateFocusedIndex - initiallyFocusedOptionKey={data.find((mode) => mode.isSelected)?.keyForList} - containerStyle={[styles.flexReset, styles.flexGrow1, styles.flexShrink1, styles.pb0]} + initiallyFocusedItemKey={options.find((mode) => mode.isSelected)?.keyForList} + style={{containerStyle: [styles.flexReset, styles.flexGrow1, styles.flexShrink1, styles.pb0]}} /> {config?.invoiceItemPreference === CONST.NETSUITE_INVOICE_ITEM_PREFERENCE.SELECT && ( diff --git a/src/pages/workspace/categories/CategoryDefaultTaxRatePage.tsx b/src/pages/workspace/categories/CategoryDefaultTaxRatePage.tsx index fde675c9c78f..c46868f8e541 100644 --- a/src/pages/workspace/categories/CategoryDefaultTaxRatePage.tsx +++ b/src/pages/workspace/categories/CategoryDefaultTaxRatePage.tsx @@ -1,9 +1,9 @@ import React, {useCallback, useMemo} from 'react'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; -import SelectionList from '@components/SelectionListWithSections'; -import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; -import type {ListItem} from '@components/SelectionListWithSections/types'; +import SelectionList from '@components/SelectionList'; +import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; +import type {ListItem} from '@components/SelectionList/types'; import useLocalize from '@hooks/useLocalize'; import usePolicy from '@hooks/usePolicy'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -48,6 +48,23 @@ function CategoryDefaultTaxRatePage({ .sort((a, b) => localeCompare(a.text ?? a.keyForList ?? '', b.text ?? b.keyForList ?? '')); }, [policy, selectedTaxRate, textForDefault, localeCompare]); + const handleSelectRow = useCallback( + (item: ListItem) => { + if (!item.keyForList) { + return; + } + + if (item.keyForList === selectedTaxRate) { + Navigation.goBack(ROUTES.WORKSPACE_CATEGORY_SETTINGS.getRoute(policyID, categoryName)); + return; + } + + setPolicyCategoryTax(policyID, categoryName, item.keyForList); + Navigation.setNavigationActionToMicrotaskQueue(() => Navigation.goBack(ROUTES.WORKSPACE_CATEGORY_SETTINGS.getRoute(policyID, categoryName))); + }, + [policyID, categoryName, selectedTaxRate], + ); + return ( Navigation.goBack(ROUTES.WORKSPACE_CATEGORY_SETTINGS.getRoute(policyID, categoryName))} /> { - if (!item.keyForList) { - return; - } - - if (item.keyForList === selectedTaxRate) { - Navigation.goBack(ROUTES.WORKSPACE_CATEGORY_SETTINGS.getRoute(policyID, categoryName)); - return; - } - - setPolicyCategoryTax(policyID, categoryName, item.keyForList); - Navigation.setNavigationActionToMicrotaskQueue(() => Navigation.goBack(ROUTES.WORKSPACE_CATEGORY_SETTINGS.getRoute(policyID, categoryName))); - }} + onSelectRow={handleSelectRow} shouldSingleExecuteRowSelect - containerStyle={[styles.pt3]} - initiallyFocusedOptionKey={selectedTaxRate} addBottomSafeAreaPadding + initiallyFocusedItemKey={selectedTaxRate} + style={{containerStyle: styles.pt3}} />