Skip to content

Commit

Permalink
Merge pull request #36403 from ZhenjaHorbach/group-chat-stacked-avata…
Browse files Browse the repository at this point in the history 
…rs-are-different-in-search-list-and-lhn

Group chat stacked avatars are different in Search list and LHN
  • Loading branch information
@MariaHCD
MariaHCD authored Feb 19, 2024
2 parents d2259b5 + b2f6e7e commit 1caa218
Show file tree
Hide file tree
Showing 3 changed files with 109 additions and 72 deletions.
138 changes: 72 additions & 66 deletions src/components/SelectionList/BaseListItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,77 +63,83 @@ function BaseListItem<TItem extends User | RadioItem>({
onMouseDown={shouldPreventDefaultFocusOnSelectRow ? (e) => e.preventDefault() : undefined}
nativeID={keyForList}
>
<View
style={[
styles.flex1,
styles.justifyContentBetween,
styles.sidebarLinkInner,
styles.userSelectNone,
isUserItem ? styles.peopleRow : styles.optionRow,
isFocused && styles.sidebarLinkActive,
]}
>
{canSelectMultiple && (
{({hovered}) => (
<>
<View
role={CONST.ACCESSIBILITY_ROLE.BUTTON}
style={StyleUtils.getCheckboxPressableStyle()}
style={[
styles.flex1,
styles.justifyContentBetween,
styles.sidebarLinkInner,
styles.userSelectNone,
isUserItem ? styles.peopleRow : styles.optionRow,
isFocused && styles.sidebarLinkActive,
]}
>
<View
style={[
StyleUtils.getCheckboxContainerStyle(20),
styles.mr3,
item.isSelected && styles.checkedContainer,
item.isSelected && styles.borderColorFocus,
item.isDisabled && styles.cursorDisabled,
item.isDisabled && styles.buttonOpacityDisabled,
]}
>
{item.isSelected && (
<Icon
src={Expensicons.Checkmark}
fill={theme.textLight}
height={14}
width={14}
/>
)}
</View>
</View>
)}
{canSelectMultiple && (
<View
role={CONST.ACCESSIBILITY_ROLE.BUTTON}
style={StyleUtils.getCheckboxPressableStyle()}
>
<View
style={[
StyleUtils.getCheckboxContainerStyle(20),
styles.mr3,
item.isSelected && styles.checkedContainer,
item.isSelected && styles.borderColorFocus,
item.isDisabled && styles.cursorDisabled,
item.isDisabled && styles.buttonOpacityDisabled,
]}
>
{item.isSelected && (
<Icon
src={Expensicons.Checkmark}
fill={theme.textLight}
height={14}
width={14}
/>
)}
</View>
</View>
)}

<ListItem
item={item}
textStyles={[
styles.optionDisplayName,
isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText,
styles.sidebarLinkTextBold,
styles.pre,
item.alternateText ? styles.mb1 : null,
]}
alternateTextStyles={[styles.textLabelSupporting, styles.lh16, styles.pre]}
isDisabled={isDisabled}
onSelectRow={() => onSelectRow(item)}
showTooltip={showTooltip}
/>
<ListItem
item={item}
textStyles={[
styles.optionDisplayName,
isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText,
styles.sidebarLinkTextBold,
styles.pre,
item.alternateText ? styles.mb1 : null,
]}
alternateTextStyles={[styles.textLabelSupporting, styles.lh16, styles.pre]}
isDisabled={isDisabled}
onSelectRow={() => onSelectRow(item)}
showTooltip={showTooltip}
isFocused={isFocused}
isHovered={hovered}
/>

{!canSelectMultiple && item.isSelected && !rightHandSideComponent && (
<View
style={[styles.flexRow, styles.alignItemsCenter, styles.ml3]}
accessible={false}
>
<View>
<Icon
src={Expensicons.Checkmark}
fill={theme.success}
/>
</View>
{!canSelectMultiple && item.isSelected && !rightHandSideComponent && (
<View
style={[styles.flexRow, styles.alignItemsCenter, styles.ml3]}
accessible={false}
>
<View>
<Icon
src={Expensicons.Checkmark}
fill={theme.success}
/>
</View>
</View>
)}
{rightHandSideComponentRender()}
</View>
)}
{rightHandSideComponentRender()}
</View>
{isUserItem && item.invitedSecondaryLogin && (
<Text style={[styles.ml9, styles.ph5, styles.pb3, styles.textLabelSupporting]}>
{translate('workspace.people.invitedBySecondaryLogin', {secondaryLogin: item.invitedSecondaryLogin})}
</Text>
{isUserItem && item.invitedSecondaryLogin && (
<Text style={[styles.ml9, styles.ph5, styles.pb3, styles.textLabelSupporting]}>
{translate('workspace.people.invitedBySecondaryLogin', {secondaryLogin: item.invitedSecondaryLogin})}
</Text>
)}
</>
)}
</PressableWithFeedback>
</OfflineWithFeedback>
Expand Down
37 changes: 31 additions & 6 deletions src/components/SelectionList/UserListItem.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,45 @@
import React from 'react';
import {View} from 'react-native';
import MultipleAvatars from '@components/MultipleAvatars';
import SubscriptAvatar from '@components/SubscriptAvatar';
import TextWithTooltip from '@components/TextWithTooltip';
import useStyleUtils from '@hooks/useStyleUtils';
import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import type {UserListItemProps} from './types';

function UserListItem({item, textStyles, alternateTextStyles, showTooltip, style}: UserListItemProps) {
function UserListItem({item, textStyles, alternateTextStyles, showTooltip, style, isFocused, isHovered}: UserListItemProps) {
const styles = useThemeStyles();
const theme = useTheme();
const StyleUtils = useStyleUtils();

const focusedBackgroundColor = styles.sidebarLinkActive.backgroundColor;
const subscriptAvatarBorderColor = isFocused ? focusedBackgroundColor : theme.sidebar;
const hoveredBackgroundColor = !!styles.sidebarLinkHover && 'backgroundColor' in styles.sidebarLinkHover ? styles.sidebarLinkHover.backgroundColor : theme.sidebar;

return (
<>
{!!item.icons && (
<SubscriptAvatar
mainAvatar={item.icons[0]}
secondaryAvatar={item.icons[1]}
showTooltip={showTooltip}
/>
<>
{item.shouldShowSubscript ? (
<SubscriptAvatar
mainAvatar={item.icons[0]}
secondaryAvatar={item.icons[1]}
showTooltip={showTooltip}
backgroundColor={isHovered && !isFocused ? hoveredBackgroundColor : subscriptAvatarBorderColor}
/>
) : (
<MultipleAvatars
icons={item.icons ?? []}
shouldShowTooltip={showTooltip}
secondAvatarStyle={[
StyleUtils.getBackgroundAndBorderStyle(theme.sidebar),
isFocused ? StyleUtils.getBackgroundAndBorderStyle(focusedBackgroundColor) : undefined,
isHovered && !isFocused ? StyleUtils.getBackgroundAndBorderStyle(hoveredBackgroundColor) : undefined,
]}
/>
)}
</>
)}
<View style={[styles.flex1, styles.flexColumn, styles.justifyContentCenter, styles.alignItemsStretch, styles.optionRow]}>
<TextWithTooltip
Expand Down
6 changes: 6 additions & 0 deletions src/components/SelectionList/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,9 @@ type User = {

/** Represents the index of the option within the section it came from */
index?: number;

/** Whether this option should show subscript */
shouldShowSubscript?: boolean;
};

type UserListItemProps = CommonListItemProps<User> & {
Expand All @@ -81,6 +84,9 @@ type UserListItemProps = CommonListItemProps<User> & {

/** Additional styles to apply to text */
style?: StyleProp<TextStyle>;

/** Is item hovered */
isHovered?: boolean;
};

type RadioItem = {
Expand Down

0 comments on commit 1caa218

Please sign in to comment.