@ray-js/components 1.7.56-beta.1 → 1.7.56-beta.10

package/lib/Animated/types.d.ts

@@ -2,13 +2,15 @@ import type React from 'react';
 /**
  * 触摸事件处理器（只保留核心事件）
  *
- * 注：只提供最常用的三个事件（onClick, onTouchStart, onTouchEnd）
- * 如需其他事件（如 onLongPress, onTouchMove 等），请在 Animated 的子元素上直接绑定
+ * 注：只提供最常用的事件 (onClick)
  */
 export interface TouchEventHandler {
     onClick?: (e: TouchEvent) => any;
     onTouchStart?: (e: TouchEvent) => any;
     onTouchEnd?: (e: TouchEvent) => any;
+    onTouchMove?: (e: TouchEvent) => any;
+    onTouchCancel?: (e: TouchEvent) => any;
+    onLongPress?: (e: TouchEvent) => any;
 }
 interface TargetType {
     id: string;
@@ -96,66 +98,107 @@ export interface AnimatedViewRef {
     /**
      * 直接设置样式（无动画）
      *
+     * 优势：不受 React 重渲染影响，可以在动画过程中随时调用 setState
+     * 而不用担心样式被覆盖或闪烁问题
+     *
+     * 注意：
+     * - 会清除动画数据并设置样式
+     * - 如果动画正在执行，会中断动画
+     * - 返回 Promise，可以等待样式应用完成
+     *
      * @param style - 样式对象或 CSS 字符串
+     * @param callback - 可选的回调函数，样式应用完成后调用
+     * @returns Promise<void> - 样式应用完成后 resolve
      *
      * @example
      * ```tsx
+     * // 基本使用
      * ref.current?.setStyle({ opacity: 0.5, color: 'red' })
-     * ref.current?.setStyle('transform: translateX(100px);')
+     *
+     * // 等待样式应用完成
+     * await ref.current?.setStyle({ opacity: 0 })
+     *
+     * // 如果需要获取 rect，单独调用
+     * await ref.current?.setStyle({ opacity: 0 })
+     * const rect = await ref.current?.getBoundingClientRect()
+     *
+     * // 使用回调
+     * ref.current?.setStyle({ color: 'red' }, () => {
+     *   console.log('样式已应用')
+     * })
      * ```
      */
-    setStyle: (style: React.CSSProperties | string) => void;
+    setStyle: (style: React.CSSProperties | string, callback?: () => void) => Promise<void>;
     /**
-     * 使用小程序原生动画 API
-     * 这是性能最优的动画方式
+     * 创建动画对象
+     * 使用小程序原生动画 API，这是性能最优的动画方式
      *
-     * @param callback - 动画配置回调，接收小程序动画对象
-     * @param options - 动画选项
+     * @param options - 动画配置（可选）
+     * @param options.duration - 动画持续时间（毫秒），默认 400
+     * @param options.timingFunction - 缓动函数，默认 'linear'
+     * @param options.delay - 动画延迟时间（毫秒），默认 0
+     * @param options.transformOrigin - 变换原点，默认 '50% 50% 0'
+     * @returns Animation 实例，包含所有动画方法和 play() 方法
      *
      * @example
      * ```tsx
-     * // 单个动画
-     * ref.current?.animate((anim) => {
-     *   anim.translateX(100).scale(1.2).step({ duration: 300, timingFunction: 'ease-out' })
-     * })
+     * // 基本使用
+     * const animation = ref.current.animate()
+     * animation.translateX(100).step({ duration: 300 })
+     * await animation.play()
+     * console.log('动画完成！')
      *
-     * // 序列动画
-     * ref.current?.animate((anim) => {
-     *   anim.translateX(100).step({ duration: 300 })
-     *   anim.scale(1.2).step({ duration: 200 })
-     *   anim.rotate(360).step({ duration: 500 })
-     * })
+     * // 链式调用
+     * const animation = ref.current
+     *   .animate({ transformOrigin: '50% 50%' })
+     *   .translateX(100)
+     *   .scale(1.2)
+     *   .step({ duration: 300 })
+     * await animation.play()
+     *
+     * // 多段动画
+     * const animation = ref.current.animate()
+     * animation.translateX(100).step({ duration: 300 })
+     * animation.translateY(100).step({ duration: 300 })
+     * animation.scale(1.5).step({ duration: 300 })
+     * await animation.play()
      *
-     * // 设置 transformOrigin
-     * ref.current?.animate((anim) => {
-     *   anim.scaleX(0.5).step({ duration: 300 })
-     * }, { transformOrigin: 'left center' })
+     * // 复用动画
+     * const slideIn = ref.current.animate().translateX(100).step({ duration: 300 })
+     * await slideIn.play() // 第一次
+     * await slideIn.play() // 第二次
      * ```
      */
-    animate: (callback: (anim: IAnimation) => any, options?: TOptions & {
-        finish: (event: EventType) => void;
-    }) => void;
+    animate: (options?: TOptions) => IAnimation & {
+        play(): Promise<{
+            detail?: {
+                interruptedBySetStyle?: boolean;
+                interrupted?: boolean;
+            };
+            [key: string]: any;
+        }>;
+    };
     /**
-   * 获取元素的布局位置和尺寸信息
-   * 基于小程序 SelectorQuery.boundingClientRect API
-   *
-   * @returns Promise<BoundingClientRect | null>
-   *
-   * @example
-   * ```tsx
-   * const rect = await boxRef.current?.getBoundingClientRect()
-   * console.log(rect?.left, rect?.top, rect?.width, rect?.height)
-   *
-   * // 使用位置信息实现动画
-   * if (rect) {
-   *   const centerX = window.innerWidth / 2 - rect.left - rect.width / 2
-   *   const centerY = window.innerHeight / 2 - rect.top - rect.height / 2
-   *   boxRef.current?.animate((anim) => {
-   *     anim.translateX(centerX).translateY(centerY).scale(2).step({ duration: 300 })
-   *   })
-   * }
-   * ```
-   */
+     * 获取元素的布局位置和尺寸信息
+     * 基于小程序 SelectorQuery.boundingClientRect API
+     *
+     * @returns Promise<BoundingClientRect | null>
+     *
+     * @example
+     * ```tsx
+     * const rect = await boxRef.current?.getBoundingClientRect()
+     * console.log(rect?.left, rect?.top, rect?.width, rect?.height)
+     *
+     * // 使用位置信息实现动画
+     * if (rect) {
+     *   const centerX = window.innerWidth / 2 - rect.left - rect.width / 2
+     *   const centerY = window.innerHeight / 2 - rect.top - rect.height / 2
+     *   boxRef.current?.animate((anim) => {
+     *     anim.translateX(centerX).translateY(centerY).scale(2).step({ duration: 300 })
+     *   })
+     * }
+     * ```
+     */
     getBoundingClientRect: () => Promise<BoundingClientRect | null>;
     /**
      * 获取元素的详细信息（包括样式、属性等）
@@ -273,5 +316,21 @@ export interface AnimatedProps extends TouchEventHandler {
     onAnimationStart?: () => void;
     /** 动画结束回调 */
     onAnimationEnd?: () => void;
+    /**
+     * 点击事件自动加锁
+     * 防止快速点击导致的重复触发
+     *
+     * @example
+     * ```tsx
+     * <Animated.View
+     *   ref={ref}
+     *   onClick={async () => {
+     *     await doSomething()
+     *   }}
+     *   lockOnClick  // 自动加锁，回调执行完自动解锁
+     * />
+     * ```
+     */
+    lockOnClick?: boolean;
 }
 export {};

package/lib/Animated-old/animation.d.ts

@@ -0,0 +1,47 @@
+interface IAnimation {
+  // transform
+  translate(x?: number, y?: number): this
+  translateX(x?: number): this
+  translateY(y?: number): this
+  translateZ(z?: number): this
+
+  rotate(angle: number): this
+  rotateX(angle: number): this
+  rotateY(angle: number): this
+  rotateZ(angle: number): this
+  rotate3d(x: number, y: number, z: number, angle: number): this
+
+  scale(x?: number, y?: number): this
+  scaleX(x?: number): this
+  scaleY(y?: number): this
+  scaleZ(z?: number): this
+  scale3d(x?: number, y?: number, z?: number): this
+
+  skew(x?: number, y?: number): this
+  skewX(x?: number): this
+  skewY(y?: number): this
+
+  matrix(...args: number[]): this
+  matrix3d(...args: number[]): this
+
+  // style
+  opacity(opacity: number): this
+  width(value: number | string): this
+  height(value: number | string): this
+  top(value: number | string): this
+  left(value: number | string): this
+  right(value: number | string): this
+  bottom(value: number | string): this
+  backgroundColor(value: string): this
+
+  // step / export
+  step(
+    options?: Partial<{
+      transformOrigin: string
+      duration: number
+      timingFunction: string
+      delay: number
+    }>
+  ): this
+  export(): { actions: any[] }
+}

package/lib/Animated-old/index.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Animated - 纯净底层动画组件
+ *
+ * 只提供三个核心方法：
+ * - setProperty(property, value): 设置动画属性
+ * - setStyle(style): 设置样式
+ * - setText(text): 设置文本内容
+ *
+ * 可以配合任何动画库使用（GSAP、Anime.js、Framer Motion 等）
+ */
+import React from 'react';
+import type { AnimatedViewRef, AnimatedTextRef, AnimatedProps } from './types';
+/**
+ * 默认导出
+ */
+declare const Animated: {
+    View: React.ForwardRefExoticComponent<Omit<AnimatedProps, "mode"> & React.RefAttributes<AnimatedViewRef>>;
+    Text: React.ForwardRefExoticComponent<Omit<AnimatedProps, "mode"> & React.RefAttributes<AnimatedTextRef>>;
+};
+export default Animated;
+export type { AnimatedViewRef, AnimatedTextRef, AnimatedProps } from './types';

package/lib/Animated-old/index.js

@@ -0,0 +1,359 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import "core-js/modules/es.regexp.exec.js";
+import "core-js/modules/es.string.replace.js";
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.for-each.js";
+import "core-js/modules/esnext.iterator.map.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+/**
+ * Animated - 纯净底层动画组件
+ *
+ * 只提供三个核心方法：
+ * - setProperty(property, value): 设置动画属性
+ * - setStyle(style): 设置样式
+ * - setText(text): 设置文本内容
+ *
+ * 可以配合任何动画库使用（GSAP、Anime.js、Framer Motion 等）
+ */
+import React, { forwardRef, useImperativeHandle, useRef, useMemo, useCallback } from 'react';
+import TyAnimatedComponent from './native/ty-animated';
+
+// 小程序 API 声明
+
+/**
+ * 样式对象转 CSS 字符串
+ */
+function styleToString(style) {
+  return Object.entries(style).map(_ref => {
+    let [key, value] = _ref;
+    const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase();
+    return "".concat(cssKey, ":").concat(value);
+  }).join(';');
+}
+
+/**
+ * 基础 Animated 组件
+ */
+const AnimatedBase = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    style,
+    id,
+    mode = 'view',
+    onAnimationStart,
+    onAnimationEnd,
+    // 核心触摸事件（只保留最常用的三个）
+    onClick,
+    onTouchStart,
+    onTouchEnd
+  } = props;
+  const callbackRef = useRef(onAnimationEnd);
+  const componentIdRef = useRef(id || "animated-".concat(Math.random().toString(36).slice(2, 11)));
+
+  // 提取文本内容（当 mode='text' 时）
+  const textContent = useMemo(() => {
+    if (mode !== 'text' || !children) return undefined;
+    if (typeof children === 'string' || typeof children === 'number') {
+      return String(children);
+    }
+    return undefined;
+  }, [mode, children]);
+  useImperativeHandle(ref, () => {
+    /**
+     * 获取 DOM 实例
+     */
+    const getDomInstance = () => {
+      try {
+        var _getCurrentPages;
+        const pages = (_getCurrentPages = getCurrentPages) === null || _getCurrentPages === void 0 ? void 0 : _getCurrentPages();
+        if (!pages || pages.length === 0) return null;
+        const currentPage = pages[pages.length - 1];
+        if (!(currentPage !== null && currentPage !== void 0 && currentPage.selectComponent)) return null;
+        return currentPage.selectComponent("#".concat(componentIdRef.current));
+      } catch (error) {
+        console.error('[Animated] 获取组件实例失败:', error);
+        return null;
+      }
+    };
+    return {
+      /**
+       * 设置样式（直通通道）
+       * 用途：设置静态样式，绕过 React/Ray 层，提升性能
+       * @example
+       * ref.current.setStyle({ color: 'red', fontSize: '16px', border: '1px solid #ccc' })
+       */
+      setStyle(styleValue, callback) {
+        return new Promise(resolve => {
+          var _inst$setCustomStyle;
+          const inst = getDomInstance();
+          if (!inst) {
+            console.warn('No DOM instance found');
+            resolve();
+            if (callback) callback();
+            return;
+          }
+
+          // 防止传入 undefined 或空值
+          if (styleValue === undefined || styleValue === null) {
+            console.warn('styleValue is undefined or null');
+            resolve();
+            if (callback) callback();
+            return;
+          }
+          const styleString = typeof styleValue === 'string' ? styleValue : styleToString(styleValue);
+          if (!styleString) {
+            console.warn('styleString is empty');
+            resolve();
+            if (callback) callback();
+            return;
+          }
+
+          // setData 完成后的回调
+          (_inst$setCustomStyle = inst.setCustomStyle) === null || _inst$setCustomStyle === void 0 || _inst$setCustomStyle.call(inst, styleString, () => {
+            // 调用用户回调
+            if (callback && typeof callback === 'function') {
+              try {
+                callback();
+              } catch (error) {
+                console.error('[Animated] setStyle callback error:', error);
+              }
+            }
+            // resolve Promise
+            resolve();
+          });
+        });
+      },
+      /**
+       * 设置文本内容（仅 mode='text' 时可用）
+       * 不触发 React 重渲染
+       */
+      setText(text) {
+        var _inst$__applyText;
+        // 运行时检查：只有 Text 组件才能调用 setText
+        if (mode !== 'text') {
+          console.error('[Animated] setText 只能在 Animated.Text 组件上使用');
+          return;
+        }
+        const inst = getDomInstance();
+        if (!inst) {
+          console.warn('[Animated] setText: 无法获取组件实例');
+          return;
+        }
+        (_inst$__applyText = inst.__applyText) === null || _inst$__applyText === void 0 || _inst$__applyText.call(inst, text);
+      },
+      /**
+       * 创建动画对象
+       * 使用小程序原生动画 API，这是性能最优的动画方式
+       *
+       * @param options - 动画配置（duration, timingFunction, delay, transformOrigin）
+       * @returns Animation 实例，包含 play() 方法
+       *
+       * @example
+       * // 创建并执行动画
+       * const animation = ref.current.animate()
+       * animation.translateX(100).scale(1.2).step({ duration: 300 })
+       * animation.translateY(50).step({ duration: 200 })
+       * await animation.play()
+       * console.log('动画完成！')
+       *
+       * // 链式调用
+       * const animation = ref.current
+       *   .animate({ transformOrigin: '50% 50%' })
+       *   .translateX(100)
+       *   .scale(1.2)
+       *   .step({ duration: 300 })
+       * await animation.play()
+       *
+       * // 复用动画
+       * const slideIn = ref.current.animate().translateX(100).step({ duration: 300 })
+       * await slideIn.play() // 第一次
+       * await slideIn.play() // 第二次
+       */
+      animate(options) {
+        var _inst$_getCreateAnima;
+        const inst = getDomInstance();
+        if (!inst) {
+          console.warn('[Animated] No DOM instance found');
+          return null;
+        }
+
+        // 获取 createAnimation 函数
+        const createAnimation = (_inst$_getCreateAnima = inst._getCreateAnimation) === null || _inst$_getCreateAnima === void 0 ? void 0 : _inst$_getCreateAnima.call(inst);
+        if (!createAnimation) {
+          console.error('[Animated] createAnimation 不可用');
+          return null;
+        }
+
+        // 创建小程序原生 Animation 实例
+        const animation = createAnimation(options);
+
+        // 扩展 play 方法
+        animation.play = () => {
+          return new Promise(resolve => {
+            var _inst$__applyAnimData;
+            // 导出动画数据
+            const animationData = animation.export();
+
+            // 包装完成回调
+
+            callbackRef.current = event => {
+              resolve(event);
+            };
+            (_inst$__applyAnimData = inst.__applyAnimData) === null || _inst$__applyAnimData === void 0 || _inst$__applyAnimData.call(inst, animationData);
+          });
+        };
+        return animation;
+      },
+      /**
+       * 获取元素的布局位置和尺寸信息
+       * 基于小程序 SelectorQuery.boundingClientRect API
+       */
+      getBoundingClientRect() {
+        return new Promise(resolve => {
+          try {
+            // 检查小程序 API 是否存在
+            if (typeof ty === 'undefined' || !ty.createSelectorQuery) {
+              console.error('[Animated] getBoundingClientRect: ty.createSelectorQuery 不存在');
+              resolve(null);
+              return;
+            }
+            const query = ty.createSelectorQuery();
+            query.select("#".concat(componentIdRef.current)).boundingClientRect(rect => {
+              resolve(rect || null);
+            }).exec();
+          } catch (error) {
+            console.error('[Animated] getBoundingClientRect 执行失败:', error);
+            resolve(null);
+          }
+        });
+      },
+      /**
+       * 获取元素的详细信息（包括样式、属性等）
+       * 基于小程序 SelectorQuery.fields API
+       */
+      getFields(fields) {
+        return new Promise(resolve => {
+          try {
+            // 检查小程序 API 是否存在
+            if (typeof ty === 'undefined' || !ty.createSelectorQuery) {
+              console.error('[Animated] getFields: ty.createSelectorQuery 不存在');
+              resolve(null);
+              return;
+            }
+            const query = ty.createSelectorQuery();
+            query.select("#".concat(componentIdRef.current)).fields(fields, res => {
+              resolve(res || null);
+            }).exec();
+          } catch (error) {
+            console.error('[Animated] getFields 执行失败:', error);
+            resolve(null);
+          }
+        });
+      },
+      /**
+       * 获取元素的计算后样式
+       * 便捷方法，专门用于查询样式
+       */
+      getComputedStyle(styleNames) {
+        return new Promise(resolve => {
+          try {
+            // 检查小程序 API 是否存在
+            if (typeof ty === 'undefined' || !ty.createSelectorQuery) {
+              console.error('[Animated] getComputedStyle: ty.createSelectorQuery 不存在');
+              resolve(null);
+              return;
+            }
+            const query = ty.createSelectorQuery();
+            query.select("#".concat(componentIdRef.current)).fields({
+              computedStyle: styleNames
+            }, res => {
+              if (!res) {
+                resolve(null);
+                return;
+              }
+
+              // 提取样式信息，过滤掉非样式字段
+              const styles = {};
+              styleNames.forEach(styleName => {
+                if (res[styleName] !== undefined) {
+                  styles[styleName] = res[styleName];
+                }
+              });
+              resolve(Object.keys(styles).length > 0 ? styles : null);
+            }).exec();
+          } catch (error) {
+            console.error('[Animated] getComputedStyle 执行失败:', error);
+            resolve(null);
+          }
+        });
+      }
+    };
+  }, []);
+
+  // 处理 customStyle，避免传入 undefined
+  const customStyleValue = useMemo(() => {
+    if (!style) return undefined;
+    return typeof style === 'object' ? styleToString(style) : style;
+  }, []);
+  const handleAnimationEnd = useCallback(event => {
+    if (callbackRef.current && typeof callbackRef.current === 'function') {
+      const temp = callbackRef.current;
+      callbackRef.current = null;
+      temp(event);
+    }
+    if (onAnimationEnd) {
+      onAnimationEnd();
+    }
+  }, [onAnimationEnd, callbackRef.current]);
+  const eventBindings = {};
+  if (onClick) eventBindings['bind:click'] = onClick;
+  if (onTouchStart) eventBindings['bind:touchstart'] = onTouchStart;
+  if (onTouchEnd) eventBindings['bind:touchend'] = onTouchEnd;
+  if (onAnimationStart) eventBindings['bind:animationbegin'] = onAnimationStart;
+  eventBindings['bind:animationfinish'] = handleAnimationEnd;
+  return (
+    /*#__PURE__*/
+    // @ts-ignore - 小程序自定义组件
+    React.createElement(TyAnimatedComponent, _extends({
+      id: componentIdRef.current,
+      __mode: mode
+    }, className ? {
+      __className: className
+    } : {}, customStyleValue ? {
+      __style: customStyleValue
+    } : {}, mode === 'text' && textContent !== undefined ? {
+      __text: textContent
+    } : {}, eventBindings), mode === 'view' ? children : null)
+  );
+});
+AnimatedBase.displayName = 'AnimatedBase';
+
+/**
+ * Animated.View 组件（不包含 setText）
+ */
+const AnimatedView = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement(AnimatedBase, _extends({}, props, {
+  mode: "view",
+  ref: ref
+})));
+AnimatedView.displayName = 'Animated.View';
+
+/**
+ * Animated.Text 组件（包含 setText）
+ */
+const AnimatedText = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement(AnimatedBase, _extends({}, props, {
+  mode: "text",
+  ref: ref
+})));
+AnimatedText.displayName = 'Animated.Text';
+
+/**
+ * 默认导出
+ */
+const Animated = {
+  View: AnimatedView,
+  Text: AnimatedText
+};
+export default Animated;
+
+// 导出类型

package/lib/Animated-old/native/ty-animated/index.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+declare const TyAnimated: React.ComponentType<any>;
+export default TyAnimated;
+
+