@ray-js/components 1.7.56-beta.5 → 1.7.56-beta.7

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;
+
+

package/lib/Animated-old/native/ty-animated/index.js

@@ -0,0 +1,208 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import "core-js/modules/es.string.trim.js";
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.filter.js";
+import "core-js/modules/esnext.iterator.map.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+// @ts-nocheck
+/**
+ * TyAnimated - 高性能动画组件（小程序原生层）
+ */
+
+// 小程序原生组件注册
+Component({
+  properties: {
+    __mode: {
+      type: String,
+      value: 'view'
+    },
+    __text: {
+      type: String,
+      value: ''
+    },
+    __style: {
+      type: String,
+      value: ''
+    },
+    __className: {
+      type: String,
+      value: ''
+    },
+    onAnimationStart: {
+      type: null,
+      value: null
+    },
+    // 动画结束回调函数
+    onAnimationEnd: {
+      type: null,
+      value: null
+    }
+  },
+  // 定义外部事件
+  externalClasses: [],
+  data: {
+    __text: '',
+    __style: '',
+    __className: '',
+    __animData: null // 动画数据
+  },
+  lifetimes: {
+    attached() {
+      // 组件初始化
+    },
+    detached() {
+      // 清理工作
+    }
+  },
+  methods: {
+    /**
+     * 事件处理器
+     */
+    __handleTiggerEvent(eventName, e) {
+      // 触发自定义事件，让外部可以监听
+      this.triggerEvent(eventName, e, {
+        // bubbles: true,
+        composed: true
+      });
+    },
+    /**
+     * 创建 IntersectionObserver
+     */
+    createIntersectionObserver(options) {
+      try {
+        // @ts-ignore
+        if (typeof ty !== 'undefined' && ty.createIntersectionObserver) {
+          return ty.createIntersectionObserver(this, options);
+        }
+      } catch (e) {
+        console.error('createIntersectionObserver error:', e);
+      }
+      return null;
+    },
+    /**
+     * 获取小程序的 createAnimation 方法
+     */
+    _getCreateAnimation() {
+      try {
+        // @ts-ignore
+        if (typeof ty !== 'undefined' && ty.createAnimation) {
+          return ty.createAnimation;
+        }
+      } catch (e) {
+        // ignore
+      }
+      return null;
+    },
+    /**
+     * 解析样式字符串为对象
+     */
+    _parseStyle(styleString) {
+      if (!styleString) return {};
+      const result = {};
+      const styles = styleString.split(';').filter(Boolean);
+      for (const style of styles) {
+        const colonIndex = style.indexOf(':');
+        if (colonIndex > 0) {
+          const key = style.substring(0, colonIndex).trim();
+          const value = style.substring(colonIndex + 1).trim();
+          if (key && value) {
+            result[key] = value;
+          }
+        }
+      }
+      return result;
+    },
+    /**
+     * 样式对象转字符串
+     */
+    _styleToString(styleObj) {
+      return Object.entries(styleObj).map(_ref => {
+        let [key, value] = _ref;
+        return "".concat(key, ":").concat(value);
+      }).join(';');
+    },
+    setCustomStyle(value, callback) {
+      // 防止传入 undefined 或 null 导致小程序报错
+      if (value === undefined || value === null) {
+        console.warn('[TyAnimatedComponent] setCustomStyle: value is undefined or null, ignored');
+        if (callback) callback();
+        return;
+      }
+
+      // 合并样式
+      const currentStyle = this._parseStyle(this.data.__style || '');
+      const newStyle = this._parseStyle(value);
+      const mergedStyle = _objectSpread(_objectSpread({}, currentStyle), newStyle);
+      let mergedStyleString = this._styleToString(mergedStyle);
+      if (mergedStyleString === this.data.__style && this.data.__animData !== null) {
+        console.log('[TyAnimated] 样式值相同但有动画数据，添加时间戳强制更新');
+        // 添加一个不影响渲染的注释，使样式字符串不同
+        mergedStyleString = "".concat(mergedStyleString, ";/* ").concat(Date.now(), " */");
+      }
+
+      // 一次性 setData，不嵌套
+      this.setData({
+        __style: mergedStyleString,
+        __animData: null // 总是清空动画数据
+      }, callback);
+    },
+    /**
+     * 设置文本内容（__mode='text' 时使用）
+     */
+    __applyText(text) {
+      if (typeof text === 'string') {
+        this.setData({
+          __text: text
+        });
+      }
+    },
+    __applyAnimData(animData) {
+      if (!animData) {
+        console.warn('[TyAnimatedComponent] __applyAnimData: animData is null or undefined');
+        return;
+      }
+      this.setData({
+        __animData: animData
+      });
+    },
+    /**
+     * 核心方法：直接应用 Animation 对象
+     * @param {Function} fn - 接收 Animation 实例的回调函数
+     * @param {Object} options - 动画选项，包括 transformOrigin
+     *
+     * 使用示例：
+     * comp.__apply((anim) => {
+     *   anim.opacity(0.5).scale(0.8).step();
+     *   return anim.export();
+     * }, { transformOrigin: 'top left' });
+     */
+    __apply(fn) {
+      let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      const createAnimation = this._getCreateAnimation();
+      if (!createAnimation) {
+        return;
+      }
+      const anim = createAnimation(options);
+
+      // 执行用户的动画配置
+      const exported = fn(anim);
+
+      // 应用动画数据
+      const animData = exported || anim.export();
+      this.setData({
+        __animData: animData
+      });
+    },
+    // 核心触摸事件处理（只保留最常用的）
+    __onClick(e) {
+      this.__handleTiggerEvent('click', e);
+    },
+    __onTouchStart(e) {
+      this.__handleTiggerEvent('touchstart', e);
+    },
+    __onTouchEnd(e) {
+      this.__handleTiggerEvent('touchend', e);
+    }
+  }
+});
+export default 'ty-animated-component';

package/lib/Animated-old/native/ty-animated/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

package/lib/Animated-old/native/ty-animated/index.tyml

@@ -0,0 +1,26 @@
+<block>
+  <view
+    wx:if="{{__mode==='view'}}"
+    id="root"
+    class="{{__className}}"
+    style="{{__style}}"
+    animation="{{__animData}}"
+    bindtap="__onClick"
+    bindtouchstart="__onTouchStart"
+    bindtouchend="__onTouchEnd"
+  >
+    <slot></slot>
+  </view>
+  <text
+    wx:else
+    id="rootText"
+    class="container {{__className}}"
+    style="{{__style}}"
+    animation="{{__animData}}"
+    bindtap="__onClick"
+    bindtouchstart="__onTouchStart"
+    bindtouchend="__onTouchEnd"
+  >{{__text}}</text>
+</block>
+
+

package/lib/Animated-old/native/ty-animated/index.tyss

@@ -0,0 +1,3 @@
+.container { display: block; }
+
+