From 0348111bf87e03a2d7a1fe1c3cfc236f8e1d21af Mon Sep 17 00:00:00 2001 From: burczu Date: Tue, 20 Feb 2024 11:44:43 +0100 Subject: [PATCH 01/20] render item prop exposed --- src/components/SelectionList/BaseListItem.tsx | 2 +- .../SelectionList/BaseSelectionList.tsx | 6 ++++-- src/components/SelectionList/types.ts | 17 +++++++++++++++-- 3 files changed, 20 insertions(+), 5 deletions(-) diff --git a/src/components/SelectionList/BaseListItem.tsx b/src/components/SelectionList/BaseListItem.tsx index 9bfeacbc0ac2..f7b29371af0c 100644 --- a/src/components/SelectionList/BaseListItem.tsx +++ b/src/components/SelectionList/BaseListItem.tsx @@ -25,13 +25,13 @@ function BaseListItem({ onDismissError = () => {}, rightHandSideComponent, keyForList, + ListItem, }: BaseListItemProps) { const theme = useTheme(); const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); const {translate} = useLocalize(); const isUserItem = 'icons' in item && item?.icons?.length && item.icons.length > 0; - const ListItem = isUserItem ? UserListItem : RadioListItem; const rightHandSideComponentRender = () => { if (canSelectMultiple || !rightHandSideComponent) { diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 850874b7abc0..c1653dddb981 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -28,6 +28,7 @@ import type {BaseSelectionListProps, ButtonOrCheckBoxRoles, FlattenedSectionsRet function BaseSelectionList( { sections, + renderItem, canSelectMultiple = false, onSelectRow, onSelectAll, @@ -271,7 +272,7 @@ function BaseSelectionList( ); }; - const renderItem = ({item, index, section}: SectionListRenderItemInfo>) => { + const getRenderItem = ({item, index, section}: SectionListRenderItemInfo>) => { const indexOffset = section.indexOffset ? section.indexOffset : 0; const normalizedIndex = index + indexOffset; const isDisabled = !!section.isDisabled || item.isDisabled; @@ -291,6 +292,7 @@ function BaseSelectionList( shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow} rightHandSideComponent={rightHandSideComponent} keyForList={item.keyForList} + ListItem={renderItem()} /> ); }; @@ -453,7 +455,7 @@ function BaseSelectionList( sections={sections} stickySectionHeadersEnabled={false} renderSectionHeader={renderSectionHeader} - renderItem={renderItem} + renderItem={getRenderItem} getItemLayout={getItemLayout} onScroll={onScroll} onScrollBeginDrag={onScrollBeginDrag} diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index 6ef0fb742dc3..0fa411baf479 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -1,5 +1,14 @@ -import type {ReactElement, ReactNode} from 'react'; -import type {GestureResponderEvent, InputModeOptions, LayoutChangeEvent, SectionListData, StyleProp, TextStyle, ViewStyle} from 'react-native'; +import type {JSXElementConstructor, ReactElement, ReactNode} from 'react'; +import type { + GestureResponderEvent, + InputModeOptions, + LayoutChangeEvent, + SectionListData, + SectionListRenderItemInfo, + StyleProp, + TextStyle, + ViewStyle +} from 'react-native'; import type {Errors, Icon, PendingAction} from '@src/types/onyx/OnyxCommon'; import type ChildrenProps from '@src/types/utils/ChildrenProps'; @@ -93,6 +102,7 @@ type BaseListItemProps = CommonListItemProps & { item: TItem; shouldPreventDefaultFocusOnSelectRow?: boolean; keyForList?: string; + ListItem: JSXElementConstructor; }; type Section = { @@ -116,6 +126,9 @@ type BaseSelectionListProps = Partial & { /** Sections for the section list */ sections: Array>>; + /** Default renderer for every item in the list */ + renderItem: () => JSXElementConstructor; + /** Whether this is a multi-select list */ canSelectMultiple?: boolean; From 9b44d950471dcbbbde6530d9f79d06188df72b56 Mon Sep 17 00:00:00 2001 From: burczu Date: Tue, 20 Feb 2024 11:45:02 +0100 Subject: [PATCH 02/20] render item prop handled where selection list used --- .../DatePicker/CalendarPicker/YearPickerModal.tsx | 2 ++ src/components/StatePicker/StateSelectorModal.tsx | 2 ++ src/components/ValuePicker/ValueSelectorModal.tsx | 2 ++ .../BusinessTypePicker/BusinessTypeSelectorModal.tsx | 2 ++ src/pages/RoomInvitePage.tsx | 2 ++ src/pages/RoomMembersPage.tsx | 2 ++ src/pages/SearchPage/index.js | 3 +++ src/pages/iou/IOUCurrencySelection.js | 2 ++ .../MoneyTemporaryForRefactorRequestParticipantsSelector.js | 3 +++ src/pages/iou/request/step/IOURequestStepCurrency.js | 2 ++ .../MoneyRequestParticipantsSelector.js | 3 +++ src/pages/settings/Preferences/LanguagePage.js | 2 ++ src/pages/settings/Preferences/PriorityModePage.js | 2 ++ src/pages/settings/Preferences/ThemePage.js | 2 ++ .../Profile/PersonalDetails/CountrySelectionPage.js | 2 ++ src/pages/settings/Profile/PronounsPage.js | 2 ++ src/pages/settings/Profile/TimezoneSelectPage.js | 2 ++ src/pages/settings/Report/NotificationPreferencePage.tsx | 2 ++ src/pages/settings/Report/WriteCapabilityPage.tsx | 2 ++ src/pages/tasks/TaskAssigneeSelectorModal.js | 3 +++ src/pages/workspace/WorkspaceInvitePage.tsx | 2 ++ src/pages/workspace/WorkspaceMembersPage.js | 2 ++ src/pages/workspace/WorkspaceProfileCurrencyPage.js | 2 ++ .../reimburse/WorkspaceRateAndUnitPage/UnitPage.tsx | 2 ++ src/stories/SelectionList.stories.js | 6 ++++++ 25 files changed, 58 insertions(+) diff --git a/src/components/DatePicker/CalendarPicker/YearPickerModal.tsx b/src/components/DatePicker/CalendarPicker/YearPickerModal.tsx index 8f2acc6fbd3c..9885841495a7 100644 --- a/src/components/DatePicker/CalendarPicker/YearPickerModal.tsx +++ b/src/components/DatePicker/CalendarPicker/YearPickerModal.tsx @@ -7,6 +7,7 @@ import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; import type CalendarPickerListItem from './types'; +import RadioListItem from "@components/SelectionList/RadioListItem"; type YearPickerModalProps = { /** Whether the modal is visible */ @@ -78,6 +79,7 @@ function YearPickerModal({isVisible, years, currentYear = new Date().getFullYear initiallyFocusedOptionKey={currentYear.toString()} showScrollIndicator shouldStopPropagation + renderItem={() => RadioListItem} /> diff --git a/src/components/StatePicker/StateSelectorModal.tsx b/src/components/StatePicker/StateSelectorModal.tsx index 798d3be7a698..3d28241fa190 100644 --- a/src/components/StatePicker/StateSelectorModal.tsx +++ b/src/components/StatePicker/StateSelectorModal.tsx @@ -10,6 +10,7 @@ import searchCountryOptions from '@libs/searchCountryOptions'; import type {CountryData} from '@libs/searchCountryOptions'; import StringUtils from '@libs/StringUtils'; import CONST from '@src/CONST'; +import RadioListItem from "@components/SelectionList/RadioListItem"; type State = keyof typeof COMMON_CONST.STATES; @@ -100,6 +101,7 @@ function StateSelectorModal({currentState, isVisible, onClose = () => {}, onStat initiallyFocusedOptionKey={currentState} shouldStopPropagation shouldUseDynamicMaxToRenderPerBatch + renderItem={() => RadioListItem} /> diff --git a/src/components/ValuePicker/ValueSelectorModal.tsx b/src/components/ValuePicker/ValueSelectorModal.tsx index 1e7c6088241d..96533b61843f 100644 --- a/src/components/ValuePicker/ValueSelectorModal.tsx +++ b/src/components/ValuePicker/ValueSelectorModal.tsx @@ -6,6 +6,7 @@ import SelectionList from '@components/SelectionList'; import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; import type {ValueSelectorModalProps} from './types'; +import RadioListItem from "@components/SelectionList/RadioListItem"; function ValueSelectorModal({items = [], selectedItem, label = '', isVisible, onClose, onItemSelected, shouldShowTooltips = true}: ValueSelectorModalProps) { const styles = useThemeStyles(); @@ -40,6 +41,7 @@ function ValueSelectorModal({items = [], selectedItem, label = '', isVisible, on initiallyFocusedOptionKey={selectedItem?.value} shouldStopPropagation shouldShowTooltips={shouldShowTooltips} + renderItem={() => RadioListItem} /> diff --git a/src/pages/ReimbursementAccount/BusinessInfo/substeps/TypeBusiness/BusinessTypePicker/BusinessTypeSelectorModal.tsx b/src/pages/ReimbursementAccount/BusinessInfo/substeps/TypeBusiness/BusinessTypePicker/BusinessTypeSelectorModal.tsx index 2b80b890e4bd..a7c30160a8d3 100644 --- a/src/pages/ReimbursementAccount/BusinessInfo/substeps/TypeBusiness/BusinessTypePicker/BusinessTypeSelectorModal.tsx +++ b/src/pages/ReimbursementAccount/BusinessInfo/substeps/TypeBusiness/BusinessTypePicker/BusinessTypeSelectorModal.tsx @@ -7,6 +7,7 @@ import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; import type {BusinessTypeItemType, IncorporationType} from './types'; +import RadioListItem from "@components/SelectionList/RadioListItem"; type BusinessTypeSelectorModalProps = { /** Whether the modal is visible */ @@ -66,6 +67,7 @@ function BusinessTypeSelectorModal({isVisible, currentBusinessType, onBusinessTy onSelectRow={onBusinessTypeSelected} shouldStopPropagation shouldUseDynamicMaxToRenderPerBatch + renderItem={() => RadioListItem} /> diff --git a/src/pages/RoomInvitePage.tsx b/src/pages/RoomInvitePage.tsx index 2c26d148f54c..57ac52ef349e 100644 --- a/src/pages/RoomInvitePage.tsx +++ b/src/pages/RoomInvitePage.tsx @@ -31,6 +31,7 @@ import type {PersonalDetailsList, Policy} from '@src/types/onyx'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; import type {WithReportOrNotFoundProps} from './home/report/withReportOrNotFound'; import withReportOrNotFound from './home/report/withReportOrNotFound'; +import UserListItem from "@components/SelectionList/UserListItem"; type RoomInvitePageOnyxProps = { /** All of the personal details for everyone */ @@ -225,6 +226,7 @@ function RoomInvitePage({betas, personalDetails, report, policies}: RoomInvitePa UserListItem} textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')} textInputValue={searchTerm} onChangeText={setSearchTerm} diff --git a/src/pages/RoomMembersPage.tsx b/src/pages/RoomMembersPage.tsx index 7d0833379c8d..941887e3fa53 100644 --- a/src/pages/RoomMembersPage.tsx +++ b/src/pages/RoomMembersPage.tsx @@ -33,6 +33,7 @@ import type {Session} from '@src/types/onyx'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; import type {WithReportOrNotFoundProps} from './home/report/withReportOrNotFound'; import withReportOrNotFound from './home/report/withReportOrNotFound'; +import UserListItem from "@components/SelectionList/UserListItem"; type RoomMembersPageOnyxProps = { session: OnyxEntry; @@ -275,6 +276,7 @@ function RoomMembersPage({report, session, policies}: RoomMembersPageProps) { showLoadingPlaceholder={!OptionsListUtils.isPersonalDetailsReady(personalDetails) || !didLoadRoomMembers} showScrollIndicator shouldPreventDefaultFocusOnSelectRow={!DeviceCapabilities.canUseTouchScreen()} + renderItem={() => UserListItem} /> diff --git a/src/pages/SearchPage/index.js b/src/pages/SearchPage/index.js index 7c472296dfe1..b1c666069922 100644 --- a/src/pages/SearchPage/index.js +++ b/src/pages/SearchPage/index.js @@ -20,6 +20,7 @@ import Timing from '@userActions/Timing'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import SearchPageFooter from './SearchPageFooter'; +import RadioListItem from "@components/SelectionList/RadioListItem"; const propTypes = { /* Onyx Props */ @@ -153,6 +154,8 @@ function SearchPage({betas, reports, isSearchingForReports}) { RadioListItem} textInputValue={searchValue} textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')} textInputHint={offlineMessage} diff --git a/src/pages/iou/IOUCurrencySelection.js b/src/pages/iou/IOUCurrencySelection.js index 2a48897bfc85..71f4e0c2e71f 100644 --- a/src/pages/iou/IOUCurrencySelection.js +++ b/src/pages/iou/IOUCurrencySelection.js @@ -19,6 +19,7 @@ import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import {iouDefaultProps, iouPropTypes} from './propTypes'; +import RadioListItem from "@components/SelectionList/RadioListItem"; /** * IOU Currency selection for selecting currency @@ -165,6 +166,7 @@ function IOUCurrencySelection(props) { /> RadioListItem} textInputLabel={translate('common.search')} textInputValue={searchValue} onChangeText={setSearchValue} diff --git a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js index d6c088c23e95..cc755874a6b6 100644 --- a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js +++ b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js @@ -21,6 +21,7 @@ import * as ReportUtils from '@libs/ReportUtils'; import reportPropTypes from '@pages/reportPropTypes'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; +import RadioListItem from "@components/SelectionList/RadioListItem"; const propTypes = { /** Beta features list */ @@ -337,6 +338,8 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({ RadioListItem} textInputValue={searchTerm} textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')} textInputHint={offlineMessage} diff --git a/src/pages/iou/request/step/IOURequestStepCurrency.js b/src/pages/iou/request/step/IOURequestStepCurrency.js index 42e059d7d276..7fc394515018 100644 --- a/src/pages/iou/request/step/IOURequestStepCurrency.js +++ b/src/pages/iou/request/step/IOURequestStepCurrency.js @@ -16,6 +16,7 @@ import ROUTES, {getUrlWithBackToParam} from '@src/ROUTES'; import IOURequestStepRoutePropTypes from './IOURequestStepRoutePropTypes'; import StepScreenWrapper from './StepScreenWrapper'; import withFullTransactionOrNotFound from './withFullTransactionOrNotFound'; +import RadioListItem from "@components/SelectionList/RadioListItem"; /** * IOU Currency selection for selecting currency @@ -126,6 +127,7 @@ function IOURequestStepCurrency({ {({didScreenTransitionEnd}) => ( RadioListItem} textInputLabel={translate('common.search')} textInputValue={searchValue} onChangeText={setSearchValue} diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js index 7006c2703b13..b84d63a6b294 100755 --- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js +++ b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js @@ -20,6 +20,7 @@ import * as OptionsListUtils from '@libs/OptionsListUtils'; import reportPropTypes from '@pages/reportPropTypes'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; +import RadioListItem from "@components/SelectionList/RadioListItem"; const propTypes = { /** Beta features list */ @@ -348,6 +349,8 @@ function MoneyRequestParticipantsSelector({ RadioListItem} textInputValue={searchTerm} textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')} textInputHint={offlineMessage} diff --git a/src/pages/settings/Preferences/LanguagePage.js b/src/pages/settings/Preferences/LanguagePage.js index ce93e94222b5..d5899007a6ad 100644 --- a/src/pages/settings/Preferences/LanguagePage.js +++ b/src/pages/settings/Preferences/LanguagePage.js @@ -8,6 +8,7 @@ import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; import Navigation from '@libs/Navigation/Navigation'; import * as App from '@userActions/App'; import CONST from '@src/CONST'; +import RadioListItem from "@components/SelectionList/RadioListItem"; const propTypes = { ...withLocalizePropTypes, @@ -35,6 +36,7 @@ function LanguagePage(props) { /> RadioListItem} onSelectRow={(language) => App.setLocaleAndNavigate(language.value)} initiallyFocusedOptionKey={_.find(localesToLanguages, (locale) => locale.isSelected).keyForList} /> diff --git a/src/pages/settings/Preferences/PriorityModePage.js b/src/pages/settings/Preferences/PriorityModePage.js index 983e3cb26746..8fa435a3a6f6 100644 --- a/src/pages/settings/Preferences/PriorityModePage.js +++ b/src/pages/settings/Preferences/PriorityModePage.js @@ -12,6 +12,7 @@ import Navigation from '@libs/Navigation/Navigation'; import * as User from '@userActions/User'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; +import RadioListItem from "@components/SelectionList/RadioListItem"; const propTypes = { /** The chat priority mode */ @@ -57,6 +58,7 @@ function PriorityModePage(props) { {props.translate('priorityModePage.explainerText')} RadioListItem} onSelectRow={updateMode} initiallyFocusedOptionKey={_.find(priorityModes, (mode) => mode.isSelected).keyForList} /> diff --git a/src/pages/settings/Preferences/ThemePage.js b/src/pages/settings/Preferences/ThemePage.js index 4907056be761..14be725785f8 100644 --- a/src/pages/settings/Preferences/ThemePage.js +++ b/src/pages/settings/Preferences/ThemePage.js @@ -12,6 +12,7 @@ import Navigation from '@libs/Navigation/Navigation'; import * as User from '@userActions/User'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; +import RadioListItem from "@components/SelectionList/RadioListItem"; const propTypes = { /** The theme of the app */ @@ -48,6 +49,7 @@ function ThemePage(props) { RadioListItem} onSelectRow={(theme) => User.updateTheme(theme.value)} initiallyFocusedOptionKey={_.find(localesToThemes, (theme) => theme.isSelected).keyForList} /> diff --git a/src/pages/settings/Profile/PersonalDetails/CountrySelectionPage.js b/src/pages/settings/Profile/PersonalDetails/CountrySelectionPage.js index 38c4d1eac449..d752974dd3c6 100644 --- a/src/pages/settings/Profile/PersonalDetails/CountrySelectionPage.js +++ b/src/pages/settings/Profile/PersonalDetails/CountrySelectionPage.js @@ -10,6 +10,7 @@ import Navigation from '@libs/Navigation/Navigation'; import searchCountryOptions from '@libs/searchCountryOptions'; import StringUtils from '@libs/StringUtils'; import CONST from '@src/CONST'; +import RadioListItem from "@components/SelectionList/RadioListItem"; const propTypes = { /** Route from navigation */ @@ -93,6 +94,7 @@ function CountrySelectionPage({route, navigation}) { textInputLabel={translate('common.country')} textInputValue={searchValue} sections={[{data: searchResults, indexOffset: 0}]} + renderItem={() => RadioListItem} onSelectRow={selectCountry} onChangeText={setSearchValue} initiallyFocusedOptionKey={currentCountry} diff --git a/src/pages/settings/Profile/PronounsPage.js b/src/pages/settings/Profile/PronounsPage.js index 5bb528373e8f..e0f8ed49f9d7 100644 --- a/src/pages/settings/Profile/PronounsPage.js +++ b/src/pages/settings/Profile/PronounsPage.js @@ -16,6 +16,7 @@ import Navigation from '@libs/Navigation/Navigation'; import * as PersonalDetails from '@userActions/PersonalDetails'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; +import RadioListItem from "@components/SelectionList/RadioListItem"; const propTypes = { ...withCurrentUserPersonalDetailsPropTypes, @@ -100,6 +101,7 @@ function PronounsPage({currentUserPersonalDetails, isLoadingApp}) { textInputPlaceholder={translate('pronounsPage.placeholderText')} textInputValue={searchValue} sections={[{data: filteredPronounsList, indexOffset: 0}]} + renderItem={() => RadioListItem} onSelectRow={updatePronouns} onChangeText={setSearchValue} initiallyFocusedOptionKey={currentPronounsKey} diff --git a/src/pages/settings/Profile/TimezoneSelectPage.js b/src/pages/settings/Profile/TimezoneSelectPage.js index 8280d9b5c604..e73f71e7d642 100644 --- a/src/pages/settings/Profile/TimezoneSelectPage.js +++ b/src/pages/settings/Profile/TimezoneSelectPage.js @@ -12,6 +12,7 @@ import * as PersonalDetails from '@userActions/PersonalDetails'; import CONST from '@src/CONST'; import ROUTES from '@src/ROUTES'; import TIMEZONES from '@src/TIMEZONES'; +import RadioListItem from "@components/SelectionList/RadioListItem"; const propTypes = { ...withCurrentUserPersonalDetailsPropTypes, @@ -97,6 +98,7 @@ function TimezoneSelectPage(props) { initiallyFocusedOptionKey={_.get(_.filter(timezoneOptions, (tz) => tz.text === timezone.selected)[0], 'keyForList')} showScrollIndicator shouldShowTooltips={false} + renderItem={() => RadioListItem} /> ); diff --git a/src/pages/settings/Report/NotificationPreferencePage.tsx b/src/pages/settings/Report/NotificationPreferencePage.tsx index 05f3483f7ce8..cf9189447af2 100644 --- a/src/pages/settings/Report/NotificationPreferencePage.tsx +++ b/src/pages/settings/Report/NotificationPreferencePage.tsx @@ -12,6 +12,7 @@ import type {WithReportOrNotFoundProps} from '@pages/home/report/withReportOrNot import * as ReportActions from '@userActions/Report'; import CONST from '@src/CONST'; import type SCREENS from '@src/SCREENS'; +import RadioListItem from "@components/SelectionList/RadioListItem"; type NotificationPreferencePageProps = WithReportOrNotFoundProps & StackScreenProps; @@ -39,6 +40,7 @@ function NotificationPreferencePage({report}: NotificationPreferencePageProps) { /> RadioListItem} onSelectRow={(option) => report && ReportActions.updateNotificationPreference(report.reportID, report.notificationPreference, option.value, true, undefined, undefined, report) } diff --git a/src/pages/settings/Report/WriteCapabilityPage.tsx b/src/pages/settings/Report/WriteCapabilityPage.tsx index 5f5fe73e5199..bb65bb3076e1 100644 --- a/src/pages/settings/Report/WriteCapabilityPage.tsx +++ b/src/pages/settings/Report/WriteCapabilityPage.tsx @@ -18,6 +18,7 @@ import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; import type {Policy} from '@src/types/onyx'; +import RadioListItem from "@components/SelectionList/RadioListItem"; type WriteCapabilityPageOnyxProps = { /** The policy object for the current route */ @@ -52,6 +53,7 @@ function WriteCapabilityPage({report, policy}: WriteCapabilityPageProps) { /> RadioListItem} onSelectRow={(option) => report && ReportActions.updateWriteCapabilityAndNavigate(report, option.value)} initiallyFocusedOptionKey={writeCapabilityOptions.find((locale) => locale.isSelected)?.keyForList} /> diff --git a/src/pages/tasks/TaskAssigneeSelectorModal.js b/src/pages/tasks/TaskAssigneeSelectorModal.js index 14d2867aa1f4..6cdb8b68cf35 100644 --- a/src/pages/tasks/TaskAssigneeSelectorModal.js +++ b/src/pages/tasks/TaskAssigneeSelectorModal.js @@ -24,6 +24,7 @@ import * as Task from '@userActions/Task'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; +import RadioListItem from "@components/SelectionList/RadioListItem"; const propTypes = { /** All reports shared with the user */ @@ -203,6 +204,8 @@ function TaskAssigneeSelectorModal({reports, task, rootParentReportPolicy}) { RadioListItem} onSelectRow={selectReport} onChangeText={onChangeText} textInputValue={searchValue} diff --git a/src/pages/workspace/WorkspaceInvitePage.tsx b/src/pages/workspace/WorkspaceInvitePage.tsx index fb39446d64b4..00de87a85996 100644 --- a/src/pages/workspace/WorkspaceInvitePage.tsx +++ b/src/pages/workspace/WorkspaceInvitePage.tsx @@ -35,6 +35,7 @@ import {isEmptyObject} from '@src/types/utils/EmptyObject'; import SearchInputManager from './SearchInputManager'; import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading'; import type {WithPolicyAndFullscreenLoadingProps} from './withPolicyAndFullscreenLoading'; +import UserListItem from "@components/SelectionList/UserListItem"; type MembersSection = SectionListData>; @@ -304,6 +305,7 @@ function WorkspaceInvitePage({ UserListItem} textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')} textInputValue={searchTerm} onChangeText={(value) => { diff --git a/src/pages/workspace/WorkspaceMembersPage.js b/src/pages/workspace/WorkspaceMembersPage.js index c88b3d56cb20..48131be33332 100644 --- a/src/pages/workspace/WorkspaceMembersPage.js +++ b/src/pages/workspace/WorkspaceMembersPage.js @@ -39,6 +39,7 @@ import ROUTES from '@src/ROUTES'; import SearchInputManager from './SearchInputManager'; import {policyDefaultProps, policyPropTypes} from './withPolicy'; import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading'; +import UserListItem from "@components/SelectionList/UserListItem"; const propTypes = { /** All personal details asssociated with user */ @@ -488,6 +489,7 @@ function WorkspaceMembersPage(props) { UserListItem} textInputLabel={props.translate('optionsSelector.findMember')} textInputValue={searchValue} onChangeText={(value) => { diff --git a/src/pages/workspace/WorkspaceProfileCurrencyPage.js b/src/pages/workspace/WorkspaceProfileCurrencyPage.js index 31b88c7c487b..5a4e4e4748b8 100644 --- a/src/pages/workspace/WorkspaceProfileCurrencyPage.js +++ b/src/pages/workspace/WorkspaceProfileCurrencyPage.js @@ -15,6 +15,7 @@ import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import {policyDefaultProps, policyPropTypes} from './withPolicy'; import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading'; +import RadioListItem from "@components/SelectionList/RadioListItem"; const propTypes = { /** Constant, list of available currencies */ @@ -90,6 +91,7 @@ function WorkspaceSettingsCurrencyPage({currencyList, policy, isLoadingReportDat RadioListItem} textInputLabel={translate('workspace.editor.currencyInputLabel')} textInputValue={searchText} onChangeText={setSearchText} diff --git a/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage/UnitPage.tsx b/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage/UnitPage.tsx index 07f31d53193e..9760efd06647 100644 --- a/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage/UnitPage.tsx +++ b/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage/UnitPage.tsx @@ -16,6 +16,7 @@ import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type {WorkspaceRateAndUnit} from '@src/types/onyx'; import type {Unit} from '@src/types/onyx/Policy'; +import RadioListItem from "@components/SelectionList/RadioListItem"; type OptionRow = { value: Unit; @@ -90,6 +91,7 @@ function WorkspaceUnitPage(props: WorkspaceUnitPageProps) { RadioListItem} onSelectRow={(unit: OptionRow) => updateUnit(unit.value)} initiallyFocusedOptionKey={unitOptions.find((unit) => unit.isSelected)?.keyForList} /> diff --git a/src/stories/SelectionList.stories.js b/src/stories/SelectionList.stories.js index 835bf67fbfd7..5566775a1179 100644 --- a/src/stories/SelectionList.stories.js +++ b/src/stories/SelectionList.stories.js @@ -6,6 +6,7 @@ import Text from '@components/Text'; // eslint-disable-next-line no-restricted-imports import {defaultStyles} from '@styles/index'; import CONST from '@src/CONST'; +import RadioListItem from "@components/SelectionList/RadioListItem"; /** * We use the Component Story Format for writing stories. Follow the docs here: @@ -89,6 +90,7 @@ function Default(args) { // eslint-disable-next-line react/jsx-props-no-spreading {...args} sections={sections} + renderItem={() => RadioListItem} onSelectRow={onSelectRow} /> ); @@ -137,6 +139,7 @@ function WithTextInput(args) { // eslint-disable-next-line react/jsx-props-no-spreading {...args} sections={sections} + renderItem={() => RadioListItem} textInputValue={searchText} onChangeText={setSearchText} onSelectRow={onSelectRow} @@ -260,6 +263,7 @@ function MultipleSelection(args) { // eslint-disable-next-line react/jsx-props-no-spreading {...args} sections={memo.sections} + renderItem={() => RadioListItem} onSelectRow={onSelectRow} onSelectAll={onSelectAll} /> @@ -322,6 +326,7 @@ function WithSectionHeader(args) { // eslint-disable-next-line react/jsx-props-no-spreading {...args} sections={memo.sections} + renderItem={() => RadioListItem} onSelectRow={onSelectRow} onSelectAll={onSelectAll} /> @@ -382,6 +387,7 @@ function WithConfirmButton(args) { // eslint-disable-next-line react/jsx-props-no-spreading {...args} sections={memo.sections} + renderItem={() => RadioListItem} onSelectRow={onSelectRow} onSelectAll={onSelectAll} /> From bc397c3b75c97a09d9bc28aecc9d8660663efc04 Mon Sep 17 00:00:00 2001 From: burczu Date: Tue, 20 Feb 2024 12:34:44 +0100 Subject: [PATCH 03/20] list item definition extracted from base list item --- src/components/SelectionList/BaseListItem.tsx | 21 ++--------------- .../SelectionList/BaseSelectionList.tsx | 23 +++++++++++++++++-- src/components/SelectionList/types.ts | 2 +- 3 files changed, 24 insertions(+), 22 deletions(-) diff --git a/src/components/SelectionList/BaseListItem.tsx b/src/components/SelectionList/BaseListItem.tsx index f7b29371af0c..641237dfa5fe 100644 --- a/src/components/SelectionList/BaseListItem.tsx +++ b/src/components/SelectionList/BaseListItem.tsx @@ -10,9 +10,7 @@ import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; -import RadioListItem from './RadioListItem'; import type {BaseListItemProps, ListItem} from './types'; -import UserListItem from './UserListItem'; function BaseListItem({ item, @@ -25,7 +23,7 @@ function BaseListItem({ onDismissError = () => {}, rightHandSideComponent, keyForList, - ListItem, + children, }: BaseListItemProps) { const theme = useTheme(); const styles = useThemeStyles(); @@ -102,22 +100,7 @@ function BaseListItem({ )} - onSelectRow(item)} - showTooltip={showTooltip} - isFocused={isFocused} - isHovered={hovered} - /> + {children(hovered)} {!canSelectMultiple && item.isSelected && !rightHandSideComponent && ( ( const isItemFocused = !isDisabled && focusedIndex === normalizedIndex; // We only create tooltips for the first 10 users or so since some reports have hundreds of users, causing performance to degrade. const showTooltip = shouldShowTooltips && normalizedIndex < 10; + const ListItem = renderItem(); return ( ( shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow} rightHandSideComponent={rightHandSideComponent} keyForList={item.keyForList} - ListItem={renderItem()} - /> + > + {(hovered) => ( + onSelectRow(item)} + showTooltip={showTooltip} + isFocused={isFocused} + isHovered={hovered} + /> + )} + ); }; diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index 0fa411baf479..7a9d270db6e3 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -102,7 +102,7 @@ type BaseListItemProps = CommonListItemProps & { item: TItem; shouldPreventDefaultFocusOnSelectRow?: boolean; keyForList?: string; - ListItem: JSXElementConstructor; + children: (hovered: boolean) => ReactElement; }; type Section = { From 65abacf1c1398ebb212305ab7132a3008820e93a Mon Sep 17 00:00:00 2001 From: burczu Date: Tue, 20 Feb 2024 12:39:40 +0100 Subject: [PATCH 04/20] list item styling moved to specific list style elements instead of base one --- src/components/SelectionList/BaseSelectionList.tsx | 8 -------- src/components/SelectionList/RadioListItem.tsx | 12 +++++++++--- src/components/SelectionList/UserListItem.tsx | 13 ++++++++++--- src/components/SelectionList/types.ts | 7 ------- 4 files changed, 19 insertions(+), 21 deletions(-) diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 5f9320f09d8a..2c38ef1c7a43 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -297,14 +297,6 @@ function BaseSelectionList( {(hovered) => ( onSelectRow(item)} showTooltip={showTooltip} diff --git a/src/components/SelectionList/RadioListItem.tsx b/src/components/SelectionList/RadioListItem.tsx index c069eaf7d8fd..3a5429c042de 100644 --- a/src/components/SelectionList/RadioListItem.tsx +++ b/src/components/SelectionList/RadioListItem.tsx @@ -4,7 +4,7 @@ import TextWithTooltip from '@components/TextWithTooltip'; import useThemeStyles from '@hooks/useThemeStyles'; import type {ListItemProps} from './types'; -function RadioListItem({item, showTooltip, textStyles, alternateTextStyles}: ListItemProps) { +function RadioListItem({item, isFocused, showTooltip}: ListItemProps) { const styles = useThemeStyles(); return ( @@ -12,14 +12,20 @@ function RadioListItem({item, showTooltip, textStyles, alternateTextStyles}: Lis {!!item.alternateText && ( )} diff --git a/src/components/SelectionList/UserListItem.tsx b/src/components/SelectionList/UserListItem.tsx index 60e97d887b4d..52419fe93dd8 100644 --- a/src/components/SelectionList/UserListItem.tsx +++ b/src/components/SelectionList/UserListItem.tsx @@ -8,7 +8,7 @@ import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import type {ListItemProps} from './types'; -function UserListItem({item, textStyles, alternateTextStyles, showTooltip, style, isFocused, isHovered}: ListItemProps) { +function UserListItem({item, showTooltip, style, isFocused, isHovered}: ListItemProps) { const styles = useThemeStyles(); const theme = useTheme(); const StyleUtils = useStyleUtils(); @@ -45,13 +45,20 @@ function UserListItem({item, textStyles, alternateTextStyles, showTooltip, style {!!item.alternateText && ( )} diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index 7a9d270db6e3..aecfd0ad8e80 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -4,7 +4,6 @@ import type { InputModeOptions, LayoutChangeEvent, SectionListData, - SectionListRenderItemInfo, StyleProp, TextStyle, ViewStyle @@ -16,12 +15,6 @@ type CommonListItemProps = { /** Whether this item is focused (for arrow key controls) */ isFocused?: boolean; - /** Style to be applied to Text */ - textStyles?: StyleProp; - - /** Style to be applied on the alternate text */ - alternateTextStyles?: StyleProp; - /** Whether this item is disabled */ isDisabled?: boolean; From 1551face2435fb9d201d00f83865dc4d92473b8a Mon Sep 17 00:00:00 2001 From: burczu Date: Tue, 20 Feb 2024 12:55:20 +0100 Subject: [PATCH 05/20] base list items used by specific list elements instead coupling with selection list --- src/components/SelectionList/BaseListItem.tsx | 3 +- .../SelectionList/BaseSelectionList.tsx | 16 +-- .../SelectionList/RadioListItem.tsx | 58 ++++++---- src/components/SelectionList/UserListItem.tsx | 100 ++++++++++-------- src/components/SelectionList/types.ts | 4 +- 5 files changed, 100 insertions(+), 81 deletions(-) diff --git a/src/components/SelectionList/BaseListItem.tsx b/src/components/SelectionList/BaseListItem.tsx index 641237dfa5fe..d71f233c3c46 100644 --- a/src/components/SelectionList/BaseListItem.tsx +++ b/src/components/SelectionList/BaseListItem.tsx @@ -16,7 +16,6 @@ function BaseListItem({ item, isFocused = false, isDisabled = false, - showTooltip, shouldPreventDefaultFocusOnSelectRow = false, canSelectMultiple = false, onSelectRow, @@ -100,7 +99,7 @@ function BaseListItem({ )} - {children(hovered)} + {children?.(hovered)} {!canSelectMultiple && item.isSelected && !rightHandSideComponent && ( ( @@ -282,7 +281,7 @@ function BaseSelectionList( const ListItem = renderItem(); return ( - ( shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow} rightHandSideComponent={rightHandSideComponent} keyForList={item.keyForList} - > - {(hovered) => ( - onSelectRow(item)} - showTooltip={showTooltip} - isFocused={isFocused} - isHovered={hovered} - /> - )} - + /> ); }; diff --git a/src/components/SelectionList/RadioListItem.tsx b/src/components/SelectionList/RadioListItem.tsx index 3a5429c042de..4836de8e7e97 100644 --- a/src/components/SelectionList/RadioListItem.tsx +++ b/src/components/SelectionList/RadioListItem.tsx @@ -2,33 +2,49 @@ import React from 'react'; import {View} from 'react-native'; import TextWithTooltip from '@components/TextWithTooltip'; import useThemeStyles from '@hooks/useThemeStyles'; -import type {ListItemProps} from './types'; +import BaseListItem from "@components/SelectionList/BaseListItem"; +import type {BaseListItemProps, ListItem} from './types'; -function RadioListItem({item, isFocused, showTooltip}: ListItemProps) { +function RadioListItem({item, isFocused, showTooltip, isDisabled, canSelectMultiple, onSelectRow, onDismissError, shouldPreventDefaultFocusOnSelectRow, rightHandSideComponent}: BaseListItemProps) { const styles = useThemeStyles(); return ( - - + + {() => ( + + - {!!item.alternateText && ( - + {!!item.alternateText && ( + + )} + )} - + ); } diff --git a/src/components/SelectionList/UserListItem.tsx b/src/components/SelectionList/UserListItem.tsx index 52419fe93dd8..d17fe1e31ed1 100644 --- a/src/components/SelectionList/UserListItem.tsx +++ b/src/components/SelectionList/UserListItem.tsx @@ -6,9 +6,10 @@ import TextWithTooltip from '@components/TextWithTooltip'; import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; -import type {ListItemProps} from './types'; +import BaseListItem from "@components/SelectionList/BaseListItem"; +import type {BaseListItemProps, ListItem} from './types'; -function UserListItem({item, showTooltip, style, isFocused, isHovered}: ListItemProps) { +function UserListItem({item, isFocused, showTooltip, isDisabled, canSelectMultiple, onSelectRow, onDismissError, shouldPreventDefaultFocusOnSelectRow, rightHandSideComponent}: BaseListItemProps) { const styles = useThemeStyles(); const theme = useTheme(); const StyleUtils = useStyleUtils(); @@ -18,52 +19,67 @@ function UserListItem({item, showTooltip, style, isFocused, isHovered}: ListItem const hoveredBackgroundColor = !!styles.sidebarLinkHover && 'backgroundColor' in styles.sidebarLinkHover ? styles.sidebarLinkHover.backgroundColor : theme.sidebar; return ( - <> - {!!item.icons && ( + + {(hovered) => ( <> - {item.shouldShowSubscript ? ( - - ) : ( - + {item.shouldShowSubscript ? ( + + ) : ( + + )} + + )} + + - )} + {!!item.alternateText && ( + + )} + + {!!item.rightElement && item.rightElement} )} - - - {!!item.alternateText && ( - - )} - - {!!item.rightElement && item.rightElement} - + ); } diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index aecfd0ad8e80..a97ee58deee0 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -95,7 +95,7 @@ type BaseListItemProps = CommonListItemProps & { item: TItem; shouldPreventDefaultFocusOnSelectRow?: boolean; keyForList?: string; - children: (hovered: boolean) => ReactElement; + children?: (hovered: boolean) => ReactElement; }; type Section = { @@ -120,7 +120,7 @@ type BaseSelectionListProps = Partial & { sections: Array>>; /** Default renderer for every item in the list */ - renderItem: () => JSXElementConstructor; + renderItem: () => JSXElementConstructor>; /** Whether this is a multi-select list */ canSelectMultiple?: boolean; From eba4f51eea0dec664fcef9e75d4ca0ec3cbc5e73 Mon Sep 17 00:00:00 2001 From: burczu Date: Tue, 20 Feb 2024 13:05:13 +0100 Subject: [PATCH 06/20] prettier and lint fixes --- .../DatePicker/CalendarPicker/YearPickerModal.tsx | 2 +- src/components/SelectionList/RadioListItem.tsx | 14 ++++++++++++-- src/components/SelectionList/UserListItem.tsx | 14 ++++++++++++-- src/components/SelectionList/types.ts | 10 +--------- src/components/StatePicker/StateSelectorModal.tsx | 2 +- src/components/ValuePicker/ValueSelectorModal.tsx | 2 +- .../BusinessTypeSelectorModal.tsx | 2 +- src/pages/RoomInvitePage.tsx | 2 +- src/pages/RoomMembersPage.tsx | 2 +- src/pages/SearchPage/index.js | 2 +- src/pages/iou/IOUCurrencySelection.js | 2 +- ...poraryForRefactorRequestParticipantsSelector.js | 2 +- .../iou/request/step/IOURequestStepCurrency.js | 2 +- .../MoneyRequestParticipantsSelector.js | 2 +- src/pages/settings/Preferences/LanguagePage.js | 2 +- src/pages/settings/Preferences/PriorityModePage.js | 2 +- src/pages/settings/Preferences/ThemePage.js | 2 +- .../PersonalDetails/CountrySelectionPage.js | 2 +- src/pages/settings/Profile/PronounsPage.js | 2 +- src/pages/settings/Profile/TimezoneSelectPage.js | 2 +- .../settings/Report/NotificationPreferencePage.tsx | 2 +- src/pages/settings/Report/WriteCapabilityPage.tsx | 2 +- src/pages/tasks/TaskAssigneeSelectorModal.js | 2 +- src/pages/workspace/WorkspaceInvitePage.tsx | 2 +- src/pages/workspace/WorkspaceMembersPage.js | 2 +- .../workspace/WorkspaceProfileCurrencyPage.js | 2 +- .../WorkspaceRateAndUnitPage/UnitPage.tsx | 2 +- src/stories/SelectionList.stories.js | 2 +- 28 files changed, 50 insertions(+), 38 deletions(-) diff --git a/src/components/DatePicker/CalendarPicker/YearPickerModal.tsx b/src/components/DatePicker/CalendarPicker/YearPickerModal.tsx index 9885841495a7..9f95a8cc12a9 100644 --- a/src/components/DatePicker/CalendarPicker/YearPickerModal.tsx +++ b/src/components/DatePicker/CalendarPicker/YearPickerModal.tsx @@ -3,11 +3,11 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton'; import Modal from '@components/Modal'; import ScreenWrapper from '@components/ScreenWrapper'; import SelectionList from '@components/SelectionList'; +import RadioListItem from '@components/SelectionList/RadioListItem'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; import type CalendarPickerListItem from './types'; -import RadioListItem from "@components/SelectionList/RadioListItem"; type YearPickerModalProps = { /** Whether the modal is visible */ diff --git a/src/components/SelectionList/RadioListItem.tsx b/src/components/SelectionList/RadioListItem.tsx index 4836de8e7e97..e9ca4747dca1 100644 --- a/src/components/SelectionList/RadioListItem.tsx +++ b/src/components/SelectionList/RadioListItem.tsx @@ -2,10 +2,20 @@ import React from 'react'; import {View} from 'react-native'; import TextWithTooltip from '@components/TextWithTooltip'; import useThemeStyles from '@hooks/useThemeStyles'; -import BaseListItem from "@components/SelectionList/BaseListItem"; +import BaseListItem from './BaseListItem'; import type {BaseListItemProps, ListItem} from './types'; -function RadioListItem({item, isFocused, showTooltip, isDisabled, canSelectMultiple, onSelectRow, onDismissError, shouldPreventDefaultFocusOnSelectRow, rightHandSideComponent}: BaseListItemProps) { +function RadioListItem({ + item, + isFocused, + showTooltip, + isDisabled, + canSelectMultiple, + onSelectRow, + onDismissError, + shouldPreventDefaultFocusOnSelectRow, + rightHandSideComponent, +}: BaseListItemProps) { const styles = useThemeStyles(); return ( diff --git a/src/components/SelectionList/UserListItem.tsx b/src/components/SelectionList/UserListItem.tsx index d17fe1e31ed1..730b9ac6af10 100644 --- a/src/components/SelectionList/UserListItem.tsx +++ b/src/components/SelectionList/UserListItem.tsx @@ -6,10 +6,20 @@ import TextWithTooltip from '@components/TextWithTooltip'; import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; -import BaseListItem from "@components/SelectionList/BaseListItem"; +import BaseListItem from './BaseListItem'; import type {BaseListItemProps, ListItem} from './types'; -function UserListItem({item, isFocused, showTooltip, isDisabled, canSelectMultiple, onSelectRow, onDismissError, shouldPreventDefaultFocusOnSelectRow, rightHandSideComponent}: BaseListItemProps) { +function UserListItem({ + item, + isFocused, + showTooltip, + isDisabled, + canSelectMultiple, + onSelectRow, + onDismissError, + shouldPreventDefaultFocusOnSelectRow, + rightHandSideComponent, +}: BaseListItemProps) { const styles = useThemeStyles(); const theme = useTheme(); const StyleUtils = useStyleUtils(); diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index a97ee58deee0..3d067595fe0c 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -1,13 +1,5 @@ import type {JSXElementConstructor, ReactElement, ReactNode} from 'react'; -import type { - GestureResponderEvent, - InputModeOptions, - LayoutChangeEvent, - SectionListData, - StyleProp, - TextStyle, - ViewStyle -} from 'react-native'; +import type {GestureResponderEvent, InputModeOptions, LayoutChangeEvent, SectionListData, StyleProp, TextStyle, ViewStyle} from 'react-native'; import type {Errors, Icon, PendingAction} from '@src/types/onyx/OnyxCommon'; import type ChildrenProps from '@src/types/utils/ChildrenProps'; diff --git a/src/components/StatePicker/StateSelectorModal.tsx b/src/components/StatePicker/StateSelectorModal.tsx index 3d28241fa190..112966b4d3da 100644 --- a/src/components/StatePicker/StateSelectorModal.tsx +++ b/src/components/StatePicker/StateSelectorModal.tsx @@ -4,13 +4,13 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton'; import Modal from '@components/Modal'; import ScreenWrapper from '@components/ScreenWrapper'; import SelectionList from '@components/SelectionList'; +import RadioListItem from '@components/SelectionList/RadioListItem'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import searchCountryOptions from '@libs/searchCountryOptions'; import type {CountryData} from '@libs/searchCountryOptions'; import StringUtils from '@libs/StringUtils'; import CONST from '@src/CONST'; -import RadioListItem from "@components/SelectionList/RadioListItem"; type State = keyof typeof COMMON_CONST.STATES; diff --git a/src/components/ValuePicker/ValueSelectorModal.tsx b/src/components/ValuePicker/ValueSelectorModal.tsx index 96533b61843f..11cea63d8062 100644 --- a/src/components/ValuePicker/ValueSelectorModal.tsx +++ b/src/components/ValuePicker/ValueSelectorModal.tsx @@ -3,10 +3,10 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton'; import Modal from '@components/Modal'; import ScreenWrapper from '@components/ScreenWrapper'; import SelectionList from '@components/SelectionList'; +import RadioListItem from '@components/SelectionList/RadioListItem'; import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; import type {ValueSelectorModalProps} from './types'; -import RadioListItem from "@components/SelectionList/RadioListItem"; function ValueSelectorModal({items = [], selectedItem, label = '', isVisible, onClose, onItemSelected, shouldShowTooltips = true}: ValueSelectorModalProps) { const styles = useThemeStyles(); diff --git a/src/pages/ReimbursementAccount/BusinessInfo/substeps/TypeBusiness/BusinessTypePicker/BusinessTypeSelectorModal.tsx b/src/pages/ReimbursementAccount/BusinessInfo/substeps/TypeBusiness/BusinessTypePicker/BusinessTypeSelectorModal.tsx index a7c30160a8d3..ec9eca4a9a6f 100644 --- a/src/pages/ReimbursementAccount/BusinessInfo/substeps/TypeBusiness/BusinessTypePicker/BusinessTypeSelectorModal.tsx +++ b/src/pages/ReimbursementAccount/BusinessInfo/substeps/TypeBusiness/BusinessTypePicker/BusinessTypeSelectorModal.tsx @@ -3,11 +3,11 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton'; import Modal from '@components/Modal'; import ScreenWrapper from '@components/ScreenWrapper'; import SelectionList from '@components/SelectionList'; +import RadioListItem from '@components/SelectionList/RadioListItem'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; import type {BusinessTypeItemType, IncorporationType} from './types'; -import RadioListItem from "@components/SelectionList/RadioListItem"; type BusinessTypeSelectorModalProps = { /** Whether the modal is visible */ diff --git a/src/pages/RoomInvitePage.tsx b/src/pages/RoomInvitePage.tsx index 57ac52ef349e..a6dde178dcdc 100644 --- a/src/pages/RoomInvitePage.tsx +++ b/src/pages/RoomInvitePage.tsx @@ -12,6 +12,7 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import SelectionList from '@components/SelectionList'; import type {Section} from '@components/SelectionList/types'; +import UserListItem from '@components/SelectionList/UserListItem'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; @@ -31,7 +32,6 @@ import type {PersonalDetailsList, Policy} from '@src/types/onyx'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; import type {WithReportOrNotFoundProps} from './home/report/withReportOrNotFound'; import withReportOrNotFound from './home/report/withReportOrNotFound'; -import UserListItem from "@components/SelectionList/UserListItem"; type RoomInvitePageOnyxProps = { /** All of the personal details for everyone */ diff --git a/src/pages/RoomMembersPage.tsx b/src/pages/RoomMembersPage.tsx index 941887e3fa53..d6a3e0db1cfd 100644 --- a/src/pages/RoomMembersPage.tsx +++ b/src/pages/RoomMembersPage.tsx @@ -11,6 +11,7 @@ import {usePersonalDetails} from '@components/OnyxProvider'; import ScreenWrapper from '@components/ScreenWrapper'; import SelectionList from '@components/SelectionList'; import type {ListItem} from '@components/SelectionList/types'; +import UserListItem from '@components/SelectionList/UserListItem'; import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails'; import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails'; import useLocalize from '@hooks/useLocalize'; @@ -33,7 +34,6 @@ import type {Session} from '@src/types/onyx'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; import type {WithReportOrNotFoundProps} from './home/report/withReportOrNotFound'; import withReportOrNotFound from './home/report/withReportOrNotFound'; -import UserListItem from "@components/SelectionList/UserListItem"; type RoomMembersPageOnyxProps = { session: OnyxEntry; diff --git a/src/pages/SearchPage/index.js b/src/pages/SearchPage/index.js index b1c666069922..bb742d9f1e1d 100644 --- a/src/pages/SearchPage/index.js +++ b/src/pages/SearchPage/index.js @@ -6,6 +6,7 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton'; import {usePersonalDetails} from '@components/OnyxProvider'; import ScreenWrapper from '@components/ScreenWrapper'; import SelectionList from '@components/SelectionList'; +import RadioListItem from '@components/SelectionList/RadioListItem'; import useDebouncedState from '@hooks/useDebouncedState'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; @@ -20,7 +21,6 @@ import Timing from '@userActions/Timing'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import SearchPageFooter from './SearchPageFooter'; -import RadioListItem from "@components/SelectionList/RadioListItem"; const propTypes = { /* Onyx Props */ diff --git a/src/pages/iou/IOUCurrencySelection.js b/src/pages/iou/IOUCurrencySelection.js index 71f4e0c2e71f..32b1c7a4c6b6 100644 --- a/src/pages/iou/IOUCurrencySelection.js +++ b/src/pages/iou/IOUCurrencySelection.js @@ -9,6 +9,7 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton'; import {withNetwork} from '@components/OnyxProvider'; import ScreenWrapper from '@components/ScreenWrapper'; import SelectionList from '@components/SelectionList'; +import RadioListItem from '@components/SelectionList/RadioListItem'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; import compose from '@libs/compose'; import * as CurrencyUtils from '@libs/CurrencyUtils'; @@ -19,7 +20,6 @@ import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import {iouDefaultProps, iouPropTypes} from './propTypes'; -import RadioListItem from "@components/SelectionList/RadioListItem"; /** * IOU Currency selection for selecting currency diff --git a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js index cc755874a6b6..b062d6baeb61 100644 --- a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js +++ b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js @@ -11,6 +11,7 @@ import {PressableWithFeedback} from '@components/Pressable'; import ReferralProgramCTA from '@components/ReferralProgramCTA'; import SelectCircle from '@components/SelectCircle'; import SelectionList from '@components/SelectionList'; +import RadioListItem from '@components/SelectionList/RadioListItem'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; import useSearchTermAndSearch from '@hooks/useSearchTermAndSearch'; @@ -21,7 +22,6 @@ import * as ReportUtils from '@libs/ReportUtils'; import reportPropTypes from '@pages/reportPropTypes'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; -import RadioListItem from "@components/SelectionList/RadioListItem"; const propTypes = { /** Beta features list */ diff --git a/src/pages/iou/request/step/IOURequestStepCurrency.js b/src/pages/iou/request/step/IOURequestStepCurrency.js index 7fc394515018..196e1a8a61c2 100644 --- a/src/pages/iou/request/step/IOURequestStepCurrency.js +++ b/src/pages/iou/request/step/IOURequestStepCurrency.js @@ -5,6 +5,7 @@ import {Keyboard} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; import SelectionList from '@components/SelectionList'; +import RadioListItem from '@components/SelectionList/RadioListItem'; import transactionPropTypes from '@components/transactionPropTypes'; import useLocalize from '@hooks/useLocalize'; import compose from '@libs/compose'; @@ -16,7 +17,6 @@ import ROUTES, {getUrlWithBackToParam} from '@src/ROUTES'; import IOURequestStepRoutePropTypes from './IOURequestStepRoutePropTypes'; import StepScreenWrapper from './StepScreenWrapper'; import withFullTransactionOrNotFound from './withFullTransactionOrNotFound'; -import RadioListItem from "@components/SelectionList/RadioListItem"; /** * IOU Currency selection for selecting currency diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js index b84d63a6b294..009819673e4f 100755 --- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js +++ b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js @@ -11,6 +11,7 @@ import {PressableWithFeedback} from '@components/Pressable'; import ReferralProgramCTA from '@components/ReferralProgramCTA'; import SelectCircle from '@components/SelectCircle'; import SelectionList from '@components/SelectionList'; +import RadioListItem from '@components/SelectionList/RadioListItem'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; import useSearchTermAndSearch from '@hooks/useSearchTermAndSearch'; @@ -20,7 +21,6 @@ import * as OptionsListUtils from '@libs/OptionsListUtils'; import reportPropTypes from '@pages/reportPropTypes'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; -import RadioListItem from "@components/SelectionList/RadioListItem"; const propTypes = { /** Beta features list */ diff --git a/src/pages/settings/Preferences/LanguagePage.js b/src/pages/settings/Preferences/LanguagePage.js index d5899007a6ad..4533e38ef5e1 100644 --- a/src/pages/settings/Preferences/LanguagePage.js +++ b/src/pages/settings/Preferences/LanguagePage.js @@ -4,11 +4,11 @@ import _ from 'underscore'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import SelectionList from '@components/SelectionList'; +import RadioListItem from '@components/SelectionList/RadioListItem'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; import Navigation from '@libs/Navigation/Navigation'; import * as App from '@userActions/App'; import CONST from '@src/CONST'; -import RadioListItem from "@components/SelectionList/RadioListItem"; const propTypes = { ...withLocalizePropTypes, diff --git a/src/pages/settings/Preferences/PriorityModePage.js b/src/pages/settings/Preferences/PriorityModePage.js index 8fa435a3a6f6..2d6528b84baf 100644 --- a/src/pages/settings/Preferences/PriorityModePage.js +++ b/src/pages/settings/Preferences/PriorityModePage.js @@ -5,6 +5,7 @@ import _, {compose} from 'underscore'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import SelectionList from '@components/SelectionList'; +import RadioListItem from '@components/SelectionList/RadioListItem'; import Text from '@components/Text'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -12,7 +13,6 @@ import Navigation from '@libs/Navigation/Navigation'; import * as User from '@userActions/User'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; -import RadioListItem from "@components/SelectionList/RadioListItem"; const propTypes = { /** The chat priority mode */ diff --git a/src/pages/settings/Preferences/ThemePage.js b/src/pages/settings/Preferences/ThemePage.js index 14be725785f8..0099e58361c7 100644 --- a/src/pages/settings/Preferences/ThemePage.js +++ b/src/pages/settings/Preferences/ThemePage.js @@ -5,6 +5,7 @@ import _ from 'underscore'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import SelectionList from '@components/SelectionList'; +import RadioListItem from '@components/SelectionList/RadioListItem'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -12,7 +13,6 @@ import Navigation from '@libs/Navigation/Navigation'; import * as User from '@userActions/User'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; -import RadioListItem from "@components/SelectionList/RadioListItem"; const propTypes = { /** The theme of the app */ diff --git a/src/pages/settings/Profile/PersonalDetails/CountrySelectionPage.js b/src/pages/settings/Profile/PersonalDetails/CountrySelectionPage.js index d752974dd3c6..630134e7f9f4 100644 --- a/src/pages/settings/Profile/PersonalDetails/CountrySelectionPage.js +++ b/src/pages/settings/Profile/PersonalDetails/CountrySelectionPage.js @@ -5,12 +5,12 @@ import _ from 'underscore'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import SelectionList from '@components/SelectionList'; +import RadioListItem from '@components/SelectionList/RadioListItem'; import useLocalize from '@hooks/useLocalize'; import Navigation from '@libs/Navigation/Navigation'; import searchCountryOptions from '@libs/searchCountryOptions'; import StringUtils from '@libs/StringUtils'; import CONST from '@src/CONST'; -import RadioListItem from "@components/SelectionList/RadioListItem"; const propTypes = { /** Route from navigation */ diff --git a/src/pages/settings/Profile/PronounsPage.js b/src/pages/settings/Profile/PronounsPage.js index e0f8ed49f9d7..b87044007f2d 100644 --- a/src/pages/settings/Profile/PronounsPage.js +++ b/src/pages/settings/Profile/PronounsPage.js @@ -7,6 +7,7 @@ import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import SelectionList from '@components/SelectionList'; +import RadioListItem from '@components/SelectionList/RadioListItem'; import Text from '@components/Text'; import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails'; import useLocalize from '@hooks/useLocalize'; @@ -16,7 +17,6 @@ import Navigation from '@libs/Navigation/Navigation'; import * as PersonalDetails from '@userActions/PersonalDetails'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; -import RadioListItem from "@components/SelectionList/RadioListItem"; const propTypes = { ...withCurrentUserPersonalDetailsPropTypes, diff --git a/src/pages/settings/Profile/TimezoneSelectPage.js b/src/pages/settings/Profile/TimezoneSelectPage.js index e73f71e7d642..d34b721e0509 100644 --- a/src/pages/settings/Profile/TimezoneSelectPage.js +++ b/src/pages/settings/Profile/TimezoneSelectPage.js @@ -4,6 +4,7 @@ import _ from 'underscore'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import SelectionList from '@components/SelectionList'; +import RadioListItem from '@components/SelectionList/RadioListItem'; import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails'; import useInitialValue from '@hooks/useInitialValue'; import useLocalize from '@hooks/useLocalize'; @@ -12,7 +13,6 @@ import * as PersonalDetails from '@userActions/PersonalDetails'; import CONST from '@src/CONST'; import ROUTES from '@src/ROUTES'; import TIMEZONES from '@src/TIMEZONES'; -import RadioListItem from "@components/SelectionList/RadioListItem"; const propTypes = { ...withCurrentUserPersonalDetailsPropTypes, diff --git a/src/pages/settings/Report/NotificationPreferencePage.tsx b/src/pages/settings/Report/NotificationPreferencePage.tsx index cf9189447af2..25a7b5e2e369 100644 --- a/src/pages/settings/Report/NotificationPreferencePage.tsx +++ b/src/pages/settings/Report/NotificationPreferencePage.tsx @@ -4,6 +4,7 @@ import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import SelectionList from '@components/SelectionList'; +import RadioListItem from '@components/SelectionList/RadioListItem'; import useLocalize from '@hooks/useLocalize'; import * as ReportUtils from '@libs/ReportUtils'; import type {ReportSettingsNavigatorParamList} from '@navigation/types'; @@ -12,7 +13,6 @@ import type {WithReportOrNotFoundProps} from '@pages/home/report/withReportOrNot import * as ReportActions from '@userActions/Report'; import CONST from '@src/CONST'; import type SCREENS from '@src/SCREENS'; -import RadioListItem from "@components/SelectionList/RadioListItem"; type NotificationPreferencePageProps = WithReportOrNotFoundProps & StackScreenProps; diff --git a/src/pages/settings/Report/WriteCapabilityPage.tsx b/src/pages/settings/Report/WriteCapabilityPage.tsx index bb65bb3076e1..4c388edd9656 100644 --- a/src/pages/settings/Report/WriteCapabilityPage.tsx +++ b/src/pages/settings/Report/WriteCapabilityPage.tsx @@ -6,6 +6,7 @@ import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import SelectionList from '@components/SelectionList'; +import RadioListItem from '@components/SelectionList/RadioListItem'; import useLocalize from '@hooks/useLocalize'; import Navigation from '@libs/Navigation/Navigation'; import * as ReportUtils from '@libs/ReportUtils'; @@ -18,7 +19,6 @@ import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; import type {Policy} from '@src/types/onyx'; -import RadioListItem from "@components/SelectionList/RadioListItem"; type WriteCapabilityPageOnyxProps = { /** The policy object for the current route */ diff --git a/src/pages/tasks/TaskAssigneeSelectorModal.js b/src/pages/tasks/TaskAssigneeSelectorModal.js index 6cdb8b68cf35..8133a16c0581 100644 --- a/src/pages/tasks/TaskAssigneeSelectorModal.js +++ b/src/pages/tasks/TaskAssigneeSelectorModal.js @@ -11,6 +11,7 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton'; import {useBetas, usePersonalDetails, useSession} from '@components/OnyxProvider'; import ScreenWrapper from '@components/ScreenWrapper'; import SelectionList from '@components/SelectionList'; +import RadioListItem from '@components/SelectionList/RadioListItem'; import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails'; import useDebouncedState from '@hooks/useDebouncedState'; import useLocalize from '@hooks/useLocalize'; @@ -24,7 +25,6 @@ import * as Task from '@userActions/Task'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; -import RadioListItem from "@components/SelectionList/RadioListItem"; const propTypes = { /** All reports shared with the user */ diff --git a/src/pages/workspace/WorkspaceInvitePage.tsx b/src/pages/workspace/WorkspaceInvitePage.tsx index 00de87a85996..032e9e059f5a 100644 --- a/src/pages/workspace/WorkspaceInvitePage.tsx +++ b/src/pages/workspace/WorkspaceInvitePage.tsx @@ -12,6 +12,7 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import SelectionList from '@components/SelectionList'; import type {Section} from '@components/SelectionList/types'; +import UserListItem from '@components/SelectionList/UserListItem'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -35,7 +36,6 @@ import {isEmptyObject} from '@src/types/utils/EmptyObject'; import SearchInputManager from './SearchInputManager'; import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading'; import type {WithPolicyAndFullscreenLoadingProps} from './withPolicyAndFullscreenLoading'; -import UserListItem from "@components/SelectionList/UserListItem"; type MembersSection = SectionListData>; diff --git a/src/pages/workspace/WorkspaceMembersPage.js b/src/pages/workspace/WorkspaceMembersPage.js index 48131be33332..e3ffa9026fe4 100644 --- a/src/pages/workspace/WorkspaceMembersPage.js +++ b/src/pages/workspace/WorkspaceMembersPage.js @@ -16,6 +16,7 @@ import networkPropTypes from '@components/networkPropTypes'; import {withNetwork} from '@components/OnyxProvider'; import ScreenWrapper from '@components/ScreenWrapper'; import SelectionList from '@components/SelectionList'; +import UserListItem from '@components/SelectionList/UserListItem'; import Text from '@components/Text'; import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; @@ -39,7 +40,6 @@ import ROUTES from '@src/ROUTES'; import SearchInputManager from './SearchInputManager'; import {policyDefaultProps, policyPropTypes} from './withPolicy'; import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading'; -import UserListItem from "@components/SelectionList/UserListItem"; const propTypes = { /** All personal details asssociated with user */ diff --git a/src/pages/workspace/WorkspaceProfileCurrencyPage.js b/src/pages/workspace/WorkspaceProfileCurrencyPage.js index 5a4e4e4748b8..63a76e524197 100644 --- a/src/pages/workspace/WorkspaceProfileCurrencyPage.js +++ b/src/pages/workspace/WorkspaceProfileCurrencyPage.js @@ -6,6 +6,7 @@ import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import SelectionList from '@components/SelectionList'; +import RadioListItem from '@components/SelectionList/RadioListItem'; import useLocalize from '@hooks/useLocalize'; import compose from '@libs/compose'; import Navigation from '@libs/Navigation/Navigation'; @@ -15,7 +16,6 @@ import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import {policyDefaultProps, policyPropTypes} from './withPolicy'; import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading'; -import RadioListItem from "@components/SelectionList/RadioListItem"; const propTypes = { /** Constant, list of available currencies */ diff --git a/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage/UnitPage.tsx b/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage/UnitPage.tsx index 9760efd06647..bd0c67a8861e 100644 --- a/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage/UnitPage.tsx +++ b/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage/UnitPage.tsx @@ -2,6 +2,7 @@ import React, {useEffect, useMemo} from 'react'; import {withOnyx} from 'react-native-onyx'; import type {OnyxEntry} from 'react-native-onyx'; import SelectionList from '@components/SelectionList'; +import RadioListItem from '@components/SelectionList/RadioListItem'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -16,7 +17,6 @@ import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type {WorkspaceRateAndUnit} from '@src/types/onyx'; import type {Unit} from '@src/types/onyx/Policy'; -import RadioListItem from "@components/SelectionList/RadioListItem"; type OptionRow = { value: Unit; diff --git a/src/stories/SelectionList.stories.js b/src/stories/SelectionList.stories.js index 5566775a1179..1e8318f9414a 100644 --- a/src/stories/SelectionList.stories.js +++ b/src/stories/SelectionList.stories.js @@ -2,11 +2,11 @@ import React, {useMemo, useState} from 'react'; import {View} from 'react-native'; import _ from 'underscore'; import SelectionList from '@components/SelectionList'; +import RadioListItem from '@components/SelectionList/RadioListItem'; import Text from '@components/Text'; // eslint-disable-next-line no-restricted-imports import {defaultStyles} from '@styles/index'; import CONST from '@src/CONST'; -import RadioListItem from "@components/SelectionList/RadioListItem"; /** * We use the Component Story Format for writing stories. Follow the docs here: From 5fdb2709209aedc85085f7fd06e260c6b4530e4b Mon Sep 17 00:00:00 2001 From: burczu Date: Tue, 20 Feb 2024 13:15:38 +0100 Subject: [PATCH 07/20] type mismatch fixed --- src/components/StatePicker/StateSelectorModal.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/StatePicker/StateSelectorModal.tsx b/src/components/StatePicker/StateSelectorModal.tsx index 112966b4d3da..72d19caaf819 100644 --- a/src/components/StatePicker/StateSelectorModal.tsx +++ b/src/components/StatePicker/StateSelectorModal.tsx @@ -5,6 +5,7 @@ import Modal from '@components/Modal'; import ScreenWrapper from '@components/ScreenWrapper'; import SelectionList from '@components/SelectionList'; import RadioListItem from '@components/SelectionList/RadioListItem'; +import type {ListItem} from "@components/SelectionList/types"; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import searchCountryOptions from '@libs/searchCountryOptions'; @@ -22,7 +23,7 @@ type StateSelectorModalProps = { currentState?: State; /** Function to call when the user selects a State */ - onStateSelected?: (state: CountryData) => void; + onStateSelected?: (state: ListItem) => void; /** Function to call when the user closes the State modal */ onClose?: () => void; From 277e565f54a80602cf5b70669ed762725e1f845c Mon Sep 17 00:00:00 2001 From: burczu Date: Tue, 20 Feb 2024 13:26:18 +0100 Subject: [PATCH 08/20] ability to use children explicitly added --- src/components/SelectionList/BaseListItem.tsx | 2 +- .../SelectionList/RadioListItem.tsx | 38 +++++++++---------- src/components/SelectionList/types.ts | 2 +- 3 files changed, 20 insertions(+), 22 deletions(-) diff --git a/src/components/SelectionList/BaseListItem.tsx b/src/components/SelectionList/BaseListItem.tsx index d71f233c3c46..6f76422c9618 100644 --- a/src/components/SelectionList/BaseListItem.tsx +++ b/src/components/SelectionList/BaseListItem.tsx @@ -99,7 +99,7 @@ function BaseListItem({ )} - {children?.(hovered)} + {typeof children === 'function' ? children(hovered) : children} {!canSelectMultiple && item.isSelected && !rightHandSideComponent && ( - {() => ( - + + + + {!!item.alternateText && ( - - {!!item.alternateText && ( - - )} - - )} + )} + ); } diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index 3d067595fe0c..3f79c3996dc6 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -87,7 +87,7 @@ type BaseListItemProps = CommonListItemProps & { item: TItem; shouldPreventDefaultFocusOnSelectRow?: boolean; keyForList?: string; - children?: (hovered: boolean) => ReactElement; + children?: ReactElement | ((hovered: boolean) => ReactElement); }; type Section = { From ed6798640cffab3ad79b5db2def0013bfaf4fd48 Mon Sep 17 00:00:00 2001 From: burczu Date: Tue, 20 Feb 2024 13:44:22 +0100 Subject: [PATCH 09/20] wrapper and select multiple styles exposed outside the base list item --- src/components/SelectionList/BaseListItem.tsx | 25 +++---------------- .../SelectionList/RadioListItem.tsx | 18 +++++++++++++ src/components/SelectionList/UserListItem.tsx | 16 ++++++++++++ src/components/SelectionList/types.ts | 2 ++ 4 files changed, 40 insertions(+), 21 deletions(-) diff --git a/src/components/SelectionList/BaseListItem.tsx b/src/components/SelectionList/BaseListItem.tsx index 6f76422c9618..36aeb7f86040 100644 --- a/src/components/SelectionList/BaseListItem.tsx +++ b/src/components/SelectionList/BaseListItem.tsx @@ -14,7 +14,8 @@ import type {BaseListItemProps, ListItem} from './types'; function BaseListItem({ item, - isFocused = false, + wrapperStyle, + selectMultipleStyle, isDisabled = false, shouldPreventDefaultFocusOnSelectRow = false, canSelectMultiple = false, @@ -62,31 +63,13 @@ function BaseListItem({ > {({hovered}) => ( <> - + {canSelectMultiple && ( - + {item.isSelected && ( ) { const styles = useThemeStyles(); + const StyleUtils = useStyleUtils(); return ( = CommonListItemProps & { item: TItem; shouldPreventDefaultFocusOnSelectRow?: boolean; keyForList?: string; + wrapperStyle?: StyleProp; + selectMultipleStyle?: StyleProp; children?: ReactElement | ((hovered: boolean) => ReactElement); }; From d64e8a112f91fe46ca64ec983e7aaa120c8a8646 Mon Sep 17 00:00:00 2001 From: burczu Date: Tue, 20 Feb 2024 13:45:30 +0100 Subject: [PATCH 10/20] prettier fixes applied --- src/components/SelectionList/RadioListItem.tsx | 11 ++--------- src/components/SelectionList/UserListItem.tsx | 9 +-------- src/components/StatePicker/StateSelectorModal.tsx | 2 +- 3 files changed, 4 insertions(+), 18 deletions(-) diff --git a/src/components/SelectionList/RadioListItem.tsx b/src/components/SelectionList/RadioListItem.tsx index 516a5ab2393b..cf4e61362e36 100644 --- a/src/components/SelectionList/RadioListItem.tsx +++ b/src/components/SelectionList/RadioListItem.tsx @@ -1,8 +1,8 @@ import React from 'react'; import {View} from 'react-native'; import TextWithTooltip from '@components/TextWithTooltip'; +import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; -import useStyleUtils from "@hooks/useStyleUtils"; import BaseListItem from './BaseListItem'; import type {BaseListItemProps, ListItem} from './types'; @@ -23,14 +23,7 @@ function RadioListItem({ return ( Date: Tue, 20 Feb 2024 14:17:15 +0100 Subject: [PATCH 11/20] switched from renderItem to ListItem prop --- .../DatePicker/CalendarPicker/YearPickerModal.tsx | 2 +- src/components/SelectionList/BaseSelectionList.tsx | 7 +++---- src/components/SelectionList/types.ts | 4 ++-- src/components/StatePicker/StateSelectorModal.tsx | 5 ++--- src/components/ValuePicker/ValueSelectorModal.tsx | 2 +- .../BusinessTypePicker/BusinessTypeSelectorModal.tsx | 2 +- src/pages/RoomInvitePage.tsx | 2 +- src/pages/RoomMembersPage.tsx | 2 +- src/pages/SearchPage/index.js | 2 +- src/pages/iou/IOUCurrencySelection.js | 2 +- ...yTemporaryForRefactorRequestParticipantsSelector.js | 2 +- src/pages/iou/request/step/IOURequestStepCurrency.js | 2 +- .../MoneyRequestParticipantsSelector.js | 2 +- src/pages/settings/Preferences/LanguagePage.js | 2 +- src/pages/settings/Preferences/PriorityModePage.js | 2 +- src/pages/settings/Preferences/ThemePage.js | 2 +- .../Profile/PersonalDetails/CountrySelectionPage.js | 2 +- src/pages/settings/Profile/PronounsPage.js | 2 +- src/pages/settings/Profile/TimezoneSelectPage.js | 2 +- .../settings/Report/NotificationPreferencePage.tsx | 2 +- src/pages/settings/Report/WriteCapabilityPage.tsx | 2 +- src/pages/tasks/TaskAssigneeSelectorModal.js | 2 +- src/pages/workspace/WorkspaceInvitePage.tsx | 2 +- src/pages/workspace/WorkspaceMembersPage.js | 2 +- src/pages/workspace/WorkspaceProfileCurrencyPage.js | 2 +- .../reimburse/WorkspaceRateAndUnitPage/UnitPage.tsx | 2 +- src/stories/SelectionList.stories.js | 10 +++++----- 27 files changed, 35 insertions(+), 37 deletions(-) diff --git a/src/components/DatePicker/CalendarPicker/YearPickerModal.tsx b/src/components/DatePicker/CalendarPicker/YearPickerModal.tsx index 9f95a8cc12a9..03740228f61d 100644 --- a/src/components/DatePicker/CalendarPicker/YearPickerModal.tsx +++ b/src/components/DatePicker/CalendarPicker/YearPickerModal.tsx @@ -79,7 +79,7 @@ function YearPickerModal({isVisible, years, currentYear = new Date().getFullYear initiallyFocusedOptionKey={currentYear.toString()} showScrollIndicator shouldStopPropagation - renderItem={() => RadioListItem} + ListItem={RadioListItem} /> diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index b97c5adf7b76..b0996a08895a 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -27,7 +27,7 @@ import type {BaseSelectionListProps, ButtonOrCheckBoxRoles, FlattenedSectionsRet function BaseSelectionList( { sections, - renderItem, + ListItem, canSelectMultiple = false, onSelectRow, onSelectAll, @@ -271,14 +271,13 @@ function BaseSelectionList( ); }; - const getRenderItem = ({item, index, section}: SectionListRenderItemInfo>) => { + const renderItem = ({item, index, section}: SectionListRenderItemInfo>) => { const indexOffset = section.indexOffset ? section.indexOffset : 0; const normalizedIndex = index + indexOffset; const isDisabled = !!section.isDisabled || item.isDisabled; const isItemFocused = !isDisabled && focusedIndex === normalizedIndex; // We only create tooltips for the first 10 users or so since some reports have hundreds of users, causing performance to degrade. const showTooltip = shouldShowTooltips && normalizedIndex < 10; - const ListItem = renderItem(); return ( ( sections={sections} stickySectionHeadersEnabled={false} renderSectionHeader={renderSectionHeader} - renderItem={getRenderItem} + renderItem={renderItem} getItemLayout={getItemLayout} onScroll={onScroll} onScrollBeginDrag={onScrollBeginDrag} diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index f5bbf3ff2aee..86b481c0b991 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -114,7 +114,7 @@ type BaseSelectionListProps = Partial & { sections: Array>>; /** Default renderer for every item in the list */ - renderItem: () => JSXElementConstructor>; + ListItem: JSXElementConstructor>; /** Whether this is a multi-select list */ canSelectMultiple?: boolean; @@ -210,7 +210,7 @@ type BaseSelectionListProps = Partial & { shouldDelayFocus?: boolean; /** Component to display on the right side of each child */ - rightHandSideComponent?: ((item: TItem) => ReactElement) | ReactElement | null; + rightHandSideComponent?: ((item: ListItem) => ReactElement) | ReactElement | null; /** Whether to show the loading indicator for new options */ isLoadingNewOptions?: boolean; diff --git a/src/components/StatePicker/StateSelectorModal.tsx b/src/components/StatePicker/StateSelectorModal.tsx index 55b07238fd1b..c09c7a25e375 100644 --- a/src/components/StatePicker/StateSelectorModal.tsx +++ b/src/components/StatePicker/StateSelectorModal.tsx @@ -5,7 +5,6 @@ import Modal from '@components/Modal'; import ScreenWrapper from '@components/ScreenWrapper'; import SelectionList from '@components/SelectionList'; import RadioListItem from '@components/SelectionList/RadioListItem'; -import type {ListItem} from '@components/SelectionList/types'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import searchCountryOptions from '@libs/searchCountryOptions'; @@ -23,7 +22,7 @@ type StateSelectorModalProps = { currentState?: State; /** Function to call when the user selects a State */ - onStateSelected?: (state: ListItem) => void; + onStateSelected?: (state: CountryData) => void; /** Function to call when the user closes the State modal */ onClose?: () => void; @@ -102,7 +101,7 @@ function StateSelectorModal({currentState, isVisible, onClose = () => {}, onStat initiallyFocusedOptionKey={currentState} shouldStopPropagation shouldUseDynamicMaxToRenderPerBatch - renderItem={() => RadioListItem} + ListItem={RadioListItem} /> diff --git a/src/components/ValuePicker/ValueSelectorModal.tsx b/src/components/ValuePicker/ValueSelectorModal.tsx index 11cea63d8062..fad59d4e48e4 100644 --- a/src/components/ValuePicker/ValueSelectorModal.tsx +++ b/src/components/ValuePicker/ValueSelectorModal.tsx @@ -41,7 +41,7 @@ function ValueSelectorModal({items = [], selectedItem, label = '', isVisible, on initiallyFocusedOptionKey={selectedItem?.value} shouldStopPropagation shouldShowTooltips={shouldShowTooltips} - renderItem={() => RadioListItem} + ListItem={RadioListItem} /> diff --git a/src/pages/ReimbursementAccount/BusinessInfo/substeps/TypeBusiness/BusinessTypePicker/BusinessTypeSelectorModal.tsx b/src/pages/ReimbursementAccount/BusinessInfo/substeps/TypeBusiness/BusinessTypePicker/BusinessTypeSelectorModal.tsx index ec9eca4a9a6f..2db3a4fdf7ad 100644 --- a/src/pages/ReimbursementAccount/BusinessInfo/substeps/TypeBusiness/BusinessTypePicker/BusinessTypeSelectorModal.tsx +++ b/src/pages/ReimbursementAccount/BusinessInfo/substeps/TypeBusiness/BusinessTypePicker/BusinessTypeSelectorModal.tsx @@ -67,7 +67,7 @@ function BusinessTypeSelectorModal({isVisible, currentBusinessType, onBusinessTy onSelectRow={onBusinessTypeSelected} shouldStopPropagation shouldUseDynamicMaxToRenderPerBatch - renderItem={() => RadioListItem} + ListItem={RadioListItem} /> diff --git a/src/pages/RoomInvitePage.tsx b/src/pages/RoomInvitePage.tsx index a6dde178dcdc..40a1b009b38d 100644 --- a/src/pages/RoomInvitePage.tsx +++ b/src/pages/RoomInvitePage.tsx @@ -226,7 +226,7 @@ function RoomInvitePage({betas, personalDetails, report, policies}: RoomInvitePa UserListItem} + ListItem={UserListItem} textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')} textInputValue={searchTerm} onChangeText={setSearchTerm} diff --git a/src/pages/RoomMembersPage.tsx b/src/pages/RoomMembersPage.tsx index d6a3e0db1cfd..a19a815664ce 100644 --- a/src/pages/RoomMembersPage.tsx +++ b/src/pages/RoomMembersPage.tsx @@ -276,7 +276,7 @@ function RoomMembersPage({report, session, policies}: RoomMembersPageProps) { showLoadingPlaceholder={!OptionsListUtils.isPersonalDetailsReady(personalDetails) || !didLoadRoomMembers} showScrollIndicator shouldPreventDefaultFocusOnSelectRow={!DeviceCapabilities.canUseTouchScreen()} - renderItem={() => UserListItem} + ListItem={UserListItem} /> diff --git a/src/pages/SearchPage/index.js b/src/pages/SearchPage/index.js index bb742d9f1e1d..dc1fe5f57c65 100644 --- a/src/pages/SearchPage/index.js +++ b/src/pages/SearchPage/index.js @@ -155,7 +155,7 @@ function SearchPage({betas, reports, isSearchingForReports}) { RadioListItem} + ListItem={RadioListItem} textInputValue={searchValue} textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')} textInputHint={offlineMessage} diff --git a/src/pages/iou/IOUCurrencySelection.js b/src/pages/iou/IOUCurrencySelection.js index 32b1c7a4c6b6..7495efb43171 100644 --- a/src/pages/iou/IOUCurrencySelection.js +++ b/src/pages/iou/IOUCurrencySelection.js @@ -166,7 +166,7 @@ function IOUCurrencySelection(props) { /> RadioListItem} + ListItem={RadioListItem} textInputLabel={translate('common.search')} textInputValue={searchValue} onChangeText={setSearchValue} diff --git a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js index b062d6baeb61..f1d5ae0c6cab 100644 --- a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js +++ b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js @@ -339,7 +339,7 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({ onConfirm={handleConfirmSelection} sections={didScreenTransitionEnd && isOptionsDataReady ? sections : CONST.EMPTY_ARRAY} // TODO: check this one live - renderItem={() => RadioListItem} + ListItem={RadioListItem} textInputValue={searchTerm} textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')} textInputHint={offlineMessage} diff --git a/src/pages/iou/request/step/IOURequestStepCurrency.js b/src/pages/iou/request/step/IOURequestStepCurrency.js index 196e1a8a61c2..43e4e9bf0eaa 100644 --- a/src/pages/iou/request/step/IOURequestStepCurrency.js +++ b/src/pages/iou/request/step/IOURequestStepCurrency.js @@ -127,7 +127,7 @@ function IOURequestStepCurrency({ {({didScreenTransitionEnd}) => ( RadioListItem} + ListItem={RadioListItem} textInputLabel={translate('common.search')} textInputValue={searchValue} onChangeText={setSearchValue} diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js index 009819673e4f..2786a4b68d77 100755 --- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js +++ b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js @@ -350,7 +350,7 @@ function MoneyRequestParticipantsSelector({ onConfirm={handleConfirmSelection} sections={sections} // TODO: check this one live - renderItem={() => RadioListItem} + ListItem={RadioListItem} textInputValue={searchTerm} textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')} textInputHint={offlineMessage} diff --git a/src/pages/settings/Preferences/LanguagePage.js b/src/pages/settings/Preferences/LanguagePage.js index 4533e38ef5e1..1df1565214c9 100644 --- a/src/pages/settings/Preferences/LanguagePage.js +++ b/src/pages/settings/Preferences/LanguagePage.js @@ -36,7 +36,7 @@ function LanguagePage(props) { /> RadioListItem} + ListItem={RadioListItem} onSelectRow={(language) => App.setLocaleAndNavigate(language.value)} initiallyFocusedOptionKey={_.find(localesToLanguages, (locale) => locale.isSelected).keyForList} /> diff --git a/src/pages/settings/Preferences/PriorityModePage.js b/src/pages/settings/Preferences/PriorityModePage.js index 2d6528b84baf..05c0546c2e41 100644 --- a/src/pages/settings/Preferences/PriorityModePage.js +++ b/src/pages/settings/Preferences/PriorityModePage.js @@ -58,7 +58,7 @@ function PriorityModePage(props) { {props.translate('priorityModePage.explainerText')} RadioListItem} + ListItem={RadioListItem} onSelectRow={updateMode} initiallyFocusedOptionKey={_.find(priorityModes, (mode) => mode.isSelected).keyForList} /> diff --git a/src/pages/settings/Preferences/ThemePage.js b/src/pages/settings/Preferences/ThemePage.js index 0099e58361c7..0724eb286620 100644 --- a/src/pages/settings/Preferences/ThemePage.js +++ b/src/pages/settings/Preferences/ThemePage.js @@ -49,7 +49,7 @@ function ThemePage(props) { RadioListItem} + ListItem={RadioListItem} onSelectRow={(theme) => User.updateTheme(theme.value)} initiallyFocusedOptionKey={_.find(localesToThemes, (theme) => theme.isSelected).keyForList} /> diff --git a/src/pages/settings/Profile/PersonalDetails/CountrySelectionPage.js b/src/pages/settings/Profile/PersonalDetails/CountrySelectionPage.js index 630134e7f9f4..d8327041538d 100644 --- a/src/pages/settings/Profile/PersonalDetails/CountrySelectionPage.js +++ b/src/pages/settings/Profile/PersonalDetails/CountrySelectionPage.js @@ -94,7 +94,7 @@ function CountrySelectionPage({route, navigation}) { textInputLabel={translate('common.country')} textInputValue={searchValue} sections={[{data: searchResults, indexOffset: 0}]} - renderItem={() => RadioListItem} + ListItem={RadioListItem} onSelectRow={selectCountry} onChangeText={setSearchValue} initiallyFocusedOptionKey={currentCountry} diff --git a/src/pages/settings/Profile/PronounsPage.js b/src/pages/settings/Profile/PronounsPage.js index b87044007f2d..1d4675a42b8a 100644 --- a/src/pages/settings/Profile/PronounsPage.js +++ b/src/pages/settings/Profile/PronounsPage.js @@ -101,7 +101,7 @@ function PronounsPage({currentUserPersonalDetails, isLoadingApp}) { textInputPlaceholder={translate('pronounsPage.placeholderText')} textInputValue={searchValue} sections={[{data: filteredPronounsList, indexOffset: 0}]} - renderItem={() => RadioListItem} + ListItem={RadioListItem} onSelectRow={updatePronouns} onChangeText={setSearchValue} initiallyFocusedOptionKey={currentPronounsKey} diff --git a/src/pages/settings/Profile/TimezoneSelectPage.js b/src/pages/settings/Profile/TimezoneSelectPage.js index d34b721e0509..b6c8a5967abc 100644 --- a/src/pages/settings/Profile/TimezoneSelectPage.js +++ b/src/pages/settings/Profile/TimezoneSelectPage.js @@ -98,7 +98,7 @@ function TimezoneSelectPage(props) { initiallyFocusedOptionKey={_.get(_.filter(timezoneOptions, (tz) => tz.text === timezone.selected)[0], 'keyForList')} showScrollIndicator shouldShowTooltips={false} - renderItem={() => RadioListItem} + ListItem={RadioListItem} /> ); diff --git a/src/pages/settings/Report/NotificationPreferencePage.tsx b/src/pages/settings/Report/NotificationPreferencePage.tsx index 25a7b5e2e369..3977bdd0233d 100644 --- a/src/pages/settings/Report/NotificationPreferencePage.tsx +++ b/src/pages/settings/Report/NotificationPreferencePage.tsx @@ -40,7 +40,7 @@ function NotificationPreferencePage({report}: NotificationPreferencePageProps) { /> RadioListItem} + ListItem={RadioListItem} onSelectRow={(option) => report && ReportActions.updateNotificationPreference(report.reportID, report.notificationPreference, option.value, true, undefined, undefined, report) } diff --git a/src/pages/settings/Report/WriteCapabilityPage.tsx b/src/pages/settings/Report/WriteCapabilityPage.tsx index 4c388edd9656..1f991ef87c9a 100644 --- a/src/pages/settings/Report/WriteCapabilityPage.tsx +++ b/src/pages/settings/Report/WriteCapabilityPage.tsx @@ -53,7 +53,7 @@ function WriteCapabilityPage({report, policy}: WriteCapabilityPageProps) { /> RadioListItem} + ListItem={RadioListItem} onSelectRow={(option) => report && ReportActions.updateWriteCapabilityAndNavigate(report, option.value)} initiallyFocusedOptionKey={writeCapabilityOptions.find((locale) => locale.isSelected)?.keyForList} /> diff --git a/src/pages/tasks/TaskAssigneeSelectorModal.js b/src/pages/tasks/TaskAssigneeSelectorModal.js index 8133a16c0581..820aefae8c14 100644 --- a/src/pages/tasks/TaskAssigneeSelectorModal.js +++ b/src/pages/tasks/TaskAssigneeSelectorModal.js @@ -205,7 +205,7 @@ function TaskAssigneeSelectorModal({reports, task, rootParentReportPolicy}) { RadioListItem} + ListItem={RadioListItem} onSelectRow={selectReport} onChangeText={onChangeText} textInputValue={searchValue} diff --git a/src/pages/workspace/WorkspaceInvitePage.tsx b/src/pages/workspace/WorkspaceInvitePage.tsx index 032e9e059f5a..8efc7d7c6a1e 100644 --- a/src/pages/workspace/WorkspaceInvitePage.tsx +++ b/src/pages/workspace/WorkspaceInvitePage.tsx @@ -305,7 +305,7 @@ function WorkspaceInvitePage({ UserListItem} + ListItem={UserListItem} textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')} textInputValue={searchTerm} onChangeText={(value) => { diff --git a/src/pages/workspace/WorkspaceMembersPage.js b/src/pages/workspace/WorkspaceMembersPage.js index e3ffa9026fe4..62b96943453c 100644 --- a/src/pages/workspace/WorkspaceMembersPage.js +++ b/src/pages/workspace/WorkspaceMembersPage.js @@ -489,7 +489,7 @@ function WorkspaceMembersPage(props) { UserListItem} + ListItem={UserListItem} textInputLabel={props.translate('optionsSelector.findMember')} textInputValue={searchValue} onChangeText={(value) => { diff --git a/src/pages/workspace/WorkspaceProfileCurrencyPage.js b/src/pages/workspace/WorkspaceProfileCurrencyPage.js index 63a76e524197..bd13ce4687f5 100644 --- a/src/pages/workspace/WorkspaceProfileCurrencyPage.js +++ b/src/pages/workspace/WorkspaceProfileCurrencyPage.js @@ -91,7 +91,7 @@ function WorkspaceSettingsCurrencyPage({currencyList, policy, isLoadingReportDat RadioListItem} + ListItem={RadioListItem} textInputLabel={translate('workspace.editor.currencyInputLabel')} textInputValue={searchText} onChangeText={setSearchText} diff --git a/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage/UnitPage.tsx b/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage/UnitPage.tsx index bd0c67a8861e..3bd5a9e01bab 100644 --- a/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage/UnitPage.tsx +++ b/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage/UnitPage.tsx @@ -91,7 +91,7 @@ function WorkspaceUnitPage(props: WorkspaceUnitPageProps) { RadioListItem} + ListItem={RadioListItem} onSelectRow={(unit: OptionRow) => updateUnit(unit.value)} initiallyFocusedOptionKey={unitOptions.find((unit) => unit.isSelected)?.keyForList} /> diff --git a/src/stories/SelectionList.stories.js b/src/stories/SelectionList.stories.js index 1e8318f9414a..dcd639119886 100644 --- a/src/stories/SelectionList.stories.js +++ b/src/stories/SelectionList.stories.js @@ -90,7 +90,7 @@ function Default(args) { // eslint-disable-next-line react/jsx-props-no-spreading {...args} sections={sections} - renderItem={() => RadioListItem} + ListItem={RadioListItem} onSelectRow={onSelectRow} /> ); @@ -139,7 +139,7 @@ function WithTextInput(args) { // eslint-disable-next-line react/jsx-props-no-spreading {...args} sections={sections} - renderItem={() => RadioListItem} + ListItem={RadioListItem} textInputValue={searchText} onChangeText={setSearchText} onSelectRow={onSelectRow} @@ -263,7 +263,7 @@ function MultipleSelection(args) { // eslint-disable-next-line react/jsx-props-no-spreading {...args} sections={memo.sections} - renderItem={() => RadioListItem} + ListItem={RadioListItem} onSelectRow={onSelectRow} onSelectAll={onSelectAll} /> @@ -326,7 +326,7 @@ function WithSectionHeader(args) { // eslint-disable-next-line react/jsx-props-no-spreading {...args} sections={memo.sections} - renderItem={() => RadioListItem} + ListItem={RadioListItem} onSelectRow={onSelectRow} onSelectAll={onSelectAll} /> @@ -387,7 +387,7 @@ function WithConfirmButton(args) { // eslint-disable-next-line react/jsx-props-no-spreading {...args} sections={memo.sections} - renderItem={() => RadioListItem} + ListItem={RadioListItem} onSelectRow={onSelectRow} onSelectAll={onSelectAll} /> From 7697efcc4f3270e53f4f35669fbd0b71ee3519c9 Mon Sep 17 00:00:00 2001 From: burczu Date: Wed, 21 Feb 2024 07:51:51 +0100 Subject: [PATCH 12/20] used correct ListItem in all the confusing places --- src/pages/SearchPage/index.js | 5 ++--- .../MoneyTemporaryForRefactorRequestParticipantsSelector.js | 5 ++--- .../MoneyRequestParticipantsSelector.js | 5 ++--- src/pages/tasks/TaskAssigneeSelectorModal.js | 5 ++--- 4 files changed, 8 insertions(+), 12 deletions(-) diff --git a/src/pages/SearchPage/index.js b/src/pages/SearchPage/index.js index dc1fe5f57c65..6db69cea13e4 100644 --- a/src/pages/SearchPage/index.js +++ b/src/pages/SearchPage/index.js @@ -6,7 +6,7 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton'; import {usePersonalDetails} from '@components/OnyxProvider'; import ScreenWrapper from '@components/ScreenWrapper'; import SelectionList from '@components/SelectionList'; -import RadioListItem from '@components/SelectionList/RadioListItem'; +import UserListItem from '@components/SelectionList/UserListItem'; import useDebouncedState from '@hooks/useDebouncedState'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; @@ -154,8 +154,7 @@ function SearchPage({betas, reports, isSearchingForReports}) { Date: Wed, 21 Feb 2024 08:05:26 +0100 Subject: [PATCH 13/20] selection list performance test fixed --- tests/perf-test/SelectionList.perf-test.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/tests/perf-test/SelectionList.perf-test.js b/tests/perf-test/SelectionList.perf-test.js index 9decc4361612..66b852bdfb79 100644 --- a/tests/perf-test/SelectionList.perf-test.js +++ b/tests/perf-test/SelectionList.perf-test.js @@ -2,6 +2,7 @@ import {fireEvent} from '@testing-library/react-native'; import React, {useState} from 'react'; import {measurePerformance} from 'reassure'; import _ from 'underscore'; +import RadioListItem from "@components/SelectionList/RadioListItem"; import SelectionList from '../../src/components/SelectionList'; import variables from '../../src/styles/variables'; @@ -86,6 +87,7 @@ function SelectionListWrapper(args) { sections={sections} onSelectRow={onSelectRow} initiallyFocusedOptionKey="item-0" + ListItem={RadioListItem} // eslint-disable-next-line react/jsx-props-no-spreading {...args} /> From 66ba2dd65fc0dd60069f66a92258ae51eab26980 Mon Sep 17 00:00:00 2001 From: burczu Date: Wed, 21 Feb 2024 08:22:25 +0100 Subject: [PATCH 14/20] prettier fixed --- tests/perf-test/SelectionList.perf-test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/perf-test/SelectionList.perf-test.js b/tests/perf-test/SelectionList.perf-test.js index 66b852bdfb79..a109f92a1501 100644 --- a/tests/perf-test/SelectionList.perf-test.js +++ b/tests/perf-test/SelectionList.perf-test.js @@ -2,7 +2,7 @@ import {fireEvent} from '@testing-library/react-native'; import React, {useState} from 'react'; import {measurePerformance} from 'reassure'; import _ from 'underscore'; -import RadioListItem from "@components/SelectionList/RadioListItem"; +import RadioListItem from '@components/SelectionList/RadioListItem'; import SelectionList from '../../src/components/SelectionList'; import variables from '../../src/styles/variables'; From 432a4502011d4df3af45ccea5aea65b5950b6c78 Mon Sep 17 00:00:00 2001 From: burczu Date: Wed, 21 Feb 2024 09:38:26 +0100 Subject: [PATCH 15/20] unnecessary commented code removed --- src/components/SelectionList/UserListItem.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/SelectionList/UserListItem.tsx b/src/components/SelectionList/UserListItem.tsx index c19b210677a5..f4581a435e56 100644 --- a/src/components/SelectionList/UserListItem.tsx +++ b/src/components/SelectionList/UserListItem.tsx @@ -84,14 +84,13 @@ function UserListItem({ styles.sidebarLinkTextBold, styles.pre, item.alternateText ? styles.mb1 : null, - // style ]} /> {!!item.alternateText && ( )} From 742d5f2475c72ec1f32ac485cc2f4726612e2dad Mon Sep 17 00:00:00 2001 From: burczu Date: Wed, 21 Feb 2024 10:54:00 +0100 Subject: [PATCH 16/20] allowing only expected types as ListItem --- src/components/SelectionList/types.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index 86b481c0b991..9f724f92c1a3 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -2,6 +2,8 @@ import type {JSXElementConstructor, ReactElement, ReactNode} from 'react'; import type {GestureResponderEvent, InputModeOptions, LayoutChangeEvent, SectionListData, StyleProp, TextStyle, ViewStyle} from 'react-native'; import type {Errors, Icon, PendingAction} from '@src/types/onyx/OnyxCommon'; import type ChildrenProps from '@src/types/utils/ChildrenProps'; +import RadioListItem from "@components/SelectionList/RadioListItem"; +import UserListItem from "@components/SelectionList/UserListItem"; type CommonListItemProps = { /** Whether this item is focused (for arrow key controls) */ @@ -114,7 +116,7 @@ type BaseSelectionListProps = Partial & { sections: Array>>; /** Default renderer for every item in the list */ - ListItem: JSXElementConstructor>; + ListItem: typeof RadioListItem | typeof UserListItem; /** Whether this is a multi-select list */ canSelectMultiple?: boolean; From 24ff7def212098661483391a95853eee71948e0b Mon Sep 17 00:00:00 2001 From: burczu Date: Wed, 21 Feb 2024 11:01:49 +0100 Subject: [PATCH 17/20] prettier, one more time --- src/components/SelectionList/types.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index 9f724f92c1a3..c1af816e2b04 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -1,9 +1,9 @@ -import type {JSXElementConstructor, ReactElement, ReactNode} from 'react'; +import type {ReactElement, ReactNode} from 'react'; import type {GestureResponderEvent, InputModeOptions, LayoutChangeEvent, SectionListData, StyleProp, TextStyle, ViewStyle} from 'react-native'; import type {Errors, Icon, PendingAction} from '@src/types/onyx/OnyxCommon'; import type ChildrenProps from '@src/types/utils/ChildrenProps'; -import RadioListItem from "@components/SelectionList/RadioListItem"; -import UserListItem from "@components/SelectionList/UserListItem"; +import type RadioListItem from './RadioListItem'; +import type UserListItem from './UserListItem'; type CommonListItemProps = { /** Whether this item is focused (for arrow key controls) */ From caeed9a29bc52de8de65055af20108346c91bef2 Mon Sep 17 00:00:00 2001 From: burczu Date: Wed, 21 Feb 2024 12:16:53 +0100 Subject: [PATCH 18/20] user specific props added --- src/components/SelectionList/BaseListItem.tsx | 17 ++++------- .../SelectionList/RadioListItem.tsx | 4 +-- src/components/SelectionList/UserListItem.tsx | 16 ++++++++-- src/components/SelectionList/types.ts | 29 +++++++++++++++++-- 4 files changed, 49 insertions(+), 17 deletions(-) diff --git a/src/components/SelectionList/BaseListItem.tsx b/src/components/SelectionList/BaseListItem.tsx index 36aeb7f86040..c39d7a05a4f7 100644 --- a/src/components/SelectionList/BaseListItem.tsx +++ b/src/components/SelectionList/BaseListItem.tsx @@ -4,8 +4,6 @@ import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; -import Text from '@components/Text'; -import useLocalize from '@hooks/useLocalize'; import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -23,13 +21,14 @@ function BaseListItem({ onDismissError = () => {}, rightHandSideComponent, keyForList, + errors, + pendingAction, + FooterComponent, children, }: BaseListItemProps) { const theme = useTheme(); const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); - const {translate} = useLocalize(); - const isUserItem = 'icons' in item && item?.icons?.length && item.icons.length > 0; const rightHandSideComponentRender = () => { if (canSelectMultiple || !rightHandSideComponent) { @@ -46,8 +45,8 @@ function BaseListItem({ return ( onDismissError(item)} - pendingAction={isUserItem ? item.pendingAction : undefined} - errors={isUserItem ? item.errors : undefined} + pendingAction={pendingAction} + errors={errors} errorRowStyles={styles.ph5} > ({ )} {rightHandSideComponentRender()} - {isUserItem && item.invitedSecondaryLogin && ( - - {translate('workspace.people.invitedBySecondaryLogin', {secondaryLogin: item.invitedSecondaryLogin})} - - )} + {FooterComponent} )} diff --git a/src/components/SelectionList/RadioListItem.tsx b/src/components/SelectionList/RadioListItem.tsx index cf4e61362e36..41e60e4b58e7 100644 --- a/src/components/SelectionList/RadioListItem.tsx +++ b/src/components/SelectionList/RadioListItem.tsx @@ -4,7 +4,7 @@ import TextWithTooltip from '@components/TextWithTooltip'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; import BaseListItem from './BaseListItem'; -import type {BaseListItemProps, ListItem} from './types'; +import type {RadioListItemProps} from './types'; function RadioListItem({ item, @@ -16,7 +16,7 @@ function RadioListItem({ onDismissError, shouldPreventDefaultFocusOnSelectRow, rightHandSideComponent, -}: BaseListItemProps) { +}: RadioListItemProps) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); diff --git a/src/components/SelectionList/UserListItem.tsx b/src/components/SelectionList/UserListItem.tsx index f4581a435e56..f35dfa9b49ad 100644 --- a/src/components/SelectionList/UserListItem.tsx +++ b/src/components/SelectionList/UserListItem.tsx @@ -2,12 +2,14 @@ import React from 'react'; import {View} from 'react-native'; import MultipleAvatars from '@components/MultipleAvatars'; import SubscriptAvatar from '@components/SubscriptAvatar'; +import Text from '@components/Text'; import TextWithTooltip from '@components/TextWithTooltip'; +import useLocalize from '@hooks/useLocalize'; import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import BaseListItem from './BaseListItem'; -import type {BaseListItemProps, ListItem} from './types'; +import type {UserListItemProps} from './types'; function UserListItem({ item, @@ -19,10 +21,11 @@ function UserListItem({ onDismissError, shouldPreventDefaultFocusOnSelectRow, rightHandSideComponent, -}: BaseListItemProps) { +}: UserListItemProps) { const styles = useThemeStyles(); const theme = useTheme(); const StyleUtils = useStyleUtils(); + const {translate} = useLocalize(); const focusedBackgroundColor = styles.sidebarLinkActive.backgroundColor; const subscriptAvatarBorderColor = isFocused ? focusedBackgroundColor : theme.sidebar; @@ -48,6 +51,15 @@ function UserListItem({ onDismissError={onDismissError} shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow} rightHandSideComponent={rightHandSideComponent} + errors={item.errors} + pendingAction={item.pendingAction} + FooterComponent={ + item.invitedSecondaryLogin ? ( + + {translate('workspace.people.invitedBySecondaryLogin', {secondaryLogin: item.invitedSecondaryLogin})} + + ) : undefined + } keyForList={item.keyForList} > {(hovered) => ( diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index c1af816e2b04..99092b0f0eb4 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -1,6 +1,7 @@ import type {ReactElement, ReactNode} from 'react'; import type {GestureResponderEvent, InputModeOptions, LayoutChangeEvent, SectionListData, StyleProp, TextStyle, ViewStyle} from 'react-native'; import type {Errors, Icon, PendingAction} from '@src/types/onyx/OnyxCommon'; +import type {ReceiptErrors} from '@src/types/onyx/Transaction'; import type ChildrenProps from '@src/types/utils/ChildrenProps'; import type RadioListItem from './RadioListItem'; import type UserListItem from './UserListItem'; @@ -26,6 +27,12 @@ type CommonListItemProps = { /** Component to display on the right side */ rightHandSideComponent?: ((item: TItem) => ReactElement) | ReactElement | null; + + /** Styles for the wrapper view */ + wrapperStyle?: StyleProp; + + /** Styles for the checkbox wrapper view if select multiple option is on */ + selectMultipleStyle?: StyleProp; }; type ListItem = { @@ -83,17 +90,33 @@ type ListItemProps = CommonListItemProps & { /** Is item hovered */ isHovered?: boolean; + + shouldPreventDefaultFocusOnSelectRow?: boolean; }; type BaseListItemProps = CommonListItemProps & { item: TItem; shouldPreventDefaultFocusOnSelectRow?: boolean; keyForList?: string; - wrapperStyle?: StyleProp; - selectMultipleStyle?: StyleProp; + errors?: Errors | ReceiptErrors | null; + pendingAction?: PendingAction | null; + FooterComponent?: ReactElement; children?: ReactElement | ((hovered: boolean) => ReactElement); }; +type UserListItemProps = ListItemProps & { + /** Errors that this user may contain */ + errors?: Errors | ReceiptErrors | null; + + /** The type of action that's pending */ + pendingAction?: PendingAction | null; + + /** The React element that will be shown as a footer */ + FooterComponent?: ReactElement; +}; + +type RadioListItemProps = ListItemProps; + type Section = { /** Title of the section */ title?: string; @@ -243,6 +266,8 @@ export type { CommonListItemProps, Section, BaseListItemProps, + UserListItemProps, + RadioListItemProps, ListItem, ListItemProps, FlattenedSectionsReturn, From 01d08cd963ec74a5ef62fb1239a0b35a5eb0fc5f Mon Sep 17 00:00:00 2001 From: burczu Date: Wed, 21 Feb 2024 12:36:56 +0100 Subject: [PATCH 19/20] common styles extracted to StyleUtils --- src/components/SelectionList/RadioListItem.tsx | 9 +-------- src/components/SelectionList/UserListItem.tsx | 9 +-------- src/components/SelectionList/types.ts | 2 ++ src/styles/utils/index.ts | 8 ++++++++ 4 files changed, 12 insertions(+), 16 deletions(-) diff --git a/src/components/SelectionList/RadioListItem.tsx b/src/components/SelectionList/RadioListItem.tsx index 41e60e4b58e7..c8a0d5d5d593 100644 --- a/src/components/SelectionList/RadioListItem.tsx +++ b/src/components/SelectionList/RadioListItem.tsx @@ -24,14 +24,7 @@ function RadioListItem({ & { isHovered?: boolean; shouldPreventDefaultFocusOnSelectRow?: boolean; + + keyForList?: string; }; type BaseListItemProps = CommonListItemProps & { diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index a0edb7fd4e23..d3b2c0e9d0f5 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -1474,6 +1474,14 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({ }, getFullscreenCenteredContentStyles: () => [StyleSheet.absoluteFill, styles.justifyContentCenter, styles.alignItemsCenter], + + getMultiselectListStyles: (isSelected: boolean, isDisabled: boolean): ViewStyle => ({ + ...styles.mr3, + ...(isSelected && styles.checkedContainer), + ...(isSelected && styles.borderColorFocus), + ...(isDisabled && styles.cursorDisabled), + ...(isDisabled && styles.buttonOpacityDisabled), + }), }); type StyleUtilsType = ReturnType; From 45fd85b30f9d8948be92559c5ac70e82ed44fbe6 Mon Sep 17 00:00:00 2001 From: burczu Date: Wed, 21 Feb 2024 13:52:15 +0100 Subject: [PATCH 20/20] missing comment added --- src/components/SelectionList/types.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index 717c5249e8d9..403ccd91a26b 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -91,8 +91,10 @@ type ListItemProps = CommonListItemProps & { /** Is item hovered */ isHovered?: boolean; + /** Whether the default focus should be prevented on row selection */ shouldPreventDefaultFocusOnSelectRow?: boolean; + /** Key used internally by React */ keyForList?: string; };