@coze-arch/cli 0.0.10 → 0.0.11

package/lib/__templates__/expo/client/heroui/helpers/internal/hooks/use-popup-bottom-sheet-content-animation.ts

@@ -0,0 +1,67 @@
+import type { SharedValue } from 'react-native-reanimated';
+import {
+  Extrapolation,
+  interpolate,
+  useAnimatedReaction,
+  useSharedValue,
+} from 'react-native-reanimated';
+
+/**
+ * Props for usePopupBottomSheetContentAnimation hook
+ */
+export interface UsePopupBottomSheetContentAnimationProps {
+  /**
+   * Animation progress shared value (0=idle, 1=open, 2=close)
+   */
+  progress: SharedValue<number>;
+  /**
+   * Dragging state shared value
+   */
+  isDragging: SharedValue<boolean>;
+}
+
+/**
+ * Animation hook for popup bottom sheet content components (Popover, Select bottom sheet presentation)
+ * Handles synchronization between BottomSheet animatedIndex and popup progress state
+ */
+export function usePopupBottomSheetContentAnimation({
+  progress,
+  isDragging,
+}: UsePopupBottomSheetContentAnimationProps) {
+  const animatedIndex = useSharedValue(-1);
+  const isPanActivated = useSharedValue(false);
+  const isClosingOnSwipe = useSharedValue(false);
+
+  useAnimatedReaction(
+    () => isDragging.get(),
+    (current, previous) => {
+      if (current && !previous) {
+        isClosingOnSwipe.set(false);
+      }
+      if (!isPanActivated.get() && current) {
+        isPanActivated.set(true);
+      }
+    }
+  );
+
+  useAnimatedReaction(
+    () => animatedIndex.get(),
+    (current) => {
+      if (!isPanActivated.get()) {
+        progress.set(
+          interpolate(current, [-1, 0], [0, 1], Extrapolation.CLAMP)
+        );
+      } else {
+        progress.set(
+          interpolate(current, [0, -1], [1, 2], Extrapolation.CLAMP)
+        );
+      }
+    }
+  );
+
+  return {
+    animatedIndex,
+    isPanActivated,
+    isClosingOnSwipe,
+  };
+}

package/lib/__templates__/expo/client/heroui/helpers/internal/hooks/use-popup-dialog-content-animation.ts

