From 0c88e4b0e420facfd42fb414d5a4547c96fd1dcd Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 4 Jul 2024 23:06:43 +0800 Subject: [PATCH 1/6] fix onModalHide isn't called --- src/components/EmojiPicker/EmojiPicker.tsx | 7 ++----- src/libs/actions/EmojiPickerAction.ts | 2 +- .../report/ReportActionCompose/ReportActionCompose.tsx | 7 ++++++- 3 files changed, 9 insertions(+), 7 deletions(-) diff --git a/src/components/EmojiPicker/EmojiPicker.tsx b/src/components/EmojiPicker/EmojiPicker.tsx index 2be8ea4aea7a..86207361bb0f 100644 --- a/src/components/EmojiPicker/EmojiPicker.tsx +++ b/src/components/EmojiPicker/EmojiPicker.tsx @@ -40,7 +40,7 @@ function EmojiPicker({viewportOffsetTop}: EmojiPickerProps, ref: ForwardedRef {}); + const onModalHide = useRef(() => {}); const onEmojiSelected = useRef(() => {}); const activeEmoji = useRef(); const emojiSearchInput = useRef(); @@ -107,13 +107,10 @@ function EmojiPicker({viewportOffsetTop}: EmojiPickerProps, ref: ForwardedRef { - if (isNavigating) { - onModalHide.current = () => {}; - } const currOnModalHide = onModalHide.current; onModalHide.current = () => { if (currOnModalHide) { - currOnModalHide(); + currOnModalHide(!!isNavigating); } emojiPopoverAnchorRef.current = null; }; diff --git a/src/libs/actions/EmojiPickerAction.ts b/src/libs/actions/EmojiPickerAction.ts index 787f105e4939..e6123733b0e8 100644 --- a/src/libs/actions/EmojiPickerAction.ts +++ b/src/libs/actions/EmojiPickerAction.ts @@ -16,7 +16,7 @@ type EmojiPopoverAnchor = MutableRefObject void; -type OnModalHideValue = () => void; +type OnModalHideValue = (isNavigating?: boolean) => void; type EmojiPickerRef = { showEmojiPicker: ( diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx index 8dcb5e199ba1..c4e4bdd6951e 100644 --- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx +++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx @@ -480,7 +480,12 @@ function ReportActionCompose({ {DeviceCapabilities.canUseTouchScreen() && isMediumScreenWidth ? null : ( { + if (isNavigating) { + return; + } + focus(); + }} onEmojiSelected={(...args) => composerRef.current?.replaceSelectionWithText(...args)} emojiPickerID={report?.reportID} shiftVertical={emojiShiftVertical} From bb1eb9f4215f230aa9207d540956aa58ad20edc8 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 4 Jul 2024 23:06:52 +0800 Subject: [PATCH 2/6] remove freeze capture --- src/pages/home/report/ReportActionItem.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/home/report/ReportActionItem.tsx b/src/pages/home/report/ReportActionItem.tsx index 2264feddd679..d740a2a04ddc 100644 --- a/src/pages/home/report/ReportActionItem.tsx +++ b/src/pages/home/report/ReportActionItem.tsx @@ -876,7 +876,6 @@ function ReportActionItem({ accessible > From 94cea2e1fe1508f5718e4fe2a2e8c31b43686743 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Fri, 12 Jul 2024 15:38:52 +0800 Subject: [PATCH 3/6] keep action highlighted when payment method popover is visible --- src/components/ButtonWithDropdownMenu/index.tsx | 8 +++++++- src/components/PopoverMenu.tsx | 2 ++ src/components/ReportActionItem/ReportPreview.tsx | 4 ++++ src/components/SettlementButton.tsx | 4 ++++ src/pages/home/report/ReportActionItem.tsx | 5 ++++- 5 files changed, 21 insertions(+), 2 deletions(-) diff --git a/src/components/ButtonWithDropdownMenu/index.tsx b/src/components/ButtonWithDropdownMenu/index.tsx index 094c26a2b387..94ffdf7de188 100644 --- a/src/components/ButtonWithDropdownMenu/index.tsx +++ b/src/components/ButtonWithDropdownMenu/index.tsx @@ -31,6 +31,8 @@ function ButtonWithDropdownMenu({ onPress, options, onOptionSelected, + onOptionsMenuShow, + onOptionsMenuHide, enterKeyEventListenerPriority = 0, wrapperStyle, }: ButtonWithDropdownMenuProps) { @@ -136,7 +138,11 @@ function ButtonWithDropdownMenu({ {(shouldAlwaysShowDropdownMenu || options.length > 1) && popoverAnchorPosition && ( setIsMenuVisible(false)} + onClose={() => { + setIsMenuVisible(false) + onOptionsMenuHide(); + }} + onModalShow={onOptionsMenuShow} onItemSelected={() => setIsMenuVisible(false)} anchorPosition={popoverAnchorPosition} anchorRef={caretButton} diff --git a/src/components/PopoverMenu.tsx b/src/components/PopoverMenu.tsx index 0f97a3c4414f..0efc54889a3f 100644 --- a/src/components/PopoverMenu.tsx +++ b/src/components/PopoverMenu.tsx @@ -89,6 +89,7 @@ function PopoverMenu({ anchorPosition, anchorRef, onClose, + onModalShow, headerText, fromSidebarMediumScreen, anchorAlignment = { @@ -204,6 +205,7 @@ function PopoverMenu({ }} isVisible={isVisible} onModalHide={onModalHide} + onModalShow={onModalShow} animationIn={animationIn} animationOut={animationOut} animationInTiming={animationInTiming} diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx index 4a145d4e79e9..c93016b87af7 100644 --- a/src/components/ReportActionItem/ReportPreview.tsx +++ b/src/components/ReportActionItem/ReportPreview.tsx @@ -105,6 +105,8 @@ function ReportPreview({ isHovered = false, isWhisper = false, checkIfContextMenuActive = () => {}, + onPaymentOptionsShow = () => {}, + onPaymentOptionsHide = () => {}, userWallet, }: ReportPreviewProps) { const theme = useTheme(); @@ -411,6 +413,8 @@ function ReportPreview({ chatReportID={chatReportID} iouReport={iouReport} onPress={confirmPayment} + onPaymentOptionsShow={onPaymentOptionsShow} + onPaymentOptionsHide={onPaymentOptionsHide} confirmApproval={confirmApproval} enablePaymentsRoute={ROUTES.ENABLE_PAYMENTS} addBankAccountRoute={bankAccountRoute} diff --git a/src/components/SettlementButton.tsx b/src/components/SettlementButton.tsx index 7c3c021a08eb..036a8cfe061f 100644 --- a/src/components/SettlementButton.tsx +++ b/src/components/SettlementButton.tsx @@ -140,6 +140,8 @@ function SettlementButton({ enterKeyEventListenerPriority = 0, confirmApproval, policy, + onPaymentOptionsShow, + onPaymentOptionsHide, }: SettlementButtonProps) { const {translate} = useLocalize(); const {isOffline} = useNetwork(); @@ -273,6 +275,8 @@ function SettlementButton({ {(triggerKYCFlow, buttonRef) => ( success + onOptionsMenuShow={onPaymentOptionsShow} + onOptionsMenuHide={onPaymentOptionsHide} buttonRef={buttonRef} shouldAlwaysShowDropdownMenu={isInvoiceReport} customText={isInvoiceReport ? translate('iou.settlePayment', {formattedAmount}) : undefined} diff --git a/src/pages/home/report/ReportActionItem.tsx b/src/pages/home/report/ReportActionItem.tsx index 3df1511dc8ce..f1cfd4a1d59c 100644 --- a/src/pages/home/report/ReportActionItem.tsx +++ b/src/pages/home/report/ReportActionItem.tsx @@ -193,6 +193,7 @@ function ReportActionItem({ const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT; const [isContextMenuActive, setIsContextMenuActive] = useState(() => ReportActionContextMenu.isActiveReportAction(action.reportActionID)); const [isEmojiPickerActive, setIsEmojiPickerActive] = useState(); + const [isPaymentMethodPopoverActive, setIsPaymentMethodPopoverActive] = useState(); const [isHidden, setIsHidden] = useState(false); const [moderationDecision, setModerationDecision] = useState(CONST.MODERATION.MODERATOR_DECISION_APPROVED); @@ -563,6 +564,8 @@ function ReportActionItem({ isHovered={hovered} contextMenuAnchor={popoverAnchorRef.current} checkIfContextMenuActive={toggleContextMenuFromActiveReportAction} + onPaymentOptionsShow={() => setIsPaymentMethodPopoverActive(true)} + onPaymentOptionsHide={() => setIsPaymentMethodPopoverActive(false)} isWhisper={isWhisper} /> ); @@ -922,7 +925,7 @@ function ReportActionItem({ )} From 8df8c62c36e057aad516d31f471d5b688ffbe1a7 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Fri, 12 Jul 2024 18:29:05 +0800 Subject: [PATCH 4/6] fix typing --- src/components/ButtonWithDropdownMenu/index.tsx | 2 +- src/components/ButtonWithDropdownMenu/types.ts | 6 ++++++ src/components/PopoverMenu.tsx | 3 +++ src/components/ReportActionItem/ReportPreview.tsx | 10 ++++++++-- src/components/SettlementButton.tsx | 6 ++++++ 5 files changed, 24 insertions(+), 3 deletions(-) diff --git a/src/components/ButtonWithDropdownMenu/index.tsx b/src/components/ButtonWithDropdownMenu/index.tsx index 94ffdf7de188..2f662045097e 100644 --- a/src/components/ButtonWithDropdownMenu/index.tsx +++ b/src/components/ButtonWithDropdownMenu/index.tsx @@ -140,7 +140,7 @@ function ButtonWithDropdownMenu({ isVisible={isMenuVisible} onClose={() => { setIsMenuVisible(false) - onOptionsMenuHide(); + onOptionsMenuHide?.(); }} onModalShow={onOptionsMenuShow} onItemSelected={() => setIsMenuVisible(false)} diff --git a/src/components/ButtonWithDropdownMenu/types.ts b/src/components/ButtonWithDropdownMenu/types.ts index d1eedd560694..5d7e0a80b364 100644 --- a/src/components/ButtonWithDropdownMenu/types.ts +++ b/src/components/ButtonWithDropdownMenu/types.ts @@ -42,6 +42,12 @@ type ButtonWithDropdownMenuProps = { /** Callback to execute when a dropdown option is selected */ onOptionSelected?: (option: DropdownOption) => void; + /** Callback when the options popover is shown */ + onOptionsMenuShow?: () => void; + + /** Callback when the options popover is shown */ + onOptionsMenuHide?: () => void; + /** Call the onPress function on main button when Enter key is pressed */ pressOnEnter?: boolean; diff --git a/src/components/PopoverMenu.tsx b/src/components/PopoverMenu.tsx index 0efc54889a3f..653571e642ab 100644 --- a/src/components/PopoverMenu.tsx +++ b/src/components/PopoverMenu.tsx @@ -42,6 +42,9 @@ type PopoverMenuProps = Partial & { /** Callback method fired when the user requests to close the modal */ onClose: () => void; + /** Callback method fired when the modal is shown */ + onModalShow?: () => void; + /** State that determines whether to display the modal or not */ isVisible: boolean; diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx index c93016b87af7..7c8f52d2d523 100644 --- a/src/components/ReportActionItem/ReportPreview.tsx +++ b/src/components/ReportActionItem/ReportPreview.tsx @@ -83,6 +83,12 @@ type ReportPreviewProps = ReportPreviewOnyxProps & { /** Callback for updating context menu active state, used for showing context menu */ checkIfContextMenuActive?: () => void; + /** Callback when the payment options popover is shown */ + onPaymentOptionsShow?: () => void; + + /** Callback when the payment options popover is closed */ + onPaymentOptionsHide?: () => void; + /** Whether a message is a whisper */ isWhisper?: boolean; @@ -105,8 +111,8 @@ function ReportPreview({ isHovered = false, isWhisper = false, checkIfContextMenuActive = () => {}, - onPaymentOptionsShow = () => {}, - onPaymentOptionsHide = () => {}, + onPaymentOptionsShow, + onPaymentOptionsHide, userWallet, }: ReportPreviewProps) { const theme = useTheme(); diff --git a/src/components/SettlementButton.tsx b/src/components/SettlementButton.tsx index 036a8cfe061f..d1803f403469 100644 --- a/src/components/SettlementButton.tsx +++ b/src/components/SettlementButton.tsx @@ -43,6 +43,12 @@ type SettlementButtonProps = SettlementButtonOnyxProps & { /** Callback to execute when this button is pressed. Receives a single payment type argument. */ onPress: (paymentType?: PaymentMethodType) => void; + /** Callback when the payment options popover is shown */ + onPaymentOptionsShow?: () => void; + + /** Callback when the payment options popover is closed */ + onPaymentOptionsHide?: () => void; + /** The route to redirect if user does not have a payment method setup */ enablePaymentsRoute: EnablePaymentsRoute; From 8e66e4d66b003296a40d3c22d9878b8306c3ea4a Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Tue, 23 Jul 2024 12:19:25 +0800 Subject: [PATCH 5/6] removes unused variable --- src/pages/home/report/ReportActionItem.tsx | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/src/pages/home/report/ReportActionItem.tsx b/src/pages/home/report/ReportActionItem.tsx index 1d46b18d3a93..8c876bb7e241 100644 --- a/src/pages/home/report/ReportActionItem.tsx +++ b/src/pages/home/report/ReportActionItem.tsx @@ -90,9 +90,6 @@ const getDraftMessage = (drafts: OnyxCollection, }; type ReportActionItemOnyxProps = { - /** Get modal status */ - modal: OnyxEntry; - /** IOU report for this action, if any */ iouReport: OnyxEntry; @@ -161,7 +158,6 @@ type ReportActionItemProps = { } & ReportActionItemOnyxProps; function ReportActionItem({ - modal, action, report, transactionThreadReport, @@ -1000,15 +996,11 @@ export default withOnyx({ `${ONYXKEYS.COLLECTION.TRANSACTION}${ReportActionsUtils.isMoneyRequestAction(action) ? ReportActionsUtils.getOriginalMessage(action)?.IOUTransactionID ?? -1 : -1}`, selector: (transaction: OnyxEntry) => transaction?.errorFields?.route ?? null, }, - modal: { - key: ONYXKEYS.MODAL, - }, })( memo(ReportActionItem, (prevProps, nextProps) => { const prevParentReportAction = prevProps.parentReportAction; const nextParentReportAction = nextProps.parentReportAction; return ( - prevProps.modal?.willAlertModalBecomeVisible === nextProps.modal?.willAlertModalBecomeVisible && prevProps.displayAsGroup === nextProps.displayAsGroup && prevProps.isMostRecentIOUReportAction === nextProps.isMostRecentIOUReportAction && prevProps.shouldDisplayNewMarker === nextProps.shouldDisplayNewMarker && @@ -1037,8 +1029,7 @@ export default withOnyx({ lodashIsEqual(prevProps.transactionThreadReport, nextProps.transactionThreadReport) && lodashIsEqual(prevProps.reportActions, nextProps.reportActions) && lodashIsEqual(prevProps.linkedTransactionRouteError, nextProps.linkedTransactionRouteError) && - lodashIsEqual(prevParentReportAction, nextParentReportAction) && - prevProps.modal?.willAlertModalBecomeVisible === nextProps.modal?.willAlertModalBecomeVisible + lodashIsEqual(prevParentReportAction, nextParentReportAction) ); }), ); From c4d0b959530eda5b59976bb0bcd26d182b19ece6 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Tue, 23 Jul 2024 12:31:02 +0800 Subject: [PATCH 6/6] prettier --- src/components/ButtonWithDropdownMenu/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ButtonWithDropdownMenu/index.tsx b/src/components/ButtonWithDropdownMenu/index.tsx index 2f662045097e..d4ee3e10914a 100644 --- a/src/components/ButtonWithDropdownMenu/index.tsx +++ b/src/components/ButtonWithDropdownMenu/index.tsx @@ -139,7 +139,7 @@ function ButtonWithDropdownMenu({ { - setIsMenuVisible(false) + setIsMenuVisible(false); onOptionsMenuHide?.(); }} onModalShow={onOptionsMenuShow}