-
Notifications
You must be signed in to change notification settings - Fork 2.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #38448 from shubham1206agra/refactor-listitems
Refactored selection list items
- Loading branch information
Showing
13 changed files
with
212 additions
and
315 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <BaseListItem | ||
| item={item} | ||
| wrapperStyle={[styles.flex1, styles.justifyContentBetween, styles.sidebarLinkInner, styles.userSelectNone, styles.peopleRow, isFocused && styles.sidebarLinkActive]} | ||
| isFocused={isFocused} | ||
| isDisabled={isDisabled} | ||
| showTooltip={showTooltip} | ||
| canSelectMultiple={canSelectMultiple} | ||
| onSelectRow={onSelectRow} | ||
| onDismissError={onDismissError} | ||
| shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow} | ||
| rightHandSideComponent={rightHandSideComponent} | ||
| errors={item.errors} | ||
| pendingAction={item.pendingAction} | ||
| FooterComponent={ | ||
| item.invitedSecondaryLogin ? ( | ||
| <Text style={[styles.ml9, styles.ph5, styles.pb3, styles.textLabelSupporting]}> | ||
| {translate('workspace.people.invitedBySecondaryLogin', {secondaryLogin: item.invitedSecondaryLogin})} | ||
| </Text> | ||
| ) : undefined | ||
| } | ||
| keyForList={item.keyForList} | ||
| > | ||
| {(hovered?: boolean) => ( | ||
| <> | ||
| {!!item.icons && | ||
| (item.shouldShowSubscript ? ( | ||
| <SubscriptAvatar | ||
| mainAvatar={item.icons[0]} | ||
| secondaryAvatar={item.icons[1]} | ||
| showTooltip={showTooltip} | ||
| backgroundColor={hovered && !isFocused ? hoveredBackgroundColor : subscriptAvatarBorderColor} | ||
| /> | ||
| ) : ( | ||
| <MultipleAvatars | ||
| icons={item.icons ?? []} | ||
| shouldShowTooltip={showTooltip} | ||
| secondAvatarStyle={[ | ||
| StyleUtils.getBackgroundAndBorderStyle(theme.sidebar), | ||
| isFocused ? StyleUtils.getBackgroundAndBorderStyle(focusedBackgroundColor) : undefined, | ||
| hovered && !isFocused ? StyleUtils.getBackgroundAndBorderStyle(hoveredBackgroundColor) : undefined, | ||
| ]} | ||
| /> | ||
| ))} | ||
| <View style={[styles.flex1, styles.flexColumn, styles.justifyContentCenter, styles.alignItemsStretch, styles.optionRow]}> | ||
| <TextWithTooltip | ||
| shouldShowTooltip={showTooltip} | ||
| text={Str.removeSMSDomain(item.text ?? '')} | ||
| style={[ | ||
| styles.optionDisplayName, | ||
| isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText, | ||
| item.isBold !== false && styles.sidebarLinkTextBold, | ||
| styles.pre, | ||
| item.alternateText ? styles.mb1 : null, | ||
| ]} | ||
| /> | ||
| {!!item.alternateText && ( | ||
| <TextWithTooltip | ||
| shouldShowTooltip={showTooltip} | ||
| text={Str.removeSMSDomain(item.alternateText ?? '')} | ||
| style={[styles.textLabelSupporting, styles.lh16, styles.pre]} | ||
| /> | ||
| )} | ||
| </View> | ||
| {!!item.rightElement && item.rightElement} | ||
| {canSelectMultiple && ( | ||
| <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> | ||
| )} | ||
| </> | ||
| )} | ||
| </BaseListItem> | ||
| ); | ||
| } | ||
|
|
||
| InviteMemberListItem.displayName = 'InviteMemberListItem'; | ||
|
|
||
| export default InviteMemberListItem; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.