From cde19cf4fbf5788246473bb9ac46cc41e7206c8a Mon Sep 17 00:00:00 2001 From: dominictb Date: Sat, 14 Sep 2024 12:31:50 +0700 Subject: [PATCH 1/3] fix: rbr for reports in filter page --- src/components/Search/SearchMultipleSelectionPicker.tsx | 1 + src/components/SelectionList/BaseListItem.tsx | 3 ++- src/components/SelectionList/BaseSelectionList.tsx | 2 ++ src/components/SelectionList/types.ts | 7 +++++++ 4 files changed, 12 insertions(+), 1 deletion(-) diff --git a/src/components/Search/SearchMultipleSelectionPicker.tsx b/src/components/Search/SearchMultipleSelectionPicker.tsx index 558b89715b61..15c8de11ecd3 100644 --- a/src/components/Search/SearchMultipleSelectionPicker.tsx +++ b/src/components/Search/SearchMultipleSelectionPicker.tsx @@ -114,6 +114,7 @@ function SearchMultipleSelectionPicker({items, initiallySelectedItems, pickerTit shouldStopPropagation showLoadingPlaceholder={!noResultsFound} shouldShowTooltips + shouldDisplayRBR={false} canSelectMultiple ListItem={SelectableListItem} /> diff --git a/src/components/SelectionList/BaseListItem.tsx b/src/components/SelectionList/BaseListItem.tsx index a78944b50112..31207fdbf1d7 100644 --- a/src/components/SelectionList/BaseListItem.tsx +++ b/src/components/SelectionList/BaseListItem.tsx @@ -30,6 +30,7 @@ function BaseListItem({ children, isFocused, shouldSyncFocus = true, + shouldDisplayRBR = true, onFocus = () => {}, hoverStyle, onLongPressRow, @@ -115,7 +116,7 @@ function BaseListItem({ )} - {!item.isSelected && !!item.brickRoadIndicator && ( + {!item.isSelected && !!item.brickRoadIndicator && shouldDisplayRBR && ( ( onLongPressRow, shouldShowTextInput = !!textInputLabel || !!textInputIconLeft, shouldShowListEmptyContent = true, + shouldDisplayRBR = true, }: BaseSelectionListProps, ref: ForwardedRef, ) { @@ -476,6 +477,7 @@ function BaseSelectionList( setFocusedIndex(normalizedIndex); }} shouldSyncFocus={!isTextInputFocusedRef.current} + shouldDisplayRBR={shouldDisplayRBR} /> {item.footerContent && item.footerContent} diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index 7bdbb03f2101..5a9635a770f6 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -260,6 +260,9 @@ type ListItemProps = CommonListItemProps & { * When we type something into the text input, the first element found is focused, in this situation we should not synchronize the focus on the element because we will lose the focus from the text input. */ shouldSyncFocus?: boolean; + + /** Whether to show RBR */ + shouldDisplayRBR?: boolean; }; type BaseListItemProps = CommonListItemProps & { @@ -273,6 +276,7 @@ type BaseListItemProps = CommonListItemProps & { children?: ReactElement> | ((hovered: boolean) => ReactElement>); shouldSyncFocus?: boolean; hoverStyle?: StyleProp; + shouldDisplayRBR?: boolean; }; type UserListItemProps = ListItemProps & { @@ -538,6 +542,9 @@ type BaseSelectionListProps = Partial & { /** Whether to show the empty list content */ shouldShowListEmptyContent?: boolean; + + /** Whether to show RBR in list item */ + shouldDisplayRBR?: boolean; } & TRightHandSideComponent; type SelectionListHandle = { From 1ec1e2ab9a92abbdab84f67bb24c9db2fa4c4f1d Mon Sep 17 00:00:00 2001 From: dominictb Date: Sat, 14 Sep 2024 23:18:45 +0700 Subject: [PATCH 2/3] use correct component --- src/components/Search/SearchFiltersChatsSelector.tsx | 1 + src/components/Search/SearchMultipleSelectionPicker.tsx | 1 - src/components/SelectionList/InviteMemberListItem.tsx | 2 ++ 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/Search/SearchFiltersChatsSelector.tsx b/src/components/Search/SearchFiltersChatsSelector.tsx index 689f917fdccf..1a0a69052d6b 100644 --- a/src/components/Search/SearchFiltersChatsSelector.tsx +++ b/src/components/Search/SearchFiltersChatsSelector.tsx @@ -176,6 +176,7 @@ function SearchFiltersChatsSelector({initialReportIDs, onFiltersUpdate, isScreen onChangeText={(value) => { setSearchTerm(value); }} + shouldDisplayRBR={false} onSelectRow={handleParticipantSelection} isLoadingNewOptions={isLoadingNewOptions} showLoadingPlaceholder={showLoadingPlaceholder} diff --git a/src/components/Search/SearchMultipleSelectionPicker.tsx b/src/components/Search/SearchMultipleSelectionPicker.tsx index 15c8de11ecd3..558b89715b61 100644 --- a/src/components/Search/SearchMultipleSelectionPicker.tsx +++ b/src/components/Search/SearchMultipleSelectionPicker.tsx @@ -114,7 +114,6 @@ function SearchMultipleSelectionPicker({items, initiallySelectedItems, pickerTit shouldStopPropagation showLoadingPlaceholder={!noResultsFound} shouldShowTooltips - shouldDisplayRBR={false} canSelectMultiple ListItem={SelectableListItem} /> diff --git a/src/components/SelectionList/InviteMemberListItem.tsx b/src/components/SelectionList/InviteMemberListItem.tsx index 2b3c01c04a69..f2db4714e82d 100644 --- a/src/components/SelectionList/InviteMemberListItem.tsx +++ b/src/components/SelectionList/InviteMemberListItem.tsx @@ -27,6 +27,7 @@ function InviteMemberListItem({ rightHandSideComponent, onFocus, shouldSyncFocus, + shouldDisplayRBR, }: InviteMemberListItemProps) { const styles = useThemeStyles(); const theme = useTheme(); @@ -68,6 +69,7 @@ function InviteMemberListItem({ keyForList={item.keyForList} onFocus={onFocus} shouldSyncFocus={shouldSyncFocus} + shouldDisplayRBR={shouldDisplayRBR} > {(hovered?: boolean) => ( <> From 46efbea4fbc3b4604c19cb500c68cb8da5baf4bf Mon Sep 17 00:00:00 2001 From: dominictb Date: Tue, 17 Sep 2024 15:25:06 +0700 Subject: [PATCH 3/3] apply changes for other pages --- src/components/Search/SearchFiltersChatsSelector.tsx | 1 - src/components/SelectionList/BaseSelectionList.tsx | 2 -- src/components/SelectionList/InviteMemberListItem.tsx | 7 ++++--- src/components/SelectionList/types.ts | 3 --- 4 files changed, 4 insertions(+), 9 deletions(-) diff --git a/src/components/Search/SearchFiltersChatsSelector.tsx b/src/components/Search/SearchFiltersChatsSelector.tsx index 1a0a69052d6b..689f917fdccf 100644 --- a/src/components/Search/SearchFiltersChatsSelector.tsx +++ b/src/components/Search/SearchFiltersChatsSelector.tsx @@ -176,7 +176,6 @@ function SearchFiltersChatsSelector({initialReportIDs, onFiltersUpdate, isScreen onChangeText={(value) => { setSearchTerm(value); }} - shouldDisplayRBR={false} onSelectRow={handleParticipantSelection} isLoadingNewOptions={isLoadingNewOptions} showLoadingPlaceholder={showLoadingPlaceholder} diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 6ace1ddc4f8b..cc836a9e9e00 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -102,7 +102,6 @@ function BaseSelectionList( onLongPressRow, shouldShowTextInput = !!textInputLabel || !!textInputIconLeft, shouldShowListEmptyContent = true, - shouldDisplayRBR = true, }: BaseSelectionListProps, ref: ForwardedRef, ) { @@ -477,7 +476,6 @@ function BaseSelectionList( setFocusedIndex(normalizedIndex); }} shouldSyncFocus={!isTextInputFocusedRef.current} - shouldDisplayRBR={shouldDisplayRBR} /> {item.footerContent && item.footerContent} diff --git a/src/components/SelectionList/InviteMemberListItem.tsx b/src/components/SelectionList/InviteMemberListItem.tsx index f2db4714e82d..553adfd23c5c 100644 --- a/src/components/SelectionList/InviteMemberListItem.tsx +++ b/src/components/SelectionList/InviteMemberListItem.tsx @@ -27,7 +27,6 @@ function InviteMemberListItem({ rightHandSideComponent, onFocus, shouldSyncFocus, - shouldDisplayRBR, }: InviteMemberListItemProps) { const styles = useThemeStyles(); const theme = useTheme(); @@ -38,6 +37,8 @@ function InviteMemberListItem({ const subscriptAvatarBorderColor = isFocused ? focusedBackgroundColor : theme.sidebar; const hoveredBackgroundColor = !!styles.sidebarLinkHover && 'backgroundColor' in styles.sidebarLinkHover ? styles.sidebarLinkHover.backgroundColor : theme.sidebar; + const shouldShowCheckBox = canSelectMultiple && !item.isDisabled; + const handleCheckboxPress = useCallback(() => { if (onCheckboxPress) { onCheckboxPress(item); @@ -69,7 +70,7 @@ function InviteMemberListItem({ keyForList={item.keyForList} onFocus={onFocus} shouldSyncFocus={shouldSyncFocus} - shouldDisplayRBR={shouldDisplayRBR} + shouldDisplayRBR={!shouldShowCheckBox} > {(hovered?: boolean) => ( <> @@ -115,7 +116,7 @@ function InviteMemberListItem({ )} {!!item.rightElement && item.rightElement} - {canSelectMultiple && !item.isDisabled && ( + {shouldShowCheckBox && ( = Partial & { /** Whether to show the empty list content */ shouldShowListEmptyContent?: boolean; - - /** Whether to show RBR in list item */ - shouldDisplayRBR?: boolean; } & TRightHandSideComponent; type SelectionListHandle = {