Fix tooltip position (#1698)

* Add useWindowDimensions.

* Fix tooltip position on RTL.

* Fix UIMenu android position.

* Move useDimensions to kit.layout.

casts/keyboard/package.json

@@ -36,6 +36,7 @@
     "dependencies": {
         "@react-native-community/hooks": "^2.6.0",
         "@tonlabs/uikit.core": "^4.0.1",
+        "@tonlabs/uikit.layout": "^3.1.1",
         "@tonlabs/uikit.inputs": "^3.1.1",
         "@tonlabs/uikit.themes": "^3.1.1"
     },

casts/keyboard/src/index.ts

@@ -4,5 +4,4 @@ export * from './useCustomKeyboard';
 export * from './useAnimatedKeyboardHeight';
 
 export * from './useKeyboardBottomInset';
-export * from './useDimensions';
 export * from './useAndroidNavigationBarHeight';

casts/keyboard/src/useAndroidNavigationBarHeight.android.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useSharedValue } from 'react-native-reanimated';
 
-import { useDimensions } from './useDimensions';
+import { useDimensions } from '@tonlabs/uikit.layout';
 
 export function useAndroidNavigationBarHeight() {
     const { androidNavigationBarHeight } = useDimensions();

kit/layout/src/index.ts

@@ -2,17 +2,20 @@ import * as Portal from './Portal';
 import { UILayoutConstant } from './UILayoutConstant';
 import { UISkeleton } from './Skeleton';
 import { AnimationHelpers } from './AnimationHelpers';
+import { useDimensions } from './useDimensions';
 
 export * from './Portal';
 export * from './UILayoutConstant';
 export * from './Skeleton';
 export * from './AnimationHelpers';
+export * from './useDimensions';
 
 export const UILayout = {
     Portal,
     UISkeleton,
 
     UILayoutConstant,
     AnimationHelpers,
+    useDimensions,
 };
 export default UILayout;

kit/popups/package.json

@@ -37,7 +37,6 @@
         "@react-native-community/hooks": "^2.6.0",
         "@tonlabs/localization": "^3.0.2",
         "@tonlabs/uicast.bars": "^3.1.1",
-        "@tonlabs/uicast.keyboard": "^3.1.2",
         "@tonlabs/uicast.linear-chart": "^3.0.2",
         "@tonlabs/uikit.assets": "^3.0.2",
         "@tonlabs/uikit.controls": "^3.1.1",

kit/popups/src/Menu/UIMenuContainerContent.tsx

@@ -1,12 +1,5 @@
 import * as React from 'react';
-import {
-    I18nManager,
-    LayoutChangeEvent,
-    ScaledSize,
-    StyleSheet,
-    useWindowDimensions,
-    View,
-} from 'react-native';
+import { I18nManager, LayoutChangeEvent, ScaledSize, StyleSheet, View } from 'react-native';
 import Animated from 'react-native-reanimated';
 import { TapGestureHandler } from 'react-native-gesture-handler';
 import clamp from 'lodash/clamp';
@@ -16,6 +9,7 @@ import type { UIMenuContainerContentProps } from './types';
 import { UIConstant } from '../constants';
 import { ShadowView } from '../ShadowView';
 import { useTargetDimensions, TargetDimensions } from '../useTargetDimensions';
+import { useWindowDimensions } from '../useWindowDimensions';
 // import { usePopupLayoutAnimationFunctions } from '../usePopupLayoutAnimationFunctions';
 
 type Location = {

kit/popups/src/Sheets/UIFullscreenSheet.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { Platform, StyleProp, StyleSheet, ViewStyle } from 'react-native';
+import { StyleProp, StyleSheet, ViewStyle } from 'react-native';
 
 import { UILayoutConstant } from '@tonlabs/uikit.layout';
-import { useDimensions } from '@tonlabs/uicast.keyboard';
 
 import { UISheet, UISheetProps } from './UISheet/UISheet';
+import { useWindowDimensions } from '../useWindowDimensions';
 
 export type UIFullscreenSheetProps = UISheetProps & {
     style?: StyleProp<ViewStyle>;
@@ -21,31 +21,11 @@ export function UIFullscreenSheet({
     statusBarTriggerColor = 'primary',
     ...rest
 }: UIFullscreenSheetProps) {
-    const {
-        screen: { height: screenHeight },
-        window: { height: windowHeight },
-    } = useDimensions();
+    const { height } = useWindowDimensions();
 
     const fullscreenHeight = React.useMemo(() => {
-        /**
-         * On different platforms it behave differently.
-         *
-         * On web `screenHeight` is equal to a device screen height
-         * a browser window is usually smaller (and can be resized).
-         */
-        if (Platform.OS === 'web') {
-            return windowHeight + UILayoutConstant.rubberBandEffectDistance;
-        }
-
-        /**
-         * On iOS it seems `windowHeight` is equal to screenHeight.
-         *
-         * On Android `windowHeight` doesn't include a status bar height and
-         * a navigation bar (the one on the bottom). Since we use edge-to-edge
-         * right now we want to use `screenHeight` to be fullscreen.
-         */
-        return screenHeight + UILayoutConstant.rubberBandEffectDistance;
-    }, [screenHeight, windowHeight]);
+        return height + UILayoutConstant.rubberBandEffectDistance;
+    }, [height]);
 
     const sheetStyle = React.useMemo(() => {
         const flattenStyle = StyleSheet.flatten(style);

kit/popups/src/Tooltip/UITooltipBox.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { LayoutChangeEvent, ScaledSize, StyleSheet, useWindowDimensions, View } from 'react-native';
+import { I18nManager, LayoutChangeEvent, ScaledSize, StyleSheet, View } from 'react-native';
 import Animated from 'react-native-reanimated';
+import clamp from 'lodash/clamp';
 import { ColorVariants, useTheme, Theme, makeStyles, useShadow } from '@tonlabs/uikit.themes';
 import { UILayoutConstant, Portal } from '@tonlabs/uikit.layout';
 import type { UITooltipBoxProps } from './types';
@@ -10,11 +11,13 @@ import { TargetDimensions, useTargetDimensions } from '../useTargetDimensions';
 // import { usePopupLayoutAnimationFunctions } from '../usePopupLayoutAnimationFunctions';
 import { UITooltipContent } from './UITooltipContent';
 import { UITooltipBackdrop } from './UITooltipBackdrop';
+import { useWindowDimensions } from '../useWindowDimensions';
 
 type Location = {
-    left: number;
-    top: number | undefined;
-    bottom: number | undefined;
+    top?: number;
+    bottom?: number;
+    left?: number;
+    right?: number;
 };
 type Size = {
     width: number;
@@ -38,6 +41,7 @@ function useTooltipLocation(
     windowDimensions: ScaledSize,
     tooltipSize: Size,
 ): Location | null {
+    const isRTL = React.useMemo(() => I18nManager.getConstants().isRTL, []);
     return React.useMemo(() => {
         if (!tooltipSize.height || !tooltipSize.width || !triggerDimensions) {
             return null;
@@ -49,22 +53,26 @@ function useTooltipLocation(
 
         let top: number | undefined = triggerDimensions.y + triggerDimensions.height;
         let bottom: number | undefined;
-        const left: number = Math.max(
+        const left: number = clamp(
+            triggerDimensions.x + horizontalOffsetToCenterTooltip,
             boundaries.left,
-            Math.min(boundaries.right, triggerDimensions.x + horizontalOffsetToCenterTooltip),
+            boundaries.right,
         );
 
         if (top > boundaries.bottom) {
             top = undefined;
             bottom = windowDimensions.height - triggerDimensions.y;
         }
 
-        return {
-            left,
-            top,
-            bottom,
-        };
-    }, [triggerDimensions, windowDimensions, tooltipSize]);
+        if (isRTL) {
+            return {
+                top,
+                right: left,
+                bottom,
+            };
+        }
+        return { top, left, bottom };
+    }, [tooltipSize, triggerDimensions, windowDimensions, isRTL]);
 }
 
 function useTooltipMeasuring() {
@@ -94,7 +102,7 @@ export function UITooltipBox({ message, triggerRef, onClose, forId, testID }: UI
     const tooltipLocation = useTooltipLocation(triggerDimensions, windowDimensions, tooltipSize);
 
     const shadow = useShadow(4);
-    const styles = useStyles(theme, tooltipLocation, shadow);
+    const styles = useStyles(theme, shadow);
 
     if (!tooltipLocation) {
         return (
@@ -108,7 +116,7 @@ export function UITooltipBox({ message, triggerRef, onClose, forId, testID }: UI
         <Portal absoluteFill forId={forId}>
             <UITooltipBackdrop onTap={onClose} triggerRef={triggerRef} contentRef={contentRef} />
             <Animated.View
-                style={styles.container}
+                style={[styles.container, tooltipLocation]}
                 // entering={entering}
                 // exiting={exiting}
                 testID={testID}
@@ -123,7 +131,7 @@ export function UITooltipBox({ message, triggerRef, onClose, forId, testID }: UI
     );
 }
 
-const useStyles = makeStyles((theme: Theme, tooltipLocation: Location | null, shadow: any) => ({
+const useStyles = makeStyles((theme: Theme, shadow: any) => ({
     measureContainer: {
         position: 'absolute',
         width: UIConstant.tooltip.maxWidth,
@@ -132,7 +140,6 @@ const useStyles = makeStyles((theme: Theme, tooltipLocation: Location | null, sh
     },
     container: {
         position: 'absolute',
-        ...tooltipLocation,
     },
     shadowContainer: {
         backgroundColor: theme[ColorVariants.BackgroundBW],

kit/popups/src/useWindowDimensions.ts

@@ -0,0 +1,14 @@
+import { useDimensions } from '@tonlabs/uikit.layout';
+
+export function useWindowDimensions() {
+    /**
+     * On different platforms it behave differently.
+     *
+     * On iOS it seems `windowHeight` is equal to `screenHeight`.
+     *
+     * On Android `windowHeight` doesn't include a status bar height and
+     * a navigation bar (the one on the bottom). Since we use edge-to-edge
+     * right now we want to use `screenHeight` to be fullscreen.
+     */
+    return useDimensions().screen;
+}

kit/popups/src/useWindowDimensions.web.ts

@@ -0,0 +1,11 @@
+import { useDimensions } from '@tonlabs/uikit.layout';
+
+export function useWindowDimensions() {
+    /**
+     * On different platforms it behave differently.
+     *
+     * On web `screenHeight` is equal to a device screen height
+     * a browser window is usually smaller (and can be resized).
+     */
+    return useDimensions().window;
+}