From 9d5cec20e38ee4e53e71693e71bb171e4822d2c3 Mon Sep 17 00:00:00 2001 From: Shubham Agrawal Date: Wed, 13 Mar 2024 17:13:57 +0530 Subject: [PATCH 1/4] Move the position of checkmark in WS Invite Page --- src/components/SelectionList/BaseListItem.tsx | 19 ++++++++++++++++++- .../SelectionList/BaseSelectionList.tsx | 2 ++ .../SelectionList/RadioListItem.tsx | 2 ++ .../SelectionList/TableListItem.tsx | 2 ++ src/components/SelectionList/UserListItem.tsx | 2 ++ src/components/SelectionList/types.ts | 6 ++++++ src/pages/workspace/WorkspaceInvitePage.tsx | 1 + 7 files changed, 33 insertions(+), 1 deletion(-) 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" /> Date: Wed, 13 Mar 2024 17:47:10 +0530 Subject: [PATCH 2/4] Changed the prop name to checkmarkPosition --- src/components/SelectionList/BaseListItem.tsx | 6 +++--- src/components/SelectionList/BaseSelectionList.tsx | 4 ++-- src/components/SelectionList/RadioListItem.tsx | 4 ++-- src/components/SelectionList/TableListItem.tsx | 4 ++-- src/components/SelectionList/UserListItem.tsx | 4 ++-- src/components/SelectionList/types.ts | 4 ++-- src/pages/workspace/WorkspaceInvitePage.tsx | 2 +- 7 files changed, 14 insertions(+), 14 deletions(-) diff --git a/src/components/SelectionList/BaseListItem.tsx b/src/components/SelectionList/BaseListItem.tsx index dcebaf54e91e..0ea868d6d24e 100644 --- a/src/components/SelectionList/BaseListItem.tsx +++ b/src/components/SelectionList/BaseListItem.tsx @@ -24,7 +24,7 @@ function BaseListItem({ onCheckboxPress, onDismissError = () => {}, rightHandSideComponent, - checkmarkDirection = 'left', + checkmarkPosition = 'left', keyForList, errors, pendingAction, @@ -78,7 +78,7 @@ function BaseListItem({ style={pressableStyle} > - {canSelectMultiple && checkmarkDirection === 'left' && ( + {canSelectMultiple && checkmarkPosition === 'left' && ( ({ {typeof children === 'function' ? children(hovered) : children} - {canSelectMultiple && checkmarkDirection === 'right' && ( + {canSelectMultiple && checkmarkPosition === 'right' && ( ( shouldShowTooltips = true, shouldUseDynamicMaxToRenderPerBatch = false, rightHandSideComponent, - checkmarkDirection, + checkmarkPosition, isLoadingNewOptions = false, onLayout, customListHeader, @@ -330,7 +330,7 @@ function BaseSelectionList( onDismissError={() => onDismissError?.(item)} shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow} rightHandSideComponent={rightHandSideComponent} - checkmarkDirection={checkmarkDirection} + checkmarkPosition={checkmarkPosition} keyForList={item.keyForList ?? ''} isMultilineSupported={isRowMultilineSupported} /> diff --git a/src/components/SelectionList/RadioListItem.tsx b/src/components/SelectionList/RadioListItem.tsx index 7de47d02c6f2..1c5484772dbf 100644 --- a/src/components/SelectionList/RadioListItem.tsx +++ b/src/components/SelectionList/RadioListItem.tsx @@ -17,7 +17,7 @@ function RadioListItem({ onDismissError, shouldPreventDefaultFocusOnSelectRow, rightHandSideComponent, - checkmarkDirection, + checkmarkPosition, isMultilineSupported = false, }: RadioListItemProps) { const styles = useThemeStyles(); @@ -37,7 +37,7 @@ function RadioListItem({ onDismissError={onDismissError} shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow} rightHandSideComponent={rightHandSideComponent} - checkmarkDirection={checkmarkDirection} + checkmarkPosition={checkmarkPosition} keyForList={item.keyForList} > <> diff --git a/src/components/SelectionList/TableListItem.tsx b/src/components/SelectionList/TableListItem.tsx index a8b263116811..6a5630bc9df6 100644 --- a/src/components/SelectionList/TableListItem.tsx +++ b/src/components/SelectionList/TableListItem.tsx @@ -19,7 +19,7 @@ function TableListItem({ onDismissError, shouldPreventDefaultFocusOnSelectRow, rightHandSideComponent, - checkmarkDirection, + checkmarkPosition, }: TableListItemProps) { const styles = useThemeStyles(); const theme = useTheme(); @@ -43,7 +43,7 @@ function TableListItem({ onDismissError={onDismissError} shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow} rightHandSideComponent={rightHandSideComponent} - checkmarkDirection={checkmarkDirection} + checkmarkPosition={checkmarkPosition} errors={item.errors} pendingAction={item.pendingAction} keyForList={item.keyForList} diff --git a/src/components/SelectionList/UserListItem.tsx b/src/components/SelectionList/UserListItem.tsx index eaeb0110190c..b52289ffdb59 100644 --- a/src/components/SelectionList/UserListItem.tsx +++ b/src/components/SelectionList/UserListItem.tsx @@ -23,7 +23,7 @@ function UserListItem({ onDismissError, shouldPreventDefaultFocusOnSelectRow, rightHandSideComponent, - checkmarkDirection, + checkmarkPosition, }: UserListItemProps) { const styles = useThemeStyles(); const theme = useTheme(); @@ -48,7 +48,7 @@ function UserListItem({ onDismissError={onDismissError} shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow} rightHandSideComponent={rightHandSideComponent} - checkmarkDirection={checkmarkDirection} + checkmarkPosition={checkmarkPosition} errors={item.errors} pendingAction={item.pendingAction} FooterComponent={ diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index 4608af348c7c..5851f90276e4 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -35,7 +35,7 @@ type CommonListItemProps = { rightHandSideComponent?: ((item: TItem) => ReactElement) | ReactElement | null; /** Direction of checkmark to show */ - checkmarkDirection?: 'left' | 'right'; + checkmarkPosition?: 'left' | 'right'; /** Styles for the pressable component */ pressableStyle?: StyleProp; @@ -271,7 +271,7 @@ type BaseSelectionListProps = Partial & { rightHandSideComponent?: ((item: ListItem) => ReactElement) | ReactElement | null; /** Direction of checkmark to show */ - checkmarkDirection?: 'left' | 'right'; + checkmarkPosition?: '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 567afffd7d1b..afca6c29aee8 100644 --- a/src/pages/workspace/WorkspaceInvitePage.tsx +++ b/src/pages/workspace/WorkspaceInvitePage.tsx @@ -321,7 +321,7 @@ function WorkspaceInvitePage({ showScrollIndicator showLoadingPlaceholder={!didScreenTransitionEnd || !OptionsListUtils.isPersonalDetailsReady(personalDetailsProp)} shouldPreventDefaultFocusOnSelectRow={!DeviceCapabilities.canUseTouchScreen()} - checkmarkDirection="right" + checkmarkPosition="right" /> Date: Wed, 13 Mar 2024 20:42:04 +0530 Subject: [PATCH 3/4] Apply suggestions from code review Co-authored-by: Carlos Martins Co-authored-by: Ishpaul Singh <104348397+ishpaul777@users.noreply.github.com> --- src/components/SelectionList/BaseListItem.tsx | 6 +++--- src/components/SelectionList/types.ts | 4 ++-- src/pages/workspace/WorkspaceInvitePage.tsx | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/SelectionList/BaseListItem.tsx b/src/components/SelectionList/BaseListItem.tsx index 0ea868d6d24e..a7dafc37e467 100644 --- a/src/components/SelectionList/BaseListItem.tsx +++ b/src/components/SelectionList/BaseListItem.tsx @@ -24,7 +24,7 @@ function BaseListItem({ onCheckboxPress, onDismissError = () => {}, rightHandSideComponent, - checkmarkPosition = 'left', + checkmarkPosition = CONST.DIRECTION.LEFT, keyForList, errors, pendingAction, @@ -78,7 +78,7 @@ function BaseListItem({ style={pressableStyle} > - {canSelectMultiple && checkmarkPosition === 'left' && ( + {canSelectMultiple && checkmarkPosition === CONST.DIRECTION.LEFT && ( ({ {typeof children === 'function' ? children(hovered) : children} - {canSelectMultiple && checkmarkPosition === 'right' && ( + {canSelectMultiple && checkmarkPosition === CONST.DIRECTION.RIGHT && ( = { rightHandSideComponent?: ((item: TItem) => ReactElement) | ReactElement | null; /** Direction of checkmark to show */ - checkmarkPosition?: 'left' | 'right'; + checkmarkPosition?: ValueOf; /** Styles for the pressable component */ pressableStyle?: StyleProp; @@ -271,7 +271,7 @@ type BaseSelectionListProps = Partial & { rightHandSideComponent?: ((item: ListItem) => ReactElement) | ReactElement | null; /** Direction of checkmark to show */ - checkmarkPosition?: 'left' | 'right'; + checkmarkPosition?: ValueOf; /** 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 afca6c29aee8..00d7eaa33f6b 100644 --- a/src/pages/workspace/WorkspaceInvitePage.tsx +++ b/src/pages/workspace/WorkspaceInvitePage.tsx @@ -321,7 +321,7 @@ function WorkspaceInvitePage({ showScrollIndicator showLoadingPlaceholder={!didScreenTransitionEnd || !OptionsListUtils.isPersonalDetailsReady(personalDetailsProp)} shouldPreventDefaultFocusOnSelectRow={!DeviceCapabilities.canUseTouchScreen()} - checkmarkPosition="right" + checkmarkPosition={CONST.DIRECTION.RIGHT} /> Date: Wed, 13 Mar 2024 20:44:51 +0530 Subject: [PATCH 4/4] fix lint --- src/components/SelectionList/types.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index 11c10021bc78..f8d3ec47ce7b 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -1,5 +1,6 @@ import type {MutableRefObject, ReactElement, ReactNode} from 'react'; import type {GestureResponderEvent, InputModeOptions, LayoutChangeEvent, SectionListData, StyleProp, TextInput, TextStyle, ViewStyle} from 'react-native'; +import type {ValueOf} from 'type-fest'; import type {MaybePhraseKey} from '@libs/Localize'; import type CONST from '@src/CONST'; import type {Errors, Icon, PendingAction} from '@src/types/onyx/OnyxCommon';