@coze-arch/cli 0.0.10 → 0.0.11

package/lib/__templates__/expo/client/heroui/components/pressable-feedback/pressable-feedback.animation.ts

@@ -0,0 +1,450 @@
+/* eslint-disable react-hooks/preserve-manual-memoization */
+import { useCallback } from 'react';
+import type { GestureResponderEvent } from 'react-native';
+import type { SharedValue } from 'react-native-reanimated';
+import {
+  Easing,
+  interpolate,
+  useAnimatedReaction,
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { useUniwind } from 'uniwind';
+import { useAnimationSettings } from '../../helpers/internal/contexts';
+import { useCombinedAnimationDisabledState } from '../../helpers/internal/hooks';
+import {
+  createContext,
+  getAnimationState,
+  getAnimationValueMergedConfig,
+  getAnimationValueProperty,
+  getIsAnimationDisabledValue,
+  getRootAnimationState,
+} from '../../helpers/internal/utils';
+import {
+  BASE_RIPPLE_PROGRESS_DURATION,
+  BASE_RIPPLE_PROGRESS_DURATION_MIN,
+} from './pressable-feedback.constants';
+import type {
+  PressableFeedbackHighlightAnimation,
+  PressableFeedbackRippleAnimation,
+  PressableFeedbackRootAnimation,
+  PressableFeedbackRootAnimationContextValue,
+  PressableFeedbackScaleAnimation,
+} from './pressable-feedback.types';
+
+const [
+  PressableFeedbackRootAnimationProvider,
+  usePressableFeedbackRootAnimationContext,
+] = createContext<PressableFeedbackRootAnimationContextValue>({
+  name: 'PressableFeedbackRootAnimationContext',
+});
+
+export {
+  PressableFeedbackRootAnimationProvider,
+  usePressableFeedbackRootAnimationContext,
+};
+
+// --------------------------------------------------
+
+/**
+ * Shared hook that produces an animated scale style from press state and container width.
+ * Reused by both the root's built-in scale and the PressableFeedback.Scale compound part.
+ *
+ * @param options.isPressed        - Shared value tracking whether the component is pressed
+ * @param options.containerWidth   - Shared value tracking the container width (for scale coefficient)
+ * @param options.animation        - Scale animation configuration (value, timingConfig, ignoreScaleCoefficient)
+ * @param options.isAnimationDisabledValue - Final resolved boolean: true when scale should be disabled
+ */
+function useScaleAnimatedStyle(options: {
+  isPressed: SharedValue<boolean>;
+  containerWidth: SharedValue<number>;
+  animation?: PressableFeedbackScaleAnimation;
+  isAnimationDisabledValue: boolean;
+}) {
+  const { isPressed, containerWidth, animation, isAnimationDisabledValue } =
+    options;
+
+  const { animationConfig } = getAnimationState(animation);
+
+  const scaleValue = getAnimationValueProperty({
+    animationValue: animationConfig,
+    property: 'value',
+    defaultValue: 0.985,
+  });
+
+  const scaleTimingConfig = getAnimationValueMergedConfig({
+    animationValue: animationConfig,
+    property: 'timingConfig',
+    defaultValue: { duration: 300, easing: Easing.out(Easing.ease) },
+  });
+
+  const ignoreScaleCoefficient = getAnimationValueProperty({
+    animationValue: animationConfig,
+    property: 'ignoreScaleCoefficient',
+    defaultValue: false,
+  });
+
+  const adjustedScaleValue = useDerivedValue(() => {
+    const coefficient = ignoreScaleCoefficient
+      ? 1
+      : containerWidth.get() > 0
+        ? 300 / containerWidth.get()
+        : 1;
+    return 1 - (1 - scaleValue) * coefficient;
+  });
+
+  const rScaleStyle = useAnimatedStyle(() => {
+    if (isAnimationDisabledValue) {
+      return {
+        transform: [{ scale: 1 }],
+      };
+    }
+
+    return {
+      transform: [
+        {
+          scale: withTiming(
+            isPressed.get() ? adjustedScaleValue.get() : 1,
+            scaleTimingConfig
+          ),
+        },
+      ],
+    };
+  });
+
+  return { rScaleStyle };
+}
+
+// --------------------------------------------------
+
+/**
+ * Animation hook for PressableFeedback root component.
+ * Manages press state and container dimensions for child compound parts.
+ * Produces the built-in scale animated style by default.
+ * Use `animation.scale` to customize, or `animation={false}` to disable.
+ */
+export function usePressableFeedbackRootAnimation(options: {
+  animation?: PressableFeedbackRootAnimation;
+}) {
+  const { animation } = options;
+
+  const isAllAnimationsDisabled = useCombinedAnimationDisabledState(animation);
+
+  const isPressed = useSharedValue(false);
+  const containerWidth = useSharedValue(0);
+  const containerHeight = useSharedValue(0);
+
+  const animationOnPressIn = useCallback(() => {
+    isPressed.set(true);
+  }, [isPressed]);
+
+  const animationOnPressOut = useCallback(() => {
+    isPressed.set(false);
+  }, [isPressed]);
+
+  // Extract root-level config to check for built-in scale
+  const { animationConfig: rootConfig, isAnimationDisabled: isRootDisabled } =
+    getRootAnimationState(animation);
+
+  const scaleAnimation = rootConfig?.scale;
+  const hasRootScale = scaleAnimation !== undefined;
+
+  // Resolve scale-specific disabled state (root disabled OR scale's own disabled OR cascade)
+  const { isAnimationDisabled: isScaleOwnDisabled } =
+    getAnimationState(scaleAnimation);
+
+  const isScaleDisabledValue = getIsAnimationDisabledValue({
+    isAnimationDisabled: isRootDisabled || isScaleOwnDisabled,
+    isAllAnimationsDisabled,
+  });
+
+  const { rScaleStyle } = useScaleAnimatedStyle({
+    isPressed,
+    containerWidth,
+    animation: scaleAnimation,
+    isAnimationDisabledValue: isScaleDisabledValue,
+  });
+
+  return {
+    isAllAnimationsDisabled,
+    animationOnPressIn,
+    animationOnPressOut,
+    isPressed,
+    containerWidth,
+    containerHeight,
+    hasRootScale,
+    rScaleStyle,
+  };
+}
+
+// --------------------------------------------------
+
+/**
+ * Animation hook for PressableFeedback.Scale compound part.
+ * Used when applying scale to a specific child element instead of the root.
+ * Reads the root's press state via context and delegates to the shared `useScaleAnimatedStyle` hook.
+ */
+export function usePressableFeedbackScaleAnimation(options: {
+  animation?: PressableFeedbackScaleAnimation;
+}) {
+  const { animation } = options;
+
+  const { isAllAnimationsDisabled } = useAnimationSettings();
+
+  const { isPressed, containerWidth } =
+    usePressableFeedbackRootAnimationContext();
+
+  const { isAnimationDisabled } = getAnimationState(animation);
+
+  const isAnimationDisabledValue = getIsAnimationDisabledValue({
+    isAnimationDisabled,
+    isAllAnimationsDisabled,
+  });
+
+  const { rScaleStyle } = useScaleAnimatedStyle({
+    isPressed,
+    containerWidth,
+    animation,
+    isAnimationDisabledValue,
+  });
+
+  return {
+    rContainerStyle: rScaleStyle,
+  };
+}
+
+// --------------------------------------------------
+
+/**
+ * Animation hook for PressableFeedback highlight overlay
+ * Handles opacity and background color animations for the highlight effect
+ */
+export function usePressableFeedbackHighlightAnimation(options: {
+  animation?: PressableFeedbackHighlightAnimation;
+}) {
+  const { animation } = options;
+
+  const { theme } = useUniwind();
+
+  const { isAllAnimationsDisabled } = useAnimationSettings();
+
+  const { isPressed } = usePressableFeedbackRootAnimationContext();
+
+  const { animationConfig, isAnimationDisabled } = getAnimationState(animation);
+
+  const isAnimationDisabledValue = getIsAnimationDisabledValue({
+    isAnimationDisabled,
+    isAllAnimationsDisabled,
+  });
+
+  // Background color
+  const defaultColor = theme === 'dark' ? '#d4d4d8' : '#3f3f46';
+
+  const backgroundColor = getAnimationValueProperty({
+    animationValue: animationConfig?.backgroundColor,
+    property: 'value',
+    defaultValue: defaultColor,
+  });
+
+  // Opacity animation
+  const opacityValue = getAnimationValueProperty({
+    animationValue: animationConfig?.opacity,
+    property: 'value',
+    defaultValue: [0, 0.1] as [number, number],
+  });
+
+  const opacityTimingConfig = getAnimationValueMergedConfig({
+    animationValue: animationConfig?.opacity,
+    property: 'timingConfig',
+    defaultValue: { duration: 200 },
+  });
+
+  const rContainerStyle = useAnimatedStyle(() => {
+    if (isAnimationDisabledValue) {
+      return {};
+    }
+
+    return {
+      backgroundColor,
+      opacity: withTiming(
+        isPressed.get() ? opacityValue[1] : opacityValue[0],
+        opacityTimingConfig
+      ),
+    };
+  });
+
+  return {
+    rContainerStyle,
+  };
+}
+
+// --------------------------------------------------
+
+/**
+ * Animation hook for PressableFeedback ripple effect
+ * Handles ripple circle animation with radial gradient
+ */
+export function usePressableFeedbackRippleAnimation(options: {
+  animation?: PressableFeedbackRippleAnimation;
+}) {
+  const { animation } = options;
+
+  const { theme } = useUniwind();
+
+  const { isAllAnimationsDisabled } = useAnimationSettings();
+
+  const { containerWidth, containerHeight } =
+    usePressableFeedbackRootAnimationContext();
+
+  const pressedCenterX = useSharedValue(0);
+  const pressedCenterY = useSharedValue(0);
+  const rippleProgress = useSharedValue(0);
+  const isPressed = useSharedValue(false);
+
+  const { animationConfig, isAnimationDisabled } = getAnimationState(animation);
+
+  const isAnimationDisabledValue = getIsAnimationDisabledValue({
+    isAnimationDisabled,
+    isAllAnimationsDisabled,
+  });
+
+  const rippleProgressBaseDuration = getAnimationValueProperty({
+    animationValue: animationConfig?.progress,
+    property: 'baseDuration',
+    defaultValue: BASE_RIPPLE_PROGRESS_DURATION,
+  });
+
+  const ignoreDurationCoefficient = getAnimationValueProperty({
+    animationValue: animationConfig?.progress,
+    property: 'ignoreDurationCoefficient',
+    defaultValue: false,
+  });
+
+  const rippleProgressMinBaseDuration = getAnimationValueProperty({
+    animationValue: animationConfig?.progress,
+    property: 'minBaseDuration',
+    defaultValue: BASE_RIPPLE_PROGRESS_DURATION_MIN,
+  });
+
+  // Calculate duration coefficient based on diagonal to maintain consistent ripple speed
+  const durationCoefficient = useDerivedValue(() => {
+    if (ignoreDurationCoefficient) return 1;
+
+    const baseDiagonal = 450;
+    const currentDiagonal = Math.sqrt(
+      containerWidth.get() ** 2 + containerHeight.get() ** 2
+    );
+    return currentDiagonal > 0 ? currentDiagonal / baseDiagonal : 1;
+  });
+
+  // Touch handlers for ripple
+  const animationOnTouchStart = useCallback(
+    (event: GestureResponderEvent) => {
+      isPressed.set(true);
+      pressedCenterX.set(event.nativeEvent.locationX);
+      pressedCenterY.set(event.nativeEvent.locationY);
+      rippleProgress.set(0);
+    },
+    [isPressed, pressedCenterX, pressedCenterY, rippleProgress]
+  );
+
+  useAnimatedReaction(
+    () => isPressed.get(),
+    (isPressedValue) => {
+      if (isPressedValue && rippleProgress.get() === 0) {
+        const adjustedDuration = Math.min(
+          Math.max(
+            rippleProgressBaseDuration * durationCoefficient.get(),
+            rippleProgressMinBaseDuration
+          ),
+          rippleProgressBaseDuration * 2
+        );
+        rippleProgress.set(withTiming(1, { duration: adjustedDuration }));
+      }
+    }
+  );
+
+  const animationOnTouchEnd = useCallback(() => {
+    isPressed.set(false);
+    const adjustedDuration = Math.min(
+      Math.max(
+        rippleProgressBaseDuration * durationCoefficient.get(),
+        rippleProgressMinBaseDuration
+      ),
+      rippleProgressBaseDuration * 2
+    );
+    rippleProgress.set(withTiming(2, { duration: adjustedDuration }));
+  }, [
+    isPressed,
+    rippleProgress,
+    durationCoefficient,
+    rippleProgressBaseDuration,
+    rippleProgressMinBaseDuration,
+  ]);
+
+  // Background color
+  const defaultColor = theme === 'dark' ? '#d4d4d8' : '#3f3f46';
+
+  const backgroundColor = getAnimationValueProperty({
+    animationValue: animationConfig?.backgroundColor,
+    property: 'value',
+    defaultValue: defaultColor,
+  });
+
+  // Opacity animation
+  const opacityValue = getAnimationValueProperty({
+    animationValue: animationConfig?.opacity,
+    property: 'value',
+    defaultValue: [0, 0.1, 0] as [number, number, number],
+  });
+
+  // Scale animation
+  const scaleValue = getAnimationValueProperty({
+    animationValue: animationConfig?.scale,
+    property: 'value',
+    defaultValue: [0, 1, 1] as [number, number, number],
+  });
+
+  const rContainerStyle = useAnimatedStyle(() => {
+    if (isAnimationDisabledValue) {
+      return {};
+    }
+
+    const circleRadius =
+      Math.sqrt(containerWidth.get() ** 2 + containerHeight.get() ** 2) * 1.25;
+
+    const translateX = pressedCenterX.get() - circleRadius;
+    const translateY = pressedCenterY.get() - circleRadius;
+
+    return {
+      width: circleRadius * 2,
+      height: circleRadius * 2,
+      borderRadius: circleRadius,
+      opacity: interpolate(
+        rippleProgress.get(),
+        [0, 1, 2],
+        [opacityValue[0], opacityValue[1], opacityValue[2]]
+      ),
+      transform: [
+        { translateX },
+        { translateY },
+        {
+          scale: interpolate(
+            rippleProgress.get(),
+            [0, 1, 2],
+            [scaleValue[0], scaleValue[1], scaleValue[2]]
+          ),
+        },
+      ],
+    };
+  });
+
+  return {
+    rContainerStyle,
+    backgroundColor,
+    animationOnTouchStart,
+    animationOnTouchEnd,
+  };
+}

package/lib/__templates__/expo/client/heroui/components/pressable-feedback/pressable-feedback.constants.ts

@@ -0,0 +1,12 @@
+/**
+ * Display names for PressableFeedback components
+ */
+export const DISPLAY_NAME = {
+  ROOT: 'HeroUINative.PressableFeedback.Root',
+  SCALE: 'HeroUINative.PressableFeedback.Scale',
+  HIGHLIGHT: 'HeroUINative.PressableFeedback.Highlight',
+  RIPPLE: 'HeroUINative.PressableFeedback.Ripple',
+} as const;
+
+export const BASE_RIPPLE_PROGRESS_DURATION = 1000;
+export const BASE_RIPPLE_PROGRESS_DURATION_MIN = 750;