From 2e9b36759ba39b023992ead6259ba80db3960fb3 Mon Sep 17 00:00:00 2001 From: Viktoryia Kliushun Date: Mon, 18 Dec 2023 16:50:09 +0100 Subject: [PATCH 1/7] [TS migration] Migrate 'PopoverMenu' component --- src/components/Popover/popoverPropTypes.js | 3 + src/components/PopoverMenu/index.js | 124 ------------ src/components/PopoverMenu/index.tsx | 185 ++++++++++++++++++ .../PopoverMenu/popoverMenuPropTypes.js | 63 ------ 4 files changed, 188 insertions(+), 187 deletions(-) delete mode 100644 src/components/PopoverMenu/index.js create mode 100644 src/components/PopoverMenu/index.tsx delete mode 100644 src/components/PopoverMenu/popoverMenuPropTypes.js diff --git a/src/components/Popover/popoverPropTypes.js b/src/components/Popover/popoverPropTypes.js index c13fd8fa0b85..c758c4e6d311 100644 --- a/src/components/Popover/popoverPropTypes.js +++ b/src/components/Popover/popoverPropTypes.js @@ -26,6 +26,9 @@ const propTypes = { /** The ref of the popover */ withoutOverlayRef: refPropTypes, + + /** Whether we want to show the popover on the right side of the screen */ + fromSidebarMediumScreen: PropTypes.bool, }; const defaultProps = { diff --git a/src/components/PopoverMenu/index.js b/src/components/PopoverMenu/index.js deleted file mode 100644 index 1bb50dfbd89e..000000000000 --- a/src/components/PopoverMenu/index.js +++ /dev/null @@ -1,124 +0,0 @@ -import PropTypes from 'prop-types'; -import React, {useRef} from 'react'; -import {View} from 'react-native'; -import _ from 'underscore'; -import MenuItem from '@components/MenuItem'; -import PopoverWithMeasuredContent from '@components/PopoverWithMeasuredContent'; -import refPropTypes from '@components/refPropTypes'; -import Text from '@components/Text'; -import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions'; -import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager'; -import useKeyboardShortcut from '@hooks/useKeyboardShortcut'; -import useThemeStyles from '@hooks/useThemeStyles'; -import useWindowDimensions from '@hooks/useWindowDimensions'; -import CONST from '@src/CONST'; -import {defaultProps as createMenuDefaultProps, propTypes as createMenuPropTypes} from './popoverMenuPropTypes'; - -const propTypes = { - ...createMenuPropTypes, - ...windowDimensionsPropTypes, - - /** The horizontal and vertical anchors points for the popover */ - anchorPosition: PropTypes.shape({ - horizontal: PropTypes.number.isRequired, - vertical: PropTypes.number.isRequired, - }).isRequired, - - /** Ref of the anchor */ - anchorRef: refPropTypes, - - /** Where the popover should be positioned relative to the anchor points. */ - anchorAlignment: PropTypes.shape({ - horizontal: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL)), - vertical: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_VERTICAL)), - }), - - withoutOverlay: PropTypes.bool, - - /** Should we announce the Modal visibility changes? */ - shouldSetModalVisibility: PropTypes.bool, -}; - -const defaultProps = { - ...createMenuDefaultProps, - anchorAlignment: { - horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, - vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM, - }, - anchorRef: () => {}, - withoutOverlay: false, - shouldSetModalVisibility: true, -}; - -function PopoverMenu(props) { - const styles = useThemeStyles(); - const {isSmallScreenWidth} = useWindowDimensions(); - const selectedItemIndex = useRef(null); - const [focusedIndex, setFocusedIndex] = useArrowKeyFocusManager({initialFocusedIndex: -1, maxIndex: props.menuItems.length - 1, isActive: props.isVisible}); - - const selectItem = (index) => { - const selectedItem = props.menuItems[index]; - props.onItemSelected(selectedItem, index); - selectedItemIndex.current = index; - }; - - useKeyboardShortcut( - CONST.KEYBOARD_SHORTCUTS.ENTER, - () => { - if (focusedIndex === -1) { - return; - } - selectItem(focusedIndex); - setFocusedIndex(-1); // Reset the focusedIndex on selecting any menu - }, - {isActive: props.isVisible}, - ); - - return ( - { - setFocusedIndex(-1); - if (selectedItemIndex.current !== null) { - props.menuItems[selectedItemIndex.current].onSelected(); - selectedItemIndex.current = null; - } - }} - animationIn={props.animationIn} - animationOut={props.animationOut} - animationInTiming={props.animationInTiming} - disableAnimation={props.disableAnimation} - fromSidebarMediumScreen={props.fromSidebarMediumScreen} - withoutOverlay={props.withoutOverlay} - shouldSetModalVisibility={props.shouldSetModalVisibility} - > - - {!_.isEmpty(props.headerText) && {props.headerText}} - {_.map(props.menuItems, (item, menuIndex) => ( - selectItem(menuIndex)} - focused={focusedIndex === menuIndex} - /> - ))} - - - ); -} - -PopoverMenu.propTypes = propTypes; -PopoverMenu.defaultProps = defaultProps; -PopoverMenu.displayName = 'PopoverMenu'; - -export default React.memo(withWindowDimensions(PopoverMenu)); diff --git a/src/components/PopoverMenu/index.tsx b/src/components/PopoverMenu/index.tsx new file mode 100644 index 000000000000..f8849506ca93 --- /dev/null +++ b/src/components/PopoverMenu/index.tsx @@ -0,0 +1,185 @@ +import React, {RefObject, useRef} from 'react'; +import {View} from 'react-native'; +import type {ModalProps} from 'react-native-modal'; +import type {SvgProps} from 'react-native-svg'; +import type {ValueOf} from 'type-fest'; +import MenuItem from '@components/MenuItem'; +import PopoverWithMeasuredContent from '@components/PopoverWithMeasuredContent'; +import Text from '@components/Text'; +import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager'; +import useKeyboardShortcut from '@hooks/useKeyboardShortcut'; +import useThemeStyles from '@hooks/useThemeStyles'; +import useWindowDimensions from '@hooks/useWindowDimensions'; +import CONST from '@src/CONST'; + +type MenuItemProps = { + /** An icon element displayed on the left side */ + icon?: React.FC; + + /** Text label */ + text: string; + + /** A callback triggered when this item is selected */ + onSelected: () => void; + + /** A description text to show under the title */ + description?: string; + + /** The fill color to pass into the icon. */ + iconFill?: string; + + /** Icon Width */ + iconWidth?: number; + + /** Icon Height */ + iconHeight?: number; +}; + +type AnchorPosition = { + /** The vertical anchor position of the popover menu */ + vertical: number; + + /** The horizontal anchor position of the popover menu */ + horizontal: number; +}; + +type AnchorAlignment = { + /** The horizontal anchor alignment of the popover menu */ + horizontal?: ValueOf; + + /** The vertical anchor alignment of the popover menu */ + vertical?: ValueOf; +}; + +type PopoverModalProps = Pick; + +type PopoverMenuProps = PopoverModalProps & { + /** Callback method fired when the user requests to close the modal */ + onClose: () => void; + + /** State that determines whether to display the modal or not */ + isVisible: boolean; + + /** Callback to fire when a CreateMenu item is selected */ + onItemSelected: (selectedItem: MenuItemProps, index: number) => void; + + /** Menu items to be rendered on the list */ + menuItems: MenuItemProps[]; + + /** Optional non-interactive text to display as a header for any create menu */ + headerText?: string; + + /** Whether disable the animations */ + disableAnimation?: boolean; + + /** The horizontal and vertical anchors points for the popover */ + anchorPosition: AnchorPosition; + + /** Ref of the anchor */ + anchorRef?: RefObject; + + /** Where the popover should be positioned relative to the anchor points. */ + anchorAlignment?: AnchorAlignment; + + /** Whether we don't want to show overlay */ + withoutOverlay?: boolean; + + /** Should we announce the Modal visibility changes? */ + shouldSetModalVisibility?: boolean; + + /** Whether we want to show the popover on the right side of the screen */ + fromSidebarMediumScreen?: boolean; +}; + +function PopoverMenu({ + menuItems, + onItemSelected, + isVisible, + anchorPosition, + anchorRef, + onClose, + headerText, + fromSidebarMediumScreen, + anchorAlignment = { + horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, + vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM, + }, + animationIn = 'fadeIn', + animationOut = 'fadeOut', + animationInTiming = CONST.ANIMATED_TRANSITION, + disableAnimation = true, + withoutOverlay = false, + shouldSetModalVisibility = true, +}: PopoverMenuProps) { + const styles = useThemeStyles(); + const {isSmallScreenWidth} = useWindowDimensions(); + const selectedItemIndex = useRef(null); + const [focusedIndex, setFocusedIndex] = useArrowKeyFocusManager({initialFocusedIndex: -1, maxIndex: menuItems.length - 1, isActive: isVisible}); + + const selectItem = (index: number) => { + const selectedItem = menuItems[index]; + onItemSelected(selectedItem, index); + // eslint-disable-next-line @typescript-eslint/non-nullable-type-assertion-style + (selectedItemIndex.current as number) = index; + }; + + useKeyboardShortcut( + CONST.KEYBOARD_SHORTCUTS.ENTER, + () => { + if (focusedIndex === -1) { + return; + } + selectItem(focusedIndex); + setFocusedIndex(-1); // Reset the focusedIndex on selecting any menu + }, + {isActive: isVisible}, + ); + + return ( + // @ts-expect-error TODO: Remove this once PopoverWithMeasuredContent (https://github.com/Expensify/App/issues/25053) is migrated to TypeScript. + { + setFocusedIndex(-1); + if (selectedItemIndex.current !== null) { + menuItems[selectedItemIndex.current].onSelected(); + (selectedItemIndex.current as number | null) = null; + } + }} + animationIn={animationIn} + animationOut={animationOut} + animationInTiming={animationInTiming} + disableAnimation={disableAnimation} + fromSidebarMediumScreen={fromSidebarMediumScreen} + withoutOverlay={withoutOverlay} + shouldSetModalVisibility={shouldSetModalVisibility} + > + + {!!headerText && {headerText}} + {menuItems.map((item, menuIndex) => ( + selectItem(menuIndex)} + focused={focusedIndex === menuIndex} + /> + ))} + + + ); +} + +PopoverMenu.displayName = 'PopoverMenu'; + +export default React.memo(PopoverMenu); diff --git a/src/components/PopoverMenu/popoverMenuPropTypes.js b/src/components/PopoverMenu/popoverMenuPropTypes.js deleted file mode 100644 index ae7a385a5297..000000000000 --- a/src/components/PopoverMenu/popoverMenuPropTypes.js +++ /dev/null @@ -1,63 +0,0 @@ -import PropTypes from 'prop-types'; -import CONST from '@src/CONST'; - -const propTypes = { - /** Callback method fired when the user requests to close the modal */ - onClose: PropTypes.func.isRequired, - - /** State that determines whether to display the modal or not */ - isVisible: PropTypes.bool.isRequired, - - /** Callback to fire when a CreateMenu item is selected */ - onItemSelected: PropTypes.func.isRequired, - - /** Menu items to be rendered on the list */ - menuItems: PropTypes.arrayOf( - PropTypes.shape({ - /** An icon element displayed on the left side */ - icon: PropTypes.elementType, - - /** Text label */ - text: PropTypes.string.isRequired, - - /** A callback triggered when this item is selected */ - onSelected: PropTypes.func.isRequired, - }), - ).isRequired, - - /** The anchor position of the CreateMenu popover */ - anchorPosition: PropTypes.shape({ - top: PropTypes.number, - right: PropTypes.number, - bottom: PropTypes.number, - left: PropTypes.number, - }).isRequired, - - /** The anchor reference of the CreateMenu popover */ - anchorRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired, - - /** A react-native-animatable animation definition for the modal display animation. */ - animationIn: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), - - /** A react-native-animatable animation definition for the modal hide animation. */ - animationOut: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), - - /** A react-native-animatable animation timing for the modal display animation. */ - animationInTiming: PropTypes.number, - - /** Optional non-interactive text to display as a header for any create menu */ - headerText: PropTypes.string, - - /** Whether disable the animations */ - disableAnimation: PropTypes.bool, -}; - -const defaultProps = { - animationIn: 'fadeIn', - animationOut: 'fadeOut', - animationInTiming: CONST.ANIMATED_TRANSITION, - headerText: undefined, - disableAnimation: true, -}; - -export {propTypes, defaultProps}; From 88ac0b82d023b8de1bd2fdd90b7fa733d6181d52 Mon Sep 17 00:00:00 2001 From: Viktoryia Kliushun Date: Tue, 19 Dec 2023 13:00:40 +0100 Subject: [PATCH 2/7] Reuse existing AnchorPosition and AnchorAlignment type --- src/components/Popover/types.ts | 12 ++++++++++-- src/components/PopoverMenu/index.tsx | 19 ++----------------- src/styles/index.ts | 2 +- 3 files changed, 13 insertions(+), 20 deletions(-) diff --git a/src/components/Popover/types.ts b/src/components/Popover/types.ts index 7f7e2829770c..7890ce5555f0 100644 --- a/src/components/Popover/types.ts +++ b/src/components/Popover/types.ts @@ -1,7 +1,15 @@ +import type {ValueOf} from 'type-fest'; import BaseModalProps, {PopoverAnchorPosition} from '@components/Modal/types'; import {WindowDimensionsProps} from '@components/withWindowDimensions/types'; +import CONST from '@src/CONST'; -type AnchorAlignment = {horizontal: string; vertical: string}; +type AnchorAlignment = { + /** The horizontal anchor alignment of the popover */ + horizontal: ValueOf; + + /** The vertical anchor alignment of the popover */ + vertical: ValueOf; +}; type PopoverDimensions = { width: number; @@ -39,4 +47,4 @@ type PopoverProps = BaseModalProps & { type PopoverWithWindowDimensionsProps = PopoverProps & WindowDimensionsProps; -export type {PopoverProps, PopoverWithWindowDimensionsProps}; +export type {PopoverProps, PopoverWithWindowDimensionsProps, AnchorAlignment}; diff --git a/src/components/PopoverMenu/index.tsx b/src/components/PopoverMenu/index.tsx index f8849506ca93..fcb6d72d4a3e 100644 --- a/src/components/PopoverMenu/index.tsx +++ b/src/components/PopoverMenu/index.tsx @@ -2,8 +2,8 @@ import React, {RefObject, useRef} from 'react'; import {View} from 'react-native'; import type {ModalProps} from 'react-native-modal'; import type {SvgProps} from 'react-native-svg'; -import type {ValueOf} from 'type-fest'; import MenuItem from '@components/MenuItem'; +import type {AnchorAlignment} from '@components/Popover/types'; import PopoverWithMeasuredContent from '@components/PopoverWithMeasuredContent'; import Text from '@components/Text'; import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager'; @@ -11,6 +11,7 @@ import useKeyboardShortcut from '@hooks/useKeyboardShortcut'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import CONST from '@src/CONST'; +import type {AnchorPosition} from '@src/styles'; type MenuItemProps = { /** An icon element displayed on the left side */ @@ -35,22 +36,6 @@ type MenuItemProps = { iconHeight?: number; }; -type AnchorPosition = { - /** The vertical anchor position of the popover menu */ - vertical: number; - - /** The horizontal anchor position of the popover menu */ - horizontal: number; -}; - -type AnchorAlignment = { - /** The horizontal anchor alignment of the popover menu */ - horizontal?: ValueOf; - - /** The vertical anchor alignment of the popover menu */ - vertical?: ValueOf; -}; - type PopoverModalProps = Pick; type PopoverMenuProps = PopoverModalProps & { diff --git a/src/styles/index.ts b/src/styles/index.ts index dabe6fc12323..e405dce72213 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -4088,4 +4088,4 @@ const defaultStyles = styles(defaultTheme); export default styles; export {defaultStyles}; -export type {Styles, ThemeStyles, StatusBarStyle, ColorScheme}; +export type {Styles, ThemeStyles, StatusBarStyle, ColorScheme, AnchorPosition}; From 4f218396036d2ee0f8e24061ec7cc8f53ef94e51 Mon Sep 17 00:00:00 2001 From: Viktoryia Kliushun Date: Tue, 19 Dec 2023 14:05:50 +0100 Subject: [PATCH 3/7] Update selectedItemIndex to make it mutable --- src/components/PopoverMenu/index.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/PopoverMenu/index.tsx b/src/components/PopoverMenu/index.tsx index fcb6d72d4a3e..3038344508fd 100644 --- a/src/components/PopoverMenu/index.tsx +++ b/src/components/PopoverMenu/index.tsx @@ -98,14 +98,13 @@ function PopoverMenu({ }: PopoverMenuProps) { const styles = useThemeStyles(); const {isSmallScreenWidth} = useWindowDimensions(); - const selectedItemIndex = useRef(null); + const selectedItemIndex = useRef(null); const [focusedIndex, setFocusedIndex] = useArrowKeyFocusManager({initialFocusedIndex: -1, maxIndex: menuItems.length - 1, isActive: isVisible}); const selectItem = (index: number) => { const selectedItem = menuItems[index]; onItemSelected(selectedItem, index); - // eslint-disable-next-line @typescript-eslint/non-nullable-type-assertion-style - (selectedItemIndex.current as number) = index; + selectedItemIndex.current = index; }; useKeyboardShortcut( @@ -132,7 +131,7 @@ function PopoverMenu({ setFocusedIndex(-1); if (selectedItemIndex.current !== null) { menuItems[selectedItemIndex.current].onSelected(); - (selectedItemIndex.current as number | null) = null; + selectedItemIndex.current = null; } }} animationIn={animationIn} From c236485c9bc4bdda647ea34b7732e4ce5de43ce3 Mon Sep 17 00:00:00 2001 From: Viktoryia Kliushun Date: Tue, 19 Dec 2023 14:09:40 +0100 Subject: [PATCH 4/7] Remove PopoverMenu folder --- src/components/{PopoverMenu/index.tsx => PopoverMenu.tsx} | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) rename src/components/{PopoverMenu/index.tsx => PopoverMenu.tsx} (96%) diff --git a/src/components/PopoverMenu/index.tsx b/src/components/PopoverMenu.tsx similarity index 96% rename from src/components/PopoverMenu/index.tsx rename to src/components/PopoverMenu.tsx index 3038344508fd..cb33c0bdf858 100644 --- a/src/components/PopoverMenu/index.tsx +++ b/src/components/PopoverMenu.tsx @@ -2,16 +2,16 @@ import React, {RefObject, useRef} from 'react'; import {View} from 'react-native'; import type {ModalProps} from 'react-native-modal'; import type {SvgProps} from 'react-native-svg'; -import MenuItem from '@components/MenuItem'; -import type {AnchorAlignment} from '@components/Popover/types'; -import PopoverWithMeasuredContent from '@components/PopoverWithMeasuredContent'; -import Text from '@components/Text'; import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager'; import useKeyboardShortcut from '@hooks/useKeyboardShortcut'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import CONST from '@src/CONST'; import type {AnchorPosition} from '@src/styles'; +import MenuItem from './MenuItem'; +import type {AnchorAlignment} from './Popover/types'; +import PopoverWithMeasuredContent from './PopoverWithMeasuredContent'; +import Text from './Text'; type MenuItemProps = { /** An icon element displayed on the left side */ From fe60f79681dffd9d3fd336e0d9d008eb56439019 Mon Sep 17 00:00:00 2001 From: Viktoryia Kliushun Date: Wed, 20 Dec 2023 11:17:29 +0100 Subject: [PATCH 5/7] TS fixes after merging main --- src/components/MenuItem.tsx | 12 ++++++------ src/components/PopoverMenu.tsx | 9 ++++----- 2 files changed, 10 insertions(+), 11 deletions(-) diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx index c2cc4abce6c5..71544e79b0f5 100644 --- a/src/components/MenuItem.tsx +++ b/src/components/MenuItem.tsx @@ -48,14 +48,14 @@ type UnresponsiveProps = { type IconProps = { /** Flag to choose between avatar image or an icon */ - iconType: typeof CONST.ICON_TYPE_ICON; + iconType?: typeof CONST.ICON_TYPE_ICON; /** Icon to display on the left side of component */ icon: (props: SrcProps) => ReactNode; }; type AvatarProps = { - iconType: typeof CONST.ICON_TYPE_AVATAR | typeof CONST.ICON_TYPE_WORKSPACE; + iconType?: typeof CONST.ICON_TYPE_AVATAR | typeof CONST.ICON_TYPE_WORKSPACE; icon: AvatarSource; }; @@ -84,7 +84,7 @@ type MenuItemProps = (ResponsiveProps | UnresponsiveProps) & titleStyle?: ViewStyle; /** Any adjustments to style when menu item is hovered or pressed */ - hoverAndPressStyle: StyleProp>; + hoverAndPressStyle?: StyleProp>; /** Additional styles to style the description text below the title */ descriptionTextStyle?: StyleProp; @@ -174,7 +174,7 @@ type MenuItemProps = (ResponsiveProps | UnresponsiveProps) & isSelected?: boolean; /** Prop to identify if we should load avatars vertically instead of diagonally */ - shouldStackHorizontally: boolean; + shouldStackHorizontally?: boolean; /** Prop to represent the size of the avatar images to be shown */ avatarSize?: (typeof CONST.AVATAR_SIZE)[keyof typeof CONST.AVATAR_SIZE]; @@ -219,10 +219,10 @@ type MenuItemProps = (ResponsiveProps | UnresponsiveProps) & furtherDetails?: string; /** The function that should be called when this component is LongPressed or right-clicked. */ - onSecondaryInteraction: () => void; + onSecondaryInteraction?: () => void; /** Array of objects that map display names to their corresponding tooltip */ - titleWithTooltips: DisplayNameWithTooltip[]; + titleWithTooltips?: DisplayNameWithTooltip[]; }; function MenuItem( diff --git a/src/components/PopoverMenu.tsx b/src/components/PopoverMenu.tsx index cb33c0bdf858..ca21df385779 100644 --- a/src/components/PopoverMenu.tsx +++ b/src/components/PopoverMenu.tsx @@ -13,9 +13,9 @@ import type {AnchorAlignment} from './Popover/types'; import PopoverWithMeasuredContent from './PopoverWithMeasuredContent'; import Text from './Text'; -type MenuItemProps = { +type PopoverMenuItem = { /** An icon element displayed on the left side */ - icon?: React.FC; + icon: React.FC; /** Text label */ text: string; @@ -46,10 +46,10 @@ type PopoverMenuProps = PopoverModalProps & { isVisible: boolean; /** Callback to fire when a CreateMenu item is selected */ - onItemSelected: (selectedItem: MenuItemProps, index: number) => void; + onItemSelected: (selectedItem: PopoverMenuItem, index: number) => void; /** Menu items to be rendered on the list */ - menuItems: MenuItemProps[]; + menuItems: PopoverMenuItem[]; /** Optional non-interactive text to display as a header for any create menu */ headerText?: string; @@ -147,7 +147,6 @@ function PopoverMenu({ {menuItems.map((item, menuIndex) => ( Date: Wed, 27 Dec 2023 11:37:36 +0100 Subject: [PATCH 6/7] Updates to follow main branch --- src/components/PopoverMenu.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/components/PopoverMenu.tsx b/src/components/PopoverMenu.tsx index ca21df385779..0a31b89de77a 100644 --- a/src/components/PopoverMenu.tsx +++ b/src/components/PopoverMenu.tsx @@ -1,3 +1,4 @@ +import type {ImageContentFit} from 'expo-image'; import React, {RefObject, useRef} from 'react'; import {View} from 'react-native'; import type {ModalProps} from 'react-native-modal'; @@ -34,6 +35,12 @@ type PopoverMenuItem = { /** Icon Height */ iconHeight?: number; + + /** Icon should be displayed in its own color */ + displayInDefaultIconColor?: boolean; + + /** Determines how the icon should be resized to fit its container */ + contentFit?: ImageContentFit; }; type PopoverModalProps = Pick; @@ -151,11 +158,13 @@ function PopoverMenu({ iconWidth={item.iconWidth} iconHeight={item.iconHeight} iconFill={item.iconFill} + contentFit={item.contentFit} title={item.text} shouldCheckActionAllowedOnPress={false} description={item.description} onPress={() => selectItem(menuIndex)} focused={focusedIndex === menuIndex} + displayInDefaultIconColor={item.displayInDefaultIconColor} /> ))} From 6ccdb65be05d791ebbd54e20773fc92f538b5f36 Mon Sep 17 00:00:00 2001 From: VickyStash Date: Tue, 2 Jan 2024 17:22:58 +0100 Subject: [PATCH 7/7] TS fixes after merging main --- src/components/PopoverMenu.tsx | 3 +-- src/components/PopoverWithMeasuredContent.tsx | 3 ++- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/PopoverMenu.tsx b/src/components/PopoverMenu.tsx index 0a31b89de77a..2c85b80534ca 100644 --- a/src/components/PopoverMenu.tsx +++ b/src/components/PopoverMenu.tsx @@ -68,7 +68,7 @@ type PopoverMenuProps = PopoverModalProps & { anchorPosition: AnchorPosition; /** Ref of the anchor */ - anchorRef?: RefObject; + anchorRef: RefObject; /** Where the popover should be positioned relative to the anchor points. */ anchorAlignment?: AnchorAlignment; @@ -127,7 +127,6 @@ function PopoverMenu({ ); return ( - // @ts-expect-error TODO: Remove this once PopoverWithMeasuredContent (https://github.com/Expensify/App/issues/25053) is migrated to TypeScript. & { +type PopoverWithMeasuredContentProps = Omit & { /** The horizontal and vertical anchors points for the popover */ anchorPosition: AnchorPosition; };