-
Notifications
You must be signed in to change notification settings - Fork 3.7k
Refactored selection list items #38448
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from all commits
Commits
Show all changes
13 commits
Select commit
Hold shift + click to select a range
d71b283
Refactored selection list items
shubham1206agra 95c5553
Fixed icons import
shubham1206agra cfc6714
Removed unecessary checkmark from RadioListItem
shubham1206agra 238de00
Removed unused file
shubham1206agra 2ce9b78
Merge main
shubham1206agra 03c33c5
Merge branch 'main' into refactor-listitems
shubham1206agra 24e7de9
Fixes after merging
shubham1206agra 1eb3065
Refactored the components further
shubham1206agra 8f658ed
Merge main
shubham1206agra 61ce78b
Merge main
shubham1206agra d1673c5
Fix ts
shubham1206agra eeda152
Merge main
shubham1206agra 9f112ca
Merge branch 'main' into refactor-listitems
shubham1206agra File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or 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 hidden or 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 hidden or 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 hidden or 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 hidden or 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 hidden or 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.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.