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

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

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

@@ -0,0 +1,312 @@
+import type React from 'react';
+/**
+ * 触摸事件处理器（只保留核心事件）
+ *
+ * 注：只提供最常用的三个事件（onClick, onTouchStart, onTouchEnd）
+ * 如需其他事件（如 onLongPress, onTouchMove 等），请在 Animated 的子元素上直接绑定
+ */
+export interface TouchEventHandler {
+    onClick?: (e: TouchEvent) => any;
+    onTouchStart?: (e: TouchEvent) => any;
+    onTouchEnd?: (e: TouchEvent) => any;
+}
+interface TargetType {
+    id: string;
+    offsetLeft: number;
+    offsetTop: number;
+    paths: any;
+    uid: any;
+    dataset: {
+        [key: string]: any;
+    };
+}
+export interface EventType {
+    type: string;
+    target: TargetType;
+    currentTarget: TargetType;
+    timestamp: number;
+    stopPropagation: () => void;
+    detail: any;
+}
+export type timing = 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'step-start' | 'step-end';
+export type TOptions = {
+    duration?: number;
+    timingFunction?: timing;
+    delay?: number;
+    transformOrigin?: string;
+};
+/**
+ * 元素边界信息
+ */
+export interface BoundingClientRect {
+    /** 元素的 ID */
+    id: string;
+    /** dataset 数据 */
+    dataset: Record<string, any>;
+    /** 左边界坐标 */
+    left: number;
+    /** 右边界坐标 */
+    right: number;
+    /** 上边界坐标 */
+    top: number;
+    /** 下边界坐标 */
+    bottom: number;
+    /** 元素宽度 */
+    width: number;
+    /** 元素高度 */
+    height: number;
+}
+/**
+ * 元素查询字段配置
+ */
+export interface NodeFields {
+    /** 是否返回节点 id */
+    id?: boolean;
+    /** 是否返回节点 dataset */
+    dataset?: boolean;
+    /** 是否返回节点布局位置（left right top bottom） */
+    rect?: boolean;
+    /** 是否返回节点尺寸（width height） */
+    size?: boolean;
+    /** 是否返回节点的 scrollLeft scrollTop */
+    scrollOffset?: boolean;
+    /** 指定属性名列表，返回节点对应属性名的当前属性值 */
+    properties?: string[];
+    /** 指定样式名列表，返回节点对应样式名的当前值 */
+    computedStyle?: string[];
+    /** 是否返回节点对应的 Node 实例 */
+    node?: boolean;
+}
+/**
+ * Animated.View 组件的 Ref 类型（不包含 setText）
+ *
+ * @example
+ * ```tsx
+ * import { useRef } from 'react'
+ * import Animated, { type AnimatedViewRef } from '@/components/animated'
+ *
+ * const boxRef = useRef<AnimatedViewRef>(null)
+ * boxRef.current?.setStyle({ opacity: 0.5 })
+ * boxRef.current?.animate((anim) => {
+ *   anim.translateX(100).step({ duration: 300 })
+ * })
+ * ```
+ */
+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' })
+     *
+     * // 等待样式应用完成
+     * 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, callback?: () => void) => Promise<void>;
+    /**
+     * 创建动画对象
+     * 使用小程序原生动画 API，这是性能最优的动画方式
+     *
+     * @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
+     * // 基本使用
+     * const animation = ref.current.animate()
+     * animation.translateX(100).step({ duration: 300 })
+     * 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 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()
+     *
+     * // 复用动画
+     * const slideIn = ref.current.animate().translateX(100).step({ duration: 300 })
+     * await slideIn.play() // 第一次
+     * await slideIn.play() // 第二次
+     * ```
+     */
+    animate: (options?: TOptions) => IAnimation & {
+        play(): Promise<void>;
+    };
+    /**
+   * 获取元素的布局位置和尺寸信息
+   * 基于小程序 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>;
+    /**
+     * 获取元素的详细信息（包括样式、属性等）
+     * 基于小程序 SelectorQuery.fields API
+     *
+     * @param fields - 查询字段配置
+     * @returns Promise<any>
+     *
+     * @example
+     * ```tsx
+     * // 获取元素的位置和计算后的样式
+     * const info = await boxRef.current?.getFields({
+     *   rect: true,
+     *   size: true,
+     *   computedStyle: ['backgroundColor', 'transform']
+     * })
+     * console.log(info?.backgroundColor, info?.transform)
+     * ```
+     */
+    getFields: (fields: NodeFields) => Promise<any>;
+    /**
+     * 获取元素的计算后样式（computed style）
+     * 这是一个便捷方法，内部调用 getFields
+     *
+     * 使用注意事项：
+     * 1. width/height 限制：通过 CSS 自动布局的元素，width/height 通常返回 'auto'
+     *    - 错误用法：用 getComputedStyle 获取实际像素尺寸
+     *    - 正确用法：使用 getBoundingClientRect() 获取实际尺寸
+     *
+     * 2. 内联样式限制：通过 React style 属性设置的样式可能无法查询
+     *    - 原因：小程序查询的是最终渲染的 CSS，不是 JS 设置的内联样式
+     *
+     * 3. 适用场景：
+     *    - 查询 transform 动画状态（动画执行中）
+     *    - 查询 opacity 等动画属性
+     *    - 查询通过 CSS 类设置的样式
+     *    - 查询元素实际尺寸（用 getBoundingClientRect）
+     *    - 查询通过 style={{ }} 设置的背景色等
+     *
+     * @param styleNames - 样式名称数组
+     * @returns Promise<Record<string, any> | null> - 返回样式对象
+     *
+     * @example
+     * ```tsx
+     * // 正确示例：查询动画相关样式
+     * const styles = await boxRef.current?.getComputedStyle([
+     *   'transform',
+     *   'opacity'
+     * ])
+     *
+     * console.log(styles?.transform)  // 'matrix(1.5, 0, 0, 1.5, 100, 50)'
+     * console.log(styles?.opacity)    // '0.8'
+     *
+     * // 根据当前 transform 决定下一步动画
+     * if (styles?.transform !== 'none') {
+     *   // 当前有 transform，恢复原位
+     *   boxRef.current?.animate((anim) => {
+     *     anim.translateX(0).translateY(0).scale(1).step({ duration: 300 })
+     *   })
+     * }
+     *
+     * // 错误示例：查询尺寸
+     * const styles = await boxRef.current?.getComputedStyle(['width', 'height'])
+     * console.log(styles?.width)  // 可能返回 'auto'，不是实际像素值
+     *
+     * // 正确做法：使用 getBoundingClientRect
+     * const rect = await boxRef.current?.getBoundingClientRect()
+     * console.log(rect?.width)  // 335 (实际像素值)
+     * ```
+     */
+    getComputedStyle: (styleNames: string[]) => Promise<Record<string, any> | null>;
+}
+/**
+ * Animated.Text 组件的 Ref 类型（包含 setText）
+ *
+ * @example
+ * ```tsx
+ * import { useRef } from 'react'
+ * import Animated, { type AnimatedTextRef } from '@/components/animated'
+ *
+ * const textRef = useRef<AnimatedTextRef>(null)
+ * textRef.current?.setText('新文本')
+ * textRef.current?.animate((anim) => {
+ *   anim.opacity(0.5).step({ duration: 300 })
+ * })
+ * ```
+ */
+export interface AnimatedTextRef extends AnimatedViewRef {
+    /**
+     * 直接设置文本内容（仅 Animated.Text 可用）
+     * 直接操作底层组件，不触发 React 重渲染
+     *
+     * @param text - 文本内容
+     *
+     * @example
+     * ```tsx
+     * <Animated.Text ref={textRef}>0</Animated.Text>
+     * // 更新文本
+     * textRef.current?.setText('100')
+     * ```
+     */
+    setText: (text: string) => void;
+}
+/**
+ * Animated 组件 Props
+ */
+export interface AnimatedProps extends TouchEventHandler {
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    id?: string;
+    /** 组件模式：'view' 为容器模式（默认），'text' 为文本模式 */
+    mode?: 'view' | 'text';
+    /** 动画开始回调 */
+    onAnimationStart?: () => void;
+    /** 动画结束回调 */
+    onAnimationEnd?: () => void;
+}
+export {};

