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

package/lib/Animated/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/index.js

@@ -136,10 +136,11 @@ const AnimatedBase = /*#__PURE__*/forwardRef((props, ref) => {
           } = _ref2,
           option = _objectWithoutProperties(_ref2, _excluded);
         if (finish && typeof finish === 'function') {
-          callbackRef.current = event => {
-            finish(event);
-            callbackRef.current = null;
-          };
+          callbackRef.current = finish;
+        } else {
+          // 如果没有传 finish 参数，清空之前的回调
+          // 避免 duration: 0 的重置动画再次触发之前的 finish
+          callbackRef.current = null;
         }
         (_inst$__apply = inst.__apply) === null || _inst$__apply === void 0 || _inst$__apply.call(inst, callback, option);
       },
@@ -233,11 +234,12 @@ const AnimatedBase = /*#__PURE__*/forwardRef((props, ref) => {
   const customStyleValue = useMemo(() => {
     if (!style) return undefined;
     return typeof style === 'object' ? styleToString(style) : style;
-  }, [style]);
+  }, []);
   const handleAnimationEnd = useCallback(event => {
-    if (callbackRef.current) {
-      callbackRef.current(event);
+    if (callbackRef.current && typeof callbackRef.current === 'function') {
+      const temp = callbackRef.current;
       callbackRef.current = null;
+      temp(event);
     }
     if (onAnimationEnd) {
       onAnimationEnd();

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

@@ -1,3 +1,9 @@
+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 - 高性能动画组件（小程序原生层）
@@ -25,12 +31,7 @@ Component({
     // 兼容 FastView 接口
     customStyle: {
       type: String,
-      value: '',
-      observer: function (v) {
-        this.setData({
-          __style: v
-        });
-      }
+      value: ''
     },
     customClass: {
       type: String,
@@ -61,7 +62,13 @@ Component({
   },
   lifetimes: {
     attached() {
-      // 组件初始化
+      // 组件初始化：将 customStyle 的初始值复制到 __style
+      const initialStyle = this.properties.customStyle || '';
+      if (initialStyle) {
+        this.setData({
+          __style: initialStyle
+        });
+      }
     },
     detached() {
       // 清理工作
@@ -106,15 +113,64 @@ Component({
       }
       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) {
       // 防止传入 undefined 或 null 导致小程序报错
       if (value === undefined || value === null) {
         console.warn('[TyAnimatedComponent] setCustomStyle: value is undefined or null, ignored');
         return;
       }
+
+      // 1. 合并样式
+      const currentStyle = this._parseStyle(this.data.__style || '');
+      const newStyle = this._parseStyle(value);
+      const mergedStyle = _objectSpread(_objectSpread({}, currentStyle), newStyle);
+      const mergedStyleString = this._styleToString(mergedStyle);
+      if (mergedStyleString === this.data.__style && this.data.__animData !== null) {
+        console.log('[TyAnimated] 值相同且有动画数据，强制刷新');
+
+        // 先清空样式和动画数据
+        this.setData({
+          __style: '',
+          __animData: null
+        }, () => {
+          // 再设置目标样式
+          this.setData({
+            __style: mergedStyleString
+          });
+        });
+        return;
+      }
       this.setData({
-        __style: value,
-        customStyle: value
+        __style: mergedStyleString,
+        __animData: null
       });
     },
     /**

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

@@ -2,8 +2,8 @@
   <view
     wx:if="{{__mode==='view'}}"
     id="root"
-    class="container {{__className}} {{customClass}}"
-    style="{{__style}};{{customStyle}}"
+    class="container {{__className}}"
+    style="{{__style}}"
     animation="{{__animData}}"
     bindtap="__onClick"
     bindtouchstart="__onTouchStart"
@@ -14,8 +14,8 @@
   <text
     wx:else
     id="rootText"
-    class="container {{__className}} {{customClass}}"
-    style="{{__style}};{{customStyle}}"
+    class="container {{__className}}"
+    style="{{__style}}"
     animation="{{__animData}}"
     bindtap="__onClick"
     bindtouchstart="__onTouchStart"

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.1",
+  "version": "1.7.56-beta.3",
   "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.1",
-    "@ray-js/framework-shared": "1.7.56-beta.1",
+    "@ray-js/adapter": "1.7.56-beta.3",
+    "@ray-js/framework-shared": "1.7.56-beta.3",
     "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.1"
+    "@ray-js/cli": "1.7.56-beta.3"
   },
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org"
   },
-  "gitHead": "e1d99bcbd08502ade11590cf19ea8c3d01f41cbb"
+  "gitHead": "fdf56468c021ff48a0f36d027dcb9408533ef3ba"
 }