From d71b283ad16dbfccd8d1faa8ff2ac4441917c05e Mon Sep 17 00:00:00 2001 From: Shubham Agrawal Date: Sun, 17 Mar 2024 18:57:51 +0530 Subject: [PATCH 1/7] Refactored selection list items --- .../CalendarPicker/YearPickerModal.tsx | 1 - src/components/SelectionList/BaseListItem.tsx | 51 ------------------ .../SelectionList/RadioListItem.tsx | 40 ++++++++++++-- .../SelectionList/TableListItem.tsx | 38 +++++++++++-- src/components/SelectionList/UserListItem.tsx | 54 +++++++++++++++++-- src/components/SelectionList/index.ios.tsx | 20 ------- .../{index.android.tsx => index.native.tsx} | 1 - src/components/SelectionList/types.ts | 14 ++--- src/pages/SearchPage/index.tsx | 1 - 9 files changed, 121 insertions(+), 99 deletions(-) delete mode 100644 src/components/SelectionList/index.ios.tsx rename src/components/SelectionList/{index.android.tsx => index.native.tsx} (96%) diff --git a/src/components/DatePicker/CalendarPicker/YearPickerModal.tsx b/src/components/DatePicker/CalendarPicker/YearPickerModal.tsx index 8f5487f9c68b..6170b81073a2 100644 --- a/src/components/DatePicker/CalendarPicker/YearPickerModal.tsx +++ b/src/components/DatePicker/CalendarPicker/YearPickerModal.tsx @@ -65,7 +65,6 @@ function YearPickerModal({isVisible, years, currentYear = new Date().getFullYear onBackButtonPress={onClose} /> ({ item, pressableStyle, wrapperStyle, - selectMultipleStyle, isDisabled = false, shouldPreventDefaultFocusOnSelectRow = false, canSelectMultiple = false, onSelectRow, - onCheckboxPress, onDismissError = () => {}, rightHandSideComponent, - checkmarkPosition = CONST.DIRECTION.LEFT, keyForList, errors, pendingAction, @@ -33,7 +28,6 @@ function BaseListItem({ }: BaseListItemProps) { const theme = useTheme(); const styles = useThemeStyles(); - const StyleUtils = useStyleUtils(); const {hovered, bind} = useHover(); const rightHandSideComponentRender = () => { @@ -48,14 +42,6 @@ function BaseListItem({ return rightHandSideComponent; }; - const handleCheckboxPress = () => { - if (onCheckboxPress) { - onCheckboxPress(item); - } else { - onSelectRow(item); - } - }; - return ( onDismissError(item)} @@ -78,45 +64,8 @@ function BaseListItem({ style={pressableStyle} > - {canSelectMultiple && checkmarkPosition === CONST.DIRECTION.LEFT && ( - - - {item.isSelected && ( - - )} - - - )} - {typeof children === 'function' ? children(hovered) : children} - {canSelectMultiple && checkmarkPosition === CONST.DIRECTION.RIGHT && ( - - - - )} - {!canSelectMultiple && item.isSelected && !rightHandSideComponent && ( { + if (onCheckboxPress) { + onCheckboxPress(item); + } else { + onSelectRow(item); + } + }, [item, onCheckboxPress, onSelectRow]); + return ( <> + {canSelectMultiple && ( + + + {item.isSelected && ( + + )} + + + )} { + if (onCheckboxPress) { + onCheckboxPress(item); + } else { + onSelectRow(item); + } + }, [item, onCheckboxPress, onSelectRow]); + return ( {(hovered) => ( <> + {canSelectMultiple && ( + + + {item.isSelected && ( + + )} + + + )} {!!item.icons && ( { + if (onCheckboxPress) { + onCheckboxPress(item); + } else { + onSelectRow(item); + } + }, [item, onCheckboxPress, onSelectRow]); + return ( {(hovered?: boolean) => ( <> + {canSelectMultiple && checkmarkPosition === CONST.DIRECTION.LEFT && ( + + + {item.isSelected && ( + + )} + + + )} {!!item.icons && (item.shouldShowSubscript ? ( {!!item.rightElement && item.rightElement} + {canSelectMultiple && checkmarkPosition === CONST.DIRECTION.RIGHT && ( + + + + )} )} diff --git a/src/components/SelectionList/index.ios.tsx b/src/components/SelectionList/index.ios.tsx deleted file mode 100644 index afa1ce499ecc..000000000000 --- a/src/components/SelectionList/index.ios.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import React, {forwardRef} from 'react'; -import type {ForwardedRef} from 'react'; -import {Keyboard} from 'react-native'; -import BaseSelectionList from './BaseSelectionList'; -import type {BaseSelectionListProps, ListItem, SelectionListHandle} from './types'; - -function SelectionList(props: BaseSelectionListProps, ref: ForwardedRef) { - return ( - - // eslint-disable-next-line react/jsx-props-no-spreading - {...props} - ref={ref} - onScrollBeginDrag={() => Keyboard.dismiss()} - /> - ); -} - -SelectionList.displayName = 'SelectionList'; - -export default forwardRef(SelectionList); diff --git a/src/components/SelectionList/index.android.tsx b/src/components/SelectionList/index.native.tsx similarity index 96% rename from src/components/SelectionList/index.android.tsx rename to src/components/SelectionList/index.native.tsx index f8e54b219f5b..baccdf7c6024 100644 --- a/src/components/SelectionList/index.android.tsx +++ b/src/components/SelectionList/index.native.tsx @@ -10,7 +10,6 @@ function SelectionList(props: BaseSelectionListProps Keyboard.dismiss()} /> ); diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index 9e9ba7e5fc27..9251eb1399f6 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -151,6 +151,8 @@ type RadioListItemProps = ListItemProps; type TableListItemProps = ListItemProps; +type ValidListItem = typeof RadioListItem | typeof UserListItem | typeof TableListItem; + type Section = { /** Title of the section */ title?: string; @@ -173,7 +175,7 @@ type BaseSelectionListProps = Partial & { sections: Array>> | typeof CONST.EMPTY_ARRAY; /** Default renderer for every item in the list */ - ListItem: typeof RadioListItem | typeof UserListItem | typeof TableListItem; + ListItem: ValidListItem; /** Whether this is a multi-select list */ canSelectMultiple?: boolean; @@ -259,18 +261,12 @@ type BaseSelectionListProps = Partial & { /** Whether keyboard shortcuts should be disabled */ disableKeyboardShortcuts?: boolean; - /** Whether to disable initial styling for focused option */ - disableInitialFocusOptionStyle?: boolean; - /** Styles to apply to SelectionList container */ containerStyle?: ViewStyle; /** Whether keyboard is visible on the screen */ isKeyboardShown?: boolean; - /** Whether focus event should be delayed */ - shouldDelayFocus?: boolean; - /** Component to display on the right side of each child */ rightHandSideComponent?: ((item: ListItem) => ReactElement) | ReactElement | null; @@ -289,9 +285,6 @@ type BaseSelectionListProps = Partial & { /** Styles for the list header wrapper */ listHeaderWrapperStyle?: StyleProp; - /** Whether to auto focus the Search Input */ - autoFocus?: boolean; - /** Whether to wrap long text up to 2 lines */ isRowMultilineSupported?: boolean; @@ -335,4 +328,5 @@ export type { ButtonOrCheckBoxRoles, SectionListDataType, SelectionListHandle, + ValidListItem, }; diff --git a/src/pages/SearchPage/index.tsx b/src/pages/SearchPage/index.tsx index 07096ce6c2d5..7a42db3ff2cd 100644 --- a/src/pages/SearchPage/index.tsx +++ b/src/pages/SearchPage/index.tsx @@ -169,7 +169,6 @@ function SearchPage({betas, reports, isSearchingForReports, navigation}: SearchP onChangeText={setSearchValue} headerMessage={headerMessage} onLayout={setPerformanceTimersEnd} - autoFocus onSelectRow={selectReport} showLoadingPlaceholder={!didScreenTransitionEnd || !isOptionsDataReady} footerContent={SearchPageFooterInstance} From 95c5553f67c0d2afd46c0596559cc5dea4b26382 Mon Sep 17 00:00:00 2001 From: Shubham Agrawal Date: Sun, 17 Mar 2024 19:18:51 +0530 Subject: [PATCH 2/7] Fixed icons import --- src/components/SelectionList/RadioListItem.tsx | 1 + src/components/SelectionList/TableListItem.tsx | 1 + src/components/SelectionList/UserListItem.tsx | 1 + 3 files changed, 3 insertions(+) diff --git a/src/components/SelectionList/RadioListItem.tsx b/src/components/SelectionList/RadioListItem.tsx index 489076e7b1e6..5931f76f16e4 100644 --- a/src/components/SelectionList/RadioListItem.tsx +++ b/src/components/SelectionList/RadioListItem.tsx @@ -1,6 +1,7 @@ import React, {useCallback} from 'react'; import {View} from 'react-native'; import Icon from '@components/Icon'; +import * as Expensicons from '@components/Icon/Expensicons'; import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; import TextWithTooltip from '@components/TextWithTooltip'; import useStyleUtils from '@hooks/useStyleUtils'; diff --git a/src/components/SelectionList/TableListItem.tsx b/src/components/SelectionList/TableListItem.tsx index a6490dbcd136..d8ded2ada697 100644 --- a/src/components/SelectionList/TableListItem.tsx +++ b/src/components/SelectionList/TableListItem.tsx @@ -1,6 +1,7 @@ import React, {useCallback} from 'react'; import {View} from 'react-native'; import Icon from '@components/Icon'; +import * as Expensicons from '@components/Icon/Expensicons'; import MultipleAvatars from '@components/MultipleAvatars'; import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; import TextWithTooltip from '@components/TextWithTooltip'; diff --git a/src/components/SelectionList/UserListItem.tsx b/src/components/SelectionList/UserListItem.tsx index 8de089cb9313..081d49d27d68 100644 --- a/src/components/SelectionList/UserListItem.tsx +++ b/src/components/SelectionList/UserListItem.tsx @@ -2,6 +2,7 @@ import Str from 'expensify-common/lib/str'; import React, {useCallback} from 'react'; import {View} from 'react-native'; import Icon from '@components/Icon'; +import * as Expensicons from '@components/Icon/Expensicons'; import MultipleAvatars from '@components/MultipleAvatars'; import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; import SelectCircle from '@components/SelectCircle'; From cfc67146623d405ca9f253539b335047b15fd954 Mon Sep 17 00:00:00 2001 From: Shubham Agrawal Date: Mon, 18 Mar 2024 17:19:51 +0530 Subject: [PATCH 3/7] Removed unecessary checkmark from RadioListItem --- .../SelectionList/RadioListItem.tsx | 42 +------------------ 1 file changed, 1 insertion(+), 41 deletions(-) diff --git a/src/components/SelectionList/RadioListItem.tsx b/src/components/SelectionList/RadioListItem.tsx index 5931f76f16e4..0b1f74b9d68e 100644 --- a/src/components/SelectionList/RadioListItem.tsx +++ b/src/components/SelectionList/RadioListItem.tsx @@ -1,13 +1,7 @@ -import React, {useCallback} from 'react'; +import React from 'react'; import {View} from 'react-native'; -import Icon from '@components/Icon'; -import * as Expensicons from '@components/Icon/Expensicons'; -import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; import TextWithTooltip from '@components/TextWithTooltip'; -import useStyleUtils from '@hooks/useStyleUtils'; -import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; -import CONST from '@src/CONST'; import BaseListItem from './BaseListItem'; import type {RadioListItemProps} from './types'; @@ -16,25 +10,13 @@ function RadioListItem({ isFocused, showTooltip, isDisabled, - canSelectMultiple, onSelectRow, - onCheckboxPress, onDismissError, shouldPreventDefaultFocusOnSelectRow, rightHandSideComponent, isMultilineSupported = false, }: RadioListItemProps) { const styles = useThemeStyles(); - const theme = useTheme(); - const StyleUtils = useStyleUtils(); - - const handleCheckboxPress = useCallback(() => { - if (onCheckboxPress) { - onCheckboxPress(item); - } else { - onSelectRow(item); - } - }, [item, onCheckboxPress, onSelectRow]); return ( <> - {canSelectMultiple && ( - - - {item.isSelected && ( - - )} - - - )} Date: Mon, 18 Mar 2024 17:26:05 +0530 Subject: [PATCH 4/7] Removed unused file --- .../SelectionList/selectionListPropTypes.js | 203 ------------------ 1 file changed, 203 deletions(-) delete mode 100644 src/components/SelectionList/selectionListPropTypes.js diff --git a/src/components/SelectionList/selectionListPropTypes.js b/src/components/SelectionList/selectionListPropTypes.js deleted file mode 100644 index f5178112a4c3..000000000000 --- a/src/components/SelectionList/selectionListPropTypes.js +++ /dev/null @@ -1,203 +0,0 @@ -import PropTypes from 'prop-types'; -import _ from 'underscore'; -import sourcePropTypes from '@components/Image/sourcePropTypes'; -import CONST from '@src/CONST'; - -const commonListItemPropTypes = { - /** Whether this item is focused (for arrow key controls) */ - isFocused: PropTypes.bool, - - /** Style to be applied to Text */ - textStyles: PropTypes.arrayOf(PropTypes.object), - - /** Style to be applied on the alternate text */ - alternateTextStyles: PropTypes.arrayOf(PropTypes.object), - - /** Whether this item is disabled */ - isDisabled: PropTypes.bool, - - /** Whether this item should show Tooltip */ - showTooltip: PropTypes.bool.isRequired, - - /** Whether to use the Checkbox (multiple selection) instead of the Checkmark (single selection) */ - canSelectMultiple: PropTypes.bool, - - /** Callback to fire when the item is selected */ - onSelectRow: PropTypes.func.isRequired, - - /** Callback to fire when an error is dismissed */ - onDismissError: PropTypes.func, -}; - -const userListItemPropTypes = { - ...commonListItemPropTypes, - - /** The section list item */ - item: PropTypes.shape({ - /** Text to display */ - text: PropTypes.string.isRequired, - - /** Alternate text to display */ - alternateText: PropTypes.string, - - /** Key used internally by React */ - keyForList: PropTypes.string.isRequired, - - /** Whether this option is selected */ - isSelected: PropTypes.bool, - - /** Whether this option is disabled for selection */ - isDisabled: PropTypes.bool, - - /** User accountID */ - accountID: PropTypes.number, - - /** User login */ - login: PropTypes.string, - - /** Element to show on the right side of the item */ - rightElement: PropTypes.element, - - /** Icons for the user (can be multiple if it's a Workspace) */ - icons: PropTypes.arrayOf( - PropTypes.shape({ - source: PropTypes.oneOfType([PropTypes.string, sourcePropTypes]).isRequired, - name: PropTypes.string, - type: PropTypes.string, - }), - ), - - /** Errors that this user may contain */ - errors: PropTypes.objectOf(PropTypes.string), - - /** The type of action that's pending */ - pendingAction: PropTypes.oneOf(_.values(CONST.RED_BRICK_ROAD_PENDING_ACTION)), - }).isRequired, -}; - -const radioListItemPropTypes = { - ...commonListItemPropTypes, - - /** The section list item */ - item: PropTypes.shape({ - /** Text to display */ - text: PropTypes.string.isRequired, - - /** Alternate text to display */ - alternateText: PropTypes.string, - - /** Key used internally by React */ - keyForList: PropTypes.string.isRequired, - - /** Whether this option is selected */ - isSelected: PropTypes.bool, - }).isRequired, -}; - -const baseListItemPropTypes = { - ...commonListItemPropTypes, - item: PropTypes.oneOfType([PropTypes.shape(userListItemPropTypes.item), PropTypes.shape(radioListItemPropTypes.item)]), - shouldPreventDefaultFocusOnSelectRow: PropTypes.bool, -}; - -const propTypes = { - /** Sections for the section list */ - sections: PropTypes.arrayOf( - PropTypes.shape({ - /** Title of the section */ - title: PropTypes.string, - - /** The initial index of this section given the total number of options in each section's data array */ - indexOffset: PropTypes.number, - - /** Array of options */ - data: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape(userListItemPropTypes.item), PropTypes.shape(radioListItemPropTypes.item)])), - - /** Whether this section items disabled for selection */ - isDisabled: PropTypes.bool, - }), - ).isRequired, - - /** Whether this is a multi-select list */ - canSelectMultiple: PropTypes.bool, - - /** Callback to fire when a row is pressed */ - onSelectRow: PropTypes.func.isRequired, - - /** Callback to fire when "Select All" checkbox is pressed. Only use along with `canSelectMultiple` */ - onSelectAll: PropTypes.func, - - /** Callback to fire when an error is dismissed */ - onDismissError: PropTypes.func, - - /** Label for the text input */ - textInputLabel: PropTypes.string, - - /** Placeholder for the text input */ - textInputPlaceholder: PropTypes.string, - - /** Value for the text input */ - textInputValue: PropTypes.string, - - /** Max length for the text input */ - textInputMaxLength: PropTypes.number, - - /** Callback to fire when the text input changes */ - onChangeText: PropTypes.func, - - /** Input mode for the text input */ - inputMode: PropTypes.string, - - /** Item `keyForList` to focus initially */ - initiallyFocusedOptionKey: PropTypes.string, - - /** Callback to fire when the list is scrolled */ - onScroll: PropTypes.func, - - /** Callback to fire when the list is scrolled and the user begins dragging */ - onScrollBeginDrag: PropTypes.func, - - /** Message to display at the top of the list */ - headerMessage: PropTypes.string, - - /** Text to display on the confirm button */ - confirmButtonText: PropTypes.string, - - /** Callback to fire when the confirm button is pressed */ - onConfirm: PropTypes.func, - - /** Whether to show the vertical scroll indicator */ - showScrollIndicator: PropTypes.bool, - - /** Whether to show the loading placeholder */ - showLoadingPlaceholder: PropTypes.bool, - - /** Whether to show the default confirm button */ - showConfirmButton: PropTypes.bool, - - /** Whether to stop automatic form submission on pressing enter key or not */ - shouldStopPropagation: PropTypes.bool, - - /** Whether to prevent default focusing of options and focus the textinput when selecting an option */ - shouldPreventDefaultFocusOnSelectRow: PropTypes.bool, - - /** A ref to forward to the TextInput */ - inputRef: PropTypes.oneOfType([PropTypes.object]), - - /** Custom content to display in the header */ - headerContent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]), - - /** Custom content to display in the footer */ - footerContent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]), - - /** Whether to show the toolip text */ - shouldShowTooltips: PropTypes.bool, - - /** Whether to use dynamic maxToRenderPerBatch depending on the visible number of elements */ - shouldUseDynamicMaxToRenderPerBatch: PropTypes.bool, - - /** Right hand side component to display in the list item. Function has list item passed as the param */ - rightHandSideComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]), -}; - -export {propTypes, baseListItemPropTypes, radioListItemPropTypes, userListItemPropTypes}; From 24e7de9f508acfba7516482d7899149d14e66bd3 Mon Sep 17 00:00:00 2001 From: Shubham Agrawal Date: Thu, 21 Mar 2024 10:30:18 +0530 Subject: [PATCH 5/7] Fixes after merging --- src/components/SelectionList/TableListItem.tsx | 2 +- src/components/SelectionList/UserListItem.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/SelectionList/TableListItem.tsx b/src/components/SelectionList/TableListItem.tsx index d8ded2ada697..fa741bccbbae 100644 --- a/src/components/SelectionList/TableListItem.tsx +++ b/src/components/SelectionList/TableListItem.tsx @@ -65,7 +65,7 @@ function TableListItem({ // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing disabled={isDisabled || item.isDisabledCheckbox} onPress={handleCheckboxPress} - style={[styles.cursorUnset, StyleUtils.getCheckboxPressableStyle(), item.isDisabledCheckbox && styles.cursorDisabled]} + style={[styles.cursorUnset, StyleUtils.getCheckboxPressableStyle(), item.isDisabledCheckbox && styles.cursorDisabled, styles.mr3]} > {item.isSelected && ( diff --git a/src/components/SelectionList/UserListItem.tsx b/src/components/SelectionList/UserListItem.tsx index 081d49d27d68..226c93bf2cf8 100644 --- a/src/components/SelectionList/UserListItem.tsx +++ b/src/components/SelectionList/UserListItem.tsx @@ -79,7 +79,7 @@ function UserListItem({ // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing disabled={isDisabled || item.isDisabledCheckbox} onPress={handleCheckboxPress} - style={[styles.cursorUnset, StyleUtils.getCheckboxPressableStyle(), item.isDisabledCheckbox && styles.cursorDisabled]} + style={[styles.cursorUnset, StyleUtils.getCheckboxPressableStyle(), item.isDisabledCheckbox && styles.cursorDisabled, styles.mr3]} > {item.isSelected && ( From 1eb3065587c0544f712fed4c9fda828da1b99a41 Mon Sep 17 00:00:00 2001 From: Shubham Agrawal Date: Sat, 23 Mar 2024 11:38:45 +0530 Subject: [PATCH 6/7] Refactored the components further --- .../SelectionList/BaseSelectionList.tsx | 2 - .../SelectionList/InviteMemberListItem.tsx | 134 ++++++++++++++++++ src/components/SelectionList/UserListItem.tsx | 18 +-- src/components/SelectionList/types.ts | 13 +- src/pages/workspace/WorkspaceInvitePage.tsx | 5 +- 5 files changed, 142 insertions(+), 30 deletions(-) create mode 100644 src/components/SelectionList/InviteMemberListItem.tsx diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 015fd284c0b4..8c5a506efa3c 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -62,7 +62,6 @@ function BaseSelectionList( shouldShowTooltips = true, shouldUseDynamicMaxToRenderPerBatch = false, rightHandSideComponent, - checkmarkPosition, isLoadingNewOptions = false, onLayout, customListHeader, @@ -332,7 +331,6 @@ function BaseSelectionList( onDismissError={() => onDismissError?.(item)} shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow} rightHandSideComponent={rightHandSideComponent} - checkmarkPosition={checkmarkPosition} keyForList={item.keyForList ?? ''} isMultilineSupported={isRowMultilineSupported} /> diff --git a/src/components/SelectionList/InviteMemberListItem.tsx b/src/components/SelectionList/InviteMemberListItem.tsx new file mode 100644 index 000000000000..aabde59ac374 --- /dev/null +++ b/src/components/SelectionList/InviteMemberListItem.tsx @@ -0,0 +1,134 @@ +import Str from 'expensify-common/lib/str'; +import React, {useCallback} from 'react'; +import {View} from 'react-native'; +import MultipleAvatars from '@components/MultipleAvatars'; +import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; +import SelectCircle from '@components/SelectCircle'; +import SubscriptAvatar from '@components/SubscriptAvatar'; +import Text from '@components/Text'; +import TextWithTooltip from '@components/TextWithTooltip'; +import useLocalize from '@hooks/useLocalize'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; +import CONST from '@src/CONST'; +import BaseListItem from './BaseListItem'; +import type {InviteMemberListItemProps} from './types'; + +function InviteMemberListItem({ + item, + isFocused, + showTooltip, + isDisabled, + canSelectMultiple, + onSelectRow, + onCheckboxPress, + onDismissError, + shouldPreventDefaultFocusOnSelectRow, + rightHandSideComponent, +}: InviteMemberListItemProps) { + const styles = useThemeStyles(); + const theme = useTheme(); + const StyleUtils = useStyleUtils(); + const {translate} = useLocalize(); + + const focusedBackgroundColor = styles.sidebarLinkActive.backgroundColor; + const subscriptAvatarBorderColor = isFocused ? focusedBackgroundColor : theme.sidebar; + const hoveredBackgroundColor = !!styles.sidebarLinkHover && 'backgroundColor' in styles.sidebarLinkHover ? styles.sidebarLinkHover.backgroundColor : theme.sidebar; + + const handleCheckboxPress = useCallback(() => { + if (onCheckboxPress) { + onCheckboxPress(item); + } else { + onSelectRow(item); + } + }, [item, onCheckboxPress, onSelectRow]); + + return ( + + {translate('workspace.people.invitedBySecondaryLogin', {secondaryLogin: item.invitedSecondaryLogin})} + + ) : undefined + } + keyForList={item.keyForList} + > + {(hovered?: boolean) => ( + <> + {!!item.icons && + (item.shouldShowSubscript ? ( + + ) : ( + + ))} + + + {!!item.alternateText && ( + + )} + + {!!item.rightElement && item.rightElement} + {canSelectMultiple && ( + + + + )} + + )} + + ); +} + +InviteMemberListItem.displayName = 'InviteMemberListItem'; + +export default InviteMemberListItem; diff --git a/src/components/SelectionList/UserListItem.tsx b/src/components/SelectionList/UserListItem.tsx index 226c93bf2cf8..7ab777e7e0f1 100644 --- a/src/components/SelectionList/UserListItem.tsx +++ b/src/components/SelectionList/UserListItem.tsx @@ -5,7 +5,6 @@ import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; import MultipleAvatars from '@components/MultipleAvatars'; import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; -import SelectCircle from '@components/SelectCircle'; import SubscriptAvatar from '@components/SubscriptAvatar'; import Text from '@components/Text'; import TextWithTooltip from '@components/TextWithTooltip'; @@ -28,7 +27,6 @@ function UserListItem({ onDismissError, shouldPreventDefaultFocusOnSelectRow, rightHandSideComponent, - checkmarkPosition = CONST.DIRECTION.LEFT, }: UserListItemProps) { const styles = useThemeStyles(); const theme = useTheme(); @@ -72,7 +70,7 @@ function UserListItem({ > {(hovered?: boolean) => ( <> - {canSelectMultiple && checkmarkPosition === CONST.DIRECTION.LEFT && ( + {canSelectMultiple && ( {!!item.rightElement && item.rightElement} - {canSelectMultiple && checkmarkPosition === CONST.DIRECTION.RIGHT && ( - - - - )} )} diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index 20e7bccd4920..4c6ed4ad63d8 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -1,11 +1,11 @@ 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'; import type {ReceiptErrors} from '@src/types/onyx/Transaction'; import type ChildrenProps from '@src/types/utils/ChildrenProps'; +import type InviteMemberListItem from './InviteMemberListItem'; import type RadioListItem from './RadioListItem'; import type TableListItem from './TableListItem'; import type UserListItem from './UserListItem'; @@ -35,9 +35,6 @@ type CommonListItemProps = { /** Component to display on the right side */ rightHandSideComponent?: ((item: TItem) => ReactElement) | ReactElement | null; - /** Direction of checkmark to show */ - checkmarkPosition?: ValueOf; - /** Styles for the pressable component */ pressableStyle?: StyleProp; @@ -147,11 +144,13 @@ type UserListItemProps = ListItemProps & { FooterComponent?: ReactElement; }; +type InviteMemberListItemProps = UserListItemProps; + type RadioListItemProps = ListItemProps; type TableListItemProps = ListItemProps; -type ValidListItem = typeof RadioListItem | typeof UserListItem | typeof TableListItem; +type ValidListItem = typeof RadioListItem | typeof UserListItem | typeof TableListItem | typeof InviteMemberListItem; type Section = { /** Title of the section */ @@ -270,9 +269,6 @@ type BaseSelectionListProps = Partial & { /** Component to display on the right side of each child */ rightHandSideComponent?: ((item: ListItem) => ReactElement) | ReactElement | null; - /** Direction of checkmark to show */ - checkmarkPosition?: ValueOf; - /** Whether to show the loading indicator for new options */ isLoadingNewOptions?: boolean; @@ -321,6 +317,7 @@ export type { UserListItemProps, RadioListItemProps, TableListItemProps, + InviteMemberListItemProps, ListItem, ListItemProps, FlattenedSectionsReturn, diff --git a/src/pages/workspace/WorkspaceInvitePage.tsx b/src/pages/workspace/WorkspaceInvitePage.tsx index 00d7eaa33f6b..98ad9eeb3656 100644 --- a/src/pages/workspace/WorkspaceInvitePage.tsx +++ b/src/pages/workspace/WorkspaceInvitePage.tsx @@ -10,8 +10,8 @@ import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import SelectionList from '@components/SelectionList'; +import InviteMemberListItem from '@components/SelectionList/InviteMemberListItem'; import type {Section} from '@components/SelectionList/types'; -import UserListItem from '@components/SelectionList/UserListItem'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -308,7 +308,7 @@ function WorkspaceInvitePage({ { @@ -321,7 +321,6 @@ function WorkspaceInvitePage({ showScrollIndicator showLoadingPlaceholder={!didScreenTransitionEnd || !OptionsListUtils.isPersonalDetailsReady(personalDetailsProp)} shouldPreventDefaultFocusOnSelectRow={!DeviceCapabilities.canUseTouchScreen()} - checkmarkPosition={CONST.DIRECTION.RIGHT} /> Date: Wed, 27 Mar 2024 17:31:04 +0530 Subject: [PATCH 7/7] Fix ts --- .../workspace/members/WorkspaceOwnerPaymentCardCurrencyModal.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/workspace/members/WorkspaceOwnerPaymentCardCurrencyModal.tsx b/src/pages/workspace/members/WorkspaceOwnerPaymentCardCurrencyModal.tsx index 8d6eb4b2b943..cbbe9efb877f 100644 --- a/src/pages/workspace/members/WorkspaceOwnerPaymentCardCurrencyModal.tsx +++ b/src/pages/workspace/members/WorkspaceOwnerPaymentCardCurrencyModal.tsx @@ -64,7 +64,6 @@ function WorkspaceOwnerPaymentCardCurrencyModal({isVisible, currencies, currentC onBackButtonPress={onClose} /> { onCurrencyChange?.(option.value);