pixuireactcomponents 1.3.55 → 1.3.57

package/index.d.ts

@@ -11,5 +11,6 @@ export { FrameAnimation } from "./src/components/react/app/frameAnimation/FrameA
 export { AsyncTaskProcessor } from "./src/components/tools/AsyncTaskProcessor";
 export { assetCache } from "./src/components/tools/assetCache";
 export { frameAnimationJs } from "./src/components/js/frameAnimationJs/frameAnimationJs";
+export { ScrollBar } from "./src/components/react/app/scrollBar/ScrollBar";
 export { Slider, SliderProps } from "./src/components/react/app/slider/Slider";
 export { ImgPreLoader, PreLoadPic } from "./src/components/tools/ImgPreLoader";

package/index.js

@@ -14,3 +14,4 @@ export { ImgPreLoader, PreLoadPic } from './src/components/tools/ImgPreLoader';
 export { AsyncTaskProcessor } from './src/components/tools/AsyncTaskProcessor';
 export { assetCache } from './src/components/tools/assetCache';
 export { frameAnimationJs } from './src/components/js/frameAnimationJs/frameAnimationJs';
+export { ScrollBar } from './src/components/react/app/scrollBar/ScrollBar';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "pixuireactcomponents",
-    "version": "1.3.55",
+    "version": "1.3.57",
     "description": "pixui react components",
     "main": "index.js",
     "scripts": {

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

@@ -105,7 +105,7 @@ export function Carousel(props) {
     var safePrevHandle = useRef();
     var nextInterval = useRef();
     var _q = useState(true), showTransition = _q[0], setShowTransition = _q[1];
-    var _r = useState([0, 0]), gesteroffset = _r[0], setGesteroffset = _r[1];
+    var _r = useState([0, 0]), gestureoffset = _r[0], setGestureoffset = _r[1];
     var offset = useMemo(function () { return -(isVertical ? compHeight : compWidth) * showIndex; }, [showIndex]);
     var itemBoxStyle = {
         minWidth: compWidth + 'px',
@@ -211,22 +211,22 @@ export function Carousel(props) {
         isMouseDown.current = false;
         //拖动大于1/3的时候跳转
         if (isVertical) {
-            if (gesteroffset[1] > compHeight / 3) {
+            if (gestureoffset[1] > compHeight / 3) {
                 handlePrev();
             }
-            else if (gesteroffset[1] < -compHeight / 3) {
+            else if (gestureoffset[1] < -compHeight / 3) {
                 handleNext();
             }
         }
         else {
-            if (gesteroffset[0] > compWidth / 3) {
+            if (gestureoffset[0] > compWidth / 3) {
                 handlePrev();
             }
-            else if (gesteroffset[0] < -compWidth / 3) {
+            else if (gestureoffset[0] < -compWidth / 3) {
                 handleNext();
             }
         }
-        setGesteroffset([0, 0]);
+        setGestureoffset([0, 0]);
         setNextInterval();
     };
     var gestureMove = function (e) {
@@ -241,7 +241,7 @@ export function Carousel(props) {
         var b = rect.bottom;
         var x = e.clientX;
         var y = e.clientY;
-        setGesteroffset([e.clientX - mouseDownX.current, e.clientY - mouseDownY.current]);
+        setGestureoffset([e.clientX - mouseDownX.current, e.clientY - mouseDownY.current]);
         //计算滑动超出元素范围
         if (x < l || x > r || y > b || y < t) {
             gestureUp();
@@ -290,7 +290,9 @@ export function Carousel(props) {
                         width: isVertical ? compWidth : compWidth * carouselItems.length + 'px',
                         height: isVertical ? compHeight * carouselItems.length : compHeight + 'px',
                         transition: "transform ".concat(showTransition ? '0.5s' : '0s', " ease 0s"),
-                        transform: isVertical ? "translate(0px, ".concat(offset + gesteroffset[1], "px)") : "translate(".concat(offset + gesteroffset[0], "px, 0px)"),
+                        transform: isVertical
+                            ? "translate(0px, ".concat(offset + gestureoffset[1], "px)")
+                            : "translate(".concat(offset + gestureoffset[0], "px, 0px)"),
                         flexDirection: isVertical ? 'column' : 'row',
                         flexShrink: 0,
                     }, class: "wrapper", onTransitionEnd: handleTransitionEnd }, carouselItems.map(function (child) { return child; }))))));

package/src/components/react/app/carouselMulti/CarouselMulti.d.ts

@@ -0,0 +1,17 @@
+import { h } from 'preact';
+export declare let CarouselMulti: (props: {
+    rootId?: string | undefined;
+    rootClassName?: string | undefined;
+    extShowCount: number;
+    extShowDist: {
+        num: number;
+        unit: 'px' | '%' | 'rem';
+    };
+    animationTime?: number | undefined;
+    maxScale?: number | undefined;
+    minOpacity?: number | undefined;
+    onClick?: ((index: number) => void) | undefined;
+    onIndexChange?: ((index: number) => void) | undefined;
+    cRef?: any;
+    children: h.JSX.Element[];
+}) => h.JSX.Element | null;

package/src/components/react/app/carouselMulti/CarouselMulti.js

@@ -0,0 +1,172 @@
+import { h } from 'preact';
+import { useImperativeHandle, useState, useRef, useEffect } from 'preact/hooks';
+export var CarouselMulti = function (props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var extShowCount = props.extShowCount, extShowDist = props.extShowDist, rootId = (_a = props.rootId, _a === void 0 ? '' : _a), rootClassName = (_b = props.rootClassName, _b === void 0 ? '' : _b), animationTime = (_c = props.animationTime, _c === void 0 ? 500 : _c), maxScale = (_d = props.maxScale, _d === void 0 ? 1.5 : _d), minOpacity = (_e = props.minOpacity, _e === void 0 ? 0.5 : _e), onClick = props.onClick, 
+    // fillAndLoop = true,
+    onIndexChange = props.onIndexChange;
+    //元素不足extShowCount*2+3时，复制原数组到可以播放动画的长度
+    var children = (function () {
+        var preChildren = props.children;
+        // if (fillAndLoop) {
+        if (preChildren.length == 0) {
+            return [];
+        }
+        while (preChildren.length < extShowCount * 2 + 3) {
+            preChildren = preChildren.concat(props.children);
+        }
+        // }
+        return preChildren;
+    })();
+    var onload = (_f = useState(false), _f[0]), setOnload = _f[1];
+    var zIndexArr = (_g = useState(Array.from({ length: children.length }).map(function () { return 0; })), _g[0]), setZIndexArr = _g[1];
+    var opacitiyArr = (_h = useState(Array.from({ length: children.length }).map(function () { return 0; })), _h[0]), setOpacitiyArr = _h[1];
+    var showIndex = (_j = useState(Math.floor((props.children.length - 1) / 2)), _j[0]), setShowIndex = _j[1];
+    //用于填入 style 的距离
+    var getDist = function (num) {
+        return num + extShowDist.unit;
+    };
+    var dragX = useRef(0);
+    var isDraging = useRef(false);
+    var getMinDist = function (_index, _showindex) { return Math.min(Math.abs(_index - _showindex), children.length - Math.abs(_index - _showindex)); };
+    var getLeft = function (index) {
+        //计算元素的left，间隔为extShowDist.num，以showIndex为中心，左右两边各显示extShowCount个元素，余下的元素按数组首尾相接的顺序计算 zindex
+        var left = -1;
+        var minDist = getMinDist(index, showIndex);
+        if (index == showIndex) {
+            left = extShowCount;
+        }
+        else if (minDist <= extShowCount) {
+            //需要展示
+            if (index < showIndex) {
+                if (Math.abs(index - showIndex) <= extShowCount) {
+                    //没跨边界
+                    left = extShowCount - minDist;
+                }
+                else {
+                    left = extShowCount + minDist;
+                }
+            }
+            else if (index > showIndex) {
+                if (Math.abs(index - showIndex) <= extShowCount) {
+                    //没跨边界
+                    left = extShowCount + minDist;
+                }
+                else {
+                    left = extShowCount - minDist;
+                }
+            }
+        }
+        else {
+            //盖在下面的元素，计算放到哪边
+            if (Math.abs(index - showIndex + children.length) % children.length <= Math.abs(showIndex - index + children.length) % children.length) {
+                left = extShowCount * 2;
+            }
+            else {
+                left = 0;
+            }
+        }
+        return left * extShowDist.num;
+    };
+    var onTransitionEnd = function (ev) { };
+    useEffect(function () {
+        onIndexChange && onIndexChange(showIndex);
+    }, [showIndex]);
+    useImperativeHandle(props.cRef, function () { return ({
+        switchNext: function () {
+            changeShowIndex((showIndex + 1) % children.length);
+        },
+        switchPre: function () {
+            changeShowIndex((showIndex - 1 + children.length) % children.length);
+        },
+    }); });
+    //按离中间元素的距离计算 zindex、scale、opacity
+    var getZIndex = function (index, showIndex) {
+        var topIndex = 99999;
+        var baseIndex = topIndex - getMinDist(index, showIndex);
+        return baseIndex;
+    };
+    var getOpacity = function (index, showIndex) {
+        var topOpacity = 1;
+        var baseOpacity = minOpacity;
+        //getMinDist越大，越靠近中间，透明度越高
+        return Math.max(baseOpacity + ((topOpacity - baseOpacity) * (extShowCount - getMinDist(index, showIndex))) / extShowCount, baseOpacity);
+    };
+    var getScale = function (index) {
+        var topScale = maxScale;
+        var baseScale = 1;
+        return Math.max(baseScale + ((topScale - baseScale) * (extShowCount - getMinDist(index, showIndex))) / extShowCount, baseScale);
+    };
+    useEffect(function () {
+        if (children.length == 0) {
+            return;
+        }
+        //计算修改完元素的属性再显示
+        setEleStyle(showIndex);
+        setOnload(true);
+    }, []);
+    var setEleStyle = function (index) {
+        //更新元素的zIndex和opacity
+        var newZIndexArr = Array.from({ length: children.length }).map(function () { return 0; });
+        children.forEach(function (_, _index) {
+            newZIndexArr[_index] = getZIndex(index, _index);
+        });
+        setZIndexArr(newZIndexArr);
+        var newOpacityArr = Array.from({ length: children.length }).map(function () { return 1; });
+        children.forEach(function (_, _index) {
+            newOpacityArr[_index] = getOpacity(index, _index);
+        });
+        setOpacitiyArr(newOpacityArr);
+    };
+    var changeShowIndex = function (index) {
+        if (index >= 0 && index < children.length) {
+            setShowIndex(index);
+            setTimeout(function () {
+                setEleStyle(index);
+            }, animationTime * 0.4);
+        }
+    };
+    return onload ? (h("div", { id: rootId, className: rootClassName, style: { flexDirection: 'column' }, onDrag: function (ev) {
+            if (!isDraging.current) {
+                return;
+            }
+            //在外层接受 drag 事件，触发切换动作
+            if (ev.clientX - dragX.current > 100) {
+                console.log('drag right');
+                changeShowIndex((showIndex - 1 + children.length) % children.length);
+                isDraging.current = false;
+            }
+            else if (ev.clientX - dragX.current < -100) {
+                console.log('drag left');
+                changeShowIndex((showIndex + 1) % children.length);
+                isDraging.current = false;
+            }
+        }, onDragStart: function (ev) {
+            isDraging.current = true;
+            dragX.current = ev.clientX;
+        }, onDragEnd: function (ev) {
+            isDraging.current = false;
+        }, draggable: true }, children.map(function (child, index) {
+        return (h("div", { ref: function (ele) {
+                if (ele) {
+                    //绕过 pixui 初始化设置zIndex 和 opcity 后 transform 错误的问题
+                    // ele.style.transform = `translate(${getDist(getLeft(index) + 1)},0rem) scale(${getScale(index)})`;
+                    ele.style.transition = "transform ".concat(animationTime, "ms");
+                }
+            }, 
+            /**
+             * child数组首尾相接，拼成一个环，除了显示的 extShowCount*2+1 个元素，其余元素分别放到最左和最右，按离中间元素的距离计算 zindex 和 scale
+             * 用getLeft函数统一计算每个元素当前的left值，pixui 不支持zIndex和opacity动画，直接在播放过程中setstate改变元素的zIndex和opacity值
+             */
+            style: {
+                position: 'absolute',
+                transform: "translate(".concat(getDist(getLeft(index)), ",0px) scale(").concat(getScale(index), ")"),
+                zIndex: zIndexArr[index] || 0,
+                opacity: opacitiyArr[index] || 1,
+            }, onClick: function (ev) {
+                changeShowIndex(index);
+                onClick && onClick(index);
+                ev.stopPropagation();
+            } }, child));
+    }))) : null;
+};

package/src/components/react/app/newsTicker/NewsTicker.d.ts

@@ -0,0 +1,9 @@
+import { h } from 'preact';
+export declare let NewsTicker: (props: {
+    rootId?: string | undefined;
+    rootClassName: string;
+    content: string;
+    totalTime: number;
+    onEnd?: (() => void) | undefined;
+    repeatTimes?: number | undefined;
+}) => h.JSX.Element;

package/src/components/react/app/newsTicker/NewsTicker.js

@@ -0,0 +1,41 @@
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { h } from 'preact';
+export var NewsTicker = function (props) {
+    var _a, _b;
+    var rootId = props.rootId, rootClassName = props.rootClassName, content = props.content, totalTime = props.totalTime, onEnd = props.onEnd, repeatTimes = (_a = props.repeatTimes, _a === void 0 ? 1 : _a);
+    // const [left, setLeft] = useState(0);
+    var moveDistance = (_b = useState(0), _b[0]), setMoveDistance = _b[1];
+    var contentRef = useRef(null);
+    var frameRef = useRef(null);
+    useEffect(function () {
+        var contentWidth = contentRef.current.clientWidth || 0;
+        var frameWidth = frameRef.current.clientWidth || 0;
+        var moveDistance = Math.max(contentWidth - frameWidth, 0);
+        setMoveDistance(moveDistance);
+    }, []);
+    var onTransitionEnd = function () {
+        onEnd && onEnd();
+    };
+    var repeatContent = function () {
+        var repeatContent = '';
+        for (var i = 0; i < repeatTimes; i++) {
+            repeatContent += content;
+        }
+        console.log('repeatContent', repeatContent);
+        return repeatContent;
+    };
+    return (h("div", { id: rootId, className: rootClassName, style: {
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            width: '100%',
+            position: 'relative',
+        }, ref: frameRef },
+        h("div", { ref: contentRef, style: {
+                position: 'absolute',
+                // transition: `left ${totalTime}s linear`,
+                transition: "transform ".concat(totalTime, "s linear"),
+                // transform: `translate(-100%, 0)`,
+                transform: "translateX(-".concat(moveDistance, ")"),
+            }, onTransitionEnd: onTransitionEnd }, repeatContent())));
+};

package/src/components/react/app/scrollBar/ScrollBar.d.ts

@@ -0,0 +1,6 @@
+/**
+ * + [已解决]为什么重新创建 CustomScrollBar()时 isDragingSBlock 会被重置为false？ 在外部回调中不能使用state
+ *
+ */
+import { h } from 'preact';
+export declare function ScrollBar(props: any): h.JSX.Element;

package/src/components/react/app/scrollBar/ScrollBar.js

@@ -0,0 +1,134 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+/**
+ * + [已解决]为什么重新创建 CustomScrollBar()时 isDragingSBlock 会被重置为false？ 在外部回调中不能使用state
+ *
+ */
+import { h } from 'preact';
+import styles from './ScrollBar.less';
+import { useState, useEffect } from 'preact/hooks';
+var sWindow; // 滚动窗口
+var sBlock; // 滚动条
+var sFrame; // 滚动条外框
+var isDragingSBlock = false;
+var clientYtoBlockTop = 0; //鼠标Y坐标距离滑块top, 记录这个值是为了记住拖动位置和滑块的偏移，并在后续滑动时保持这个偏移
+export function ScrollBar(props) {
+    var _a = useState(0), sBlockY = _a[0], setSBlockY = _a[1]; // sBlock的Top值, block顶部相对于frames上边的差值
+    var _b = useState({}), sBlockStyle = _b[0], setSBlockStyle = _b[1];
+    var _c = useState({}), sFrameStyle = _c[0], setSFrameStyle = _c[1];
+    setSFrameStyle(props.style);
+    useEffect(function () {
+        // 初始化的 useEffect，其中只能添加初始化方法
+        setTimeout(function () {
+            // pixui限制，必须异步获取元素，也可以用userRef, 但效率似乎不如初始化时查找
+            if (!props.scrollWindowRef) {
+                console.warn('[CustomScrollBar][Error] 未设置 scrollWindowRef!');
+                return;
+            }
+            sWindow = props.scrollWindowRef.current;
+            sBlock = document.getElementById('sblock');
+            sFrame = document.getElementById('sframe');
+            if (!sWindow) {
+                console.warn('[CustomScrollBar][Error] 未找到sWindow，请确认设置的scrollWindowRef是否正确!');
+                return;
+            }
+            if (!sBlock || !sFrame) {
+                console.warn('[CustomScrollBar][Error] 内部错误，无法找到 sBlock 或 sFrame!');
+                return;
+            }
+            sWindow === null || sWindow === void 0 ? void 0 : sWindow.addEventListener('scroll', sWindowScrolling);
+            // 设置背景图
+            sBlock.style.backgroundImage = "url(".concat(props.sBlockImgNormal, ")");
+            sFrame.style.backgroundImage = "url(".concat(props.sFrameImgNormal, ")");
+            sBlock.addEventListener('mousedown', function () {
+                sBlock.style.backgroundImage = "url(".concat(props.sBlockImgClick, ")");
+                sFrame.style.backgroundImage = "url(".concat(props.sFrameImgClick, ")");
+            });
+            sBlock.addEventListener('mouseup', function () {
+                sBlock.style.backgroundImage = "url(".concat(props.sBlockImgNormal, ")");
+                sFrame.style.backgroundImage = "url(".concat(props.sFrameImgNormal, ")");
+            });
+        }, 1);
+        // 释放时删除监听
+        return function () {
+            sWindow === null || sWindow === void 0 ? void 0 : sWindow.removeEventListener('scroll', sWindowScrolling);
+        };
+    }, []);
+    useEffect(function () {
+        setSBlockStyle(function (prevStyle) { return (__assign(__assign({}, props.blockStyle), { marginTop: sBlockY })); });
+    }, [sBlockY, props.blockStyle]);
+    // 页面滑动时，滑块也跟着移动
+    var sWindowScrolling = function (event) {
+        if (isDragingSBlock) {
+            // 这个事件是处理窗口滚动的。如果是拖动滑块，则不处理事件。否则会造成死循环。
+            return;
+        }
+        // 页面滑动时，同步带动滑块移动
+        if (sBlock && sWindow && sFrame) {
+            var sblock_height = sBlock.getBoundingClientRect().height; // 滑块高
+            var sframe_height = sFrame.getBoundingClientRect().height; // 滑块顶部距离父元素高度
+            var swindow_height = sWindow.getBoundingClientRect().height; // 滑动窗口高
+            var content_scrollTop = sWindow.scrollTop; // 窗口顶部距离内容顶部的高度
+            var content_height = sWindow.scrollHeight;
+            var rate = content_scrollTop / (content_height - swindow_height); //当前滑动比例
+            var sblock_top_to_sframe = rate * (sframe_height - sblock_height);
+            if (sblock_top_to_sframe < 0) {
+                setSBlockY(0);
+            }
+            else if (sblock_top_to_sframe > sframe_height - sblock_height) {
+                setSBlockY(sframe_height - sblock_height);
+            }
+            else {
+                setSBlockY(sblock_top_to_sframe);
+            }
+        }
+    };
+    // 拖动滑块时，页面跟着移动
+    var sBlockScrolling = function (event) {
+        if (event.clientY - clientYtoBlockTop < sFrame.getBoundingClientRect().top) {
+            // 超出上边界,滑动到顶
+            setSBlockY(0);
+        }
+        else if (event.clientY - clientYtoBlockTop + sBlock.getBoundingClientRect().height > sFrame.getBoundingClientRect().bottom) {
+            // 超出下边界，滑动到底
+            setSBlockY(sFrame.getBoundingClientRect().height - sBlock.getBoundingClientRect().height);
+        }
+        else {
+            setSBlockY(
+            // 滑块顶部距离sframe上边的差值 = 鼠标Y位置 - 鼠标Y距离元素顶部位置 - 滚动框绝对top
+            event.clientY - clientYtoBlockTop - sFrame.getBoundingClientRect().top);
+        }
+        {
+            //移动 content
+            var sblock_height = sBlock.getBoundingClientRect().height;
+            var sframe_height = sFrame.getBoundingClientRect().height;
+            var swindow_height = sWindow.getBoundingClientRect().height;
+            var content_height = sWindow.scrollHeight;
+            var slideMarginTop = sBlock.getBoundingClientRect().top - sFrame.getBoundingClientRect().top;
+            var rate = slideMarginTop / (sframe_height - sblock_height);
+            var content_scrollTop = (content_height - swindow_height) * rate;
+            sWindow.scrollTop = content_scrollTop;
+        }
+    };
+    return (h("div", { id: "sframe", className: styles.main, style: sFrameStyle },
+        h("div", { id: "sblock", className: styles.slideBlock, style: sBlockStyle, draggable: true, onDragStart: function (event) {
+                sBlock.style.backgroundImage = "url(".concat(props.sBlockImgClick, ")");
+                sFrame.style.backgroundImage = "url(".concat(props.sFrameImgClick, ")");
+                //@ts-ignore
+                clientYtoBlockTop = event.clientY - event.target.getBoundingClientRect().top;
+                isDragingSBlock = true;
+            }, onDragEnd: function (event) {
+                isDragingSBlock = false;
+                sBlock.style.backgroundImage = "url(".concat(props.sBlockImgNormal, ")");
+                sFrame.style.backgroundImage = "url(".concat(props.sFrameImgNormal, ")");
+            }, onDrag: sBlockScrolling })));
+}