package/lib/Animated-old/types.js

@@ -0,0 +1 @@
+export {};

package/lib/ScrollView/ScrollView.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { ScrollViewProps } from '@ray-js/adapter';
-declare const ScrollView: React.ForwardRefExoticComponent<ScrollViewProps & React.RefAttributes<any>>;
+declare const ScrollView: React.FC<ScrollViewProps>;
 export default ScrollView;

package/lib/ScrollView/ScrollView.js

@@ -6,7 +6,7 @@ import React from 'react';
 import { useEventListener } from 'ahooks';
 import { ScrollView as ScrollViewDef } from '@ray-js/adapter';
 import handleProps from '../utils/handleProps';
-const ScrollView = /*#__PURE__*/React.forwardRef((props, ref) => {
+const ScrollView = props => {
   const {
       onScroll,
       onScrollToUpper,
@@ -14,9 +14,6 @@ const ScrollView = /*#__PURE__*/React.forwardRef((props, ref) => {
     } = props,
     restProps = _objectWithoutProperties(props, _excluded);
   const currentNode = React.useRef(null);
-
-  // 使用传入的 ref 或内部的 ref
-  const scrollRef = ref || currentNode;
   useEventListener('scroll', e => {
     onScroll === null || onScroll === void 0 || onScroll(_objectSpread(_objectSpread(_objectSpread({}, e), {}, {
       type: 'scroll'
@@ -24,7 +21,7 @@ const ScrollView = /*#__PURE__*/React.forwardRef((props, ref) => {
       origin: e
     }));
   }, {
-    target: scrollRef
+    target: currentNode
   });
   useEventListener('scrolltoupper', e => {
     onScrollToUpper === null || onScrollToUpper === void 0 || onScrollToUpper(_objectSpread(_objectSpread(_objectSpread({}, e), {}, {
@@ -33,7 +30,7 @@ const ScrollView = /*#__PURE__*/React.forwardRef((props, ref) => {
       origin: e
     }));
   }, {
-    target: scrollRef
+    target: currentNode
   });
   useEventListener('scrolltolower', e => {
     onScrollToLower === null || onScrollToLower === void 0 || onScrollToLower(_objectSpread(_objectSpread(_objectSpread({}, e), {}, {
@@ -42,15 +39,15 @@ const ScrollView = /*#__PURE__*/React.forwardRef((props, ref) => {
       origin: e
     }));
   }, {
-    target: scrollRef
+    target: currentNode
   });
   return (
     /*#__PURE__*/
     // @ts-ignore
     React.createElement("v-scroll-view", _extends({}, handleProps(restProps), {
-      ref: scrollRef
+      ref: currentNode
     }), props.children)
   );
-});
+};
 ScrollView.defaultProps = ScrollViewDef.defaultProps;
 export default ScrollView;

package/lib/ScrollView/ScrollView.thing.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import type { ScrollViewProps } from '@ray-js/adapter';
-declare const ScrollView: React.ForwardRefExoticComponent<ScrollViewProps & React.RefAttributes<any>>;
+declare const ScrollView: React.FC<ScrollViewProps>;
 export default ScrollView;

package/lib/ScrollView/ScrollView.thing.js

@@ -4,16 +4,13 @@ const _excluded = ["style"];
 import * as React from 'react';
 import { inlineStyle } from '@ray-js/framework-shared';
 import { ScrollView as RemaxScrollView } from '@ray-js/adapter';
-const ScrollView = /*#__PURE__*/React.forwardRef((props, ref) => {
+const ScrollView = props => {
   const {
       style
     } = props,
     restProps = _objectWithoutProperties(props, _excluded);
-  // @ts-ignore - RemaxScrollView 支持 ref，但类型定义可能不完整
   return /*#__PURE__*/React.createElement(RemaxScrollView, _extends({
-    ref: ref,
     style: inlineStyle(style)
   }, restProps));
-});
-ScrollView.displayName = 'ScrollView';
+};
 export default ScrollView;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/components",
-  "version": "1.7.56-beta.0",
+  "version": "1.7.56-beta.10",
   "description": "Ray basic components",
   "keywords": [
     "ray"
@@ -29,8 +29,8 @@
   "dependencies": {
     "@ray-core/macro": "^0.4.9",
     "@ray-core/wechat": "^0.4.9",
-    "@ray-js/adapter": "1.7.56-beta.0",
-    "@ray-js/framework-shared": "1.7.56-beta.0",
+    "@ray-js/adapter": "1.7.56-beta.10",
+    "@ray-js/framework-shared": "1.7.56-beta.10",
     "ahooks": "^3.8.5",
     "clsx": "^1.2.1",
     "core-js": "^3.43.0",
@@ -40,11 +40,11 @@
     "style-to-object": "^0.3.0"
   },
   "devDependencies": {
-    "@ray-js/cli": "1.7.56-beta.0"
+    "@ray-js/cli": "1.7.56-beta.10"
   },
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org"
   },
-  "gitHead": "0cbe1a77d0bad902ea033152aedbb2f490753088"
+  "gitHead": "1c03c24ac82eeee0ea0c69f463d174ab6a14a11d"
 }