Skip to content

Commit

Permalink
Merge pull request #20145 from allroundexperts/fix-20007
Browse files Browse the repository at this point in the history
  • Loading branch information
@thienlnam
thienlnam authored Jun 9, 2023
2 parents cf0a879 + d4e51ec commit 68d154d
Show file tree
Hide file tree
Showing 6 changed files with 155 additions and 236 deletions.
168 changes: 94 additions & 74 deletions src/components/MenuItem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ const MenuItem = (props) => {
[
styles.flexShrink1,
styles.popoverMenuText,
props.icon ? styles.ml3 : undefined,
props.icon && !_.isArray(props.icon) ? styles.ml3 : undefined,
props.shouldShowBasicTitle ? undefined : styles.textStrong,
props.interactive && props.disabled ? {...styles.disabledText, ...styles.userSelectNone} : undefined,
styles.pre,
Expand All @@ -88,7 +88,7 @@ const MenuItem = (props) => {
);
const descriptionTextStyle = StyleUtils.combineStyles([
styles.textLabelSupporting,
props.icon ? styles.ml3 : undefined,
props.icon && !_.isArray(props.icon) ? styles.ml3 : undefined,
styles.lineHeightNormal,
props.title ? descriptionVerticalMargin : undefined,
props.descriptionTextStyle,
Expand Down Expand Up @@ -125,90 +125,110 @@ const MenuItem = (props) => {
>
{({hovered, pressed}) => (
<>
<View style={[styles.flexRow, styles.pointerEventsAuto, styles.flex1, props.disabled && styles.cursorDisabled]}>
{Boolean(props.icon) && (
<View style={[styles.popoverMenuIcon, ...props.iconStyles]}>
{props.iconType === CONST.ICON_TYPE_ICON && (
<Icon
src={props.icon}
width={props.iconWidth}
height={props.iconHeight}
fill={
props.iconFill ||
StyleUtils.getIconFillColor(getButtonState(props.focused || hovered, pressed, props.success, props.disabled, props.interactive), true)
}
/>
)}
{props.iconType === CONST.ICON_TYPE_WORKSPACE && (
<Avatar
imageStyles={[styles.alignSelfCenter]}
size={CONST.AVATAR_SIZE.DEFAULT}
source={props.icon}
fallbackIcon={props.fallbackIcon}
name={props.title}
type={CONST.ICON_TYPE_WORKSPACE}
/>
)}
{props.iconType === CONST.ICON_TYPE_AVATAR && (
<Avatar
imageStyles={[styles.avatarNormal, styles.alignSelfCenter]}
source={props.icon}
fallbackIcon={props.fallbackIcon}
/>
)}
<View style={[styles.flexColumn, styles.flex1]}>
{Boolean(props.label) && (
<View style={props.icon ? styles.mb2 : null}>
<Text style={StyleUtils.combineStyles(styles.sidebarLinkText, styles.optionAlternateText, styles.textLabelSupporting, styles.pre)}>{props.label}</Text>
</View>
)}
<View style={[styles.justifyContentCenter, styles.menuItemTextContainer, styles.flex1]}>
{Boolean(props.description) && props.shouldShowDescriptionOnTop && (
<Text
style={descriptionTextStyle}
numberOfLines={2}
>
{props.description}
</Text>
<View style={[styles.flexRow, styles.pointerEventsAuto, props.disabled && styles.cursorDisabled]}>
{Boolean(props.icon) && _.isArray(props.icon) && (
<MultipleAvatars
isHovered={hovered}
isPressed={pressed}
icons={props.icon}
size={CONST.AVATAR_SIZE.DEFAULT}
secondAvatarStyle={[
StyleUtils.getBackgroundAndBorderStyle(themeColors.sidebar),
pressed ? StyleUtils.getBackgroundAndBorderStyle(themeColors.buttonPressedBG) : undefined,
hovered && !pressed ? StyleUtils.getBackgroundAndBorderStyle(themeColors.border) : undefined,
]}
/>
)}
<View style={[styles.flexRow, styles.alignItemsCenter]}>
{Boolean(props.title) && (
{Boolean(props.icon) && !_.isArray(props.icon) && (
<View style={[styles.popoverMenuIcon, ...props.iconStyles]}>
{props.iconType === CONST.ICON_TYPE_ICON && (
<Icon
src={props.icon}
width={props.iconWidth}
height={props.iconHeight}
fill={
props.iconFill ||
StyleUtils.getIconFillColor(getButtonState(props.focused || hovered, pressed, props.success, props.disabled, props.interactive), true)
}
/>
)}
{props.iconType === CONST.ICON_TYPE_WORKSPACE && (
<Avatar
imageStyles={[styles.alignSelfCenter]}
size={CONST.AVATAR_SIZE.DEFAULT}
source={props.icon}
fallbackIcon={props.fallbackIcon}
name={props.title}
type={CONST.ICON_TYPE_WORKSPACE}
/>
)}
{props.iconType === CONST.ICON_TYPE_AVATAR && (
<Avatar
imageStyles={[styles.avatarNormal, styles.alignSelfCenter]}
source={props.icon}
fallbackIcon={props.fallbackIcon}
/>
)}
</View>
)}
<View style={[styles.justifyContentCenter, styles.menuItemTextContainer, styles.flex1]}>
{Boolean(props.description) && props.shouldShowDescriptionOnTop && (
<Text
style={titleTextStyle}
numberOfLines={1}
style={descriptionTextStyle}
numberOfLines={2}
>
{convertToLTR(props.title)}
{props.description}
</Text>
)}
{Boolean(props.shouldShowTitleIcon) && (
<View style={[styles.ml2]}>
<View style={[styles.flexRow, styles.alignItemsCenter]}>
{Boolean(props.title) && (
<Text
style={titleTextStyle}
numberOfLines={1}
>
{convertToLTR(props.title)}
</Text>
)}
{Boolean(props.shouldShowTitleIcon) && (
<View style={[styles.ml2]}>
<Icon
src={props.titleIcon}
fill={themeColors.iconSuccessFill}
/>
</View>
)}
</View>
{Boolean(props.description) && !props.shouldShowDescriptionOnTop && (
<Text
style={descriptionTextStyle}
numberOfLines={2}
>
{props.description}
</Text>
)}
{Boolean(props.furtherDetails) && (
<View style={[styles.flexRow, styles.mt2, styles.alignItemsCenter]}>
<Icon
src={props.titleIcon}
fill={themeColors.iconSuccessFill}
src={props.furtherDetailsIcon}
height={variables.iconSizeNormal}
width={variables.iconSizeNormal}
inline
/>
<Text
style={[styles.furtherDetailsText, styles.ph2, styles.pt1]}
numberOfLines={2}
>
{props.furtherDetails}
</Text>
</View>
)}
</View>
{Boolean(props.description) && !props.shouldShowDescriptionOnTop && (
<Text
style={descriptionTextStyle}
numberOfLines={2}
>
{props.description}
</Text>
)}
{Boolean(props.furtherDetails) && (
<View style={[styles.flexRow, styles.mt2, styles.alignItemsCenter]}>
<Icon
src={props.furtherDetailsIcon}
height={variables.iconSizeNormal}
width={variables.iconSizeNormal}
inline
/>
<Text
style={[styles.furtherDetailsText, styles.ph2, styles.pt1]}
numberOfLines={2}
>
{props.furtherDetails}
</Text>
</View>
)}
</View>
</View>
<View style={[styles.flexRow, styles.menuItemTextContainer, styles.pointerEventsNone]}>
Expand Down
115 changes: 0 additions & 115 deletions src/components/TaskSelectorLink.js
View file

This file was deleted.

5 changes: 4 additions & 1 deletion src/components/menuItemPropTypes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const propTypes = {
onPress: PropTypes.func,

/** Icon to display on the left side of component */
icon: PropTypes.oneOfType([PropTypes.elementType, PropTypes.string]),
icon: PropTypes.oneOfType([PropTypes.elementType, PropTypes.string, PropTypes.arrayOf(avatarPropTypes)]),

/** Icon Width */
iconWidth: PropTypes.number,
Expand All @@ -33,6 +33,9 @@ const propTypes = {
/** Text to display for the item */
title: PropTypes.string.isRequired,

/** Text that appears above the title */
label: PropTypes.string,

/** Boolean whether to display the title right icon */
shouldShowTitleIcon: PropTypes.bool,

Expand Down
Loading

0 comments on commit 68d154d

Please sign in to comment.