From 9d5cec20e38ee4e53e71693e71bb171e4822d2c3 Mon Sep 17 00:00:00 2001
From: Shubham Agrawal <shubham.agra1206@gmail.com>
Date: Wed, 13 Mar 2024 17:13:57 +0530
Subject: [PATCH] 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<TItem extends ListItem>({
     onCheckboxPress,
     onDismissError = () => {},
     rightHandSideComponent,
+    checkmarkDirection = 'left',
     keyForList,
     errors,
     pendingAction,
@@ -76,7 +78,7 @@ function BaseListItem<TItem extends ListItem>({
                 style={pressableStyle}
             >
                 <View style={wrapperStyle}>
-                    {canSelectMultiple && (
+                    {canSelectMultiple && checkmarkDirection === 'left' && (
                         <PressableWithFeedback
                             accessibilityLabel={item.text ?? ''}
                             role={CONST.ROLE.BUTTON}
@@ -99,6 +101,21 @@ function BaseListItem<TItem extends ListItem>({
 
                     {typeof children === 'function' ? children(hovered) : children}
 
+                    {canSelectMultiple && checkmarkDirection === 'right' && (
+                        <PressableWithFeedback
+                            onPress={handleCheckboxPress}
+                            disabled={isDisabled}
+                            role={CONST.ROLE.BUTTON}
+                            accessibilityLabel={item.text ?? ''}
+                            style={[styles.ml2, styles.optionSelectCircle]}
+                        >
+                            <SelectCircle
+                                isChecked={item.isSelected ?? false}
+                                selectCircleStyles={styles.ml0}
+                            />
+                        </PressableWithFeedback>
+                    )}
+
                     {!canSelectMultiple && item.isSelected && !rightHandSideComponent && (
                         <View
                             style={[styles.flexRow, styles.alignItemsCenter, styles.ml3]}
diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx
index db6204c8c1ef..bec9bac12831 100644
--- a/src/components/SelectionList/BaseSelectionList.tsx
+++ b/src/components/SelectionList/BaseSelectionList.tsx
@@ -61,6 +61,7 @@ function BaseSelectionList<TItem extends ListItem>(
         shouldShowTooltips = true,
         shouldUseDynamicMaxToRenderPerBatch = false,
         rightHandSideComponent,
+        checkmarkDirection,
         isLoadingNewOptions = false,
         onLayout,
         customListHeader,
@@ -329,6 +330,7 @@ function BaseSelectionList<TItem extends ListItem>(
                 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<TItem> = {
     /** Component to display on the right side */
     rightHandSideComponent?: ((item: TItem) => ReactElement<TItem>) | ReactElement | null;
 
+    /** Direction of checkmark to show */
+    checkmarkDirection?: 'left' | 'right';
+
     /** Styles for the pressable component */
     pressableStyle?: StyleProp<ViewStyle>;
 
@@ -267,6 +270,9 @@ type BaseSelectionListProps<TItem extends ListItem> = Partial<ChildrenProps> & {
     /** Component to display on the right side of each child */
     rightHandSideComponent?: ((item: ListItem) => ReactElement<ListItem>) | 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"
                 />
                 <View style={[styles.flexShrink0]}>
                     <FormAlertWithSubmitButton