From 935d275220095df55fb7b64912102432d82283a8 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Fri, 22 Dec 2023 10:01:17 +0100 Subject: [PATCH 1/7] migrate ContextMenuItem to TypeScript --- ...ContextMenuItem.js => ContextMenuItem.tsx} | 64 +++++++------------ src/components/MenuItem.tsx | 10 +-- 2 files changed, 27 insertions(+), 47 deletions(-) rename src/components/{ContextMenuItem.js => ContextMenuItem.tsx} (65%) diff --git a/src/components/ContextMenuItem.js b/src/components/ContextMenuItem.tsx similarity index 65% rename from src/components/ContextMenuItem.js rename to src/components/ContextMenuItem.tsx index 307cfcde9b10..fd883624d179 100644 --- a/src/components/ContextMenuItem.js +++ b/src/components/ContextMenuItem.tsx @@ -1,57 +1,47 @@ -import PropTypes from 'prop-types'; -import React, {forwardRef, useImperativeHandle} from 'react'; +import React, {ForwardedRef, forwardRef, ReactNode, useImperativeHandle} from 'react'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; import useThrottledButtonState from '@hooks/useThrottledButtonState'; import useWindowDimensions from '@hooks/useWindowDimensions'; import getButtonState from '@libs/getButtonState'; +import CONST from '@src/CONST'; import BaseMiniContextMenuItem from './BaseMiniContextMenuItem'; -import Icon from './Icon'; +import Icon, {SrcProps} from './Icon'; import MenuItem from './MenuItem'; -const propTypes = { +type ContextMenuItemProps = { /** Icon Component */ - icon: PropTypes.elementType.isRequired, + icon: (props: SrcProps) => ReactNode; /** Text to display */ - text: PropTypes.string.isRequired, + text: string; /** Icon to show when interaction was successful */ - successIcon: PropTypes.elementType, + successIcon?: (props: SrcProps) => ReactNode; /** Text to show when interaction was successful */ - successText: PropTypes.string, + successText?: string; /** Whether to show the mini menu */ - isMini: PropTypes.bool, + isMini?: boolean; /** Callback to fire when the item is pressed */ - onPress: PropTypes.func.isRequired, + onPress: () => void; /** A description text to show under the title */ - description: PropTypes.string, + description?: string; /** The action accept for anonymous user or not */ - isAnonymousAction: PropTypes.bool, + isAnonymousAction?: boolean; /** Whether the menu item is focused or not */ - isFocused: PropTypes.bool, - - /** Forwarded ref to ContextMenuItem */ - innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), -}; - -const defaultProps = { - isMini: false, - successIcon: null, - successText: '', - description: '', - isAnonymousAction: false, - isFocused: false, - innerRef: null, + isFocused?: boolean; }; -function ContextMenuItem({onPress, successIcon, successText, icon, text, isMini, description, isAnonymousAction, isFocused, innerRef}) { +function ContextMenuItem( + {onPress, successIcon, successText = '', icon, text, isMini = false, description = '', isAnonymousAction = false, isFocused = false}: ContextMenuItemProps, + ref: ForwardedRef, +) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); const {windowWidth} = useWindowDimensions(); @@ -65,12 +55,13 @@ function ContextMenuItem({onPress, successIcon, successText, icon, text, isMini, // We only set the success state when we have icon or text to represent the success state // We may want to replace this check by checking the Result from OnPress Callback in future. + // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing if (successIcon || successText) { setThrottledButtonInactive(); } }; - useImperativeHandle(innerRef, () => ({triggerPressAndUpdateSuccess})); + useImperativeHandle(ref, () => ({triggerPressAndUpdateSuccess})); const itemIcon = !isThrottledButtonActive && successIcon ? successIcon : icon; const itemText = !isThrottledButtonActive && successText ? successText : text; @@ -101,23 +92,12 @@ function ContextMenuItem({onPress, successIcon, successText, icon, text, isMini, style={StyleUtils.getContextMenuItemStyles(windowWidth)} isAnonymousAction={isAnonymousAction} focused={isFocused} - interactive={isThrottledButtonActive} + interactive + iconType={CONST.ICON_TYPE_ICON} /> ); } -ContextMenuItem.propTypes = propTypes; -ContextMenuItem.defaultProps = defaultProps; ContextMenuItem.displayName = 'ContextMenuItem'; -const ContextMenuItemWithRef = forwardRef((props, ref) => ( - -)); - -ContextMenuItemWithRef.displayName = 'ContextMenuItemWithRef'; - -export default ContextMenuItemWithRef; +export default forwardRef(ContextMenuItem); diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx index 96e6ea0bbc44..36366cc0e07d 100644 --- a/src/components/MenuItem.tsx +++ b/src/components/MenuItem.tsx @@ -72,7 +72,7 @@ type MenuItemProps = (ResponsiveProps | UnresponsiveProps) & badgeText?: string; /** Used to apply offline styles to child text components */ - style?: ViewStyle; + style?: ViewStyle | ViewStyle[]; /** Any additional styles to apply */ wrapperStyle?: StyleProp; @@ -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( From 0f6211e24949936b6e366986d7081f8520870e1f Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Fri, 22 Dec 2023 13:38:24 +0100 Subject: [PATCH 2/7] apply suggested changes --- src/components/ContextMenuItem.tsx | 19 +++++++++++-------- src/components/MenuItem.tsx | 7 ++++--- 2 files changed, 15 insertions(+), 11 deletions(-) diff --git a/src/components/ContextMenuItem.tsx b/src/components/ContextMenuItem.tsx index fd883624d179..e08bba10fafe 100644 --- a/src/components/ContextMenuItem.tsx +++ b/src/components/ContextMenuItem.tsx @@ -1,23 +1,23 @@ -import React, {ForwardedRef, forwardRef, ReactNode, useImperativeHandle} from 'react'; +import React, {ForwardedRef, forwardRef, useImperativeHandle} from 'react'; +import {SvgProps} from 'react-native-svg'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; import useThrottledButtonState from '@hooks/useThrottledButtonState'; import useWindowDimensions from '@hooks/useWindowDimensions'; import getButtonState from '@libs/getButtonState'; -import CONST from '@src/CONST'; import BaseMiniContextMenuItem from './BaseMiniContextMenuItem'; -import Icon, {SrcProps} from './Icon'; +import Icon from './Icon'; import MenuItem from './MenuItem'; type ContextMenuItemProps = { /** Icon Component */ - icon: (props: SrcProps) => ReactNode; + icon: React.FC; /** Text to display */ text: string; /** Icon to show when interaction was successful */ - successIcon?: (props: SrcProps) => ReactNode; + successIcon?: React.FC; /** Text to show when interaction was successful */ successText?: string; @@ -38,9 +38,13 @@ type ContextMenuItemProps = { isFocused?: boolean; }; +type ContextMenuItemRef = { + triggerPressAndUpdateSuccess?: () => void; +}; + function ContextMenuItem( {onPress, successIcon, successText = '', icon, text, isMini = false, description = '', isAnonymousAction = false, isFocused = false}: ContextMenuItemProps, - ref: ForwardedRef, + ref: ForwardedRef, ) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); @@ -56,7 +60,7 @@ function ContextMenuItem( // We only set the success state when we have icon or text to represent the success state // We may want to replace this check by checking the Result from OnPress Callback in future. // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing - if (successIcon || successText) { + if (!!successIcon || successText) { setThrottledButtonInactive(); } }; @@ -93,7 +97,6 @@ function ContextMenuItem( isAnonymousAction={isAnonymousAction} focused={isFocused} interactive - iconType={CONST.ICON_TYPE_ICON} /> ); } diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx index 36366cc0e07d..24efb83b7507 100644 --- a/src/components/MenuItem.tsx +++ b/src/components/MenuItem.tsx @@ -55,7 +55,7 @@ type IconProps = { }; 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; }; @@ -72,7 +72,8 @@ type MenuItemProps = (ResponsiveProps | UnresponsiveProps) & badgeText?: string; /** Used to apply offline styles to child text components */ - style?: ViewStyle | ViewStyle[]; + // style?: ViewStyle | ViewStyle[]; + style?: StyleProp; /** Any additional styles to apply */ wrapperStyle?: StyleProp; @@ -289,7 +290,7 @@ function MenuItem( const theme = useTheme(); const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); - const combinedStyle = StyleUtils.combineStyles(style ?? {}, styles.popoverMenuItem); + const combinedStyle = [style, styles.popoverMenuItem]; const {isSmallScreenWidth} = useWindowDimensions(); const [html, setHtml] = useState(''); const titleRef = useRef(''); From 2e251aad0649df9d090fd834ba1e7b5209223c0a Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Fri, 22 Dec 2023 13:49:19 +0100 Subject: [PATCH 3/7] remove comment, change type name --- src/components/ContextMenuItem.tsx | 4 ++-- src/components/MenuItem.tsx | 1 - 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/ContextMenuItem.tsx b/src/components/ContextMenuItem.tsx index e08bba10fafe..f8166e609407 100644 --- a/src/components/ContextMenuItem.tsx +++ b/src/components/ContextMenuItem.tsx @@ -38,13 +38,13 @@ type ContextMenuItemProps = { isFocused?: boolean; }; -type ContextMenuItemRef = { +type ContextMenuItemHandle = { triggerPressAndUpdateSuccess?: () => void; }; function ContextMenuItem( {onPress, successIcon, successText = '', icon, text, isMini = false, description = '', isAnonymousAction = false, isFocused = false}: ContextMenuItemProps, - ref: ForwardedRef, + ref: ForwardedRef, ) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx index 24efb83b7507..6dca8778bb26 100644 --- a/src/components/MenuItem.tsx +++ b/src/components/MenuItem.tsx @@ -72,7 +72,6 @@ type MenuItemProps = (ResponsiveProps | UnresponsiveProps) & badgeText?: string; /** Used to apply offline styles to child text components */ - // style?: ViewStyle | ViewStyle[]; style?: StyleProp; /** Any additional styles to apply */ From 311b4d428a2cecff5e62e826c698f91724346ef0 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Tue, 2 Jan 2024 11:20:39 +0100 Subject: [PATCH 4/7] make titleWithTooltips prop optional --- src/components/MenuItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx index 324910ebd0c1..a5ac3e9b9b93 100644 --- a/src/components/MenuItem.tsx +++ b/src/components/MenuItem.tsx @@ -223,7 +223,7 @@ type MenuItemProps = (ResponsiveProps | UnresponsiveProps) & onSecondaryInteraction?: () => void; /** Array of objects that map display names to their corresponding tooltip */ - titleWithTooltips: DisplayNameWithTooltip[]; + titleWithTooltips?: DisplayNameWithTooltip[]; /** Icon should be displayed in its own color */ displayInDefaultIconColor?: boolean; From b3974b7a14228ec0101113a34093317adf8adf8d Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Tue, 2 Jan 2024 11:58:24 +0100 Subject: [PATCH 5/7] get rid of interactive/uninteractive props --- src/components/ContextMenuItem.tsx | 2 +- src/components/MenuItem.tsx | 241 ++++++++++++++--------------- 2 files changed, 117 insertions(+), 126 deletions(-) diff --git a/src/components/ContextMenuItem.tsx b/src/components/ContextMenuItem.tsx index f8166e609407..0975794f1e45 100644 --- a/src/components/ContextMenuItem.tsx +++ b/src/components/ContextMenuItem.tsx @@ -96,7 +96,7 @@ function ContextMenuItem( style={StyleUtils.getContextMenuItemStyles(windowWidth)} isAnonymousAction={isAnonymousAction} focused={isFocused} - interactive + interactive={isThrottledButtonActive} /> ); } diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx index a5ac3e9b9b93..2b192aba2f2e 100644 --- a/src/components/MenuItem.tsx +++ b/src/components/MenuItem.tsx @@ -33,20 +33,6 @@ import RenderHTML from './RenderHTML'; import SelectCircle from './SelectCircle'; import Text from './Text'; -type ResponsiveProps = { - /** Function to fire when component is pressed */ - onPress: (event: GestureResponderEvent | KeyboardEvent) => void; - - interactive?: true; -}; - -type UnresponsiveProps = { - onPress?: undefined; - - /** Whether the menu item should be interactive at all */ - interactive: false; -}; - type IconProps = { /** Flag to choose between avatar image or an icon */ iconType: typeof CONST.ICON_TYPE_ICON; @@ -67,170 +53,175 @@ type NoIcon = { icon?: undefined; }; -type MenuItemProps = (ResponsiveProps | UnresponsiveProps) & - (IconProps | AvatarProps | NoIcon) & { - /** Text to be shown as badge near the right end. */ - badgeText?: string; +type MenuItemProps = (IconProps | AvatarProps | NoIcon) & { + /** Function to fire when component is pressed */ + onPress?: (event: GestureResponderEvent | KeyboardEvent) => void; - /** Used to apply offline styles to child text components */ - style?: StyleProp; + /** Whether the menu item should be interactive at all */ + interactive?: boolean; - /** Any additional styles to apply */ - wrapperStyle?: StyleProp; + /** Text to be shown as badge near the right end. */ + badgeText?: string; - /** Any additional styles to apply on the outer element */ - containerStyle?: StyleProp; + /** Used to apply offline styles to child text components */ + style?: StyleProp; - /** Used to apply styles specifically to the title */ - titleStyle?: ViewStyle; + /** Any additional styles to apply */ + wrapperStyle?: StyleProp; - /** Any adjustments to style when menu item is hovered or pressed */ - hoverAndPressStyle?: StyleProp>; + /** Any additional styles to apply on the outer element */ + containerStyle?: StyleProp; - /** Additional styles to style the description text below the title */ - descriptionTextStyle?: StyleProp; + /** Used to apply styles specifically to the title */ + titleStyle?: ViewStyle; - /** The fill color to pass into the icon. */ - iconFill?: string; + /** Any adjustments to style when menu item is hovered or pressed */ + hoverAndPressStyle?: StyleProp>; - /** Secondary icon to display on the left side of component, right of the icon */ - secondaryIcon?: IconAsset; + /** Additional styles to style the description text below the title */ + descriptionTextStyle?: StyleProp; - /** The fill color to pass into the secondary icon. */ - secondaryIconFill?: string; + /** The fill color to pass into the icon. */ + iconFill?: string; - /** Icon Width */ - iconWidth?: number; + /** Secondary icon to display on the left side of component, right of the icon */ + secondaryIcon?: IconAsset; - /** Icon Height */ - iconHeight?: number; + /** The fill color to pass into the secondary icon. */ + secondaryIconFill?: string; - /** Any additional styles to pass to the icon container. */ - iconStyles?: StyleProp; + /** Icon Width */ + iconWidth?: number; - /** A fallback avatar icon to display when there is an error on loading avatar from remote URL. */ - fallbackIcon?: IconAsset; + /** Icon Height */ + iconHeight?: number; - /** An icon to display under the main item */ - furtherDetailsIcon?: IconAsset; + /** Any additional styles to pass to the icon container. */ + iconStyles?: StyleProp; - /** Boolean whether to display the title right icon */ - shouldShowTitleIcon?: boolean; + /** A fallback avatar icon to display when there is an error on loading avatar from remote URL. */ + fallbackIcon?: IconAsset; - /** Icon to display at right side of title */ - titleIcon?: IconAsset; + /** An icon to display under the main item */ + furtherDetailsIcon?: IconAsset; - /** Boolean whether to display the right icon */ - shouldShowRightIcon?: boolean; + /** Boolean whether to display the title right icon */ + shouldShowTitleIcon?: boolean; - /** Overrides the icon for shouldShowRightIcon */ - iconRight?: IconAsset; + /** Icon to display at right side of title */ + titleIcon?: IconAsset; - /** Should render component on the right */ - shouldShowRightComponent?: boolean; + /** Boolean whether to display the right icon */ + shouldShowRightIcon?: boolean; - /** Component to be displayed on the right */ - rightComponent?: ReactNode; + /** Overrides the icon for shouldShowRightIcon */ + iconRight?: IconAsset; - /** A description text to show under the title */ - description?: string; + /** Should render component on the right */ + shouldShowRightComponent?: boolean; - /** Should the description be shown above the title (instead of the other way around) */ - shouldShowDescriptionOnTop?: boolean; + /** Component to be displayed on the right */ + rightComponent?: ReactNode; - /** Error to display below the title */ - error?: string; + /** A description text to show under the title */ + description?: string; - /** Error to display at the bottom of the component */ - errorText?: string; + /** Should the description be shown above the title (instead of the other way around) */ + shouldShowDescriptionOnTop?: boolean; - /** A boolean flag that gives the icon a green fill if true */ - success?: boolean; + /** Error to display below the title */ + error?: string; - /** Whether item is focused or active */ - focused?: boolean; + /** Error to display at the bottom of the component */ + errorText?: string; - /** Should we disable this menu item? */ - disabled?: boolean; + /** A boolean flag that gives the icon a green fill if true */ + success?: boolean; - /** Text that appears above the title */ - label?: string; + /** Whether item is focused or active */ + focused?: boolean; - /** Label to be displayed on the right */ - rightLabel?: string; + /** Should we disable this menu item? */ + disabled?: boolean; - /** Text to display for the item */ - title?: string; + /** Text that appears above the title */ + label?: string; - /** A right-aligned subtitle for this menu option */ - subtitle?: string | number; + /** Label to be displayed on the right */ + rightLabel?: string; - /** Should the title show with normal font weight (not bold) */ - shouldShowBasicTitle?: boolean; + /** Text to display for the item */ + title?: string; - /** Should we make this selectable with a checkbox */ - shouldShowSelectedState?: boolean; + /** A right-aligned subtitle for this menu option */ + subtitle?: string | number; - /** Whether this item is selected */ - isSelected?: boolean; + /** Should the title show with normal font weight (not bold) */ + shouldShowBasicTitle?: boolean; - /** Prop to identify if we should load avatars vertically instead of diagonally */ - shouldStackHorizontally?: boolean; + /** Should we make this selectable with a checkbox */ + shouldShowSelectedState?: boolean; - /** Prop to represent the size of the avatar images to be shown */ - avatarSize?: (typeof CONST.AVATAR_SIZE)[keyof typeof CONST.AVATAR_SIZE]; + /** Whether this item is selected */ + isSelected?: boolean; - /** Avatars to show on the right of the menu item */ - floatRightAvatars?: IconType[]; + /** Prop to identify if we should load avatars vertically instead of diagonally */ + shouldStackHorizontally?: boolean; - /** Prop to represent the size of the float right avatar images to be shown */ - floatRightAvatarSize?: ValueOf; + /** Prop to represent the size of the avatar images to be shown */ + avatarSize?: (typeof CONST.AVATAR_SIZE)[keyof typeof CONST.AVATAR_SIZE]; - /** Affects avatar size */ - viewMode?: ValueOf; + /** Avatars to show on the right of the menu item */ + floatRightAvatars?: IconType[]; - /** Used to truncate the text with an ellipsis after computing the text layout */ - numberOfLinesTitle?: number; + /** Prop to represent the size of the float right avatar images to be shown */ + floatRightAvatarSize?: ValueOf; - /** Whether we should use small avatar subscript sizing the for menu item */ - isSmallAvatarSubscriptMenu?: boolean; + /** Affects avatar size */ + viewMode?: ValueOf; - /** The type of brick road indicator to show. */ - brickRoadIndicator?: ValueOf; + /** Used to truncate the text with an ellipsis after computing the text layout */ + numberOfLinesTitle?: number; - /** Should render the content in HTML format */ - shouldRenderAsHTML?: boolean; + /** Whether we should use small avatar subscript sizing the for menu item */ + isSmallAvatarSubscriptMenu?: boolean; - /** Should we grey out the menu item when it is disabled? */ - shouldGreyOutWhenDisabled?: boolean; + /** The type of brick road indicator to show. */ + brickRoadIndicator?: ValueOf; - /** The action accept for anonymous user or not */ - isAnonymousAction?: boolean; + /** Should render the content in HTML format */ + shouldRenderAsHTML?: boolean; - /** Flag to indicate whether or not text selection should be disabled from long-pressing the menu item. */ - shouldBlockSelection?: boolean; + /** Should we grey out the menu item when it is disabled? */ + shouldGreyOutWhenDisabled?: boolean; - /** Whether should render title as HTML or as Text */ - shouldParseTitle?: false; + /** The action accept for anonymous user or not */ + isAnonymousAction?: boolean; - /** Should check anonymous user in onPress function */ - shouldCheckActionAllowedOnPress?: boolean; + /** Flag to indicate whether or not text selection should be disabled from long-pressing the menu item. */ + shouldBlockSelection?: boolean; - /** Text to display under the main item */ - furtherDetails?: string; + /** Whether should render title as HTML or as Text */ + shouldParseTitle?: false; - /** The function that should be called when this component is LongPressed or right-clicked. */ - onSecondaryInteraction?: () => void; + /** Should check anonymous user in onPress function */ + shouldCheckActionAllowedOnPress?: boolean; - /** Array of objects that map display names to their corresponding tooltip */ - titleWithTooltips?: DisplayNameWithTooltip[]; + /** Text to display under the main item */ + furtherDetails?: string; - /** Icon should be displayed in its own color */ - displayInDefaultIconColor?: boolean; + /** The function that should be called when this component is LongPressed or right-clicked. */ + onSecondaryInteraction?: () => void; - /** Determines how the icon should be resized to fit its container */ - contentFit?: ImageContentFit; - }; + /** Array of objects that map display names to their corresponding tooltip */ + titleWithTooltips?: DisplayNameWithTooltip[]; + + /** Icon should be displayed in its own color */ + displayInDefaultIconColor?: boolean; + + /** Determines how the icon should be resized to fit its container */ + contentFit?: ImageContentFit; +}; function MenuItem( { From 66cb0155b8a5f5cec8dd3bfb9431d93e0f6f066e Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Tue, 2 Jan 2024 12:36:19 +0100 Subject: [PATCH 6/7] remove unnecessary eslint disable --- src/components/ContextMenuItem.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/ContextMenuItem.tsx b/src/components/ContextMenuItem.tsx index 0975794f1e45..4a47221b3af8 100644 --- a/src/components/ContextMenuItem.tsx +++ b/src/components/ContextMenuItem.tsx @@ -59,7 +59,6 @@ function ContextMenuItem( // We only set the success state when we have icon or text to represent the success state // We may want to replace this check by checking the Result from OnPress Callback in future. - // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing if (!!successIcon || successText) { setThrottledButtonInactive(); } From 934daf817eff1c5219f31c42c4aba8a8d2b81f9a Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Wed, 3 Jan 2024 08:58:19 +0100 Subject: [PATCH 7/7] change icon type --- src/components/ContextMenuItem.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/ContextMenuItem.tsx b/src/components/ContextMenuItem.tsx index 4a47221b3af8..5cbc5b8179c3 100644 --- a/src/components/ContextMenuItem.tsx +++ b/src/components/ContextMenuItem.tsx @@ -1,23 +1,23 @@ import React, {ForwardedRef, forwardRef, useImperativeHandle} from 'react'; -import {SvgProps} from 'react-native-svg'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; import useThrottledButtonState from '@hooks/useThrottledButtonState'; import useWindowDimensions from '@hooks/useWindowDimensions'; import getButtonState from '@libs/getButtonState'; +import IconAsset from '@src/types/utils/IconAsset'; import BaseMiniContextMenuItem from './BaseMiniContextMenuItem'; import Icon from './Icon'; import MenuItem from './MenuItem'; type ContextMenuItemProps = { /** Icon Component */ - icon: React.FC; + icon: IconAsset; /** Text to display */ text: string; /** Icon to show when interaction was successful */ - successIcon?: React.FC; + successIcon?: IconAsset; /** Text to show when interaction was successful */ successText?: string;