@coze-arch/cli 0.0.10-alpha.11b7ea → 0.0.10-alpha.954690

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

@@ -1,67 +0,0 @@
-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

@@ -1,296 +0,0 @@
-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

@@ -1,91 +0,0 @@
-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

@@ -1,199 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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,
-  };
-}