react-native-molecules 0.5.0-beta.2 → 0.5.0-beta.20

package/components/Popover/usePlatformMeasure.native.ts

@@ -0,0 +1,90 @@
+import { useCallback, useEffect, useLayoutEffect } from 'react';
+import { AppState, Dimensions, Platform } from 'react-native';
+
+import { popoverDefaultStyles } from './common';
+import type { UsePlatformMeasureArgs, UsePlatformMeasureResult } from './usePlatformMeasure';
+
+export const usePlatformMeasure = ({
+    triggerRef,
+    isOpen,
+    calculatedPosition,
+    calculateAndSetPosition,
+    targetLayoutRef,
+    triggerDimensions,
+}: UsePlatformMeasureArgs): UsePlatformMeasureResult => {
+    const measureTarget = useCallback(() => {
+        if (triggerRef?.current) {
+            triggerRef.current.measure(
+                (
+                    _fx: number,
+                    _fy: number,
+                    width: number,
+                    height: number,
+                    px: number,
+                    py: number,
+                ) => {
+                    if (width !== 0 || height !== 0) {
+                        const newLayout = { x: px, y: py, width, height };
+                        const changed =
+                            !targetLayoutRef.current ||
+                            targetLayoutRef.current.x !== newLayout.x ||
+                            targetLayoutRef.current.y !== newLayout.y ||
+                            targetLayoutRef.current.width !== newLayout.width ||
+                            targetLayoutRef.current.height !== newLayout.height;
+
+                        if (changed) {
+                            targetLayoutRef.current = newLayout;
+                            calculateAndSetPosition();
+                        }
+                    } else {
+                        targetLayoutRef.current = null;
+                        calculateAndSetPosition();
+                    }
+                },
+                () => {
+                    console.error('Failed to measure target element for Popover.');
+                    targetLayoutRef.current = null;
+                    calculateAndSetPosition();
+                },
+            );
+        } else {
+            targetLayoutRef.current = null;
+            calculateAndSetPosition();
+        }
+    }, [triggerRef, calculateAndSetPosition, targetLayoutRef]);
+
+    useLayoutEffect(() => {
+        if (isOpen) {
+            measureTarget();
+        }
+    }, [isOpen, measureTarget, triggerDimensions]);
+
+    useEffect(() => {
+        if (!isOpen) return;
+        const subscription = Dimensions.addEventListener('change', measureTarget);
+        return () => {
+            if (typeof subscription?.remove === 'function') {
+                subscription.remove();
+            }
+        };
+    }, [isOpen, measureTarget]);
+
+    useEffect(() => {
+        if (!isOpen || Platform.OS === 'web') return;
+        const handleAppStateChange = (nextAppState: string) => {
+            if (nextAppState === 'active') {
+                setTimeout(measureTarget, 50);
+            }
+        };
+        const subscription = AppState.addEventListener('change', handleAppStateChange);
+        return () => {
+            if (typeof subscription?.remove === 'function') {
+                subscription.remove();
+            }
+        };
+    }, [isOpen, measureTarget]);
+
+    return {
+        popoverStyle: (calculatedPosition ?? popoverDefaultStyles) as any,
+    };
+};

package/components/Popover/usePlatformMeasure.ts

