From 947babf42a8d6d9c2dad0dc95b63b78f4317c9f6 Mon Sep 17 00:00:00 2001 From: tienifr Date: Tue, 30 Jul 2024 15:56:44 +0700 Subject: [PATCH 01/17] fix: tooltip is overlap on native --- src/components/LHNOptionsList/LHNOptionsList.tsx | 3 +++ .../OptionRowRendererComponent.tsx | 16 ++++++++++++++++ 2 files changed, 19 insertions(+) create mode 100644 src/components/LHNOptionsList/OptionRowRendererComponent.tsx diff --git a/src/components/LHNOptionsList/LHNOptionsList.tsx b/src/components/LHNOptionsList/LHNOptionsList.tsx index 5f06fb78049ad..b23997f0a61fd 100644 --- a/src/components/LHNOptionsList/LHNOptionsList.tsx +++ b/src/components/LHNOptionsList/LHNOptionsList.tsx @@ -18,12 +18,14 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import * as DraftCommentUtils from '@libs/DraftCommentUtils'; +import getPlatform from '@libs/getPlatform'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import * as ReportActionsUtils from '@libs/ReportActionsUtils'; import variables from '@styles/variables'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import OptionRowLHNData from './OptionRowLHNData'; +import OptionRowRendererComponent from './OptionRowRendererComponent'; import type {LHNOptionsListProps, RenderItemProps} from './types'; const keyExtractor = (item: string) => `report_${item}`; @@ -244,6 +246,7 @@ function LHNOptionsList({style, contentContainerStyles, data, onSelectRow, optio ref={flashListRef} indicatorStyle="white" keyboardShouldPersistTaps="always" + CellRendererComponent={getPlatform() !== CONST.PLATFORM.WEB ? OptionRowRendererComponent : undefined} contentContainerStyle={StyleSheet.flatten(contentContainerStyles)} data={data} testID="lhn-options-list" diff --git a/src/components/LHNOptionsList/OptionRowRendererComponent.tsx b/src/components/LHNOptionsList/OptionRowRendererComponent.tsx new file mode 100644 index 0000000000000..2ca9b82d6ec0e --- /dev/null +++ b/src/components/LHNOptionsList/OptionRowRendererComponent.tsx @@ -0,0 +1,16 @@ +import {CellContainer} from '@shopify/flash-list'; +import type {CellContainerProps} from '@shopify/flash-list/dist/native/cell-container/CellContainer'; + +function OptionRowRendererComponent(props: CellContainerProps) { + return ( + + ); +} + +OptionRowRendererComponent.displayName = 'OptionRowRendererComponent'; + +export default OptionRowRendererComponent; From 2bd231707c457016750080f08e620ca340e1d86e Mon Sep 17 00:00:00 2001 From: tienifr Date: Tue, 30 Jul 2024 16:42:28 +0700 Subject: [PATCH 02/17] hide tooltip on navigating --- .../BaseEducationalTooltip.tsx | 38 +++++++++---------- .../Tooltip/EducationalTooltip/index.tsx | 15 +++++++- 2 files changed, 30 insertions(+), 23 deletions(-) diff --git a/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx b/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx index 5912649c6dcdd..eb0522ce08a5f 100644 --- a/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx +++ b/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx @@ -1,5 +1,4 @@ -import {useNavigation} from '@react-navigation/native'; -import React, {memo, useCallback, useEffect, useRef} from 'react'; +import React, {memo, useEffect, useRef} from 'react'; import type {LayoutChangeEvent} from 'react-native'; import GenericTooltip from '@components/Tooltip/GenericTooltip'; import type TooltipProps from '@components/Tooltip/types'; @@ -10,32 +9,29 @@ import getBounds from './getBounds'; * This tooltip would show immediately without user's interaction and hide after 5 seconds. */ function BaseEducationalTooltip({children, ...props}: TooltipProps) { - const navigation = useNavigation(); const hideTooltipRef = useRef<() => void>(); - const triggerHideTooltip = useCallback(() => { - if (!hideTooltipRef.current) { - return; - } + useEffect( + () => () => { + if (!hideTooltipRef.current) { + return; + } - hideTooltipRef.current(); - }, []); + hideTooltipRef.current(); + }, + [], + ); + // Automatically hide tooltip after 5 seconds useEffect(() => { - const unsubscribeBlur = navigation.addListener('blur', triggerHideTooltip); + if (!hideTooltipRef.current) { + return; + } + const intervalID = setInterval(hideTooltipRef.current, 5000); return () => { - unsubscribeBlur?.(); - triggerHideTooltip(); + clearInterval(intervalID); }; - }, [navigation, triggerHideTooltip]); - - // // Automatically hide tooltip after 5 seconds - // useEffect(() => { - // const intervalID = setInterval(triggerHideTooltip, 5000); - // return () => { - // clearInterval(intervalID); - // }; - // }, []); + }, []); return ( { + const unsubscribe = navigation.addListener('blur', () => { + setShouldHide(true); + }); + return unsubscribe; + }, [navigation]); + + if (!shouldRender || shouldHide) { return children; } From b57704a54cdf5f3c0065c3b511055d7f297391c3 Mon Sep 17 00:00:00 2001 From: tienifr Date: Tue, 30 Jul 2024 16:51:14 +0700 Subject: [PATCH 03/17] remove redundant changes --- .../Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx b/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx index eb0522ce08a5f..cb158150fc88a 100644 --- a/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx +++ b/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx @@ -27,6 +27,7 @@ function BaseEducationalTooltip({children, ...props}: TooltipProps) { if (!hideTooltipRef.current) { return; } + const intervalID = setInterval(hideTooltipRef.current, 5000); return () => { clearInterval(intervalID); From c43f1afa01672dcbf5555a42cbd861750a43bc99 Mon Sep 17 00:00:00 2001 From: tienifr Date: Tue, 30 Jul 2024 17:13:10 +0700 Subject: [PATCH 04/17] add condition to show tooltip: has completed onboarding --- src/components/LHNOptionsList/OptionRowLHN.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/LHNOptionsList/OptionRowLHN.tsx b/src/components/LHNOptionsList/OptionRowLHN.tsx index f463432764009..387731b5e8146 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.tsx +++ b/src/components/LHNOptionsList/OptionRowLHN.tsx @@ -33,6 +33,7 @@ import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; import type {OptionRowLHNProps} from './types'; +import hasCompletedGuidedSetupFlowSelector from '@libs/hasCompletedGuidedSetupFlowSelector'; function OptionRowLHN({reportID, isFocused = false, onSelectRow = () => {}, optionItem, viewMode = 'default', style, onLayout = () => {}, hasDraftComment}: OptionRowLHNProps) { const theme = useTheme(); @@ -45,6 +46,9 @@ function OptionRowLHN({reportID, isFocused = false, onSelectRow = () => {}, opti // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${optionItem?.reportID || -1}`); const [isFirstTimeNewExpensifyUser] = useOnyx(ONYXKEYS.NVP_IS_FIRST_TIME_NEW_EXPENSIFY_USER); + const [hasCompletedGuidedSetupFlow] = useOnyx(ONYXKEYS.NVP_ONBOARDING, { + selector: hasCompletedGuidedSetupFlowSelector, + }); const {translate} = useLocalize(); const [isContextMenuActive, setIsContextMenuActive] = useState(false); @@ -167,7 +171,7 @@ function OptionRowLHN({reportID, isFocused = false, onSelectRow = () => {}, opti needsOffscreenAlphaCompositing > Date: Tue, 30 Jul 2024 17:44:04 +0700 Subject: [PATCH 05/17] fix lint --- src/components/LHNOptionsList/OptionRowLHN.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/LHNOptionsList/OptionRowLHN.tsx b/src/components/LHNOptionsList/OptionRowLHN.tsx index 387731b5e8146..74e5089b3b9c1 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.tsx +++ b/src/components/LHNOptionsList/OptionRowLHN.tsx @@ -22,6 +22,7 @@ import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import DateUtils from '@libs/DateUtils'; import DomUtils from '@libs/DomUtils'; +import hasCompletedGuidedSetupFlowSelector from '@libs/hasCompletedGuidedSetupFlowSelector'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import Parser from '@libs/Parser'; import Performance from '@libs/Performance'; @@ -33,7 +34,6 @@ import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; import type {OptionRowLHNProps} from './types'; -import hasCompletedGuidedSetupFlowSelector from '@libs/hasCompletedGuidedSetupFlowSelector'; function OptionRowLHN({reportID, isFocused = false, onSelectRow = () => {}, optionItem, viewMode = 'default', style, onLayout = () => {}, hasDraftComment}: OptionRowLHNProps) { const theme = useTheme(); @@ -171,7 +171,7 @@ function OptionRowLHN({reportID, isFocused = false, onSelectRow = () => {}, opti needsOffscreenAlphaCompositing > Date: Thu, 8 Aug 2024 14:02:25 +0700 Subject: [PATCH 06/17] show tooltip when in lhn only --- src/components/LHNOptionsList/OptionRowLHN.tsx | 13 +++++++++---- src/styles/variables.ts | 1 + 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/src/components/LHNOptionsList/OptionRowLHN.tsx b/src/components/LHNOptionsList/OptionRowLHN.tsx index 74e5089b3b9c1..3b5261fc74927 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.tsx +++ b/src/components/LHNOptionsList/OptionRowLHN.tsx @@ -1,5 +1,5 @@ import {useFocusEffect} from '@react-navigation/native'; -import React, {useCallback, useRef, useState} from 'react'; +import React, {useCallback, useMemo, useRef, useState} from 'react'; import type {GestureResponderEvent, ViewStyle} from 'react-native'; import {StyleSheet, View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; @@ -23,6 +23,7 @@ import useThemeStyles from '@hooks/useThemeStyles'; import DateUtils from '@libs/DateUtils'; import DomUtils from '@libs/DomUtils'; import hasCompletedGuidedSetupFlowSelector from '@libs/hasCompletedGuidedSetupFlowSelector'; +import Navigation from '@libs/Navigation/Navigation'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import Parser from '@libs/Parser'; import Performance from '@libs/Performance'; @@ -30,8 +31,10 @@ import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManag import * as ReportUtils from '@libs/ReportUtils'; import * as SubscriptionUtils from '@libs/SubscriptionUtils'; import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu'; +import variables from '@styles/variables'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; +import ROUTES from '@src/ROUTES'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; import type {OptionRowLHNProps} from './types'; @@ -163,6 +166,7 @@ function OptionRowLHN({reportID, isFocused = false, onSelectRow = () => {}, opti const fullTitle = isGroupChat ? ReportUtils.getGroupChatName(undefined, false, report) : optionItem.text; const subscriptAvatarBorderColor = isFocused ? focusedBackgroundColor : theme.sidebar; + const isHomeActiveRoute = useMemo(() => Navigation.isActiveRoute(ROUTES.HOME), [Navigation.getActiveRoute()]); return ( {}, opti needsOffscreenAlphaCompositing > diff --git a/src/styles/variables.ts b/src/styles/variables.ts index ea838feee1a0c..28620a5bac518 100644 --- a/src/styles/variables.ts +++ b/src/styles/variables.ts @@ -248,6 +248,7 @@ export default { composerTooltipShiftHorizontal: 10, composerTooltipShiftVertical: -10, + gbrTooltipShiftHorizontal: -20, h20: 20, h28: 28, From 3dba0d7334ac6db241c1a24f635b069d8949ca90 Mon Sep 17 00:00:00 2001 From: tienifr Date: Thu, 8 Aug 2024 15:19:46 +0700 Subject: [PATCH 07/17] remove hide tooltip on navigate --- .../Tooltip/EducationalTooltip/index.tsx | 15 ++------------- 1 file changed, 2 insertions(+), 13 deletions(-) diff --git a/src/components/Tooltip/EducationalTooltip/index.tsx b/src/components/Tooltip/EducationalTooltip/index.tsx index 00552805a2e6d..d43ff64d7e8ec 100644 --- a/src/components/Tooltip/EducationalTooltip/index.tsx +++ b/src/components/Tooltip/EducationalTooltip/index.tsx @@ -1,20 +1,9 @@ -import {useNavigation} from '@react-navigation/native'; -import React, {useEffect, useState} from 'react'; +import React from 'react'; import type {TooltipExtendedProps} from '@components/Tooltip/types'; import BaseEducationalTooltip from './BaseEducationalTooltip'; function EducationalTooltip({shouldRender = true, children, ...props}: TooltipExtendedProps) { - const navigation = useNavigation(); - const [shouldHide, setShouldHide] = useState(false); - - useEffect(() => { - const unsubscribe = navigation.addListener('blur', () => { - setShouldHide(true); - }); - return unsubscribe; - }, [navigation]); - - if (!shouldRender || shouldHide) { + if (!shouldRender) { return children; } From 88e0299cbf5e472f40d9d1711a0e9ab8d9230bed Mon Sep 17 00:00:00 2001 From: tienifr Date: Thu, 8 Aug 2024 15:29:51 +0700 Subject: [PATCH 08/17] create platform independant files --- src/components/LHNOptionsList/LHNOptionsList.tsx | 2 +- .../index.native.tsx} | 0 .../LHNOptionsList/OptionRowRendererComponent/index.tsx | 3 +++ 3 files changed, 4 insertions(+), 1 deletion(-) rename src/components/LHNOptionsList/{OptionRowRendererComponent.tsx => OptionRowRendererComponent/index.native.tsx} (100%) create mode 100644 src/components/LHNOptionsList/OptionRowRendererComponent/index.tsx diff --git a/src/components/LHNOptionsList/LHNOptionsList.tsx b/src/components/LHNOptionsList/LHNOptionsList.tsx index 48d62349c60be..98a84fb074585 100644 --- a/src/components/LHNOptionsList/LHNOptionsList.tsx +++ b/src/components/LHNOptionsList/LHNOptionsList.tsx @@ -253,7 +253,7 @@ function LHNOptionsList({style, contentContainerStyles, data, onSelectRow, optio ref={flashListRef} indicatorStyle="white" keyboardShouldPersistTaps="always" - CellRendererComponent={getPlatform() !== CONST.PLATFORM.WEB ? OptionRowRendererComponent : undefined} + CellRendererComponent={OptionRowRendererComponent} contentContainerStyle={StyleSheet.flatten(contentContainerStyles)} data={data} testID="lhn-options-list" diff --git a/src/components/LHNOptionsList/OptionRowRendererComponent.tsx b/src/components/LHNOptionsList/OptionRowRendererComponent/index.native.tsx similarity index 100% rename from src/components/LHNOptionsList/OptionRowRendererComponent.tsx rename to src/components/LHNOptionsList/OptionRowRendererComponent/index.native.tsx diff --git a/src/components/LHNOptionsList/OptionRowRendererComponent/index.tsx b/src/components/LHNOptionsList/OptionRowRendererComponent/index.tsx new file mode 100644 index 0000000000000..09fa8c5d8232e --- /dev/null +++ b/src/components/LHNOptionsList/OptionRowRendererComponent/index.tsx @@ -0,0 +1,3 @@ +const OptionRowRendererComponent = undefined; + +export default OptionRowRendererComponent; \ No newline at end of file From 9768b009b0dc902788f0fc818d47e0e24a841505 Mon Sep 17 00:00:00 2001 From: tienifr Date: Thu, 8 Aug 2024 15:57:22 +0700 Subject: [PATCH 09/17] fix lint --- src/components/LHNOptionsList/LHNOptionsList.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/LHNOptionsList/LHNOptionsList.tsx b/src/components/LHNOptionsList/LHNOptionsList.tsx index 98a84fb074585..89f9a3573cba0 100644 --- a/src/components/LHNOptionsList/LHNOptionsList.tsx +++ b/src/components/LHNOptionsList/LHNOptionsList.tsx @@ -17,7 +17,6 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import * as DraftCommentUtils from '@libs/DraftCommentUtils'; -import getPlatform from '@libs/getPlatform'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import * as ReportActionsUtils from '@libs/ReportActionsUtils'; import variables from '@styles/variables'; From 5e68892c4643a58d9a3201452eb36e74991247e8 Mon Sep 17 00:00:00 2001 From: tienifr Date: Fri, 9 Aug 2024 17:01:41 +0700 Subject: [PATCH 10/17] fix: tooltip position --- src/components/LHNOptionsList/OptionRowLHN.tsx | 12 ++++++------ .../OptionRowRendererComponent/index.tsx | 2 +- .../EducationalTooltip/BaseEducationalTooltip.tsx | 4 ++-- src/components/Tooltip/types.ts | 6 ++++++ 4 files changed, 15 insertions(+), 9 deletions(-) diff --git a/src/components/LHNOptionsList/OptionRowLHN.tsx b/src/components/LHNOptionsList/OptionRowLHN.tsx index 3b5261fc74927..717bfc287e12f 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.tsx +++ b/src/components/LHNOptionsList/OptionRowLHN.tsx @@ -43,7 +43,7 @@ function OptionRowLHN({reportID, isFocused = false, onSelectRow = () => {}, opti const styles = useThemeStyles(); const popoverAnchor = useRef(null); const StyleUtils = useStyleUtils(); - const isFocusedRef = useRef(true); + const [isScreenFocused, setIsScreenFocused] = useState(false); const {shouldUseNarrowLayout} = useResponsiveLayout(); // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing @@ -58,9 +58,9 @@ function OptionRowLHN({reportID, isFocused = false, onSelectRow = () => {}, opti useFocusEffect( useCallback(() => { - isFocusedRef.current = true; + setIsScreenFocused(true); return () => { - isFocusedRef.current = false; + setIsScreenFocused(false); }; }, []), ); @@ -133,7 +133,7 @@ function OptionRowLHN({reportID, isFocused = false, onSelectRow = () => {}, opti * @param [event] - A press event. */ const showPopover = (event: MouseEvent | GestureResponderEvent) => { - if (!isFocusedRef.current && shouldUseNarrowLayout) { + if (!isScreenFocused && shouldUseNarrowLayout) { return; } setIsContextMenuActive(true); @@ -166,7 +166,6 @@ function OptionRowLHN({reportID, isFocused = false, onSelectRow = () => {}, opti const fullTitle = isGroupChat ? ReportUtils.getGroupChatName(undefined, false, report) : optionItem.text; const subscriptAvatarBorderColor = isFocused ? focusedBackgroundColor : theme.sidebar; - const isHomeActiveRoute = useMemo(() => Navigation.isActiveRoute(ROUTES.HOME), [Navigation.getActiveRoute()]); return ( {}, opti needsOffscreenAlphaCompositing > void>(); useEffect( @@ -56,7 +56,7 @@ function BaseEducationalTooltip({children, shouldAutoDismiss = false, ...props}: height, width, x: px, - y: py, + y: isUseInInvertedList ? py - height : py, }); showTooltip(); }); diff --git a/src/components/Tooltip/types.ts b/src/components/Tooltip/types.ts index 4165b960f3229..3005bea3dd207 100644 --- a/src/components/Tooltip/types.ts +++ b/src/components/Tooltip/types.ts @@ -75,11 +75,17 @@ type EducationalTooltipProps = ChildrenProps & SharedTooltipProps & { /** Whether to automatically dismiss the tooltip after 5 seconds */ shouldAutoDismiss?: boolean; + + /** Whether the Tooltip is used in inverted */ + isUseInInvertedList?: boolean; }; type TooltipExtendedProps = (EducationalTooltipProps | TooltipProps) & { /** Whether the actual Tooltip should be rendered. If false, it's just going to return the children */ shouldRender?: boolean; + + /** Whether the Tooltip is used in inverted */ + isUseInInvertedList?: boolean; }; export default TooltipProps; From fae7803b9d8f369af93e66ba77717248690d09dc Mon Sep 17 00:00:00 2001 From: tienifr Date: Fri, 9 Aug 2024 17:15:40 +0700 Subject: [PATCH 11/17] lint fix --- src/components/LHNOptionsList/OptionRowLHN.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/LHNOptionsList/OptionRowLHN.tsx b/src/components/LHNOptionsList/OptionRowLHN.tsx index 717bfc287e12f..d804e069e5fad 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.tsx +++ b/src/components/LHNOptionsList/OptionRowLHN.tsx @@ -1,5 +1,5 @@ import {useFocusEffect} from '@react-navigation/native'; -import React, {useCallback, useMemo, useRef, useState} from 'react'; +import React, {useCallback, useRef, useState} from 'react'; import type {GestureResponderEvent, ViewStyle} from 'react-native'; import {StyleSheet, View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; @@ -23,7 +23,6 @@ import useThemeStyles from '@hooks/useThemeStyles'; import DateUtils from '@libs/DateUtils'; import DomUtils from '@libs/DomUtils'; import hasCompletedGuidedSetupFlowSelector from '@libs/hasCompletedGuidedSetupFlowSelector'; -import Navigation from '@libs/Navigation/Navigation'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import Parser from '@libs/Parser'; import Performance from '@libs/Performance'; @@ -34,7 +33,6 @@ import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportA import variables from '@styles/variables'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; -import ROUTES from '@src/ROUTES'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; import type {OptionRowLHNProps} from './types'; @@ -174,7 +172,7 @@ function OptionRowLHN({reportID, isFocused = false, onSelectRow = () => {}, opti needsOffscreenAlphaCompositing > Date: Thu, 5 Sep 2024 22:47:15 +0700 Subject: [PATCH 12/17] position --- .../LHNOptionsList/OptionRowLHN.tsx | 1 - .../index.native.tsx | 2 +- .../BaseEducationalTooltip.tsx | 20 +++++++++---------- src/components/Tooltip/types.ts | 6 ------ 4 files changed, 10 insertions(+), 19 deletions(-) diff --git a/src/components/LHNOptionsList/OptionRowLHN.tsx b/src/components/LHNOptionsList/OptionRowLHN.tsx index 1f5e55bf31a8e..7db905ad8fc04 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.tsx +++ b/src/components/LHNOptionsList/OptionRowLHN.tsx @@ -178,7 +178,6 @@ function OptionRowLHN({reportID, isFocused = false, onSelectRow = () => {}, opti horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, }} - isUseInInvertedList shouldUseOverlay shiftHorizontal={variables.gbrTooltipShiftHorizontal} shiftVertical={variables.composerTooltipShiftVertical} diff --git a/src/components/LHNOptionsList/OptionRowRendererComponent/index.native.tsx b/src/components/LHNOptionsList/OptionRowRendererComponent/index.native.tsx index 2ca9b82d6ec0e..ff050f673951e 100644 --- a/src/components/LHNOptionsList/OptionRowRendererComponent/index.native.tsx +++ b/src/components/LHNOptionsList/OptionRowRendererComponent/index.native.tsx @@ -6,7 +6,7 @@ function OptionRowRendererComponent(props: CellContainerProps) { ); } diff --git a/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx b/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx index b1b8b545c30fa..42848ce421642 100644 --- a/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx +++ b/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx @@ -11,7 +11,7 @@ type LayoutChangeEventWithTarget = NativeSyntheticEvent<{layout: LayoutRectangle * A component used to wrap an element intended for displaying a tooltip. * This tooltip would show immediately without user's interaction and hide after 5 seconds. */ -function BaseEducationalTooltip({children, shouldAutoDismiss = false, isUseInInvertedList = false, ...props}: EducationalTooltipProps) { +function BaseEducationalTooltip({children, shouldAutoDismiss = false, ...props}: EducationalTooltipProps) { const hideTooltipRef = useRef<() => void>(); useEffect( @@ -52,18 +52,16 @@ function BaseEducationalTooltip({children, shouldAutoDismiss = false, isUseInInv const target = e.target || e.nativeEvent.target; // When tooltip is used inside an animated view (e.g. popover), we need to wait for the animation to finish before measuring content. setTimeout(() => { - InteractionManager.runAfterInteractions(() => { - target?.measure((fx, fy, width, height, px, py) => { - updateTargetBounds({ - height, - width, - x: px, - y: isUseInInvertedList ? py - height : py, - }); - showTooltip(); + target?.measureInWindow((fx, fy, width, height) => { + updateTargetBounds({ + height, + width, + x: fx, + y: fy, }); + showTooltip(); }); - }, CONST.ANIMATED_TRANSITION); + }, 500); }, }); }} diff --git a/src/components/Tooltip/types.ts b/src/components/Tooltip/types.ts index 3005bea3dd207..4165b960f3229 100644 --- a/src/components/Tooltip/types.ts +++ b/src/components/Tooltip/types.ts @@ -75,17 +75,11 @@ type EducationalTooltipProps = ChildrenProps & SharedTooltipProps & { /** Whether to automatically dismiss the tooltip after 5 seconds */ shouldAutoDismiss?: boolean; - - /** Whether the Tooltip is used in inverted */ - isUseInInvertedList?: boolean; }; type TooltipExtendedProps = (EducationalTooltipProps | TooltipProps) & { /** Whether the actual Tooltip should be rendered. If false, it's just going to return the children */ shouldRender?: boolean; - - /** Whether the Tooltip is used in inverted */ - isUseInInvertedList?: boolean; }; export default TooltipProps; From 38b68d17b5bc29ce981b36d9b32edf54a71f371e Mon Sep 17 00:00:00 2001 From: tienifr Date: Thu, 5 Sep 2024 23:12:05 +0700 Subject: [PATCH 13/17] lint fi --- .../Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx b/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx index 42848ce421642..6eb0eb326d8b6 100644 --- a/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx +++ b/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx @@ -1,9 +1,7 @@ import React, {memo, useEffect, useRef} from 'react'; -import {InteractionManager} from 'react-native'; import type {LayoutRectangle, NativeSyntheticEvent} from 'react-native'; import GenericTooltip from '@components/Tooltip/GenericTooltip'; import type {EducationalTooltipProps} from '@components/Tooltip/types'; -import CONST from '@src/CONST'; type LayoutChangeEventWithTarget = NativeSyntheticEvent<{layout: LayoutRectangle; target: HTMLElement}>; From a03c1d96f29f971661ac67431fa1096fc2500bf2 Mon Sep 17 00:00:00 2001 From: tienifr Date: Fri, 6 Sep 2024 14:40:08 +0700 Subject: [PATCH 14/17] hide tooltip --- src/ONYXKEYS.ts | 4 ++++ src/components/LHNOptionsList/OptionRowLHN.tsx | 12 +++++++++++- src/libs/actions/User.ts | 5 +++++ 3 files changed, 20 insertions(+), 1 deletion(-) diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts index a276f93403bd2..98ba44724fce2 100755 --- a/src/ONYXKEYS.ts +++ b/src/ONYXKEYS.ts @@ -211,6 +211,9 @@ const ONYXKEYS = { /** The NVP containing all information related to educational tooltip in workspace chat */ NVP_WORKSPACE_TOOLTIP: 'workspaceTooltip', + /** Whether to hide gbr tooltip*/ + NVP_SHOULD_HIDE_GBR_TOOLTIP: 'nvp_should_hide_gbr_tooltip', + /** Does this user have push notifications enabled for this device? */ PUSH_NOTIFICATIONS_ENABLED: 'pushNotificationsEnabled', @@ -915,6 +918,7 @@ type OnyxValuesMapping = { [ONYXKEYS.NVP_PRIVATE_AMOUNT_OWED]: number; [ONYXKEYS.NVP_PRIVATE_OWNER_BILLING_GRACE_PERIOD_END]: number; [ONYXKEYS.NVP_WORKSPACE_TOOLTIP]: OnyxTypes.WorkspaceTooltip; + [ONYXKEYS.NVP_SHOULD_HIDE_GBR_TOOLTIP]: boolean; [ONYXKEYS.NVP_PRIVATE_CANCELLATION_DETAILS]: OnyxTypes.CancellationDetails[]; [ONYXKEYS.APPROVAL_WORKFLOW]: OnyxTypes.ApprovalWorkflowOnyx; [ONYXKEYS.IMPORTED_SPREADSHEET]: OnyxTypes.ImportedSpreadsheet; diff --git a/src/components/LHNOptionsList/OptionRowLHN.tsx b/src/components/LHNOptionsList/OptionRowLHN.tsx index 7db905ad8fc04..77c7d0a569268 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.tsx +++ b/src/components/LHNOptionsList/OptionRowLHN.tsx @@ -31,6 +31,7 @@ import * as ReportUtils from '@libs/ReportUtils'; import * as SubscriptionUtils from '@libs/SubscriptionUtils'; import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu'; import variables from '@styles/variables'; +import * as User from '@userActions/User'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; @@ -50,6 +51,7 @@ function OptionRowLHN({reportID, isFocused = false, onSelectRow = () => {}, opti const [hasCompletedGuidedSetupFlow] = useOnyx(ONYXKEYS.NVP_ONBOARDING, { selector: hasCompletedGuidedSetupFlowSelector, }); + const [shouldHideGBRTooltip] = useOnyx(ONYXKEYS.NVP_SHOULD_HIDE_GBR_TOOLTIP); const {translate} = useLocalize(); const [isContextMenuActive, setIsContextMenuActive] = useState(false); @@ -172,7 +174,14 @@ function OptionRowLHN({reportID, isFocused = false, onSelectRow = () => {}, opti needsOffscreenAlphaCompositing > {}, opti shiftHorizontal={variables.gbrTooltipShiftHorizontal} shiftVertical={variables.composerTooltipShiftVertical} wrapperStyle={styles.quickActionTooltipWrapper} + onPressOverlay={() => User.dismissGBRTooltip()} > diff --git a/src/libs/actions/User.ts b/src/libs/actions/User.ts index 04d57e52be475..42c736ecc051b 100644 --- a/src/libs/actions/User.ts +++ b/src/libs/actions/User.ts @@ -1230,6 +1230,10 @@ function dismissWorkspaceTooltip() { Onyx.merge(ONYXKEYS.NVP_WORKSPACE_TOOLTIP, {shouldShow: false}); } +function dismissGBRTooltip() { + Onyx.merge(ONYXKEYS.NVP_SHOULD_HIDE_GBR_TOOLTIP, true); +} + function requestRefund() { API.write(WRITE_COMMANDS.REQUEST_REFUND, null); } @@ -1269,4 +1273,5 @@ export { requestRefund, saveNewContactMethodAndRequestValidationCode, clearUnvalidatedNewContactMethodAction, + dismissGBRTooltip, }; From e7a58cc9a4212ccebb7e84f40b1f15e4b4138dc6 Mon Sep 17 00:00:00 2001 From: tienifr Date: Fri, 6 Sep 2024 16:01:47 +0700 Subject: [PATCH 15/17] android position --- src/ONYXKEYS.ts | 2 +- .../EducationalTooltip/BaseEducationalTooltip.tsx | 11 ++--------- .../measureTooltipCoordinate/index.android.ts | 13 +++++++++++++ .../measureTooltipCoordinate/index.ts | 13 +++++++++++++ 4 files changed, 29 insertions(+), 10 deletions(-) create mode 100644 src/components/Tooltip/EducationalTooltip/measureTooltipCoordinate/index.android.ts create mode 100644 src/components/Tooltip/EducationalTooltip/measureTooltipCoordinate/index.ts diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts index 98ba44724fce2..685d12c7f914d 100755 --- a/src/ONYXKEYS.ts +++ b/src/ONYXKEYS.ts @@ -211,7 +211,7 @@ const ONYXKEYS = { /** The NVP containing all information related to educational tooltip in workspace chat */ NVP_WORKSPACE_TOOLTIP: 'workspaceTooltip', - /** Whether to hide gbr tooltip*/ + /** Whether to hide gbr tooltip */ NVP_SHOULD_HIDE_GBR_TOOLTIP: 'nvp_should_hide_gbr_tooltip', /** Does this user have push notifications enabled for this device? */ diff --git a/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx b/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx index 6eb0eb326d8b6..63b29a5281f79 100644 --- a/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx +++ b/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx @@ -2,6 +2,7 @@ import React, {memo, useEffect, useRef} from 'react'; import type {LayoutRectangle, NativeSyntheticEvent} from 'react-native'; import GenericTooltip from '@components/Tooltip/GenericTooltip'; import type {EducationalTooltipProps} from '@components/Tooltip/types'; +import measureTooltipCoordinate from './measureTooltipCoordinate'; type LayoutChangeEventWithTarget = NativeSyntheticEvent<{layout: LayoutRectangle; target: HTMLElement}>; @@ -50,15 +51,7 @@ function BaseEducationalTooltip({children, shouldAutoDismiss = false, ...props}: const target = e.target || e.nativeEvent.target; // When tooltip is used inside an animated view (e.g. popover), we need to wait for the animation to finish before measuring content. setTimeout(() => { - target?.measureInWindow((fx, fy, width, height) => { - updateTargetBounds({ - height, - width, - x: fx, - y: fy, - }); - showTooltip(); - }); + measureTooltipCoordinate(target, updateTargetBounds, showTooltip); }, 500); }, }); diff --git a/src/components/Tooltip/EducationalTooltip/measureTooltipCoordinate/index.android.ts b/src/components/Tooltip/EducationalTooltip/measureTooltipCoordinate/index.android.ts new file mode 100644 index 0000000000000..e1909faf733f7 --- /dev/null +++ b/src/components/Tooltip/EducationalTooltip/measureTooltipCoordinate/index.android.ts @@ -0,0 +1,13 @@ +import type React from 'react'; +import type {LayoutRectangle, NativeMethods} from 'react-native'; + +export default function measureTooltipCoordinate( + target: React.Component & Readonly, + updateTargetBounds: (rect: LayoutRectangle) => void, + showTooltip: () => void, +) { + return target?.measure((x, y, width, height, px, py) => { + updateTargetBounds({height, width, x: px, y: py}); + showTooltip(); + }); +} diff --git a/src/components/Tooltip/EducationalTooltip/measureTooltipCoordinate/index.ts b/src/components/Tooltip/EducationalTooltip/measureTooltipCoordinate/index.ts new file mode 100644 index 0000000000000..efb5b7840e706 --- /dev/null +++ b/src/components/Tooltip/EducationalTooltip/measureTooltipCoordinate/index.ts @@ -0,0 +1,13 @@ +import type React from 'react'; +import type {LayoutRectangle, NativeMethods} from 'react-native'; + +export default function measureTooltipCoordinate( + target: React.Component & Readonly, + updateTargetBounds: (rect: LayoutRectangle) => void, + showTooltip: () => void, +) { + return target?.measureInWindow((x, y, width, height) => { + updateTargetBounds({height, width, x, y}); + showTooltip(); + }); +} From 863617eeff53fa1ec1ac6a870156ce4edf8c0011 Mon Sep 17 00:00:00 2001 From: tienifr Date: Fri, 6 Sep 2024 17:48:56 +0700 Subject: [PATCH 16/17] flash issue --- .../BaseEducationalTooltip.tsx | 25 ++++++++++++++----- .../Tooltip/EducationalTooltip/index.tsx | 6 +---- src/components/Tooltip/types.ts | 3 +++ 3 files changed, 23 insertions(+), 11 deletions(-) diff --git a/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx b/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx index 63b29a5281f79..62916c483cd67 100644 --- a/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx +++ b/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx @@ -1,4 +1,4 @@ -import React, {memo, useEffect, useRef} from 'react'; +import React, {memo, useEffect, useRef, useState} from 'react'; import type {LayoutRectangle, NativeSyntheticEvent} from 'react-native'; import GenericTooltip from '@components/Tooltip/GenericTooltip'; import type {EducationalTooltipProps} from '@components/Tooltip/types'; @@ -10,9 +10,12 @@ type LayoutChangeEventWithTarget = NativeSyntheticEvent<{layout: LayoutRectangle * A component used to wrap an element intended for displaying a tooltip. * This tooltip would show immediately without user's interaction and hide after 5 seconds. */ -function BaseEducationalTooltip({children, shouldAutoDismiss = false, ...props}: EducationalTooltipProps) { +function BaseEducationalTooltip({children, shouldAutoDismiss = false, shouldRender = true, ...props}: EducationalTooltipProps) { const hideTooltipRef = useRef<() => void>(); + const [shouldMeasure, setShouldMeasure] = useState(false); + const show = useRef<() => void>(); + useEffect( () => () => { if (!hideTooltipRef.current) { @@ -36,6 +39,16 @@ function BaseEducationalTooltip({children, shouldAutoDismiss = false, ...props}: }; }, [shouldAutoDismiss]); + useEffect(() => { + if (!shouldRender || !shouldMeasure) { + return; + } + // When tooltip is used inside an animated view (e.g. popover), we need to wait for the animation to finish before measuring content. + setTimeout(() => { + show.current?.(); + }, 500); + }, [shouldMeasure, shouldRender]); + return ( { + if (!shouldMeasure) { + setShouldMeasure(true); + } // e.target is specific to native, use e.nativeEvent.target on web instead const target = e.target || e.nativeEvent.target; - // When tooltip is used inside an animated view (e.g. popover), we need to wait for the animation to finish before measuring content. - setTimeout(() => { - measureTooltipCoordinate(target, updateTargetBounds, showTooltip); - }, 500); + show.current = () => measureTooltipCoordinate(target, updateTargetBounds, showTooltip); }, }); }} diff --git a/src/components/Tooltip/EducationalTooltip/index.tsx b/src/components/Tooltip/EducationalTooltip/index.tsx index d43ff64d7e8ec..03500f768dd9b 100644 --- a/src/components/Tooltip/EducationalTooltip/index.tsx +++ b/src/components/Tooltip/EducationalTooltip/index.tsx @@ -2,11 +2,7 @@ import React from 'react'; import type {TooltipExtendedProps} from '@components/Tooltip/types'; import BaseEducationalTooltip from './BaseEducationalTooltip'; -function EducationalTooltip({shouldRender = true, children, ...props}: TooltipExtendedProps) { - if (!shouldRender) { - return children; - } - +function EducationalTooltip({children, ...props}: TooltipExtendedProps) { return ( Date: Fri, 6 Sep 2024 18:11:34 +0700 Subject: [PATCH 17/17] lint fix --- .../measureTooltipCoordinate/index.android.ts | 6 +----- .../EducationalTooltip/measureTooltipCoordinate/index.ts | 6 +----- 2 files changed, 2 insertions(+), 10 deletions(-) diff --git a/src/components/Tooltip/EducationalTooltip/measureTooltipCoordinate/index.android.ts b/src/components/Tooltip/EducationalTooltip/measureTooltipCoordinate/index.android.ts index e1909faf733f7..5cc2ab8a74a7d 100644 --- a/src/components/Tooltip/EducationalTooltip/measureTooltipCoordinate/index.android.ts +++ b/src/components/Tooltip/EducationalTooltip/measureTooltipCoordinate/index.android.ts @@ -1,11 +1,7 @@ import type React from 'react'; import type {LayoutRectangle, NativeMethods} from 'react-native'; -export default function measureTooltipCoordinate( - target: React.Component & Readonly, - updateTargetBounds: (rect: LayoutRectangle) => void, - showTooltip: () => void, -) { +export default function measureTooltipCoordinate(target: React.Component & Readonly, updateTargetBounds: (rect: LayoutRectangle) => void, showTooltip: () => void) { return target?.measure((x, y, width, height, px, py) => { updateTargetBounds({height, width, x: px, y: py}); showTooltip(); diff --git a/src/components/Tooltip/EducationalTooltip/measureTooltipCoordinate/index.ts b/src/components/Tooltip/EducationalTooltip/measureTooltipCoordinate/index.ts index efb5b7840e706..72cc75115e21d 100644 --- a/src/components/Tooltip/EducationalTooltip/measureTooltipCoordinate/index.ts +++ b/src/components/Tooltip/EducationalTooltip/measureTooltipCoordinate/index.ts @@ -1,11 +1,7 @@ import type React from 'react'; import type {LayoutRectangle, NativeMethods} from 'react-native'; -export default function measureTooltipCoordinate( - target: React.Component & Readonly, - updateTargetBounds: (rect: LayoutRectangle) => void, - showTooltip: () => void, -) { +export default function measureTooltipCoordinate(target: React.Component & Readonly, updateTargetBounds: (rect: LayoutRectangle) => void, showTooltip: () => void) { return target?.measureInWindow((x, y, width, height) => { updateTargetBounds({height, width, x, y}); showTooltip();