From e46b6077e3382a06fee1c3f1e84fb59ef9b0a3b0 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Thu, 12 Sep 2024 16:53:57 +0700 Subject: [PATCH 01/24] use PopoverMenu for account switcher modal --- src/CONST.ts | 4 ++ src/components/AccountSwitcher.tsx | 57 +++++++++-------- src/components/PopoverMenu.tsx | 98 ++++++++++++++++-------------- 3 files changed, 88 insertions(+), 71 deletions(-) diff --git a/src/CONST.ts b/src/CONST.ts index 43206ed354d1..b5f2523f364a 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -185,6 +185,10 @@ const CONST = { IN: 'in', OUT: 'out', }, + POPOVER_ACCOUNT_SWITCHER_POSITION: { + horizontal: 12, + vertical: 80, + }, // Multiplier for gyroscope animation in order to make it a bit more subtle ANIMATION_GYROSCOPE_VALUE: 0.4, BACKGROUND_IMAGE_TRANSITION_DURATION: 1000, diff --git a/src/components/AccountSwitcher.tsx b/src/components/AccountSwitcher.tsx index a9e223e56632..5e5d91fb590b 100644 --- a/src/components/AccountSwitcher.tsx +++ b/src/components/AccountSwitcher.tsx @@ -9,6 +9,7 @@ import usePermissions from '@hooks/usePermissions'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; +import useWindowDimensions from '@hooks/useWindowDimensions'; import {clearDelegatorErrors, connect, disconnect} from '@libs/actions/Delegate'; import * as ErrorUtils from '@libs/ErrorUtils'; import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; @@ -22,10 +23,8 @@ import Avatar from './Avatar'; import ConfirmModal from './ConfirmModal'; import Icon from './Icon'; import * as Expensicons from './Icon/Expensicons'; -import type {MenuItemProps} from './MenuItem'; -import MenuItemList from './MenuItemList'; -import type {MenuItemWithLink} from './MenuItemList'; -import Popover from './Popover'; +import type {PopoverMenuItem} from './PopoverMenu'; +import PopoverMenu from './PopoverMenu'; import {PressableWithFeedback} from './Pressable'; import Text from './Text'; @@ -38,7 +37,8 @@ function AccountSwitcher() { const {canUseNewDotCopilot} = usePermissions(); const {shouldUseNarrowLayout} = useResponsiveLayout(); const [account] = useOnyx(ONYXKEYS.ACCOUNT); - const buttonRef = useRef(null); + const buttonRef = useRef(null); + const {windowHeight} = useWindowDimensions(); const [shouldShowDelegatorMenu, setShouldShowDelegatorMenu] = useState(false); const [shouldShowOfflineModal, setShouldShowOfflineModal] = useState(false); @@ -47,31 +47,30 @@ function AccountSwitcher() { const isActingAsDelegate = !!account?.delegatedAccess?.delegate ?? false; const canSwitchAccounts = canUseNewDotCopilot && (delegators.length > 0 || isActingAsDelegate); - const createBaseMenuItem = (personalDetails: PersonalDetails | undefined, errors?: Errors, additionalProps: MenuItemWithLink = {}): MenuItemWithLink => { + const createBaseMenuItem = (personalDetails: PersonalDetails | undefined, errors?: Errors, additionalProps: Partial = {}): PopoverMenuItem => { const error = Object.values(errors ?? {})[0] ?? ''; return { - title: personalDetails?.displayName ?? personalDetails?.login, + text: personalDetails?.displayName ?? personalDetails?.login ?? '', description: Str.removeSMSDomain(personalDetails?.login ?? ''), avatarID: personalDetails?.accountID ?? -1, icon: personalDetails?.avatar ?? '', - iconType: CONST.ICON_TYPE_AVATAR, outerWrapperStyle: shouldUseNarrowLayout ? {} : styles.accountSwitcherPopover, numberOfLinesDescription: 1, errorText: error ?? '', shouldShowRedDotIndicator: !!error, errorTextStyle: styles.mt2, ...additionalProps, + iconType: CONST.ICON_TYPE_AVATAR, }; }; - const menuItems = (): MenuItemProps[] => { + const menuItems = (): PopoverMenuItem[] => { const currentUserMenuItem = createBaseMenuItem(currentUserPersonalDetails, undefined, { wrapperStyle: [styles.buttonDefaultBG], focused: true, shouldShowRightIcon: true, iconRight: Expensicons.Checkmark, success: true, - key: `${currentUserPersonalDetails?.login}-current`, }); if (isActingAsDelegate) { @@ -87,34 +86,33 @@ function AccountSwitcher() { return [ createBaseMenuItem(delegatePersonalDetails, error, { - onPress: () => { + onSelected: () => { if (isOffline) { Modal.close(() => setShouldShowOfflineModal(true)); return; } disconnect(); }, - key: `${delegateEmail}-delegate`, + isSelected: true, }), currentUserMenuItem, ]; } - const delegatorMenuItems: MenuItemProps[] = delegators + const delegatorMenuItems: PopoverMenuItem[] = delegators .filter(({email}) => email !== currentUserPersonalDetails.login) - .map(({email, role, errorFields}, index) => { + .map(({email, role, errorFields}) => { const error = ErrorUtils.getLatestErrorField({errorFields}, 'connect'); const personalDetails = PersonalDetailsUtils.getPersonalDetailByEmail(email); return createBaseMenuItem(personalDetails, error, { badgeText: translate('delegate.role', role), - onPress: () => { + onSelected: () => { if (isOffline) { Modal.close(() => setShouldShowOfflineModal(true)); return; } connect(email); }, - key: `${email}-${index}`, }); }); @@ -170,23 +168,28 @@ function AccountSwitcher() { {canSwitchAccounts && ( - { setShouldShowDelegatorMenu(false); clearDelegatorErrors(); }} anchorRef={buttonRef} - anchorPosition={styles.accountSwitcherAnchorPosition} - > - - {translate('delegate.switchAccount')} - - - + anchorPosition={CONST.POPOVER_ACCOUNT_SWITCHER_POSITION} + anchorAlignment={{ + horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, + vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, + }} + menuItems={menuItems()} + headerText={translate('delegate.switchAccount')} + onItemSelected={(item) => { + if (!item?.onSelected) { + return; + } + item.onSelected(); + }} + containerStyle={{maxHeight: windowHeight / 2}} + /> )} & { /** Whether to show the selected option checkmark */ shouldShowSelectedItemCheck?: boolean; + + /** The style of content container which wraps all child views */ + containerStyle?: StyleProp; }; function PopoverMenu({ @@ -122,6 +127,7 @@ function PopoverMenu({ shouldEnableNewFocusManagement, restoreFocusType, shouldShowSelectedItemCheck = false, + containerStyle, }: PopoverMenuProps) { const styles = useThemeStyles(); const theme = useTheme(); @@ -247,52 +253,56 @@ function PopoverMenu({ restoreFocusType={restoreFocusType} > - + {renderHeaderText()} {enteredSubMenuIndexes.length > 0 && renderBackButtonItem()} - {currentMenuItems.map((item, menuIndex) => ( - selectItem(menuIndex)} - focused={focusedIndex === menuIndex} - displayInDefaultIconColor={item.displayInDefaultIconColor} - shouldShowRightIcon={item.shouldShowRightIcon} - iconRight={item.iconRight} - shouldPutLeftPaddingWhenNoIcon={item.shouldPutLeftPaddingWhenNoIcon} - label={item.label} - style={{backgroundColor: item.isSelected ? theme.activeComponentBG : undefined}} - isLabelHoverable={item.isLabelHoverable} - floatRightAvatars={item.floatRightAvatars} - floatRightAvatarSize={item.floatRightAvatarSize} - shouldShowSubscriptRightAvatar={item.shouldShowSubscriptRightAvatar} - disabled={item.disabled} - onFocus={() => setFocusedIndex(menuIndex)} - success={item.success} - containerStyle={item.containerStyle} - shouldRenderTooltip={item.shouldRenderTooltip} - tooltipAnchorAlignment={item.tooltipAnchorAlignment} - tooltipShiftHorizontal={item.tooltipShiftHorizontal} - tooltipShiftVertical={item.tooltipShiftVertical} - tooltipWrapperStyle={item.tooltipWrapperStyle} - renderTooltipContent={item.renderTooltipContent} - numberOfLinesTitle={item.numberOfLinesTitle} - interactive={item.interactive} - isSelected={item.isSelected} - badgeText={item.badgeText} - /> - ))} + + {currentMenuItems.map((item, menuIndex) => ( + selectItem(menuIndex)} + focused={focusedIndex === menuIndex} + displayInDefaultIconColor={item.displayInDefaultIconColor} + shouldShowRightIcon={item.shouldShowRightIcon} + iconRight={item.iconRight} + shouldPutLeftPaddingWhenNoIcon={item.shouldPutLeftPaddingWhenNoIcon} + label={item.label} + style={{backgroundColor: item.isSelected ? theme.activeComponentBG : undefined}} + isLabelHoverable={item.isLabelHoverable} + floatRightAvatars={item.floatRightAvatars} + floatRightAvatarSize={item.floatRightAvatarSize} + shouldShowSubscriptRightAvatar={item.shouldShowSubscriptRightAvatar} + disabled={item.disabled} + onFocus={() => setFocusedIndex(menuIndex)} + success={item.success} + containerStyle={item.containerStyle} + shouldRenderTooltip={item.shouldRenderTooltip} + tooltipAnchorAlignment={item.tooltipAnchorAlignment} + tooltipShiftHorizontal={item.tooltipShiftHorizontal} + tooltipShiftVertical={item.tooltipShiftVertical} + tooltipWrapperStyle={item.tooltipWrapperStyle} + renderTooltipContent={item.renderTooltipContent} + numberOfLinesTitle={item.numberOfLinesTitle} + interactive={item.interactive} + isSelected={item.isSelected} + badgeText={item.badgeText} + avatarID={item.avatarID} + iconType={item.iconType} + /> + ))} + From 7069e8c273c929539635b87ab63fd29a19743074 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Thu, 12 Sep 2024 17:03:27 +0700 Subject: [PATCH 02/24] remove unnecessary change --- src/components/AccountSwitcher.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/AccountSwitcher.tsx b/src/components/AccountSwitcher.tsx index 5e5d91fb590b..9ff96859a466 100644 --- a/src/components/AccountSwitcher.tsx +++ b/src/components/AccountSwitcher.tsx @@ -37,7 +37,7 @@ function AccountSwitcher() { const {canUseNewDotCopilot} = usePermissions(); const {shouldUseNarrowLayout} = useResponsiveLayout(); const [account] = useOnyx(ONYXKEYS.ACCOUNT); - const buttonRef = useRef(null); + const buttonRef = useRef(null); const {windowHeight} = useWindowDimensions(); const [shouldShowDelegatorMenu, setShouldShowDelegatorMenu] = useState(false); From eb9e18b192baaef23a46e9056ef9102198d6a638 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Thu, 12 Sep 2024 17:38:45 +0700 Subject: [PATCH 03/24] fix ts error --- src/components/PopoverMenu.tsx | 64 ++++++++++------------------------ 1 file changed, 19 insertions(+), 45 deletions(-) diff --git a/src/components/PopoverMenu.tsx b/src/components/PopoverMenu.tsx index 48ca46491839..9be6f1a4c46e 100644 --- a/src/components/PopoverMenu.tsx +++ b/src/components/PopoverMenu.tsx @@ -257,51 +257,25 @@ function PopoverMenu({ {renderHeaderText()} {enteredSubMenuIndexes.length > 0 && renderBackButtonItem()} - {currentMenuItems.map((item, menuIndex) => ( - selectItem(menuIndex)} - focused={focusedIndex === menuIndex} - displayInDefaultIconColor={item.displayInDefaultIconColor} - shouldShowRightIcon={item.shouldShowRightIcon} - iconRight={item.iconRight} - shouldPutLeftPaddingWhenNoIcon={item.shouldPutLeftPaddingWhenNoIcon} - label={item.label} - style={{backgroundColor: item.isSelected ? theme.activeComponentBG : undefined}} - isLabelHoverable={item.isLabelHoverable} - floatRightAvatars={item.floatRightAvatars} - floatRightAvatarSize={item.floatRightAvatarSize} - shouldShowSubscriptRightAvatar={item.shouldShowSubscriptRightAvatar} - disabled={item.disabled} - onFocus={() => setFocusedIndex(menuIndex)} - success={item.success} - containerStyle={item.containerStyle} - shouldRenderTooltip={item.shouldRenderTooltip} - tooltipAnchorAlignment={item.tooltipAnchorAlignment} - tooltipShiftHorizontal={item.tooltipShiftHorizontal} - tooltipShiftVertical={item.tooltipShiftVertical} - tooltipWrapperStyle={item.tooltipWrapperStyle} - renderTooltipContent={item.renderTooltipContent} - numberOfLinesTitle={item.numberOfLinesTitle} - interactive={item.interactive} - isSelected={item.isSelected} - badgeText={item.badgeText} - avatarID={item.avatarID} - iconType={item.iconType} - /> - ))} + {currentMenuItems.map((item, menuIndex) => { + const {text, onSelected, subMenuItems, shouldCallAfterModalHide, ...menuItemProps} = item; + return ( + selectItem(menuIndex)} + focused={focusedIndex === menuIndex} + shouldShowSelectedItemCheck={shouldShowSelectedItemCheck} + shouldCheckActionAllowedOnPress={false} + onFocus={() => setFocusedIndex(menuIndex)} + style={{backgroundColor: item.isSelected ? theme.activeComponentBG : undefined}} + titleStyle={StyleSheet.flatten([styles.flex1, item.titleStyle])} + // eslint-disable-next-line react/jsx-props-no-spreading + {...menuItemProps} + /> + ); + })} From de3bf0ff512af6006ea3e0f891add781229d6040 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Fri, 13 Sep 2024 18:31:05 +0700 Subject: [PATCH 04/24] fix style bug and add shouldUseScrollView prop --- src/components/AccountSwitcher.tsx | 13 ++++++++----- src/components/PopoverMenu.tsx | 11 ++++++++--- 2 files changed, 16 insertions(+), 8 deletions(-) diff --git a/src/components/AccountSwitcher.tsx b/src/components/AccountSwitcher.tsx index 9ff96859a466..7b1cbd0553bc 100644 --- a/src/components/AccountSwitcher.tsx +++ b/src/components/AccountSwitcher.tsx @@ -47,7 +47,11 @@ function AccountSwitcher() { const isActingAsDelegate = !!account?.delegatedAccess?.delegate ?? false; const canSwitchAccounts = canUseNewDotCopilot && (delegators.length > 0 || isActingAsDelegate); - const createBaseMenuItem = (personalDetails: PersonalDetails | undefined, errors?: Errors, additionalProps: Partial = {}): PopoverMenuItem => { + const createBaseMenuItem = ( + personalDetails: PersonalDetails | undefined, + errors?: Errors, + additionalProps: Partial> = {}, + ): PopoverMenuItem => { const error = Object.values(errors ?? {})[0] ?? ''; return { text: personalDetails?.displayName ?? personalDetails?.login ?? '', @@ -66,11 +70,10 @@ function AccountSwitcher() { const menuItems = (): PopoverMenuItem[] => { const currentUserMenuItem = createBaseMenuItem(currentUserPersonalDetails, undefined, { - wrapperStyle: [styles.buttonDefaultBG], - focused: true, shouldShowRightIcon: true, iconRight: Expensicons.Checkmark, success: true, + isSelected: true, }); if (isActingAsDelegate) { @@ -93,7 +96,6 @@ function AccountSwitcher() { } disconnect(); }, - isSelected: true, }), currentUserMenuItem, ]; @@ -188,7 +190,8 @@ function AccountSwitcher() { } item.onSelected(); }} - containerStyle={{maxHeight: windowHeight / 2}} + containerStyle={{maxHeight: windowHeight / 2, width: 'fit-content'}} + shouldUseScrollView /> )} & { /** The style of content container which wraps all child views */ containerStyle?: StyleProp; + + /** Whether we should wrap the list item in a scroll view */ + shouldUseScrollView?: boolean; }; function PopoverMenu({ @@ -128,6 +131,7 @@ function PopoverMenu({ restoreFocusType, shouldShowSelectedItemCheck = false, containerStyle, + shouldUseScrollView = false, }: PopoverMenuProps) { const styles = useThemeStyles(); const theme = useTheme(); @@ -138,6 +142,7 @@ function PopoverMenu({ const [enteredSubMenuIndexes, setEnteredSubMenuIndexes] = useState(CONST.EMPTY_ARRAY); const [focusedIndex, setFocusedIndex] = useArrowKeyFocusManager({initialFocusedIndex: currentMenuItemsFocusedIndex, maxIndex: currentMenuItems.length - 1, isActive: isVisible}); + const WrapComponent = shouldUseScrollView ? ScrollView : View; const selectItem = (index: number) => { const selectedItem = currentMenuItems[index]; @@ -256,7 +261,7 @@ function PopoverMenu({ {renderHeaderText()} {enteredSubMenuIndexes.length > 0 && renderBackButtonItem()} - + {currentMenuItems.map((item, menuIndex) => { const {text, onSelected, subMenuItems, shouldCallAfterModalHide, ...menuItemProps} = item; return ( @@ -269,14 +274,14 @@ function PopoverMenu({ shouldShowSelectedItemCheck={shouldShowSelectedItemCheck} shouldCheckActionAllowedOnPress={false} onFocus={() => setFocusedIndex(menuIndex)} - style={{backgroundColor: item.isSelected ? theme.activeComponentBG : undefined}} + style={{backgroundColor: focusedIndex === menuIndex ? theme.activeComponentBG : undefined}} titleStyle={StyleSheet.flatten([styles.flex1, item.titleStyle])} // eslint-disable-next-line react/jsx-props-no-spreading {...menuItemProps} /> ); })} - + From 1a5aaa779b862a8b12d0553500920d1184ebfa88 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Fri, 13 Sep 2024 18:32:54 +0700 Subject: [PATCH 05/24] move iconType to above --- src/components/AccountSwitcher.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/AccountSwitcher.tsx b/src/components/AccountSwitcher.tsx index 7b1cbd0553bc..44ae090eab3b 100644 --- a/src/components/AccountSwitcher.tsx +++ b/src/components/AccountSwitcher.tsx @@ -58,13 +58,13 @@ function AccountSwitcher() { description: Str.removeSMSDomain(personalDetails?.login ?? ''), avatarID: personalDetails?.accountID ?? -1, icon: personalDetails?.avatar ?? '', + iconType: CONST.ICON_TYPE_AVATAR, outerWrapperStyle: shouldUseNarrowLayout ? {} : styles.accountSwitcherPopover, numberOfLinesDescription: 1, errorText: error ?? '', shouldShowRedDotIndicator: !!error, errorTextStyle: styles.mt2, ...additionalProps, - iconType: CONST.ICON_TYPE_AVATAR, }; }; From 5be7a191c00000159c336a33b39f87450391d6ab Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Mon, 16 Sep 2024 16:13:46 +0700 Subject: [PATCH 06/24] resolve conflict --- src/components/PopoverMenu.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/components/PopoverMenu.tsx b/src/components/PopoverMenu.tsx index 89a379e033d9..77f8c301d458 100644 --- a/src/components/PopoverMenu.tsx +++ b/src/components/PopoverMenu.tsx @@ -1,13 +1,8 @@ import lodashIsEqual from 'lodash/isEqual'; import type {RefObject} from 'react'; import React, {Fragment, useLayoutEffect, useState} from 'react'; -<<<<<<< HEAD import {StyleSheet, View} from 'react-native'; import type {StyleProp, ViewStyle} from 'react-native'; -======= -import {StyleSheet} from 'react-native'; -import type {View} from 'react-native'; ->>>>>>> main import type {ModalProps} from 'react-native-modal'; import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager'; import useKeyboardShortcut from '@hooks/useKeyboardShortcut'; From 70aa7f3750349b3ced9c3ecd5d379cbb1c78098b Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Wed, 18 Sep 2024 11:42:21 +0700 Subject: [PATCH 07/24] fix header styles --- src/components/PopoverMenu.tsx | 10 +++++++--- src/pages/Search/SearchTypeMenuNarrow.tsx | 1 + 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/components/PopoverMenu.tsx b/src/components/PopoverMenu.tsx index 77f8c301d458..4f4b3407edfc 100644 --- a/src/components/PopoverMenu.tsx +++ b/src/components/PopoverMenu.tsx @@ -2,7 +2,7 @@ import lodashIsEqual from 'lodash/isEqual'; import type {RefObject} from 'react'; import React, {Fragment, useLayoutEffect, useState} from 'react'; import {StyleSheet, View} from 'react-native'; -import type {StyleProp, ViewStyle} from 'react-native'; +import type {StyleProp, TextStyle, ViewStyle} from 'react-native'; import type {ModalProps} from 'react-native-modal'; import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager'; import useKeyboardShortcut from '@hooks/useKeyboardShortcut'; @@ -107,6 +107,9 @@ type PopoverMenuProps = Partial & { /** The style of content container which wraps all child views */ containerStyle?: StyleProp; + /** Used to apply styles specifically to the header text */ + headerStyle?: TextStyle; + /** Whether we should wrap the list item in a scroll view */ shouldUseScrollView?: boolean; }; @@ -135,6 +138,7 @@ function PopoverMenu({ restoreFocusType, shouldShowSelectedItemCheck = false, containerStyle, + headerStyle, shouldUseScrollView = false, }: PopoverMenuProps) { const styles = useThemeStyles(); @@ -212,7 +216,7 @@ function PopoverMenu({ if (!headerText || enteredSubMenuIndexes.length !== 0) { return; } - return {headerText}; + return {headerText}; }; useKeyboardShortcut( @@ -283,7 +287,7 @@ function PopoverMenu({ shouldShowSelectedItemCheck={shouldShowSelectedItemCheck} shouldCheckActionAllowedOnPress={false} onFocus={() => setFocusedIndex(menuIndex)} - style={{backgroundColor: focusedIndex === menuIndex ? theme.activeComponentBG : undefined}} + style={{backgroundColor: item.isSelected ? theme.activeComponentBG : undefined}} titleStyle={StyleSheet.flatten([styles.flex1, item.titleStyle])} // eslint-disable-next-line react/jsx-props-no-spreading {...menuItemProps} diff --git a/src/pages/Search/SearchTypeMenuNarrow.tsx b/src/pages/Search/SearchTypeMenuNarrow.tsx index 0158a15bfc41..83a5c3189a10 100644 --- a/src/pages/Search/SearchTypeMenuNarrow.tsx +++ b/src/pages/Search/SearchTypeMenuNarrow.tsx @@ -178,6 +178,7 @@ function SearchTypeMenuNarrow({typeMenuItems, activeItemIndex, queryJSON, title, onClose={closeMenu} onItemSelected={closeMenu} anchorRef={buttonRef} + shouldUseScrollView /> From 4002bc1e7ac69e5b0cf2e8a8c39e505dd9e0159f Mon Sep 17 00:00:00 2001 From: nkdengineer <161821005+nkdengineer@users.noreply.github.com> Date: Wed, 18 Sep 2024 21:47:55 +0700 Subject: [PATCH 08/24] Update src/components/PopoverMenu.tsx Co-authored-by: Abdelhafidh Belalia <16493223+s77rt@users.noreply.github.com> --- src/components/PopoverMenu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/PopoverMenu.tsx b/src/components/PopoverMenu.tsx index 4f4b3407edfc..361fa45eddf0 100644 --- a/src/components/PopoverMenu.tsx +++ b/src/components/PopoverMenu.tsx @@ -105,7 +105,7 @@ type PopoverMenuProps = Partial & { shouldShowSelectedItemCheck?: boolean; /** The style of content container which wraps all child views */ - containerStyle?: StyleProp; + containerStyles?: StyleProp; /** Used to apply styles specifically to the header text */ headerStyle?: TextStyle; From 2d5c67822ba92607c7f8c7417c2ffc69cb5d3581 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Wed, 18 Sep 2024 21:58:54 +0700 Subject: [PATCH 09/24] add headerStyles --- src/components/AccountSwitcher.tsx | 3 ++- src/components/PopoverMenu.tsx | 10 +++++----- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/components/AccountSwitcher.tsx b/src/components/AccountSwitcher.tsx index 44ae090eab3b..cc6313d64811 100644 --- a/src/components/AccountSwitcher.tsx +++ b/src/components/AccountSwitcher.tsx @@ -190,7 +190,8 @@ function AccountSwitcher() { } item.onSelected(); }} - containerStyle={{maxHeight: windowHeight / 2, width: 'fit-content'}} + containerStyles={{maxHeight: windowHeight / 2, width: 'fit-content', maxWidth: '100%'}} + headerStyles={styles.pt0} shouldUseScrollView /> )} diff --git a/src/components/PopoverMenu.tsx b/src/components/PopoverMenu.tsx index 361fa45eddf0..f68d5387a8f1 100644 --- a/src/components/PopoverMenu.tsx +++ b/src/components/PopoverMenu.tsx @@ -108,7 +108,7 @@ type PopoverMenuProps = Partial & { containerStyles?: StyleProp; /** Used to apply styles specifically to the header text */ - headerStyle?: TextStyle; + headerStyles?: StyleProp; /** Whether we should wrap the list item in a scroll view */ shouldUseScrollView?: boolean; @@ -137,8 +137,8 @@ function PopoverMenu({ shouldEnableNewFocusManagement, restoreFocusType, shouldShowSelectedItemCheck = false, - containerStyle, - headerStyle, + containerStyles, + headerStyles, shouldUseScrollView = false, }: PopoverMenuProps) { const styles = useThemeStyles(); @@ -216,7 +216,7 @@ function PopoverMenu({ if (!headerText || enteredSubMenuIndexes.length !== 0) { return; } - return {headerText}; + return {headerText}; }; useKeyboardShortcut( @@ -271,7 +271,7 @@ function PopoverMenu({ restoreFocusType={restoreFocusType} > - + {renderHeaderText()} {enteredSubMenuIndexes.length > 0 && renderBackButtonItem()} From 584469a8ad68bc365ce5422fdb6577cb616c0aab Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Wed, 18 Sep 2024 23:47:36 +0700 Subject: [PATCH 10/24] remove unused style --- src/styles/index.ts | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/styles/index.ts b/src/styles/index.ts index ad6c0552aa29..716777f3f748 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -5198,11 +5198,6 @@ const styles = (theme: ThemeColors) => accountSwitcherPopover: { width: variables.sideBarWidth - 19, }, - - accountSwitcherAnchorPosition: { - top: 80, - left: 12, - }, } satisfies Styles); type ThemeStyles = ReturnType; From 3ac507c840c1422dfb2eb1351634bf47b85af9cf Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Fri, 20 Sep 2024 21:41:01 +0700 Subject: [PATCH 11/24] move the padding bottom to the scroll view --- src/components/AccountSwitcher.tsx | 2 ++ src/components/PopoverMenu.tsx | 11 ++++++++++- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/src/components/AccountSwitcher.tsx b/src/components/AccountSwitcher.tsx index 013a26bebc0b..d8e588e581c7 100644 --- a/src/components/AccountSwitcher.tsx +++ b/src/components/AccountSwitcher.tsx @@ -203,6 +203,8 @@ function AccountSwitcher() { }} containerStyles={{maxHeight: windowHeight / 2, width: 'fit-content', maxWidth: '100%'}} headerStyles={styles.pt0} + innerContainerStyle={styles.pb0} + scrollContainerStyle={styles.pb4} shouldUseScrollView /> )} diff --git a/src/components/PopoverMenu.tsx b/src/components/PopoverMenu.tsx index f68d5387a8f1..d9f823d5150d 100644 --- a/src/components/PopoverMenu.tsx +++ b/src/components/PopoverMenu.tsx @@ -110,6 +110,12 @@ type PopoverMenuProps = Partial & { /** Used to apply styles specifically to the header text */ headerStyles?: StyleProp; + /** Modal container styles */ + innerContainerStyle?: ViewStyle; + + /** These styles will be applied to the scroll view content container which wraps all of the child views */ + scrollContainerStyle?: StyleProp; + /** Whether we should wrap the list item in a scroll view */ shouldUseScrollView?: boolean; }; @@ -139,6 +145,8 @@ function PopoverMenu({ shouldShowSelectedItemCheck = false, containerStyles, headerStyles, + innerContainerStyle, + scrollContainerStyle, shouldUseScrollView = false, }: PopoverMenuProps) { const styles = useThemeStyles(); @@ -269,12 +277,13 @@ function PopoverMenu({ shouldEnableNewFocusManagement={shouldEnableNewFocusManagement} useNativeDriver restoreFocusType={restoreFocusType} + innerContainerStyle={innerContainerStyle} > {renderHeaderText()} {enteredSubMenuIndexes.length > 0 && renderBackButtonItem()} - + {currentMenuItems.map((item, menuIndex) => { const {text, onSelected, subMenuItems, shouldCallAfterModalHide, ...menuItemProps} = item; return ( From 5d6c9db3b8fef136ec63b616f8fef769a0772fd0 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Fri, 20 Sep 2024 21:45:03 +0700 Subject: [PATCH 12/24] fix error doesn't display --- src/components/PopoverMenu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/PopoverMenu.tsx b/src/components/PopoverMenu.tsx index d9f823d5150d..345b57a2c2a4 100644 --- a/src/components/PopoverMenu.tsx +++ b/src/components/PopoverMenu.tsx @@ -315,7 +315,7 @@ PopoverMenu.displayName = 'PopoverMenu'; export default React.memo( PopoverMenu, (prevProps, nextProps) => - prevProps.menuItems.length === nextProps.menuItems.length && + prevProps.menuItems === nextProps.menuItems && prevProps.isVisible === nextProps.isVisible && lodashIsEqual(prevProps.anchorPosition, nextProps.anchorPosition) && prevProps.anchorRef === nextProps.anchorRef && From e2ee3c7b2e74f69af52a4688455ebb2e678c3105 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Mon, 23 Sep 2024 12:45:49 +0700 Subject: [PATCH 13/24] fix padding bottom style in large screen --- src/components/AccountSwitcher.tsx | 2 +- src/components/PopoverMenu.tsx | 2 +- src/libs/Permissions.ts | 1 + 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/AccountSwitcher.tsx b/src/components/AccountSwitcher.tsx index d8e588e581c7..3ef57d19a6b4 100644 --- a/src/components/AccountSwitcher.tsx +++ b/src/components/AccountSwitcher.tsx @@ -201,7 +201,7 @@ function AccountSwitcher() { } item.onSelected(); }} - containerStyles={{maxHeight: windowHeight / 2, width: 'fit-content', maxWidth: '100%'}} + containerStyles={[{maxHeight: windowHeight / 2, width: 'fit-content'}, styles.pb0, styles.mw100]} headerStyles={styles.pt0} innerContainerStyle={styles.pb0} scrollContainerStyle={styles.pb4} diff --git a/src/components/PopoverMenu.tsx b/src/components/PopoverMenu.tsx index 345b57a2c2a4..fa66cce54d7a 100644 --- a/src/components/PopoverMenu.tsx +++ b/src/components/PopoverMenu.tsx @@ -283,7 +283,7 @@ function PopoverMenu({ {renderHeaderText()} {enteredSubMenuIndexes.length > 0 && renderBackButtonItem()} - + {currentMenuItems.map((item, menuIndex) => { const {text, onSelected, subMenuItems, shouldCallAfterModalHide, ...menuItemProps} = item; return ( diff --git a/src/libs/Permissions.ts b/src/libs/Permissions.ts index 7f7e89ad3585..771c58003172 100644 --- a/src/libs/Permissions.ts +++ b/src/libs/Permissions.ts @@ -5,6 +5,7 @@ import type Beta from '@src/types/onyx/Beta'; import * as Environment from './Environment/Environment'; function canUseAllBetas(betas: OnyxEntry): boolean { + return true; return !!betas?.includes(CONST.BETAS.ALL); } From 6556abdd29687de7b0aa1b12f67880f901ee418b Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Mon, 23 Sep 2024 12:49:47 +0700 Subject: [PATCH 14/24] remove hard code --- src/libs/Permissions.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/libs/Permissions.ts b/src/libs/Permissions.ts index 771c58003172..7f7e89ad3585 100644 --- a/src/libs/Permissions.ts +++ b/src/libs/Permissions.ts @@ -5,7 +5,6 @@ import type Beta from '@src/types/onyx/Beta'; import * as Environment from './Environment/Environment'; function canUseAllBetas(betas: OnyxEntry): boolean { - return true; return !!betas?.includes(CONST.BETAS.ALL); } From 84291a0589ebdc506c47c62e8054b168d6554a86 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Tue, 24 Sep 2024 13:15:01 +0700 Subject: [PATCH 15/24] add shouldUpdateFocusedIndex prop --- src/components/AccountSwitcher.tsx | 3 ++- src/components/PopoverMenu.tsx | 13 +++++++++++-- src/styles/utils/sizing.ts | 3 +++ 3 files changed, 16 insertions(+), 3 deletions(-) diff --git a/src/components/AccountSwitcher.tsx b/src/components/AccountSwitcher.tsx index 3ef57d19a6b4..3f63f24dc532 100644 --- a/src/components/AccountSwitcher.tsx +++ b/src/components/AccountSwitcher.tsx @@ -201,11 +201,12 @@ function AccountSwitcher() { } item.onSelected(); }} - containerStyles={[{maxHeight: windowHeight / 2, width: 'fit-content'}, styles.pb0, styles.mw100]} + containerStyles={[{maxHeight: windowHeight / 2}, styles.pb0, styles.mw100, styles.wFitContent]} headerStyles={styles.pt0} innerContainerStyle={styles.pb0} scrollContainerStyle={styles.pb4} shouldUseScrollView + shouldUpdateFocusedIndex={false} /> )} & { /** Whether we should wrap the list item in a scroll view */ shouldUseScrollView?: boolean; + + /** Whether to update the focused index on a row select */ + shouldUpdateFocusedIndex?: boolean; }; function PopoverMenu({ @@ -148,6 +151,7 @@ function PopoverMenu({ innerContainerStyle, scrollContainerStyle, shouldUseScrollView = false, + shouldUpdateFocusedIndex = true, }: PopoverMenuProps) { const styles = useThemeStyles(); const theme = useTheme(); @@ -283,7 +287,7 @@ function PopoverMenu({ {renderHeaderText()} {enteredSubMenuIndexes.length > 0 && renderBackButtonItem()} - + {currentMenuItems.map((item, menuIndex) => { const {text, onSelected, subMenuItems, shouldCallAfterModalHide, ...menuItemProps} = item; return ( @@ -295,7 +299,12 @@ function PopoverMenu({ focused={focusedIndex === menuIndex} shouldShowSelectedItemCheck={shouldShowSelectedItemCheck} shouldCheckActionAllowedOnPress={false} - onFocus={() => setFocusedIndex(menuIndex)} + onFocus={() => { + if (!shouldUpdateFocusedIndex) { + return; + } + setFocusedIndex(menuIndex); + }} style={{backgroundColor: item.isSelected ? theme.activeComponentBG : undefined}} titleStyle={StyleSheet.flatten([styles.flex1, item.titleStyle])} // eslint-disable-next-line react/jsx-props-no-spreading diff --git a/src/styles/utils/sizing.ts b/src/styles/utils/sizing.ts index f4be70391eb5..6ff28213e7c8 100644 --- a/src/styles/utils/sizing.ts +++ b/src/styles/utils/sizing.ts @@ -114,4 +114,7 @@ export default { wAuto: { width: 'auto', }, + wFitContent: { + width: 'fit-content', + }, } satisfies Record; From 6820937cf595eca8279be98eff3f0dd23c87a82c Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Wed, 25 Sep 2024 18:06:52 +0700 Subject: [PATCH 16/24] fix lint --- src/components/PopoverMenu.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/PopoverMenu.tsx b/src/components/PopoverMenu.tsx index 49f844e4ad06..4184c63985d7 100644 --- a/src/components/PopoverMenu.tsx +++ b/src/components/PopoverMenu.tsx @@ -1,3 +1,4 @@ +/* eslint-disable react/jsx-props-no-spreading */ import lodashIsEqual from 'lodash/isEqual'; import type {RefObject} from 'react'; import React, {Fragment, useLayoutEffect, useState} from 'react'; @@ -287,6 +288,7 @@ function PopoverMenu({ {renderHeaderText()} {enteredSubMenuIndexes.length > 0 && renderBackButtonItem()} + {/** eslint-disable-next-line react/jsx-props-no-spreading */} {currentMenuItems.map((item, menuIndex) => { const {text, onSelected, subMenuItems, shouldCallAfterModalHide, ...menuItemProps} = item; From a58ff316ae97d733ef2ebeb7dd4012c77bdda4f0 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Wed, 25 Sep 2024 21:51:35 +0700 Subject: [PATCH 17/24] change onItemSelected as optional --- src/components/AccountSwitcher.tsx | 6 ------ src/components/PopoverMenu.tsx | 6 +++--- 2 files changed, 3 insertions(+), 9 deletions(-) diff --git a/src/components/AccountSwitcher.tsx b/src/components/AccountSwitcher.tsx index 3f63f24dc532..4d086d9e3211 100644 --- a/src/components/AccountSwitcher.tsx +++ b/src/components/AccountSwitcher.tsx @@ -195,12 +195,6 @@ function AccountSwitcher() { }} menuItems={menuItems()} headerText={translate('delegate.switchAccount')} - onItemSelected={(item) => { - if (!item?.onSelected) { - return; - } - item.onSelected(); - }} containerStyles={[{maxHeight: windowHeight / 2}, styles.pb0, styles.mw100, styles.wFitContent]} headerStyles={styles.pt0} innerContainerStyle={styles.pb0} diff --git a/src/components/PopoverMenu.tsx b/src/components/PopoverMenu.tsx index 4184c63985d7..c768739cfee9 100644 --- a/src/components/PopoverMenu.tsx +++ b/src/components/PopoverMenu.tsx @@ -64,7 +64,7 @@ type PopoverMenuProps = Partial & { isVisible: boolean; /** Callback to fire when a CreateMenu item is selected */ - onItemSelected: (selectedItem: PopoverMenuItem, index: number) => void; + onItemSelected?: (selectedItem: PopoverMenuItem, index: number) => void; /** Menu items to be rendered on the list */ menuItems: PopoverMenuItem[]; @@ -174,7 +174,7 @@ function PopoverMenu({ const selectedSubMenuItemIndex = selectedItem?.subMenuItems.findIndex((option) => option.isSelected); setFocusedIndex(selectedSubMenuItemIndex); } else if (selectedItem.shouldCallAfterModalHide && !Browser.isSafari()) { - onItemSelected(selectedItem, index); + onItemSelected?.(selectedItem, index); Modal.close( () => { selectedItem.onSelected?.(); @@ -183,7 +183,7 @@ function PopoverMenu({ selectedItem.shouldCloseAllModals, ); } else { - onItemSelected(selectedItem, index); + onItemSelected?.(selectedItem, index); selectedItem.onSelected?.(); } }; From 4fde2810542cd30ce6d7bbd72bc85b774f4fadab Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Wed, 25 Sep 2024 23:54:19 +0700 Subject: [PATCH 18/24] use lodashIsEqual --- src/components/PopoverMenu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/PopoverMenu.tsx b/src/components/PopoverMenu.tsx index c768739cfee9..285a3b93db9a 100644 --- a/src/components/PopoverMenu.tsx +++ b/src/components/PopoverMenu.tsx @@ -326,7 +326,7 @@ PopoverMenu.displayName = 'PopoverMenu'; export default React.memo( PopoverMenu, (prevProps, nextProps) => - prevProps.menuItems === nextProps.menuItems && + lodashIsEqual(prevProps.menuItems, nextProps.menuItems) && prevProps.isVisible === nextProps.isVisible && lodashIsEqual(prevProps.anchorPosition, nextProps.anchorPosition) && prevProps.anchorRef === nextProps.anchorRef && From b326494c8050600febd76ea6159922906c6ad0b9 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Fri, 27 Sep 2024 15:47:09 +0700 Subject: [PATCH 19/24] fix perf-test --- src/components/PopoverMenu.tsx | 2 +- .../AttachmentPickerWithMenuItems.tsx | 37 +++++++++++-------- 2 files changed, 23 insertions(+), 16 deletions(-) diff --git a/src/components/PopoverMenu.tsx b/src/components/PopoverMenu.tsx index cfc2c17ba8f4..149204d9351a 100644 --- a/src/components/PopoverMenu.tsx +++ b/src/components/PopoverMenu.tsx @@ -336,7 +336,7 @@ PopoverMenu.displayName = 'PopoverMenu'; export default React.memo( PopoverMenu, (prevProps, nextProps) => - lodashIsEqual(prevProps.menuItems, nextProps.menuItems) && + lodashIsEqual(prevProps.menuItems.length, nextProps.menuItems.length) && prevProps.isVisible === nextProps.isVisible && lodashIsEqual(prevProps.anchorPosition, nextProps.anchorPosition) && prevProps.anchorRef === nextProps.anchorRef && diff --git a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx index 28d985537ff5..7da6a7aac2ee 100644 --- a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx +++ b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx @@ -213,6 +213,27 @@ function AttachmentPickerWithMenuItems({ setMenuVisibility(false); }, [didScreenBecomeInactive, isMenuVisible, setMenuVisibility]); + const getMenuItems = useCallback( + (triggerAttachmentPicker: () => void) => { + return [ + ...moneyRequestOptions, + ...taskOption, + { + icon: Expensicons.Paperclip, + text: translate('reportActionCompose.addAttachment'), + onSelected: () => { + if (Browser.isSafari()) { + return; + } + triggerAttachmentPicker(); + }, + shouldCallAfterModalHide: true, + }, + ]; + }, + [moneyRequestOptions, taskOption, translate], + ); + return ( {({openPicker}) => { @@ -223,21 +244,7 @@ function AttachmentPickerWithMenuItems({ onCanceled: onCanceledAttachmentPicker, }); }; - const menuItems = [ - ...moneyRequestOptions, - ...taskOption, - { - icon: Expensicons.Paperclip, - text: translate('reportActionCompose.addAttachment'), - onSelected: () => { - if (Browser.isSafari()) { - return; - } - triggerAttachmentPicker(); - }, - shouldCallAfterModalHide: true, - }, - ]; + const menuItems = getMenuItems(triggerAttachmentPicker); return ( <> From 92d3081e35fb63ad61d1ad22969931af4833a7fa Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Mon, 30 Sep 2024 10:46:22 +0700 Subject: [PATCH 20/24] revert change --- src/components/PopoverMenu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/PopoverMenu.tsx b/src/components/PopoverMenu.tsx index 149204d9351a..cfc2c17ba8f4 100644 --- a/src/components/PopoverMenu.tsx +++ b/src/components/PopoverMenu.tsx @@ -336,7 +336,7 @@ PopoverMenu.displayName = 'PopoverMenu'; export default React.memo( PopoverMenu, (prevProps, nextProps) => - lodashIsEqual(prevProps.menuItems.length, nextProps.menuItems.length) && + lodashIsEqual(prevProps.menuItems, nextProps.menuItems) && prevProps.isVisible === nextProps.isVisible && lodashIsEqual(prevProps.anchorPosition, nextProps.anchorPosition) && prevProps.anchorRef === nextProps.anchorRef && From a6770f863e9787df01874938ab1084741b29c2ef Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Mon, 30 Sep 2024 11:10:29 +0700 Subject: [PATCH 21/24] revert change --- .../AttachmentPickerWithMenuItems.tsx | 37 ++++++++----------- 1 file changed, 15 insertions(+), 22 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx index ea1434fe0261..4fc7cc137068 100644 --- a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx +++ b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx @@ -213,27 +213,6 @@ function AttachmentPickerWithMenuItems({ setMenuVisibility(false); }, [didScreenBecomeInactive, isMenuVisible, setMenuVisibility]); - const getMenuItems = useCallback( - (triggerAttachmentPicker: () => void) => { - return [ - ...moneyRequestOptions, - ...taskOption, - { - icon: Expensicons.Paperclip, - text: translate('reportActionCompose.addAttachment'), - onSelected: () => { - if (Browser.isSafari()) { - return; - } - triggerAttachmentPicker(); - }, - shouldCallAfterModalHide: true, - }, - ]; - }, - [moneyRequestOptions, taskOption, translate], - ); - return ( {({openPicker}) => { @@ -244,7 +223,21 @@ function AttachmentPickerWithMenuItems({ onCanceled: onCanceledAttachmentPicker, }); }; - const menuItems = getMenuItems(triggerAttachmentPicker); + const menuItems = [ + ...moneyRequestOptions, + ...taskOption, + { + icon: Expensicons.Paperclip, + text: translate('reportActionCompose.addAttachment'), + onSelected: () => { + if (Browser.isSafari()) { + return; + } + triggerAttachmentPicker(); + }, + shouldCallAfterModalHide: true, + }, + ]; return ( <> From 4e20be9ded4480efde57438b7ad01ec5d54c0d3b Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Thu, 10 Oct 2024 14:59:03 +0700 Subject: [PATCH 22/24] fix perf-test --- .../AttachmentPickerWithMenuItems.tsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx index 005ca4df153a..08754a2f7e2c 100644 --- a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx +++ b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx @@ -23,6 +23,7 @@ import Navigation from '@libs/Navigation/Navigation'; import * as ReportUtils from '@libs/ReportUtils'; import * as SubscriptionUtils from '@libs/SubscriptionUtils'; import * as IOU from '@userActions/IOU'; +import * as Modal from '@userActions/Modal'; import * as Report from '@userActions/Report'; import * as Task from '@userActions/Task'; import DelegateNoAccessModal from '@src/components/DelegateNoAccessModal'; @@ -229,13 +230,6 @@ function AttachmentPickerWithMenuItems({ { icon: Expensicons.Paperclip, text: translate('reportActionCompose.addAttachment'), - onSelected: () => { - if (Browser.isSafari()) { - return; - } - triggerAttachmentPicker(); - }, - shouldCallAfterModalHide: true, }, ]; return ( @@ -322,8 +316,14 @@ function AttachmentPickerWithMenuItems({ // In order for the file picker to open dynamically, the click // function must be called from within a event handler that was initiated // by the user on Safari. - if (index === menuItems.length - 1 && Browser.isSafari()) { - triggerAttachmentPicker(); + if (index === menuItems.length - 1) { + if (Browser.isSafari()) { + triggerAttachmentPicker(); + return; + } + Modal.close(() => { + triggerAttachmentPicker(); + }); } }} anchorPosition={styles.createMenuPositionReportActionCompose(shouldUseNarrowLayout, windowHeight, windowWidth)} From e538a07beec89e8eea5bff6c89fe61402ea9601a Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Sat, 12 Oct 2024 02:37:38 +0700 Subject: [PATCH 23/24] fix small screen style --- src/components/AccountSwitcher.tsx | 2 +- src/libs/Permissions.ts | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/AccountSwitcher.tsx b/src/components/AccountSwitcher.tsx index 094ef70a350e..8ccab44a2cb9 100644 --- a/src/components/AccountSwitcher.tsx +++ b/src/components/AccountSwitcher.tsx @@ -195,7 +195,7 @@ function AccountSwitcher() { }} menuItems={menuItems()} headerText={translate('delegate.switchAccount')} - containerStyles={[{maxHeight: windowHeight / 2}, styles.pb0, styles.mw100, styles.wFitContent]} + containerStyles={[{maxHeight: windowHeight / 2}, styles.pb0, styles.mw100, shouldUseNarrowLayout ? {} : styles.wFitContent]} headerStyles={styles.pt0} innerContainerStyle={styles.pb0} scrollContainerStyle={styles.pb4} diff --git a/src/libs/Permissions.ts b/src/libs/Permissions.ts index de3afbabadc2..3210a1486428 100644 --- a/src/libs/Permissions.ts +++ b/src/libs/Permissions.ts @@ -5,6 +5,7 @@ import type Beta from '@src/types/onyx/Beta'; import * as Environment from './Environment/Environment'; function canUseAllBetas(betas: OnyxEntry): boolean { + return true; return !!betas?.includes(CONST.BETAS.ALL); } From f7ffa39fe1c7249da7a442ac1e18c1253e8d5929 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Sat, 12 Oct 2024 03:21:18 +0700 Subject: [PATCH 24/24] revert beta --- src/libs/Permissions.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/libs/Permissions.ts b/src/libs/Permissions.ts index 3210a1486428..de3afbabadc2 100644 --- a/src/libs/Permissions.ts +++ b/src/libs/Permissions.ts @@ -5,7 +5,6 @@ import type Beta from '@src/types/onyx/Beta'; import * as Environment from './Environment/Environment'; function canUseAllBetas(betas: OnyxEntry): boolean { - return true; return !!betas?.includes(CONST.BETAS.ALL); }