@erquhart/heroui-native 1.0.0-beta.10.1

package/src/helpers/hooks/use-popup-popover-content-animation.ts

@@ -0,0 +1,154 @@
+import type { SharedValue } from 'react-native-reanimated';
+import {
+  Extrapolation,
+  interpolate,
+  useAnimatedStyle,
+} from 'react-native-reanimated';
+import { useAnimationSettings } from '../contexts/animation-settings-context';
+import type { PopupPopoverContentAnimation } from '../types/animation';
+import {
+  getAnimationState,
+  getAnimationValueProperty,
+  getIsAnimationDisabledValue,
+} from '../utils/animation';
+
+/**
+ * Placement options for popover/select content
+ */
+export type PopoverContentPlacement = 'top' | 'bottom' | 'left' | 'right';
+
+/**
+ * Props for usePopupPopoverContentAnimation hook
+ */
+export interface UsePopupPopoverContentAnimationProps {
+  /**
+   * Animation progress shared value (0=idle, 1=open, 2=close)
+   */
+  progress: SharedValue<number>;
+  /**
+   * Placement of the popover/select content
+   */
+  placement: PopoverContentPlacement;
+  /**
+   * Animation configuration for content
+   */
+  animation?: PopupPopoverContentAnimation;
+}
+
+/**
+ * Animation hook for popover/select content components
+ * Handles placement-based animations (opacity, scale, translate) based on popup progress state
+ */
+export function usePopupPopoverContentAnimation({
+  progress,
+  placement,
+  animation,
+}: UsePopupPopoverContentAnimationProps) {
+  const { isAllAnimationsDisabled } = useAnimationSettings();
+
+  const { animationConfig, isAnimationDisabled } = getAnimationState(animation);
+
+  const isAnimationDisabledValue = getIsAnimationDisabledValue({
+    isAnimationDisabled,
+    isAllAnimationsDisabled,
+  });
+
+  // Calculate default transform values based on placement
+  let defaultTransformOrigin = 'top';
+  let defaultTranslateX: [number, number, number] = [0, 0, 0];
+  let defaultTranslateY: [number, number, number] = [0, 0, 0];
+
+  if (placement === 'top') {
+    defaultTransformOrigin = 'bottom';
+    defaultTranslateY = [4, 0, 4];
+  } else if (placement === 'bottom') {
+    defaultTransformOrigin = 'top';
+    defaultTranslateY = [-4, 0, -4];
+  } else if (placement === 'left') {
+    defaultTransformOrigin = 'right';
+    defaultTranslateX = [4, 0, 4];
+  } else if (placement === 'right') {
+    defaultTransformOrigin = 'left';
+    defaultTranslateX = [-4, 0, -4];
+  }
+
+  // Get animation values with defaults
+  const opacityValue = getAnimationValueProperty({
+    animationValue: animationConfig?.opacity,
+    property: 'value',
+    defaultValue: [0, 1, 0] as [number, number, number],
+  });
+
+  const scaleValue = getAnimationValueProperty({
+    animationValue: animationConfig?.scale,
+    property: 'value',
+    defaultValue: [0.95, 1, 0.95] as [number, number, number],
+  });
+
+  const translateXValue = getAnimationValueProperty({
+    animationValue: animationConfig?.translateX,
+    property: 'value',
+    defaultValue: defaultTranslateX,
+  });
+
+  const translateYValue = getAnimationValueProperty({
+    animationValue: animationConfig?.translateY,
+    property: 'value',
+    defaultValue: defaultTranslateY,
+  });
+
+  const transformOriginValue = getAnimationValueProperty({
+    animationValue: animationConfig?.transformOrigin,
+    property: 'value',
+    defaultValue: defaultTransformOrigin,
+  });
+
+  const rContainerStyle = useAnimatedStyle(() => {
+    // Handle disabled state first
+    if (isAnimationDisabledValue) {
+      return {
+        opacity: progress.get() > 0 ? 1 : 0,
+      };
+    }
+
+    return {
+      opacity: interpolate(
+        progress.get(),
+        [0, 1, 2],
+        opacityValue,
+        Extrapolation.CLAMP
+      ),
+      transformOrigin: transformOriginValue,
+      transform: [
+        {
+          translateX: interpolate(
+            progress.get(),
+            [0, 1, 2],
+            translateXValue,
+            Extrapolation.CLAMP
+          ),
+        },
+        {
+          translateY: interpolate(
+            progress.get(),
+            [0, 1, 2],
+            translateYValue,
+            Extrapolation.CLAMP
+          ),
+        },
+        {
+          scale: interpolate(
+            progress.get(),
+            [0, 1, 2],
+            scaleValue,
+            Extrapolation.CLAMP
+          ),
+        },
+      ],
+    };
+  });
+
+  return {
+    rContainerStyle,
+  };
+}