@@ -0,0 +1,296 @@
+import { useEffect, useMemo } from 'react';
+import { Keyboard, useWindowDimensions } from 'react-native';
+import { Gesture } from 'react-native-gesture-handler';
+import type { SharedValue } from 'react-native-reanimated';
+import {
+  Easing,
+  Extrapolation,
+  interpolate,
+  Keyframe,
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+  withSpring,
+  type EntryOrExitLayoutType,
+} from 'react-native-reanimated';
+import { scheduleOnRN } from 'react-native-worklets';
+import { useAnimationSettings } from '../contexts/animation-settings-context';
+import type { PopupDialogContentAnimation } from '../types/animation';
+import {
+  getAnimationState,
+  getIsAnimationDisabledValue,
+} from '../utils/animation';
+
+export interface UsePopupDialogContentAnimationProps {
+  /**
+   * Whether the dialog is open
+   */
+  isOpen: boolean;
+  /**
+   * Progress shared value (0 = closed, 1 = open, 2 = closing)
+   */
+  progress: SharedValue<number>;
+  /**
+   * Whether user is currently dragging
+   */
+  isDragging: SharedValue<boolean>;
+  /**
+   * Gesture release animation running state shared value
+   */
+  isGestureReleaseAnimationRunning: SharedValue<boolean>;
+  /**
+   * Callback when dialog open state changes
+   */
+  onOpenChange: (open: boolean) => void;
+  /**
+   * Animation configuration for content
+   */
+  animation?: PopupDialogContentAnimation;
+  /**
+   * Whether the dialog content can be swiped to dismiss
+   * @default true
+   */
+  isSwipeable?: boolean;
+}
+
+/**
+ * Default entering animation for dialog content
+ * Dialog content animates with scale and opacity transitions
+ */
+const DEFAULT_ENTERING_ANIMATION: EntryOrExitLayoutType = new Keyframe({
+  0: {
+    transform: [{ scale: 0.96 }],
+    opacity: 0,
+  },
+  100: {
+    transform: [{ scale: 1 }],
+    opacity: 1,
+    easing: Easing.out(Easing.ease),
+  },
+}).duration(200);
+
+/**
+ * Default exiting animation for dialog content
+ * Mirrors the entering animation - content exits with fade out and scale down
+ */
+const DEFAULT_EXITING_ANIMATION: EntryOrExitLayoutType = new Keyframe({
+  0: {
+    transform: [{ scale: 1 }],
+    opacity: 1,
+  },
+  100: {
+    transform: [{ scale: 0.96 }],
+    opacity: 0,
+    easing: Easing.in(Easing.ease),
+  },
+}).duration(150);
+
+export const usePopupDialogContentAnimation = ({
+  isOpen,
+  progress,
+  isDragging,
+  isGestureReleaseAnimationRunning,
+  onOpenChange,
+  animation,
+  isSwipeable = true,
+}: UsePopupDialogContentAnimationProps) => {
+  const { height: screenHeight } = useWindowDimensions();
+
+  const { isAllAnimationsDisabled } = useAnimationSettings();
+
+  const { animationConfig, isAnimationDisabled } = getAnimationState(animation);
+
+  const isAnimationDisabledValue = getIsAnimationDisabledValue({
+    isAnimationDisabled,
+    isAllAnimationsDisabled,
+  });
+
+  // Get entering animation value with default Keyframe animation
+  const enteringValue = animationConfig?.entering ?? DEFAULT_ENTERING_ANIMATION;
+
+  // Get exiting animation value with default Keyframe animation
+  const exitingValue = animationConfig?.exiting ?? DEFAULT_EXITING_ANIMATION;
+
+  const contentY = useSharedValue(0);
+  const contentHeight = useSharedValue(0);
+  const progressAnchor = useSharedValue(1);
+  const contentTranslateYAnchor = useSharedValue(0);
+  const contentScaleAnchor = useSharedValue(1);
+  const gestureTranslationY = useSharedValue(0);
+
+  useEffect(() => {
+    if (isOpen) {
+      progress.set(1);
+    }
+  }, [isOpen, progress]);
+
+  const dismissKeyboard = () => {
+    Keyboard.dismiss();
+  };
+
+  const contentTranslateY = useDerivedValue(() => {
+    const maxDragDistance = screenHeight - contentY.get();
+
+    if (progress.get() >= 1) {
+      return interpolate(
+        progress.get(),
+        [1, 2],
+        [0, maxDragDistance],
+        Extrapolation.CLAMP
+      );
+    }
+
+    const absoluteGestureTranslationY = Math.abs(gestureTranslationY.get());
+
+    return interpolate(
+      absoluteGestureTranslationY,
+      [0, screenHeight],
+      [0, -50],
+      Extrapolation.CLAMP
+    );
+  });
+
+  const contentScale = useDerivedValue(() => {
+    return interpolate(progress.get(), [1, 2], [1, 0.95], Extrapolation.CLAMP);
+  });
+
+  const panGesture = useMemo(
+    () =>
+      Gesture.Pan()
+        .enabled(isSwipeable && isOpen && !isAnimationDisabledValue)
+        .onStart(() => isDragging.set(true))
+        .onUpdate((event) => {
+          if (!isDragging.get()) return;
+
+          const maxDragDistance = screenHeight - contentY.get();
+
+          gestureTranslationY.set(event.translationY);
+
+          if (event.translationY > 0) {
+            const progressValue = 1 + event.translationY / maxDragDistance;
+            progress.set(Math.max(1, Math.min(progressValue, 2)));
+          } else if (event.translationY < 0) {
+            const progressValue =
+              1 - Math.abs(event.translationY) / contentY.get();
+            progress.set(Math.max(0, Math.min(progressValue, 1)));
+          }
+        })
+        .onFinalize(() => {
+          progressAnchor.set(progress.get());
+          contentTranslateYAnchor.set(contentTranslateY.get());
+          contentScaleAnchor.set(contentScale.get());
+
+          if (progress.get() > 1.1) {
+            isGestureReleaseAnimationRunning.set(true);
+            scheduleOnRN(dismissKeyboard);
+            progress.set(
+              withSpring(
+                2,
+                {
+                  mass: 4,
+                  damping: 120,
+                  stiffness: 900,
+                  overshootClamping: false,
+                },
+                () => {
+                  isGestureReleaseAnimationRunning.set(false);
+                }
+              )
+            );
+            isDragging.set(false);
+            setTimeout(() => {
+              progress.set(2);
+              scheduleOnRN(onOpenChange, false);
+            }, 300);
+            setTimeout(() => {
+              progress.set(0);
+            }, 350);
+          } else {
+            isGestureReleaseAnimationRunning.set(true);
+            progress.set(
+              withSpring(1, {}, () => {
+                isGestureReleaseAnimationRunning.set(false);
+              })
+            );
+            isDragging.set(false);
+          }
+        }),
+    [
+      contentScale,
+      contentScaleAnchor,
+      contentTranslateY,
+      contentTranslateYAnchor,
+      contentY,
+      isOpen,
+      isDragging,
+      isGestureReleaseAnimationRunning,
+      isSwipeable,
+      onOpenChange,
+      progress,
+      progressAnchor,
+      screenHeight,
+      isAnimationDisabledValue,
+      gestureTranslationY,
+    ]
+  );
+
+  const rDragContainerStyle = useAnimatedStyle(() => {
+    if (isGestureReleaseAnimationRunning.get()) {
+      return {
+        opacity: interpolate(
+          progress.get(),
+          [1, progressAnchor.get(), 1.5, 1.75],
+          [1, 1, 1, 0]
+        ),
+        transform: [
+          {
+            translateY: interpolate(
+              progress.get(),
+              [
+                progressAnchor.get(),
+                1,
+                progressAnchor.get(),
+                progressAnchor.get() + 0.1,
+                2,
+              ],
+              [
+                contentTranslateYAnchor.get(),
+                0,
+                contentTranslateYAnchor.get(),
+                contentTranslateYAnchor.get() + 50,
+                contentTranslateYAnchor.get() - 150,
+              ]
+            ),
+          },
+          {
+            scale: interpolate(
+              progress.get(),
+              [progressAnchor.get(), 1, progressAnchor.get(), 2],
+              [contentScaleAnchor.get(), 1, contentScaleAnchor.get(), 0.75]
+            ),
+          },
+        ],
+      };
+    }
+
+    return {
+      transform: [
+        {
+          translateY: contentTranslateY.get(),
+        },
+        {
+          scale: contentScale.get(),
+        },
+      ],
+    };
+  });
+
+  return {
+    contentY,
+    contentHeight,
+    panGesture,
+    rDragContainerStyle,
+    entering: isAnimationDisabledValue ? undefined : enteringValue,
+    exiting: isAnimationDisabledValue ? undefined : exitingValue,
+  };
+};

