pixuireactcomponents 1.5.45 → 1.5.47

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "pixuireactcomponents",
-    "version": "1.5.45",
+    "version": "1.5.47",
     "description": "pixui react components",
     "main": "index.js",
     "sideEffects": false,

package/src/components/react/app/carousel/Carousel.js

@@ -96,6 +96,15 @@ export function Carousel(props) {
     }); });
     var duration = switchDuration < 1100 ? 1100 : switchDuration;
     var _q = useState(defaultIndex), showIndex = _q[0], setShowIndex = _q[1];
+    // 监听 showIndex 变化
+    useEffect(function () {
+        console.log('[Carousel Debug] showIndex变化: ' +
+            JSON.stringify({
+                showIndex: showIndex,
+                defaultIndex: defaultIndex,
+                carouselItemsLength: children.length + 2, // 加上首尾补位
+            }));
+    }, [showIndex]);
     //轮播元素正在滚动
     var isMoving = useRef(false);
     //鼠标手势信息
@@ -108,9 +117,67 @@ export function Carousel(props) {
     var safeNextHandle = useRef();
     var safePrevHandle = useRef();
     var nextInterval = useRef();
-    var _r = useState(true), showTransition = _r[0], setShowTransition = _r[1];
+    // 初始化时关闭动画，避免初始化时尺寸变化导致的闪烁
+    var _r = useState(false), showTransition = _r[0], setShowTransition = _r[1];
     var _s = useState([0, 0]), gestureoffset = _s[0], setGestureoffset = _s[1];
-    var offset = useMemo(function () { return -(isVertical ? compHeight : compWidth) * showIndex; }, [showIndex, compHeight, compWidth]);
+    // 添加初始化保护标志
+    var isInitializing = useRef(true);
+    useEffect(function () {
+        console.log('[Carousel Debug] showTransition变化: ' +
+            JSON.stringify({
+                showTransition: showTransition,
+                compWidth: compWidth,
+                compHeight: compHeight,
+            }));
+    }, [showTransition]);
+    useEffect(function () {
+        console.log('[Carousel Debug] 尺寸变化检测: ' +
+            JSON.stringify({
+                compWidth: compWidth,
+                compHeight: compHeight,
+                currentShowIndex: showIndex,
+                defaultIndex: defaultIndex,
+                isInitializing: isInitializing.current,
+            }));
+        // 当尺寸从无效变为有效时，重置到默认索引
+        if (compWidth > 0 && compHeight > 0) {
+            // 只有在初始化期间才重置索引
+            if (isInitializing.current) {
+                console.log('[Carousel Debug] 初始化期间，重置到默认索引: ' + defaultIndex);
+                setShowIndex(defaultIndex);
+                // 确保动画关闭，避免从错误位置过渡
+                setShowTransition(false);
+                // 标记初始化完成
+                isInitializing.current = false;
+                // 延迟设置自动播放，避免立即触发动画开启逻辑
+                setTimeout(function () {
+                    console.log('[Carousel Debug] 初始化完成，延迟设置自动播放');
+                    setNextInterval();
+                }, 100);
+            }
+        }
+    }, [compWidth, compHeight]);
+    // 添加调试日志
+    console.log('[Carousel Debug] 组件渲染 - props: ' +
+        JSON.stringify({
+            compWidth: compWidth,
+            compHeight: compHeight,
+            defaultIndex: defaultIndex,
+            autoplay: autoplay,
+            children: children.length,
+        }));
+    var offset = useMemo(function () {
+        var calculatedOffset = -(isVertical ? compHeight : compWidth) * showIndex;
+        console.log('[Carousel Debug] offset计算: ' +
+            JSON.stringify({
+                isVertical: isVertical,
+                compWidth: compWidth,
+                compHeight: compHeight,
+                showIndex: showIndex,
+                calculatedOffset: calculatedOffset,
+            }));
+        return calculatedOffset;
+    }, [showIndex, compHeight, compWidth]);
     var itemBoxStyle = {
         minWidth: compWidth + 'px',
         minHeight: compHeight + 'px',
@@ -124,35 +191,123 @@ export function Carousel(props) {
     }, [children]);
     var isLastCarouseItem = function () { return showIndex === carouselItems.length - 1; };
     var isFirstCarouseLastItem = function () { return showIndex === 0; };
+    var lastOnSlideChangeIndex = useRef(-1); //上一次onSlideChange的index，避免重复触发
     useEffect(function () {
-        setNextInterval();
+        // 只有在初始化完成后才设置自动播放
+        if (!isInitializing.current) {
+            console.log('[Carousel Debug] autoplay变化，设置自动播放');
+            setNextInterval();
+        }
+        else {
+            console.log('[Carousel Debug] 初始化期间，跳过autoplay变化处理');
+        }
     }, [autoplay]);
     //组件展示内容长度改变的时候改回到第一个元素，刷新autoplay判断
     useEffect(function () {
-        setNextInterval();
-        setShowIndex(defaultIndex);
+        console.log('[Carousel Debug] children变化: ' +
+            JSON.stringify({
+                childrenLength: children.length,
+                defaultIndex: defaultIndex,
+                compWidth: compWidth,
+                compHeight: compHeight,
+                isInitializing: isInitializing.current,
+            }));
+        // 只有在初始化完成后才设置自动播放和重置索引
+        if (!isInitializing.current) {
+            setNextInterval();
+            // 只有在尺寸有效时才重置索引，避免在初始化时干扰尺寸变化监听
+            if (compWidth > 0 && compHeight > 0) {
+                console.log('[Carousel Debug] children变化时重置索引: ' + defaultIndex);
+                setShowIndex(defaultIndex);
+            }
+        }
+        else {
+            console.log('[Carousel Debug] 初始化期间，跳过children变化处理');
+        }
     }, [children]);
     useEffect(function () {
+        console.log('[Carousel Debug] showIndex useEffect触发: ' +
+            JSON.stringify({
+                showIndex: showIndex,
+                isLast: isLastCarouseItem(),
+                isFirst: isFirstCarouseLastItem(),
+                isInitializing: isInitializing.current,
+            }));
         //每次跳转前判断打开动画，否则动画关闭以后不会调用handleTransitionEnd
-        if (!isLastCarouseItem() && !isFirstCarouseLastItem()) {
+        // 但在初始化期间不开启动画
+        if (!isLastCarouseItem() && !isFirstCarouseLastItem() && !isInitializing.current) {
+            console.log('[Carousel Debug] 因showIndex变化开启动画');
             setShowTransition(true);
         }
+        else if (isInitializing.current) {
+            console.log('[Carousel Debug] 初始化期间，跳过showIndex动画开启');
+        }
     }, [showIndex]);
     //更新handleNext的环境
     useEffect(function () {
         handleNextRef.current = handleNext;
     });
     var setNextInterval = function () {
+        console.log('[Carousel Debug] setNextInterval调用: ' +
+            JSON.stringify({
+                childrenLength: children.length,
+                autoplay: autoplay,
+                compWidth: compWidth,
+                compHeight: compHeight,
+                duration: duration,
+                isInitializing: isInitializing.current,
+            }));
         nextInterval.current && clearInterval(nextInterval.current);
-        if (children.length > 1 && autoplay) {
+        // 只有在初始化完成后才设置自动播放
+        if (children.length > 1 && autoplay && !isInitializing.current) {
+            console.log('[Carousel Debug] 设置自动播放定时器');
             nextInterval.current = setInterval(function () {
                 handleNextRef.current();
             }, duration);
         }
+        else {
+            console.log('[Carousel Debug] 跳过自动播放设置:', {
+                childrenLength: children.length,
+                autoplay: autoplay,
+                isInitializing: isInitializing.current,
+            });
+        }
+        // 当组件开始正常工作时（有子元素且尺寸有效），开启动画
+        // 但避免在尺寸刚变为有效时立即开启，给尺寸重置逻辑一些时间
+        var shouldEnableTransition = children.length > 0 && compWidth > 0 && compHeight > 0;
+        console.log('[Carousel Debug] 动画状态检查: ' +
+            JSON.stringify({
+                shouldEnableTransition: shouldEnableTransition,
+                currentShowTransition: showTransition,
+                isInitializing: isInitializing.current,
+            }));
+        // 只有在初始化完成后且当前没有动画时才开启动画
+        if (shouldEnableTransition && showTransition === false && !isInitializing.current) {
+            // 延迟开启动画，确保尺寸重置完成
+            setTimeout(function () {
+                // 再次检查初始化状态，确保在延迟期间没有重新初始化
+                if (!isInitializing.current) {
+                    console.log('[Carousel Debug] 延迟开启动画过渡');
+                    setShowTransition(true);
+                }
+                else {
+                    console.log('[Carousel Debug] 延迟期间仍在初始化，跳过动画开启');
+                }
+            }, 50);
+        }
+        else {
+            console.log('[Carousel Debug] 跳过动画开启:', {
+                shouldEnableTransition: shouldEnableTransition,
+                showTransition: showTransition,
+                isInitializing: isInitializing.current,
+            });
+        }
     };
     useEffect(function () {
+        console.log('[Carousel Debug] 组件初始化开始');
         console.log('Carousel init');
-        setNextInterval();
+        // 初始化期间不设置自动播放
+        // setNextInterval();
         window.addEventListener('close', function () {
             console.log('Carousel close');
             nextInterval.current && clearInterval(nextInterval.current);
@@ -188,21 +343,39 @@ export function Carousel(props) {
         setShowIndex(showIndex + 1);
     };
     var handleTransitionEnd = function () {
+        console.log('[Carousel Debug] 动画结束: ' +
+            JSON.stringify({
+                showIndex: showIndex,
+                isLast: isLastCarouseItem(),
+                isFirst: isFirstCarouseLastItem(),
+                isInitializing: isInitializing.current,
+            }));
         //判断前后补位元素准备跳转
         //在动画结束以后关掉，否则用鼠标拖动的时候不能补充剩下的offset
         if (isLastCarouseItem() || isFirstCarouseLastItem()) {
+            console.log('[Carousel Debug] 因首尾特殊情况关闭动画');
             setShowTransition(false);
         }
         isMoving.current = false;
         //触发onSlideChange
-        if (!isLastCarouseItem() && !isFirstCarouseLastItem() && onSlideChange && showTransition)
+        if (!isLastCarouseItem() && !isFirstCarouseLastItem() && onSlideChange && lastOnSlideChangeIndex.current !== showIndex) {
+            console.log('[Carousel Debug] 触发onSlideChange: ' + (showIndex - 1));
             onSlideChange(showIndex - 1);
-        // 处理首尾特殊case
-        if (isLastCarouseItem()) {
-            setShowIndex(1);
+            lastOnSlideChangeIndex.current = showIndex;
         }
-        if (isFirstCarouseLastItem()) {
-            setShowIndex(carouselItems.length - 2);
+        // 处理首尾特殊case，但在初始化期间跳过
+        if (!isInitializing.current) {
+            if (isLastCarouseItem()) {
+                console.log('[Carousel Debug] 处理末尾case，跳转到索引1');
+                setShowIndex(1);
+            }
+            if (isFirstCarouseLastItem()) {
+                console.log('[Carousel Debug] 处理开头case，跳转到索引' + (carouselItems.length - 2));
+                setShowIndex(carouselItems.length - 2);
+            }
+        }
+        else {
+            console.log('[Carousel Debug] 初始化期间，跳过首尾特殊情况处理');
         }
     };
     var gestureUp = function () {
@@ -304,6 +477,18 @@ export function Carousel(props) {
             onClick(showIndex - 1);
         }
     };
+    // 渲染时关键样式信息
+    var transformValue = isVertical ? "translate(0px, ".concat(offset + gestureoffset[1], "px)") : "translate(".concat(offset + gestureoffset[0], "px, 0px)");
+    var transitionValue = "transform ".concat(showTransition ? '0.4s' : '0s', " ease 0s");
+    console.log('[Carousel Debug] 渲染样式: ' +
+        JSON.stringify({
+            transformValue: transformValue,
+            transitionValue: transitionValue,
+            showTransition: showTransition,
+            offset: offset,
+            gestureoffset: gestureoffset,
+            carouselItemsLength: carouselItems.length,
+        }));
     return (h("div", { style: { flexDirection: 'column', width: compWidth, height: compHeight }, id: rootId, className: rootClassName },
         h("div", { draggable: true, style: __assign(__assign({}, itemBoxStyle), { position: 'absolute' }), onClick: function (ev) {
                 gestureClick(props);
@@ -325,10 +510,8 @@ export function Carousel(props) {
                         display: 'flex',
                         width: isVertical ? compWidth : compWidth * carouselItems.length + 'px',
                         height: isVertical ? compHeight * carouselItems.length : compHeight + 'px',
-                        transition: "transform ".concat(showTransition ? '0.4s' : '0s', " ease 0s"),
-                        transform: isVertical
-                            ? "translate(0px, ".concat(offset + gestureoffset[1], "px)")
-                            : "translate(".concat(offset + gestureoffset[0], "px, 0px)"),
+                        transition: transitionValue,
+                        transform: transformValue,
                         flexDirection: isVertical ? 'column' : 'row',
                         flexShrink: 0,
                     }, class: "wrapper", onTransitionEnd: handleTransitionEnd }, carouselItems.map(function (child) { return child; }))))));