package/src/helpers/hooks/use-popup-root-animation.ts

@@ -0,0 +1,248 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Keyboard } from 'react-native';
+import {
+  Easing,
+  useSharedValue,
+  withSpring,
+  withTiming,
+  type WithTimingConfig,
+} from 'react-native-reanimated';
+import type {
+  AnimationRoot,
+  PopupRootAnimationConfig,
+} from '../types/animation';
+import {
+  getIsAnimationDisabledValue,
+  getRootAnimationState,
+} from '../utils/animation';
+import { useCombinedAnimationDisabledState } from './use-combined-animation-disabled-state';
+
+/**
+ * Component state type for popup-like components
+ */
+type ComponentState = 'idle' | 'open' | 'close';
+
+/**
+ * Default entering animation type
+ */
+const DEFAULT_ENTERING_TYPE = 'timing' as const;
+
+/**
+ * Default exiting animation type
+ */
+const DEFAULT_EXITING_TYPE = 'timing' as const;
+
+/**
+ * Default entering animation configuration
+ */
+const DEFAULT_ENTERING_CONFIG: WithTimingConfig = {
+  duration: 200,
+  easing: Easing.out(Easing.ease),
+};
+
+/**
+ * Default exiting animation configuration
+ */
+const DEFAULT_EXITING_CONFIG: WithTimingConfig = {
+  duration: 150,
+  easing: Easing.bezier(0.4, 0, 1, 1),
+};
+
+/**
+ * Root animation hook for popup-like components (Dialog, Select, etc.)
+ * Manages component state transitions and animation coordination
+ */
+export function usePopupRootAnimation(options: {
+  /** The external controlled isOpen state */
+  isOpen: boolean | undefined;
+  /** The default open state for uncontrolled mode */
+  isDefaultOpen?: boolean;
+  /** Callback to trigger when open state should change */
+  onOpenChange: ((value: boolean) => void) | undefined;
+  /** Delay in milliseconds before the component closes (for exit animations) */
+  closeDelay?: number;
+  /** Whether to dismiss the keyboard when the component closes */
+  isDismissKeyboardOnClose?: boolean;
+  /** Animation configuration for component root */
+  animation?: AnimationRoot<PopupRootAnimationConfig>;
+}) {
+  const {
+    isOpen: externalIsOpen,
+    isDefaultOpen,
+    onOpenChange: externalOnOpenChange,
+    closeDelay = 300,
+    isDismissKeyboardOnClose = true,
+    animation,
+  } = options;
+
+  const { animationConfig, isAnimationDisabled } =
+    getRootAnimationState(animation);
+
+  // Combine parent and own disable-all states (parent wins)
+  const isAllAnimationsDisabled = useCombinedAnimationDisabledState(animation);
+
+  const isAnimationDisabledValue = getIsAnimationDisabledValue({
+    isAnimationDisabled,
+    isAllAnimationsDisabled,
+  });
+
+  // Extract entering animation configuration
+  const enteringAnimation = animationConfig?.entering;
+  const enteringType = enteringAnimation?.type ?? DEFAULT_ENTERING_TYPE;
+  const enteringConfig = enteringAnimation?.config ?? DEFAULT_ENTERING_CONFIG;
+
+  // Extract exiting animation configuration
+  const exitingAnimation = animationConfig?.exiting;
+  const exitingType = exitingAnimation?.type ?? DEFAULT_EXITING_TYPE;
+  const exitingConfig = exitingAnimation?.config ?? DEFAULT_EXITING_CONFIG;
+
+  // If animation is disabled, closeDelay should be 0
+  const closeDelayValue = isAnimationDisabledValue ? 0 : closeDelay;
+
+  // Internal isOpen state that gets delayed when closing
+  const [internalIsOpen, setInternalIsOpen] = useState<boolean>(
+    () => externalIsOpen ?? isDefaultOpen ?? false
+  );
+
+  const [componentState, setComponentState] = useState<ComponentState>(() =>
+    (externalIsOpen ?? isDefaultOpen) ? 'open' : 'idle'
+  );
+  const timeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
+  const previousExternalIsOpenRef = useRef<boolean | undefined>(externalIsOpen);
+
+  const progressValue: Record<ComponentState, number> = {
+    idle: 0,
+    open: 1,
+    close: 2,
+  };
+
+  const progress = useSharedValue(progressValue[componentState]);
+  const isDragging = useSharedValue(false);
+  const isGestureReleaseAnimationRunning = useSharedValue(false);
+
+  // Animation function for opening
+  const animateOpen = useCallback(() => {
+    if (isAnimationDisabledValue) {
+      progress.set(1);
+      return;
+    }
+
+    if (enteringType === 'spring') {
+      progress.set(withSpring(1, enteringConfig));
+    } else {
+      progress.set(withTiming(1, enteringConfig));
+    }
+  }, [progress, enteringType, enteringConfig, isAnimationDisabledValue]);
+
+  // Animation function for closing
+  const animateClose = useCallback(() => {
+    if (isAnimationDisabledValue) {
+      progress.set(2);
+      return;
+    }
+
+    if (exitingType === 'spring') {
+      progress.set(withSpring(2, exitingConfig));
+    } else {
+      progress.set(withTiming(2, exitingConfig));
+    }
+  }, [progress, exitingType, exitingConfig, isAnimationDisabledValue]);
+
+  // Reusable function to handle open/close state changes
+  const updateComponentState = useCallback(
+    (value: boolean, callback?: (value: boolean) => void) => {
+      if (value) {
+        // Immediate open
+        clearTimeout(timeoutRef.current);
+        setInternalIsOpen(true);
+        setComponentState('open');
+        animateOpen();
+        callback?.(value);
+      } else {
+        // Delayed close
+        setComponentState('close');
+        animateClose();
+        if (isDismissKeyboardOnClose) {
+          Keyboard.dismiss();
+        }
+        if (closeDelayValue > 0) {
+          clearTimeout(timeoutRef.current);
+          timeoutRef.current = setTimeout(() => {
+            setInternalIsOpen(false);
+            setComponentState('idle');
+            progress.set(0);
+            callback?.(value);
+          }, closeDelayValue);
+        } else {
+          setInternalIsOpen(false);
+          setComponentState('idle');
+          progress.set(0);
+          callback?.(value);
+        }
+      }
+    },
+    [
+      closeDelayValue,
+      isDismissKeyboardOnClose,
+      progress,
+      animateOpen,
+      animateClose,
+    ]
+  );
+
+  // Sync internal state when external isOpen changes
+  useEffect(() => {
+    if (externalIsOpen !== undefined) {
+      const previousValue = previousExternalIsOpenRef.current;
+      const hasChanged = previousValue !== externalIsOpen;
+      previousExternalIsOpenRef.current = externalIsOpen;
+
+      // Check if internal state already matches external state
+      // If we're already in sync or transitioning to the same state, don't call callback
+      // (prevents double-calling when prop change is a reaction to our callback)
+      const isAlreadyOpen = externalIsOpen && componentState === 'open';
+      // When closing, 'close' state means we're already transitioning to closed
+      const isAlreadyClosed =
+        !externalIsOpen &&
+        (componentState === 'idle' || componentState === 'close');
+      const isAlreadySynced = isAlreadyOpen || isAlreadyClosed;
+
+      // Only call callback when syncing if:
+      // 1. The value actually changed, AND
+      // 2. We're not already in sync (to prevent double-calling)
+      if (hasChanged && !isAlreadySynced) {
+        updateComponentState(externalIsOpen, externalOnOpenChange);
+      } else {
+        updateComponentState(externalIsOpen);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [externalIsOpen]);
+
+  // Wrapped onOpenChange that handles animation state transitions
+  const handleOpenChange = useCallback(
+    (value: boolean) => {
+      updateComponentState(value, externalOnOpenChange);
+    },
+    [updateComponentState, externalOnOpenChange]
+  );
+
+  // Cleanup timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  return {
+    internalIsOpen,
+    componentState,
+    progress,
+    isDragging,
+    isGestureReleaseAnimationRunning,
+    onOpenChange: handleOpenChange,
+    isAllAnimationsDisabled,
+  };
+}