diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 91be805fd50..94c0a6b8175 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -74,6 +74,7 @@ function BaseSelectionList({ shouldUseUserSkeletonView, shouldShowTooltips = true, shouldIgnoreFocus = false, + shouldShowRightCaret = false, shouldStopPropagation = false, shouldHeaderBeInsideList = false, shouldScrollToFocusedIndex = true, @@ -375,6 +376,7 @@ function BaseSelectionList({ shouldSyncFocus={!isTextInputFocusedRef.current && hasKeyBeenPressed.current} shouldDisableHoverStyle={shouldDisableHoverStyle} shouldStopMouseLeavePropagation={false} + shouldShowRightCaret={shouldShowRightCaret} /> ); diff --git a/src/components/SelectionList/ListItem/BaseListItem.tsx b/src/components/SelectionList/ListItem/BaseListItem.tsx index b711705cc96..6cc84c3304b 100644 --- a/src/components/SelectionList/ListItem/BaseListItem.tsx +++ b/src/components/SelectionList/ListItem/BaseListItem.tsx @@ -7,6 +7,7 @@ import * as Expensicons from '@components/Icon/Expensicons'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; import useHover from '@hooks/useHover'; +import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset'; import {useMouseContext} from '@hooks/useMouseContext'; import useStyleUtils from '@hooks/useStyleUtils'; import useSyncFocus from '@hooks/useSyncFocus'; @@ -45,12 +46,14 @@ function BaseListItem({ shouldHighlightSelectedItem = true, shouldDisableHoverStyle, shouldStopMouseLeavePropagation = true, + shouldShowRightCaret = false, }: BaseListItemProps) { const theme = useTheme(); const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); const {hovered, bind} = useHover(); const {isMouseDownOnInput, setMouseUp} = useMouseContext(); + const icons = useMemoizedLazyExpensifyIcons(['ArrowRight']); const pressableRef = useRef(null); @@ -167,6 +170,17 @@ function BaseListItem({ )} {rightHandSideComponentRender()} + {shouldShowRightCaret && ( + + + + )} {FooterComponent} diff --git a/src/components/SelectionList/ListItem/ListItemRenderer.tsx b/src/components/SelectionList/ListItem/ListItemRenderer.tsx index 0a28837594d..494e2edeacb 100644 --- a/src/components/SelectionList/ListItem/ListItemRenderer.tsx +++ b/src/components/SelectionList/ListItem/ListItemRenderer.tsx @@ -49,6 +49,7 @@ function ListItemRenderer({ shouldHighlightSelectedItem, shouldDisableHoverStyle, shouldStopMouseLeavePropagation, + shouldShowRightCaret, }: ListItemRendererProps) { const handleOnCheckboxPress = () => { if (isTransactionGroupListItemType(item)) { @@ -102,6 +103,7 @@ function ListItemRenderer({ shouldHighlightSelectedItem={shouldHighlightSelectedItem} shouldDisableHoverStyle={shouldDisableHoverStyle} shouldStopMouseLeavePropagation={shouldStopMouseLeavePropagation} + shouldShowRightCaret={shouldShowRightCaret} /> {item.footerContent && item.footerContent}