From d03d1941f53ddf528437d010354fb40d0b69318f Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Fri, 26 Apr 2024 15:52:07 +0700 Subject: [PATCH 1/2] test commit --- src/libs/ReportUtils.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index fc677dedc96e..830536c5993f 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -5774,6 +5774,7 @@ function shouldDisableThread(reportAction: OnyxEntry, reportID: st (isWhisperAction && !isReportPreviewAction && !isIOUAction) || isThreadFirstChat(reportAction, reportID) ); + } function getAllAncestorReportActions(report: Report | null | undefined): Ancestor[] { From 7b4bedbbf8a8ea8dcf63560dfe3650fd63eb1c24 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Wed, 21 Aug 2024 16:08:26 +0700 Subject: [PATCH 2/2] fix position issue of suggestion --- .../getBottomSuggestionPadding/index.ios.ts | 5 ----- .../getBottomSuggestionPadding/index.ts | 2 +- .../AutoCompleteSuggestionsPortal/index.native.tsx | 3 +-- .../AutoCompleteSuggestionsPortal/index.tsx | 3 +-- src/components/AutoCompleteSuggestions/index.tsx | 7 ++++--- src/libs/ReportUtils.ts | 1 - .../ReportActionCompose/ReportActionCompose.tsx | 6 ++---- .../measureContainer/index.native.ts | 13 +++++++++++++ .../ReportActionCompose/measureContainer/index.ts | 11 +++++++++++ .../home/report/ReportActionItemMessageEdit.tsx | 6 ++---- 10 files changed, 35 insertions(+), 22 deletions(-) delete mode 100644 src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/getBottomSuggestionPadding/index.ios.ts create mode 100644 src/pages/home/report/ReportActionCompose/measureContainer/index.native.ts create mode 100644 src/pages/home/report/ReportActionCompose/measureContainer/index.ts diff --git a/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/getBottomSuggestionPadding/index.ios.ts b/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/getBottomSuggestionPadding/index.ios.ts deleted file mode 100644 index 5bb671c5edac..000000000000 --- a/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/getBottomSuggestionPadding/index.ios.ts +++ /dev/null @@ -1,5 +0,0 @@ -function getBottomSuggestionPadding(): number { - return 16; -} - -export default getBottomSuggestionPadding; diff --git a/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/getBottomSuggestionPadding/index.ts b/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/getBottomSuggestionPadding/index.ts index acdc643b6b70..778262354973 100644 --- a/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/getBottomSuggestionPadding/index.ts +++ b/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/getBottomSuggestionPadding/index.ts @@ -1,5 +1,5 @@ function getBottomSuggestionPadding(): number { - return 6; + return 8; } export default getBottomSuggestionPadding; diff --git a/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/index.native.tsx b/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/index.native.tsx index d4f6f0eb28d4..394a7c3cd2eb 100644 --- a/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/index.native.tsx +++ b/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/index.native.tsx @@ -3,13 +3,12 @@ import React, {useMemo} from 'react'; import {View} from 'react-native'; import BaseAutoCompleteSuggestions from '@components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions'; import useStyleUtils from '@hooks/useStyleUtils'; -import getBottomSuggestionPadding from './getBottomSuggestionPadding'; import TransparentOverlay from './TransparentOverlay/TransparentOverlay'; import type {AutoCompleteSuggestionsPortalProps} from './types'; function AutoCompleteSuggestionsPortal({left = 0, width = 0, bottom = 0, resetSuggestions = () => {}, ...props}: AutoCompleteSuggestionsPortalProps) { const StyleUtils = useStyleUtils(); - const styles = useMemo(() => StyleUtils.getBaseAutoCompleteSuggestionContainerStyle({left, width, bottom: bottom + getBottomSuggestionPadding()}), [StyleUtils, left, width, bottom]); + const styles = useMemo(() => StyleUtils.getBaseAutoCompleteSuggestionContainerStyle({left, width, bottom}), [StyleUtils, left, width, bottom]); if (!width) { return null; diff --git a/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/index.tsx b/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/index.tsx index 4d322fe15c4e..27db5abed274 100644 --- a/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/index.tsx +++ b/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/index.tsx @@ -4,7 +4,6 @@ import ReactDOM from 'react-dom'; import {View} from 'react-native'; import BaseAutoCompleteSuggestions from '@components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions'; import useStyleUtils from '@hooks/useStyleUtils'; -import getBottomSuggestionPadding from './getBottomSuggestionPadding'; import TransparentOverlay from './TransparentOverlay/TransparentOverlay'; import type {AutoCompleteSuggestionsPortalProps} from './types'; @@ -40,7 +39,7 @@ function AutoCompleteSuggestionsPortal({ ReactDOM.createPortal( <> - {componentToRender} + {componentToRender} , bodyElement, ) diff --git a/src/components/AutoCompleteSuggestions/index.tsx b/src/components/AutoCompleteSuggestions/index.tsx index 41a01fa27c46..982aaade7b08 100644 --- a/src/components/AutoCompleteSuggestions/index.tsx +++ b/src/components/AutoCompleteSuggestions/index.tsx @@ -6,6 +6,7 @@ import useWindowDimensions from '@hooks/useWindowDimensions'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import CONST from '@src/CONST'; import AutoCompleteSuggestionsPortal from './AutoCompleteSuggestionsPortal'; +import getBottomSuggestionPadding from './AutoCompleteSuggestionsPortal/getBottomSuggestionPadding'; import type {AutoCompleteSuggestionsProps, MeasureParentContainerAndCursor} from './types'; const measureHeightOfSuggestionRows = (numRows: number, canBeBig: boolean): number => { @@ -87,7 +88,7 @@ function AutoCompleteSuggestions({measureParentContainerAndReportCu return; } - measureParentContainerAndReportCursor(({x, y, width, scrollValue, cursorCoordinates}: MeasureParentContainerAndCursor) => { + measureParentContainerAndReportCursor(({x, y, width, scrollValue, cursorCoordinates, height}: MeasureParentContainerAndCursor) => { const xCoordinatesOfCursor = x + cursorCoordinates.x; const bigScreenLeftOffset = xCoordinatesOfCursor + CONST.AUTO_COMPLETE_SUGGESTER.BIG_SCREEN_SUGGESTION_WIDTH > windowWidth @@ -95,7 +96,7 @@ function AutoCompleteSuggestions({measureParentContainerAndReportCu : xCoordinatesOfCursor; const contentMaxHeight = measureHeightOfSuggestionRows(suggestionsLength, true); const contentMinHeight = measureHeightOfSuggestionRows(suggestionsLength, false); - let bottomValue = windowHeight - (cursorCoordinates.y - scrollValue + y) - keyboardHeight; + let bottomValue = windowHeight - (y - scrollValue) - keyboardHeight + getBottomSuggestionPadding(); const widthValue = isSmallScreenWidth ? width : CONST.AUTO_COMPLETE_SUGGESTER.BIG_SCREEN_SUGGESTION_WIDTH; const isEnoughSpaceToRenderMenuAboveForBig = isEnoughSpaceToRenderMenuAboveCursor({y, cursorCoordinates, scrollValue, contentHeight: contentMaxHeight, topInset}); @@ -121,7 +122,7 @@ function AutoCompleteSuggestions({measureParentContainerAndReportCu } else { // calculation for big suggestion box below the cursor measuredHeight = measureHeightOfSuggestionRows(suggestionsLength, true); - bottomValue = windowHeight - y - cursorCoordinates.y + scrollValue - measuredHeight - CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT - keyboardHeight; + bottomValue = bottomValue - (measuredHeight + 2 * CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTER_INNER_PADDING) - height - 2 * getBottomSuggestionPadding(); } setSuggestionHeight(measuredHeight); setContainerState({ diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index 94639698b42d..2c4d6d9bc1ed 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -7153,7 +7153,6 @@ function shouldDisableThread(reportAction: OnyxInputOrEntry, repor (isWhisperAction && !isReportPreviewAction && !isIOUAction) || isThreadFirstChat(reportAction, reportID) ); - } function getAllAncestorReportActions(report: Report | null | undefined): Ancestor[] { diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx index 005824fa949f..7906ce9e3f26 100644 --- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx +++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx @@ -49,6 +49,7 @@ import {isEmptyObject} from '@src/types/utils/EmptyObject'; import AttachmentPickerWithMenuItems from './AttachmentPickerWithMenuItems'; import ComposerWithSuggestions from './ComposerWithSuggestions'; import type {ComposerWithSuggestionsProps} from './ComposerWithSuggestions/ComposerWithSuggestions'; +import RNMeasureContainer from './measureContainer'; import SendButton from './SendButton'; type ComposerRef = { @@ -248,10 +249,7 @@ function ReportActionCompose({ const containerRef = useRef(null); const measureContainer = useCallback( (callback: MeasureInWindowOnSuccessCallback) => { - if (!containerRef.current) { - return; - } - containerRef.current.measureInWindow(callback); + RNMeasureContainer(containerRef, callback); }, // We added isComposerFullSize in dependencies so that when this value changes, we recalculate the position of the popup // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps diff --git a/src/pages/home/report/ReportActionCompose/measureContainer/index.native.ts b/src/pages/home/report/ReportActionCompose/measureContainer/index.native.ts new file mode 100644 index 000000000000..48b85169eb49 --- /dev/null +++ b/src/pages/home/report/ReportActionCompose/measureContainer/index.native.ts @@ -0,0 +1,13 @@ +import type {RefObject} from 'react'; +import type {MeasureInWindowOnSuccessCallback, View} from 'react-native'; + +function measureContainer(containerRef: RefObject, callback: MeasureInWindowOnSuccessCallback) { + if (!containerRef?.current) { + return; + } + containerRef.current.measure((x, y, width, height, pageX, pageY) => { + callback(x + pageX, y + pageY, width, height); + }); +} + +export default measureContainer; diff --git a/src/pages/home/report/ReportActionCompose/measureContainer/index.ts b/src/pages/home/report/ReportActionCompose/measureContainer/index.ts new file mode 100644 index 000000000000..69dc8ec542c1 --- /dev/null +++ b/src/pages/home/report/ReportActionCompose/measureContainer/index.ts @@ -0,0 +1,11 @@ +import type {RefObject} from 'react'; +import type {MeasureInWindowOnSuccessCallback, View} from 'react-native'; + +function measureContainer(containerRef: RefObject, callback: MeasureInWindowOnSuccessCallback) { + if (!containerRef?.current) { + return; + } + containerRef.current.measureInWindow(callback); +} + +export default measureContainer; diff --git a/src/pages/home/report/ReportActionItemMessageEdit.tsx b/src/pages/home/report/ReportActionItemMessageEdit.tsx index 15b901689ddc..46e146309bed 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.tsx +++ b/src/pages/home/report/ReportActionItemMessageEdit.tsx @@ -47,6 +47,7 @@ import type * as OnyxTypes from '@src/types/onyx'; import * as ReportActionContextMenu from './ContextMenu/ReportActionContextMenu'; import getCursorPosition from './ReportActionCompose/getCursorPosition'; import getScrollPosition from './ReportActionCompose/getScrollPosition'; +import RNMeasureContainer from './ReportActionCompose/measureContainer'; import type {SuggestionsRef} from './ReportActionCompose/ReportActionCompose'; import Suggestions from './ReportActionCompose/Suggestions'; import shouldUseEmojiPickerSelection from './shouldUseEmojiPickerSelection'; @@ -375,10 +376,7 @@ function ReportActionItemMessageEdit( ); const measureContainer = useCallback((callback: MeasureInWindowOnSuccessCallback) => { - if (!containerRef.current) { - return; - } - containerRef.current.measureInWindow(callback); + RNMeasureContainer(containerRef, callback); }, []); const measureParentContainerAndReportCursor = useCallback(