From d28091d746cfbd1116c12de292903ba5b8b7eac3 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus <bernhard.josephus@gmail.com> Date: Tue, 7 Jan 2025 15:05:53 +0800 Subject: [PATCH 1/7] fix emoji picker won't show when edit composer is focused --- .../Reactions/QuickEmojiReactions/index.native.tsx | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/src/components/Reactions/QuickEmojiReactions/index.native.tsx b/src/components/Reactions/QuickEmojiReactions/index.native.tsx index b0eb88b31b68..90feb01b22dd 100644 --- a/src/components/Reactions/QuickEmojiReactions/index.native.tsx +++ b/src/components/Reactions/QuickEmojiReactions/index.native.tsx @@ -1,19 +1,10 @@ import React from 'react'; -import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager'; import BaseQuickEmojiReactions from './BaseQuickEmojiReactions'; import type {OpenPickerCallback, QuickEmojiReactionsProps} from './types'; function QuickEmojiReactions({closeContextMenu, ...rest}: QuickEmojiReactionsProps) { const onPressOpenPicker = (openPicker?: OpenPickerCallback) => { - // We first need to close the menu as it's a popover. - // The picker is a popover as well and on mobile there can only - // be one active popover at a time. - closeContextMenu(() => { - // As the menu which includes the button to open the emoji picker - // gets closed, before the picker actually opens, we pass the composer - // ref as anchor for the emoji picker popover. - openPicker?.(ReportActionComposeFocusManager.composerRef); - }); + openPicker?.(); }; return ( From 48c8fc310e17851f787a10e8c598df28275e79ae Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus <bernhard.josephus@gmail.com> Date: Tue, 7 Jan 2025 15:06:09 +0800 Subject: [PATCH 2/7] only prevent showing the main composer if the emoji picker is from the current report action --- src/pages/home/report/ReportActionItemMessageEdit.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionItemMessageEdit.tsx b/src/pages/home/report/ReportActionItemMessageEdit.tsx index 6dff93bd1af3..abfc331ceb5f 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.tsx +++ b/src/pages/home/report/ReportActionItemMessageEdit.tsx @@ -545,7 +545,7 @@ function ReportActionItemMessageEdit( onBlur={(event: NativeSyntheticEvent<TextInputFocusEventData>) => { setIsFocused(false); const relatedTargetId = event.nativeEvent?.relatedTarget?.id; - if (relatedTargetId === CONST.COMPOSER.NATIVE_ID || relatedTargetId === CONST.EMOJI_PICKER_BUTTON_NATIVE_ID || EmojiPickerAction.isEmojiPickerVisible()) { + if (relatedTargetId === CONST.COMPOSER.NATIVE_ID || relatedTargetId === CONST.EMOJI_PICKER_BUTTON_NATIVE_ID || EmojiPickerAction.isActive(action.reportActionID)) { return; } setShouldShowComposeInputKeyboardAware(true); From 8626fdfd345b8b6f18f1aed196fb07940c4e21dc Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus <bernhard.josephus@gmail.com> Date: Tue, 7 Jan 2025 15:16:19 +0800 Subject: [PATCH 3/7] prettier --- src/pages/home/report/ReportActionItemMessageEdit.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionItemMessageEdit.tsx b/src/pages/home/report/ReportActionItemMessageEdit.tsx index abfc331ceb5f..ea0f4007f946 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.tsx +++ b/src/pages/home/report/ReportActionItemMessageEdit.tsx @@ -545,7 +545,11 @@ function ReportActionItemMessageEdit( onBlur={(event: NativeSyntheticEvent<TextInputFocusEventData>) => { setIsFocused(false); const relatedTargetId = event.nativeEvent?.relatedTarget?.id; - if (relatedTargetId === CONST.COMPOSER.NATIVE_ID || relatedTargetId === CONST.EMOJI_PICKER_BUTTON_NATIVE_ID || EmojiPickerAction.isActive(action.reportActionID)) { + if ( + relatedTargetId === CONST.COMPOSER.NATIVE_ID || + relatedTargetId === CONST.EMOJI_PICKER_BUTTON_NATIVE_ID || + EmojiPickerAction.isActive(action.reportActionID) + ) { return; } setShouldShowComposeInputKeyboardAware(true); From d33dbc78cf4da40c04f7460ef856feb74c264a7a Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus <bernhard.josephus@gmail.com> Date: Fri, 17 Jan 2025 09:59:38 +0800 Subject: [PATCH 4/7] use the prev behavior --- src/pages/home/report/ReportActionItemMessageEdit.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionItemMessageEdit.tsx b/src/pages/home/report/ReportActionItemMessageEdit.tsx index ea0f4007f946..fd4f8d514b08 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.tsx +++ b/src/pages/home/report/ReportActionItemMessageEdit.tsx @@ -548,7 +548,7 @@ function ReportActionItemMessageEdit( if ( relatedTargetId === CONST.COMPOSER.NATIVE_ID || relatedTargetId === CONST.EMOJI_PICKER_BUTTON_NATIVE_ID || - EmojiPickerAction.isActive(action.reportActionID) + EmojiPickerAction.isEmojiPickerVisible() ) { return; } From f680b093a0a13186340998c544cbeab7e1e6faa3 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus <bernhard.josephus@gmail.com> Date: Fri, 17 Jan 2025 10:03:00 +0800 Subject: [PATCH 5/7] lint --- .../report/ReportActionItemMessageEdit.tsx | 60 +++++++++---------- 1 file changed, 28 insertions(+), 32 deletions(-) diff --git a/src/pages/home/report/ReportActionItemMessageEdit.tsx b/src/pages/home/report/ReportActionItemMessageEdit.tsx index fd4f8d514b08..6c0001b8c803 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.tsx +++ b/src/pages/home/report/ReportActionItemMessageEdit.tsx @@ -25,9 +25,13 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; -import * as ComposerUtils from '@libs/ComposerUtils'; +import {setShouldShowComposeInput} from '@libs/actions/Composer'; +import {clearActive, isActive as isEmojiPickerActive, isEmojiPickerVisible} from '@libs/actions/EmojiPickerAction'; +import {callback, composerFocusKeepFocusOn, inputFocusChange} from '@libs/actions/InputFocus'; +import {deleteReportActionDraft, editReportComment, saveReportActionDraft} from '@libs/actions/Report'; +import {canSkipTriggerHotkeys, insertText} from '@libs/ComposerUtils'; import DomUtils from '@libs/DomUtils'; -import * as EmojiUtils from '@libs/EmojiUtils'; +import {extractEmojis, replaceAndExtractEmojis} from '@libs/EmojiUtils'; import focusComposerWithDelay from '@libs/focusComposerWithDelay'; import type {Selection} from '@libs/focusComposerWithDelay/types'; import focusEditAfterCancelDelete from '@libs/focusEditAfterCancelDelete'; @@ -35,13 +39,9 @@ import onyxSubscribe from '@libs/onyxSubscribe'; import Parser from '@libs/Parser'; import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager'; import reportActionItemEventHandler from '@libs/ReportActionItemEventHandler'; -import * as ReportActionsUtils from '@libs/ReportActionsUtils'; -import * as ReportUtils from '@libs/ReportUtils'; +import {getReportActionHtml, isDeletedAction} from '@libs/ReportActionsUtils'; +import {getCommentLength} from '@libs/ReportUtils'; import setShouldShowComposeInputKeyboardAware from '@libs/setShouldShowComposeInputKeyboardAware'; -import * as ComposerActions from '@userActions/Composer'; -import * as EmojiPickerAction from '@userActions/EmojiPickerAction'; -import * as InputFocus from '@userActions/InputFocus'; -import * as Report from '@userActions/Report'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import type * as OnyxTypes from '@src/types/onyx'; @@ -102,7 +102,7 @@ function ReportActionItemMessageEdit( const emojisPresentBefore = useRef<Emoji[]>([]); const [draft, setDraft] = useState(() => { if (draftMessage) { - emojisPresentBefore.current = EmojiUtils.extractEmojis(draftMessage); + emojisPresentBefore.current = extractEmojis(draftMessage); } return draftMessage; }); @@ -126,17 +126,17 @@ function ReportActionItemMessageEdit( useEffect(() => { draftMessageVideoAttributeCache.clear(); - const originalMessage = Parser.htmlToMarkdown(ReportActionsUtils.getReportActionHtml(action), { + const originalMessage = Parser.htmlToMarkdown(getReportActionHtml(action), { cacheVideoAttributes: (videoSource, attrs) => draftMessageVideoAttributeCache.set(videoSource, attrs), }); - if (ReportActionsUtils.isDeletedAction(action) || !!(action.message && draftMessage === originalMessage) || !!(prevDraftMessage === draftMessage || isCommentPendingSaved.current)) { + if (isDeletedAction(action) || !!(action.message && draftMessage === originalMessage) || !!(prevDraftMessage === draftMessage || isCommentPendingSaved.current)) { return; } setDraft(draftMessage); }, [draftMessage, action, prevDraftMessage]); useEffect(() => { - InputFocus.composerFocusKeepFocusOn(textInputRef.current as HTMLElement, isFocused, modal, onyxFocused); + composerFocusKeepFocusOn(textInputRef.current as HTMLElement, isFocused, modal, onyxFocused); }, [isFocused, modal, onyxFocused]); useEffect(() => { @@ -183,7 +183,7 @@ function ReportActionItemMessageEdit( // We consider the report action active if it's focused, its emoji picker is open or its context menu is open const isActive = useCallback( - () => isFocusedRef.current || EmojiPickerAction.isActive(action.reportActionID) || ReportActionContextMenu.isActiveReportAction(action.reportActionID), + () => isFocusedRef.current || isEmojiPickerActive(action.reportActionID) || ReportActionContextMenu.isActiveReportAction(action.reportActionID), [action.reportActionID], ); @@ -210,16 +210,16 @@ function ReportActionItemMessageEdit( } return () => { - InputFocus.callback(() => setIsFocused(false)); - InputFocus.inputFocusChange(false); + callback(() => setIsFocused(false)); + inputFocusChange(false); // Skip if the current report action is not active if (!isActive()) { return; } - if (EmojiPickerAction.isActive(action.reportActionID)) { - EmojiPickerAction.clearActive(); + if (isEmojiPickerActive(action.reportActionID)) { + clearActive(); } if (ReportActionContextMenu.isActiveReportAction(action.reportActionID)) { ReportActionContextMenu.clearActiveReportAction(); @@ -235,7 +235,7 @@ function ReportActionItemMessageEdit( ); // show the composer after editing is complete for devices that hide the composer during editing. - useEffect(() => () => ComposerActions.setShouldShowComposeInput(true), []); + useEffect(() => () => setShouldShowComposeInput(true), []); /** * Save the draft of the comment. This debounced so that we're not ceaselessly saving your edit. Saving the draft @@ -246,7 +246,7 @@ function ReportActionItemMessageEdit( () => // eslint-disable-next-line react-compiler/react-compiler lodashDebounce((newDraft: string) => { - Report.saveReportActionDraft(reportID, action, newDraft); + saveReportActionDraft(reportID, action, newDraft); isCommentPendingSaved.current = false; }, 1000), [reportID, action], @@ -267,7 +267,7 @@ function ReportActionItemMessageEdit( */ const updateDraft = useCallback( (newDraftInput: string) => { - const {text: newDraft, emojis, cursorPosition} = EmojiUtils.replaceAndExtractEmojis(newDraftInput, preferredSkinTone, preferredLocale); + const {text: newDraft, emojis, cursorPosition} = replaceAndExtractEmojis(newDraftInput, preferredSkinTone, preferredLocale); emojisPresentBefore.current = emojis; @@ -301,7 +301,7 @@ function ReportActionItemMessageEdit( * Delete the draft of the comment being edited. This will take the comment out of "edit mode" with the old content. */ const deleteDraft = useCallback(() => { - Report.deleteReportActionDraft(reportID, action); + deleteReportActionDraft(reportID, action); if (isActive()) { ReportActionComposeFocusManager.clear(true); @@ -324,7 +324,7 @@ function ReportActionItemMessageEdit( */ const publishDraft = useCallback(() => { // Do nothing if draft exceed the character limit - if (ReportUtils.getCommentLength(draft, {reportID}) > CONST.MAX_COMMENT_LENGTH) { + if (getCommentLength(draft, {reportID}) > CONST.MAX_COMMENT_LENGTH) { return; } @@ -336,7 +336,7 @@ function ReportActionItemMessageEdit( ReportActionContextMenu.showDeleteModal(reportID, action, true, deleteDraft, () => focusEditAfterCancelDelete(textInputRef.current)); return; } - Report.editReportComment(reportID, action, trimmedNewDraft, Object.fromEntries(draftMessageVideoAttributeCache)); + editReportComment(reportID, action, trimmedNewDraft, Object.fromEntries(draftMessageVideoAttributeCache)); deleteDraft(); }, [action, deleteDraft, draft, reportID]); @@ -357,7 +357,7 @@ function ReportActionItemMessageEdit( // To fix this, immediately set the selection again after focusing the input. emojiPickerSelectionRef.current = newSelection; } - updateDraft(ComposerUtils.insertText(draft, selection, `${emoji} `)); + updateDraft(insertText(draft, selection, `${emoji} `)); }; const hideSuggestionMenu = useCallback(() => { @@ -382,7 +382,7 @@ function ReportActionItemMessageEdit( */ const triggerSaveOrCancel = useCallback( (e: NativeSyntheticEvent<TextInputKeyPressEventData> | KeyboardEvent) => { - if (!e || ComposerUtils.canSkipTriggerHotkeys(shouldUseNarrowLayout, isKeyboardShown)) { + if (!e || canSkipTriggerHotkeys(shouldUseNarrowLayout, isKeyboardShown)) { return; } const keyEvent = e as KeyboardEvent; @@ -535,8 +535,8 @@ function ReportActionItemMessageEdit( setUpComposeFocusManager(); // Clear active report action when another action gets focused - if (!EmojiPickerAction.isActive(action.reportActionID)) { - EmojiPickerAction.clearActive(); + if (!isEmojiPickerActive(action.reportActionID)) { + clearActive(); } if (!ReportActionContextMenu.isActiveReportAction(action.reportActionID)) { ReportActionContextMenu.clearActiveReportAction(); @@ -545,11 +545,7 @@ function ReportActionItemMessageEdit( onBlur={(event: NativeSyntheticEvent<TextInputFocusEventData>) => { setIsFocused(false); const relatedTargetId = event.nativeEvent?.relatedTarget?.id; - if ( - relatedTargetId === CONST.COMPOSER.NATIVE_ID || - relatedTargetId === CONST.EMOJI_PICKER_BUTTON_NATIVE_ID || - EmojiPickerAction.isEmojiPickerVisible() - ) { + if (relatedTargetId === CONST.COMPOSER.NATIVE_ID || relatedTargetId === CONST.EMOJI_PICKER_BUTTON_NATIVE_ID || isEmojiPickerVisible()) { return; } setShouldShowComposeInputKeyboardAware(true); From 1ce7742b7fbcd955c0c26460f6785f5a59e86170 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus <bernhard.josephus@gmail.com> Date: Fri, 17 Jan 2025 10:09:39 +0800 Subject: [PATCH 6/7] lint --- src/pages/home/report/ReportActionItemMessageEdit.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/home/report/ReportActionItemMessageEdit.tsx b/src/pages/home/report/ReportActionItemMessageEdit.tsx index 6c0001b8c803..b69a26c17ae2 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.tsx +++ b/src/pages/home/report/ReportActionItemMessageEdit.tsx @@ -27,7 +27,7 @@ import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import {setShouldShowComposeInput} from '@libs/actions/Composer'; import {clearActive, isActive as isEmojiPickerActive, isEmojiPickerVisible} from '@libs/actions/EmojiPickerAction'; -import {callback, composerFocusKeepFocusOn, inputFocusChange} from '@libs/actions/InputFocus'; +import {callback as inputFocusCallback, composerFocusKeepFocusOn, inputFocusChange} from '@libs/actions/InputFocus'; import {deleteReportActionDraft, editReportComment, saveReportActionDraft} from '@libs/actions/Report'; import {canSkipTriggerHotkeys, insertText} from '@libs/ComposerUtils'; import DomUtils from '@libs/DomUtils'; @@ -210,7 +210,7 @@ function ReportActionItemMessageEdit( } return () => { - callback(() => setIsFocused(false)); + inputFocusCallback(() => setIsFocused(false)); inputFocusChange(false); // Skip if the current report action is not active From 542d1f4f9fd40ab9897c6e6a0f07d1f02efc42cf Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus <bernhard.josephus@gmail.com> Date: Fri, 17 Jan 2025 10:15:21 +0800 Subject: [PATCH 7/7] prettier --- src/pages/home/report/ReportActionItemMessageEdit.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionItemMessageEdit.tsx b/src/pages/home/report/ReportActionItemMessageEdit.tsx index b69a26c17ae2..1862e2b96596 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.tsx +++ b/src/pages/home/report/ReportActionItemMessageEdit.tsx @@ -27,7 +27,7 @@ import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import {setShouldShowComposeInput} from '@libs/actions/Composer'; import {clearActive, isActive as isEmojiPickerActive, isEmojiPickerVisible} from '@libs/actions/EmojiPickerAction'; -import {callback as inputFocusCallback, composerFocusKeepFocusOn, inputFocusChange} from '@libs/actions/InputFocus'; +import {composerFocusKeepFocusOn, callback as inputFocusCallback, inputFocusChange} from '@libs/actions/InputFocus'; import {deleteReportActionDraft, editReportComment, saveReportActionDraft} from '@libs/actions/Report'; import {canSkipTriggerHotkeys, insertText} from '@libs/ComposerUtils'; import DomUtils from '@libs/DomUtils';