@@ -0,0 +1,118 @@
+import { type RefObject, useCallback, useEffect, useLayoutEffect, useMemo } from 'react';
+import type { LayoutRectangle, View, ViewStyle } from 'react-native';
+
+import { popoverDefaultStyles } from './common';
+
+export type UsePlatformMeasureArgs = {
+    triggerRef: RefObject<View | any> | undefined;
+    isOpen: boolean;
+    onClose?: () => void;
+    calculatedPosition: ViewStyle | null;
+    calculateAndSetPosition: () => void;
+    targetLayoutRef: RefObject<LayoutRectangle | null>;
+    popoverRef: RefObject<View | null>;
+    triggerDimensions?: { width: number; height: number } | null;
+};
+
+export type UsePlatformMeasureResult = {
+    /** Platform-adjusted popover position (includes scroll offset on web) */
+    popoverStyle: ViewStyle;
+};
+
+export const usePlatformMeasure = ({
+    triggerRef,
+    isOpen,
+    onClose,
+    calculatedPosition,
+    calculateAndSetPosition,
+    targetLayoutRef,
+    popoverRef,
+    triggerDimensions,
+}: UsePlatformMeasureArgs): UsePlatformMeasureResult => {
+    const measureTarget = useCallback(() => {
+        if (triggerRef?.current) {
+            triggerRef.current.measureInWindow(
+                (x: number, y: number, width: number, height: number) => {
+                    if (width !== 0 || height !== 0) {
+                        const newLayout = { x, y, width, height };
+                        const changed =
+                            !targetLayoutRef.current ||
+                            targetLayoutRef.current.x !== newLayout.x ||
+                            targetLayoutRef.current.y !== newLayout.y ||
+                            targetLayoutRef.current.width !== newLayout.width ||
+                            targetLayoutRef.current.height !== newLayout.height;
+
+                        if (changed) {
+                            targetLayoutRef.current = newLayout;
+                            calculateAndSetPosition();
+                        }
+                    } else {
+                        targetLayoutRef.current = null;
+                        calculateAndSetPosition();
+                    }
+                },
+            );
+        } else {
+            targetLayoutRef.current = null;
+            calculateAndSetPosition();
+        }
+    }, [triggerRef, calculateAndSetPosition, targetLayoutRef]);
+
+    useLayoutEffect(() => {
+        if (isOpen) {
+            const timeoutId = setTimeout(measureTarget, 0);
+            return () => clearTimeout(timeoutId);
+        }
+        return;
+    }, [isOpen, measureTarget, triggerDimensions]);
+
+    useLayoutEffect(() => {
+        if (!isOpen) return;
+        const handleResize = () => {
+            if (triggerRef?.current && isOpen) {
+                window.requestAnimationFrame(measureTarget);
+            }
+        };
+        window.addEventListener('resize', handleResize);
+        window.addEventListener('scroll', handleResize, true);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+            window.removeEventListener('scroll', handleResize, true);
+        };
+    }, [isOpen, measureTarget, triggerRef]);
+
+    useEffect(() => {
+        if (!isOpen || !onClose) return;
+        const handleClickOutside = (event: MouseEvent) => {
+            const popoverElement = popoverRef.current as any as HTMLElement;
+            const targetElement = triggerRef?.current as any as HTMLElement;
+            if (
+                popoverElement &&
+                !popoverElement.contains(event.target as Node) &&
+                targetElement &&
+                !targetElement.contains(event.target as Node)
+            ) {
+                onClose();
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside, { capture: true });
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside, { capture: true });
+        };
+    }, [isOpen, onClose, popoverRef, triggerRef]);
+
+    const popoverStyle = useMemo(() => {
+        if (!calculatedPosition) return popoverDefaultStyles;
+
+        const scrollX = window.scrollX ?? window.pageXOffset ?? 0;
+        const scrollY = window.scrollY ?? window.pageYOffset ?? 0;
+
+        return {
+            ...calculatedPosition,
+            left: (calculatedPosition.left as number) + scrollX,
+            top: (calculatedPosition.top as number) + scrollY,
+        };
+    }, [calculatedPosition]);
+
+    return { popoverStyle };
+};

package/components/Popover/utils.ts

@@ -0,0 +1,34 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredComponentStylesWithFallback } from '../../core';
+import { popoverDefaultStyles } from './common';
+
+const popoverStylesDefault = StyleSheet.create(theme => ({
+    popoverContainer: {
+        ...popoverDefaultStyles,
+        backgroundColor: theme.colors.surface,
+        borderRadius: 4,
+        shadowColor: 'rgba(0, 0, 0, 1)',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: theme.dark ? 0.7 : 0.3,
+        shadowRadius: 10,
+        elevation: 5,
+        zIndex: 100,
+    },
+    overlay: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: 'transparent',
+        _web: {
+            cursor: 'default',
+        },
+    },
+}));
+
+export const popoverStyles = getRegisteredComponentStylesWithFallback(
+    'Popover',
+    popoverStylesDefault,
+);