package/lib/__templates__/expo/client/heroui/helpers/internal/hooks/use-popup-overlay-animation.ts

@@ -0,0 +1,91 @@
+import type { SharedValue } from 'react-native-reanimated';
+import {
+  FadeIn,
+  FadeOut,
+  interpolate,
+  useAnimatedStyle,
+} from 'react-native-reanimated';
+import { useAnimationSettings } from '../contexts/animation-settings-context';
+import type { PopupOverlayAnimation } from '../types/animation';
+import {
+  getAnimationState,
+  getAnimationValueProperty,
+  getIsAnimationDisabledValue,
+} from '../utils/animation';
+
+/**
+ * Animation hook for popup overlay components (Dialog, Select, BottomSheet, Popover, etc.)
+ * Handles both progress-based opacity animation and entering/exiting animations
+ */
+export function usePopupOverlayAnimation(options: {
+  /** Animation progress shared value (0=idle, 1=open, 2=close) */
+  progress?: SharedValue<number>;
+  /** Dragging state shared value */
+  isDragging?: SharedValue<boolean>;
+  /** Gesture release animation running state shared value (optional, for components with swipe gestures) */
+  isGestureReleaseAnimationRunning?: SharedValue<boolean>;
+  /** Animation configuration for overlay */
+  animation?: PopupOverlayAnimation;
+}) {
+  const { progress, isDragging, isGestureReleaseAnimationRunning, animation } =
+    options;
+
+  const { isAllAnimationsDisabled } = useAnimationSettings();
+
+  const { animationConfig, isAnimationDisabled } = getAnimationState(animation);
+
+  const isAnimationDisabledValue = getIsAnimationDisabledValue({
+    isAnimationDisabled,
+    isAllAnimationsDisabled,
+  });
+
+  // Opacity animation (progress-based, for bottom-sheet/dialog)
+  const opacityValue = getAnimationValueProperty({
+    animationValue: animationConfig?.opacity,
+    property: 'value',
+    defaultValue: [0, 1, 0] as [number, number, number],
+  });
+
+  const rContainerStyle = useAnimatedStyle(() => {
+    if (progress?.get() === undefined) {
+      return {};
+    }
+
+    if (isAnimationDisabledValue) {
+      return {
+        opacity: progress.get() > 0 ? 1 : 0,
+      };
+    }
+
+    if (
+      (isDragging?.get() || isGestureReleaseAnimationRunning?.get()) &&
+      progress.get() <= 1
+    ) {
+      return {
+        opacity: 1,
+      };
+    }
+
+    return {
+      opacity: interpolate(progress.get(), [0, 1, 2], opacityValue),
+    };
+  });
+
+  // Entering/exiting animations (for popover presentation)
+  const enteringValue =
+    animationConfig?.entering ??
+    (isAnimationDisabledValue ? undefined : FadeIn.duration(200));
+
+  const exitingValue =
+    animationConfig?.exiting ??
+    (isAnimationDisabledValue ? undefined : FadeOut.duration(150));
+
+  return {
+    /** Progress-based animated style (for bottom-sheet/dialog) */
+    rContainerStyle,
+    /** Entering animation (for popover presentation) */
+    entering: isAnimationDisabledValue ? undefined : enteringValue,
+    /** Exiting animation (for popover presentation) */
+    exiting: isAnimationDisabledValue ? undefined : exitingValue,
+  };
+}

