diff --git a/src/components/SelectionList/BaseListItem.tsx b/src/components/SelectionList/BaseListItem.tsx index 6eedc322f393..dcebaf54e91e 100644 --- a/src/components/SelectionList/BaseListItem.tsx +++ b/src/components/SelectionList/BaseListItem.tsx @@ -4,6 +4,7 @@ import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; +import SelectCircle from '@components/SelectCircle'; import useHover from '@hooks/useHover'; import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; @@ -23,6 +24,7 @@ function BaseListItem({ onCheckboxPress, onDismissError = () => {}, rightHandSideComponent, + checkmarkDirection = 'left', keyForList, errors, pendingAction, @@ -76,7 +78,7 @@ function BaseListItem({ style={pressableStyle} > - {canSelectMultiple && ( + {canSelectMultiple && checkmarkDirection === 'left' && ( ({ {typeof children === 'function' ? children(hovered) : children} + {canSelectMultiple && checkmarkDirection === 'right' && ( + + + + )} + {!canSelectMultiple && item.isSelected && !rightHandSideComponent && ( ( shouldShowTooltips = true, shouldUseDynamicMaxToRenderPerBatch = false, rightHandSideComponent, + checkmarkDirection, isLoadingNewOptions = false, onLayout, customListHeader, @@ -329,6 +330,7 @@ function BaseSelectionList( onDismissError={() => onDismissError?.(item)} shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow} rightHandSideComponent={rightHandSideComponent} + checkmarkDirection={checkmarkDirection} keyForList={item.keyForList ?? ''} isMultilineSupported={isRowMultilineSupported} /> diff --git a/src/components/SelectionList/RadioListItem.tsx b/src/components/SelectionList/RadioListItem.tsx index f61e0d1c6a3d..7de47d02c6f2 100644 --- a/src/components/SelectionList/RadioListItem.tsx +++ b/src/components/SelectionList/RadioListItem.tsx @@ -17,6 +17,7 @@ function RadioListItem({ onDismissError, shouldPreventDefaultFocusOnSelectRow, rightHandSideComponent, + checkmarkDirection, isMultilineSupported = false, }: RadioListItemProps) { const styles = useThemeStyles(); @@ -36,6 +37,7 @@ function RadioListItem({ onDismissError={onDismissError} shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow} rightHandSideComponent={rightHandSideComponent} + checkmarkDirection={checkmarkDirection} keyForList={item.keyForList} > <> diff --git a/src/components/SelectionList/TableListItem.tsx b/src/components/SelectionList/TableListItem.tsx index bc798c64dbc9..a8b263116811 100644 --- a/src/components/SelectionList/TableListItem.tsx +++ b/src/components/SelectionList/TableListItem.tsx @@ -19,6 +19,7 @@ function TableListItem({ onDismissError, shouldPreventDefaultFocusOnSelectRow, rightHandSideComponent, + checkmarkDirection, }: TableListItemProps) { const styles = useThemeStyles(); const theme = useTheme(); @@ -42,6 +43,7 @@ function TableListItem({ onDismissError={onDismissError} shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow} rightHandSideComponent={rightHandSideComponent} + checkmarkDirection={checkmarkDirection} errors={item.errors} pendingAction={item.pendingAction} keyForList={item.keyForList} diff --git a/src/components/SelectionList/UserListItem.tsx b/src/components/SelectionList/UserListItem.tsx index 2a3a8dd04a79..eaeb0110190c 100644 --- a/src/components/SelectionList/UserListItem.tsx +++ b/src/components/SelectionList/UserListItem.tsx @@ -23,6 +23,7 @@ function UserListItem({ onDismissError, shouldPreventDefaultFocusOnSelectRow, rightHandSideComponent, + checkmarkDirection, }: UserListItemProps) { const styles = useThemeStyles(); const theme = useTheme(); @@ -47,6 +48,7 @@ function UserListItem({ onDismissError={onDismissError} shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow} rightHandSideComponent={rightHandSideComponent} + checkmarkDirection={checkmarkDirection} errors={item.errors} pendingAction={item.pendingAction} FooterComponent={ diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index 152a44996fea..4608af348c7c 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -34,6 +34,9 @@ type CommonListItemProps = { /** Component to display on the right side */ rightHandSideComponent?: ((item: TItem) => ReactElement) | ReactElement | null; + /** Direction of checkmark to show */ + checkmarkDirection?: 'left' | 'right'; + /** Styles for the pressable component */ pressableStyle?: StyleProp; @@ -267,6 +270,9 @@ type BaseSelectionListProps = Partial & { /** Component to display on the right side of each child */ rightHandSideComponent?: ((item: ListItem) => ReactElement) | ReactElement | null; + /** Direction of checkmark to show */ + checkmarkDirection?: 'left' | 'right'; + /** Whether to show the loading indicator for new options */ isLoadingNewOptions?: boolean; diff --git a/src/pages/workspace/WorkspaceInvitePage.tsx b/src/pages/workspace/WorkspaceInvitePage.tsx index 67bf6f8064da..567afffd7d1b 100644 --- a/src/pages/workspace/WorkspaceInvitePage.tsx +++ b/src/pages/workspace/WorkspaceInvitePage.tsx @@ -321,6 +321,7 @@ function WorkspaceInvitePage({ showScrollIndicator showLoadingPlaceholder={!didScreenTransitionEnd || !OptionsListUtils.isPersonalDetailsReady(personalDetailsProp)} shouldPreventDefaultFocusOnSelectRow={!DeviceCapabilities.canUseTouchScreen()} + checkmarkDirection="right" />