From 60bdeaf604b1f0cd78f8da0519fbac704933ffb8 Mon Sep 17 00:00:00 2001 From: thelullabyy Date: Tue, 13 May 2025 19:56:40 +0700 Subject: [PATCH] fix: Checkmark appears briefly next to the toggle after exiting selection mode --- src/components/SelectionList/BaseListItem.tsx | 3 ++- src/components/SelectionList/BaseSelectionList.tsx | 2 ++ .../SelectionList/BaseSelectionListItemRenderer.tsx | 2 ++ src/components/SelectionList/TableListItem.tsx | 2 ++ src/components/SelectionList/types.ts | 8 ++++++++ src/pages/workspace/WorkspaceMembersPage.tsx | 1 + .../workspace/categories/WorkspaceCategoriesPage.tsx | 1 + .../workspace/distanceRates/PolicyDistanceRatesPage.tsx | 1 + src/pages/workspace/perDiem/WorkspacePerDiemPage.tsx | 1 + .../workspace/reportFields/ReportFieldsListValuesPage.tsx | 1 + src/pages/workspace/tags/WorkspaceTagsPage.tsx | 1 + src/pages/workspace/tags/WorkspaceViewTagsPage.tsx | 1 + src/pages/workspace/taxes/WorkspaceTaxesPage.tsx | 1 + 13 files changed, 24 insertions(+), 1 deletion(-) diff --git a/src/components/SelectionList/BaseListItem.tsx b/src/components/SelectionList/BaseListItem.tsx index dc98ca2e2f97..44a1c9e4171f 100644 --- a/src/components/SelectionList/BaseListItem.tsx +++ b/src/components/SelectionList/BaseListItem.tsx @@ -40,6 +40,7 @@ function BaseListItem({ hoverStyle, onLongPressRow, testID, + shouldUseDefaultRightHandSideCheckmark = true, }: BaseListItemProps) { const theme = useTheme(); const styles = useThemeStyles(); @@ -125,7 +126,7 @@ function BaseListItem({ > {typeof children === 'function' ? children(hovered) : children} - {!canSelectMultiple && !!item.isSelected && !rightHandSideComponent && ( + {!canSelectMultiple && !!item.isSelected && !rightHandSideComponent && shouldUseDefaultRightHandSideCheckmark && ( ( fixedNumItemsForLoader, loaderSpeed, errorText, + shouldUseDefaultRightHandSideCheckmark, }: SelectionListProps, ref: ForwardedRef, ) { @@ -568,6 +569,7 @@ function BaseSelectionList( shouldAnimateInHighlight: isItemHighlighted, ...item, }} + shouldUseDefaultRightHandSideCheckmark={shouldUseDefaultRightHandSideCheckmark} index={index} isFocused={isItemFocused} isDisabled={isDisabled} diff --git a/src/components/SelectionList/BaseSelectionListItemRenderer.tsx b/src/components/SelectionList/BaseSelectionListItemRenderer.tsx index d535b12fce9e..2dacd5e0a8b2 100644 --- a/src/components/SelectionList/BaseSelectionListItemRenderer.tsx +++ b/src/components/SelectionList/BaseSelectionListItemRenderer.tsx @@ -43,6 +43,7 @@ function BaseSelectionListItemRenderer({ titleStyles, singleExecution, titleContainerStyles, + shouldUseDefaultRightHandSideCheckmark, }: BaseSelectionListItemRendererProps) { const handleOnCheckboxPress = () => { if (isReportListItemType(item)) { @@ -92,6 +93,7 @@ function BaseSelectionListItemRenderer({ wrapperStyle={wrapperStyle} titleStyles={titleStyles} titleContainerStyles={titleContainerStyles} + shouldUseDefaultRightHandSideCheckmark={shouldUseDefaultRightHandSideCheckmark} /> {item.footerContent && item.footerContent} diff --git a/src/components/SelectionList/TableListItem.tsx b/src/components/SelectionList/TableListItem.tsx index f584ad787a0e..709b95a50451 100644 --- a/src/components/SelectionList/TableListItem.tsx +++ b/src/components/SelectionList/TableListItem.tsx @@ -27,6 +27,7 @@ function TableListItem({ onLongPressRow, shouldSyncFocus, titleContainerStyles, + shouldUseDefaultRightHandSideCheckmark, }: TableListItemProps) { const styles = useThemeStyles(); const theme = useTheme(); @@ -80,6 +81,7 @@ function TableListItem({ onFocus={onFocus} shouldSyncFocus={shouldSyncFocus} hoverStyle={item.isSelected && styles.activeComponentBG} + shouldUseDefaultRightHandSideCheckmark={shouldUseDefaultRightHandSideCheckmark} > {(hovered) => ( <> diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index aded0deb1d69..64f58d286851 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -354,6 +354,9 @@ type ListItemProps = CommonListItemProps & { /** Styles applied for the title container of the list item */ titleContainerStyles?: StyleProp; + + /** Whether to show the default right hand side checkmark */ + shouldUseDefaultRightHandSideCheckmark?: boolean; }; type BaseListItemProps = CommonListItemProps & { @@ -372,6 +375,8 @@ type BaseListItemProps = CommonListItemProps & { shouldDisplayRBR?: boolean; /** Test ID of the component. Used to locate this view in end-to-end tests. */ testID?: string; + /** Whether to show the default right hand side checkmark */ + shouldUseDefaultRightHandSideCheckmark?: boolean; }; type UserListItemProps = ListItemProps & { @@ -734,6 +739,9 @@ type SelectionListProps = Partial & { /** Error text to display */ errorText?: string; + + /** Whether to show the default right hand side checkmark */ + shouldUseDefaultRightHandSideCheckmark?: boolean; } & TRightHandSideComponent; type SelectionListHandle = { diff --git a/src/pages/workspace/WorkspaceMembersPage.tsx b/src/pages/workspace/WorkspaceMembersPage.tsx index b9b014f7b1dd..fdef786af354 100644 --- a/src/pages/workspace/WorkspaceMembersPage.tsx +++ b/src/pages/workspace/WorkspaceMembersPage.tsx @@ -798,6 +798,7 @@ function WorkspaceMembersPage({personalDetails, route, policy, currentUserPerson sections={[{data: filteredData, isDisabled: false}]} selectedItemKeys={selectedEmployees} ListItem={TableListItem} + shouldUseDefaultRightHandSideCheckmark={false} turnOnSelectionModeOnLongPress={isPolicyAdmin} onTurnOnSelectionMode={(item) => item && toggleUser(item?.accountID)} shouldUseUserSkeletonView diff --git a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx index 2fda8bc086d4..37428b330848 100644 --- a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx +++ b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx @@ -465,6 +465,7 @@ function WorkspaceCategoriesPage({route}: WorkspaceCategoriesPageProps) { turnOnSelectionModeOnLongPress={isSmallScreenWidth} onTurnOnSelectionMode={(item) => item && toggleCategory(item)} sections={[{data: filteredCategoryList, isDisabled: false}]} + shouldUseDefaultRightHandSideCheckmark={false} selectedItemKeys={selectedCategories} onCheckboxPress={toggleCategory} onSelectRow={navigateToCategorySettings} diff --git a/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx b/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx index d1ace45bb3fb..ee7725874ea8 100644 --- a/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx +++ b/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx @@ -411,6 +411,7 @@ function PolicyDistanceRatesPage({ turnOnSelectionModeOnLongPress onTurnOnSelectionMode={(item) => item && toggleRate(item)} sections={[{data: filteredDistanceRatesList, isDisabled: false}]} + shouldUseDefaultRightHandSideCheckmark={false} selectedItemKeys={selectedDistanceRates} onCheckboxPress={toggleRate} onSelectRow={openRateDetails} diff --git a/src/pages/workspace/perDiem/WorkspacePerDiemPage.tsx b/src/pages/workspace/perDiem/WorkspacePerDiemPage.tsx index d6013f11c10e..dab5a1dd7a56 100644 --- a/src/pages/workspace/perDiem/WorkspacePerDiemPage.tsx +++ b/src/pages/workspace/perDiem/WorkspacePerDiemPage.tsx @@ -452,6 +452,7 @@ function WorkspacePerDiemPage({route}: WorkspacePerDiemPageProps) { turnOnSelectionModeOnLongPress onTurnOnSelectionMode={(item) => item && toggleSubRate(item)} sections={[{data: filteredSubRatesList, isDisabled: false}]} + shouldUseDefaultRightHandSideCheckmark={false} selectedItemKeys={selectedPerDiem.map((item) => item.subRateID)} onCheckboxPress={toggleSubRate} onSelectRow={openSubRateDetails} diff --git a/src/pages/workspace/reportFields/ReportFieldsListValuesPage.tsx b/src/pages/workspace/reportFields/ReportFieldsListValuesPage.tsx index f94e6ddf008e..479fdd7dda92 100644 --- a/src/pages/workspace/reportFields/ReportFieldsListValuesPage.tsx +++ b/src/pages/workspace/reportFields/ReportFieldsListValuesPage.tsx @@ -366,6 +366,7 @@ function ReportFieldsListValuesPage({ turnOnSelectionModeOnLongPress={!hasAccountingConnections} onTurnOnSelectionMode={(item) => item && toggleValue(item)} sections={sections} + shouldUseDefaultRightHandSideCheckmark={false} onCheckboxPress={toggleValue} onSelectRow={openListValuePage} onSelectAll={toggleAllValues} diff --git a/src/pages/workspace/tags/WorkspaceTagsPage.tsx b/src/pages/workspace/tags/WorkspaceTagsPage.tsx index de1097156fe2..4fa6332a1744 100644 --- a/src/pages/workspace/tags/WorkspaceTagsPage.tsx +++ b/src/pages/workspace/tags/WorkspaceTagsPage.tsx @@ -498,6 +498,7 @@ function WorkspaceTagsPage({route}: WorkspaceTagsPageProps) { turnOnSelectionModeOnLongPress={!isMultiLevelTags} onTurnOnSelectionMode={(item) => item && toggleTag(item)} sections={[{data: filteredTagList, isDisabled: false}]} + shouldUseDefaultRightHandSideCheckmark={false} selectedItemKeys={selectedTags} onCheckboxPress={toggleTag} onSelectRow={navigateToTagSettings} diff --git a/src/pages/workspace/tags/WorkspaceViewTagsPage.tsx b/src/pages/workspace/tags/WorkspaceViewTagsPage.tsx index d60d8283944b..cce7e32a5f3c 100644 --- a/src/pages/workspace/tags/WorkspaceViewTagsPage.tsx +++ b/src/pages/workspace/tags/WorkspaceViewTagsPage.tsx @@ -378,6 +378,7 @@ function WorkspaceViewTagsPage({route}: WorkspaceViewTagsProps) { turnOnSelectionModeOnLongPress onTurnOnSelectionMode={(item) => item && toggleTag(item)} sections={sections} + shouldUseDefaultRightHandSideCheckmark={false} onCheckboxPress={toggleTag} onSelectRow={navigateToTagSettings} onSelectAll={toggleAllTags} diff --git a/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx b/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx index e15819ead7d9..8fecf95d9560 100644 --- a/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx +++ b/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx @@ -410,6 +410,7 @@ function WorkspaceTaxesPage({ turnOnSelectionModeOnLongPress onTurnOnSelectionMode={(item) => item && toggleTax(item)} sections={[{data: filteredTaxesList, isDisabled: false}]} + shouldUseDefaultRightHandSideCheckmark={false} selectedItemKeys={selectedTaxesIDs} onCheckboxPress={toggleTax} onSelectRow={navigateToEditTaxRate}