package/lib/__templates__/expo/client/heroui/helpers/internal/hooks/use-popup-popover-content-animation.ts

@@ -0,0 +1,199 @@
+import {
+  Easing,
+  Keyframe,
+  type EntryOrExitLayoutType,
+} from 'react-native-reanimated';
+import { useAnimationSettings } from '../contexts/animation-settings-context';
+import type { PopupPopoverContentAnimation } from '../types/animation';
+import {
+  getAnimationState,
+  getIsAnimationDisabledValue,
+} from '../utils/animation';
+
+/**
+ * Placement options for popover/select content
+ */
+export type PopoverContentPlacement = 'top' | 'bottom' | 'left' | 'right';
+
+/**
+ * Props for usePopupPopoverContentAnimation hook
+ */
+export interface UsePopupPopoverContentAnimationProps {
+  /**
+   * Placement of the popover/select content
+   */
+  placement: PopoverContentPlacement;
+  /**
+   * Alignment offset for the popover content
+   */
+  offset: number;
+  /**
+   * Animation configuration for content
+   */
+  animation?: PopupPopoverContentAnimation;
+}
+/**
+ * Get default entering animation based on placement
+ * Uses Keyframes with translateY/translateX, scale, and opacity transitions
+ */
+function getDefaultEnteringAnimation(
+  placement: PopoverContentPlacement,
+  offset: number
+): EntryOrExitLayoutType {
+  const translateDistance = Math.min(offset, 12);
+
+  switch (placement) {
+    case 'top':
+      // Content comes from below (translateY: translateDistance -> 0)
+      return new Keyframe({
+        0: {
+          transform: [{ translateY: translateDistance }, { scale: 0.97 }],
+          opacity: 0.25,
+        },
+        100: {
+          transform: [{ translateY: 0 }, { scale: 1 }],
+          opacity: 1,
+          easing: Easing.out(Easing.ease),
+        },
+      }).duration(200);
+    case 'bottom':
+      // Content comes from above (translateY: -translateDistance -> 0)
+      return new Keyframe({
+        0: {
+          transform: [{ translateY: -translateDistance }, { scale: 0.97 }],
+          opacity: 0.25,
+        },
+        100: {
+          transform: [{ translateY: 0 }, { scale: 1 }],
+          opacity: 1,
+          easing: Easing.out(Easing.ease),
+        },
+      }).duration(200);
+    case 'left':
+      // Content comes from right (translateX: translateDistance -> 0)
+      return new Keyframe({
+        0: {
+          transform: [{ translateX: translateDistance }, { scale: 0.97 }],
+          opacity: 0.25,
+        },
+        100: {
+          transform: [{ translateX: 0 }, { scale: 1 }],
+          opacity: 1,
+          easing: Easing.out(Easing.ease),
+        },
+      }).duration(200);
+    case 'right':
+      // Content comes from left (translateX: -translateDistance -> 0)
+      return new Keyframe({
+        0: {
+          transform: [{ translateX: -translateDistance }, { scale: 0.97 }],
+          opacity: 0.25,
+        },
+        100: {
+          transform: [{ translateX: 0 }, { scale: 1 }],
+          opacity: 1,
+          easing: Easing.out(Easing.ease),
+        },
+      }).duration(200);
+  }
+}
+
+/**
+ * Get default exiting animation based on placement
+ * Mirrors the entering animation for each placement
+ */
+function getDefaultExitingAnimation(
+  placement: PopoverContentPlacement,
+  offset: number
+): EntryOrExitLayoutType {
+  const translateDistance = Math.min(offset, 12);
+
+  switch (placement) {
+    case 'top':
+      // Content exits downward (translateY: 0 -> translateDistance)
+      return new Keyframe({
+        0: {
+          transform: [{ translateY: 0 }, { scale: 1 }],
+          opacity: 1,
+        },
+        100: {
+          transform: [{ translateY: translateDistance }, { scale: 0.97 }],
+          opacity: 0,
+          easing: Easing.out(Easing.ease),
+        },
+      }).duration(150);
+    case 'bottom':
+      // Content exits upward (translateY: 0 -> -translateDistance)
+      return new Keyframe({
+        0: {
+          transform: [{ translateY: 0 }, { scale: 1 }],
+          opacity: 1,
+        },
+        100: {
+          transform: [{ translateY: -translateDistance }, { scale: 0.97 }],
+          opacity: 0,
+          easing: Easing.out(Easing.ease),
+        },
+      }).duration(150);
+    case 'left':
+      // Content exits rightward (translateX: 0 -> translateDistance)
+      return new Keyframe({
+        0: {
+          transform: [{ translateX: 0 }, { scale: 1 }],
+          opacity: 1,
+        },
+        100: {
+          transform: [{ translateX: translateDistance }, { scale: 0.97 }],
+          opacity: 0,
+          easing: Easing.out(Easing.ease),
+        },
+      }).duration(150);
+    case 'right':
+      // Content exits leftward (translateX: 0 -> -translateDistance)
+      return new Keyframe({
+        0: {
+          transform: [{ translateX: 0 }, { scale: 1 }],
+          opacity: 1,
+        },
+        100: {
+          transform: [{ translateX: -translateDistance }, { scale: 0.97 }],
+          opacity: 0,
+          easing: Easing.out(Easing.ease),
+        },
+      }).duration(150);
+  }
+}
+
+/**
+ * Animation hook for popover/select content components
+ * Returns entering and exiting animations based on configuration and placement
+ */
+export function usePopupPopoverContentAnimation({
+  placement,
+  offset,
+  animation,
+}: UsePopupPopoverContentAnimationProps) {
+  const { isAllAnimationsDisabled } = useAnimationSettings();
+
+  const { animationConfig, isAnimationDisabled } = getAnimationState(animation);
+
+  const isAnimationDisabledValue = getIsAnimationDisabledValue({
+    isAnimationDisabled,
+    isAllAnimationsDisabled,
+  });
+
+  // Get entering animation value with default based on placement
+  const enteringValue =
+    animationConfig?.entering ?? getDefaultEnteringAnimation(placement, offset);
+
+  // Get exiting animation value with default based on placement
+  const exitingValue =
+    animationConfig?.exiting ?? getDefaultExitingAnimation(placement, offset);
+
+  // Return entering and exiting animations
+  // If animations are disabled, return undefined to disable animations
+  return {
+    entering: isAnimationDisabledValue ? undefined : enteringValue,
+    exiting: isAnimationDisabledValue ? undefined : exitingValue,
+  };
+}

package/lib/__templates__/expo/client/heroui/helpers/internal/hooks/use-popup-root-animation.ts

@@ -0,0 +1,26 @@
+import { useSharedValue } from 'react-native-reanimated';
+import type { AnimationRootDisableAll } from '../types/animation';
+import { useCombinedAnimationDisabledState } from './use-combined-animation-disabled-state';
+
+/**
+ * Root animation hook for popup-like components (Dialog, Select, etc.)
+ * Manages component state transitions and animation coordination
+ */
+export function usePopupRootAnimation(options: {
+  animation?: AnimationRootDisableAll;
+}) {
+  const isAllAnimationsDisabled = useCombinedAnimationDisabledState(
+    options.animation
+  );
+
+  const progress = useSharedValue(0);
+  const isDragging = useSharedValue(false);
+  const isGestureReleaseAnimationRunning = useSharedValue(false);
+
+  return {
+    isAllAnimationsDisabled,
+    progress,
+    isDragging,
+    isGestureReleaseAnimationRunning,
+  };
+}