pixuireactcomponents 1.4.10 → 1.4.12

package/index.d.ts

@@ -13,10 +13,10 @@ export { OutlineText } from "./src/components/react/base/outlinetext/OutlineText
 export { FrameAnimation } from "./src/components/react/app/frameAnimation/FrameAnimation";
 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 { tools } from "./src/components/tools/tools";
 export { PreloadImg } from "./src/components/react/app/preloadImg/PreloadImg";
-export { LoadChecker } from "./src/components/react/app/loadChecker/LoadChecker";
+export { LoadChecker } from "./src/components/tools/LoadChecker";
+export { AntiRepeat } from "./src/components/tools/antiRepeat";
 export { Slider, SliderProps } from "./src/components/react/app/slider/Slider";
 export { ImgPreLoader_base64, PreLoadPic_base64 } from "./src/components/tools/ImgPreLoader";

package/index.js

@@ -16,8 +16,8 @@ export { FrameAnimation } from './src/components/react/app/frameAnimation/FrameA
 export { ImgPreLoader_base64, PreLoadPic_base64 } 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';
 export { tools } from './src/components/tools/tools';
 export { PreloadImg } from './src/components/react/app/preloadImg/PreloadImg';
-export { LoadChecker } from './src/components/react/app/loadChecker/LoadChecker';
+export { LoadChecker } from './src/components/tools/LoadChecker';
+export { AntiRepeat } from './src/components/tools/antiRepeat';

package/package.json

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

package/src/components/react/app/carousel/Carousel.d.ts

@@ -14,6 +14,7 @@ import { h } from 'preact';
  * @param touchable - 是否允许手势切换
  * @param onSlideChange - 切换元素后的回调函数
  * @param onClick - 点击元素的回调函数
+ * @param touchSwitchDistance - 手势切换的距离,一个0-1的小数，代表父元素宽度的百分比
  */
 export declare function Carousel(props: {
     rootId?: string;
@@ -30,4 +31,5 @@ export declare function Carousel(props: {
     touchable?: boolean;
     onSlideChange?: Function | null;
     onClick?: Function | null;
+    touchSwitchDistance?: number;
 }): h.JSX.Element;

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

@@ -60,9 +60,12 @@ import { useImperativeHandle, useState, useRef, useMemo, useEffect } from 'preac
  * @param touchable - 是否允许手势切换
  * @param onSlideChange - 切换元素后的回调函数
  * @param onClick - 点击元素的回调函数
+ * @param touchSwitchDistance - 手势切换的距离,一个0-1的小数，代表父元素宽度的百分比
  */
 export function Carousel(props) {
-    var _a = props.rootId, rootId = _a === void 0 ? '' : _a, _b = props.rootClassName, rootClassName = _b === void 0 ? '' : _b, _c = props.children, children = _c === void 0 ? [] : _c, _d = props.defaultIndex, defaultIndex = _d === void 0 ? 1 : _d, _e = props.compWidth, compWidth = _e === void 0 ? 100 : _e, _f = props.compHeight, compHeight = _f === void 0 ? 100 : _f, _g = props.autoplay, autoplay = _g === void 0 ? true : _g, _h = props.switchDuration, switchDuration = _h === void 0 ? 3000 : _h, _j = props.loop, loop = _j === void 0 ? true : _j, _k = props.isVertical, isVertical = _k === void 0 ? false : _k, _l = props.touchable, touchable = _l === void 0 ? true : _l, _m = props.onSlideChange, onSlideChange = _m === void 0 ? null : _m, _o = props.onClick, onClick = _o === void 0 ? null : _o;
+    var _a = props.rootId, rootId = _a === void 0 ? '' : _a, _b = props.rootClassName, rootClassName = _b === void 0 ? '' : _b, _c = props.children, children = _c === void 0 ? [] : _c, _d = props.defaultIndex, defaultIndex = _d === void 0 ? 1 : _d, _e = props.compWidth, compWidth = _e === void 0 ? 100 : _e, _f = props.compHeight, compHeight = _f === void 0 ? 100 : _f, _g = props.autoplay, autoplay = _g === void 0 ? true : _g, _h = props.switchDuration, switchDuration = _h === void 0 ? 3000 : _h, _j = props.loop, loop = _j === void 0 ? true : _j, _k = props.isVertical, isVertical = _k === void 0 ? false : _k, _l = props.touchable, touchable = _l === void 0 ? true : _l, _m = props.onSlideChange, onSlideChange = _m === void 0 ? null : _m, _o = props.onClick, onClick = _o === void 0 ? null : _o, _p = props.touchSwitchDistance, touchSwitchDistance = _p === void 0 ? props.touchSwitchDistance && props.touchSwitchDistance > 0 && props.touchSwitchDistance < 1
+        ? props.touchSwitchDistance
+        : 0.3 : _p;
     // console.log('children', children.length);
     var safeNext = function () {
         if (!canClickSwitch.current)
@@ -92,7 +95,7 @@ export function Carousel(props) {
         setShowIndex: setShowIndex,
     }); });
     var duration = switchDuration < 1000 ? 1000 : switchDuration;
-    var _p = useState(defaultIndex), showIndex = _p[0], setShowIndex = _p[1];
+    var _q = useState(defaultIndex), showIndex = _q[0], setShowIndex = _q[1];
     //轮播元素正在滚动
     var isMoving = useRef(false);
     //鼠标手势信息
@@ -105,8 +108,8 @@ export function Carousel(props) {
     var safeNextHandle = useRef();
     var safePrevHandle = useRef();
     var nextInterval = useRef();
-    var _q = useState(true), showTransition = _q[0], setShowTransition = _q[1];
-    var _r = useState([0, 0]), gestureoffset = _r[0], setGestureoffset = _r[1];
+    var _r = useState(true), 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]);
     var itemBoxStyle = {
         minWidth: compWidth + 'px',
@@ -211,18 +214,18 @@ export function Carousel(props) {
         isMouseDown.current = false;
         //拖动大于1/3的时候跳转
         if (isVertical) {
-            if (gestureoffset[1] > compHeight / 3) {
+            if (gestureoffset[1] > compHeight * touchSwitchDistance) {
                 handlePrev();
             }
-            else if (gestureoffset[1] < -compHeight / 3) {
+            else if (gestureoffset[1] < -compHeight * touchSwitchDistance) {
                 handleNext();
             }
         }
         else {
-            if (gestureoffset[0] > compWidth / 3) {
+            if (gestureoffset[0] > compWidth * touchSwitchDistance) {
                 handlePrev();
             }
-            else if (gestureoffset[0] < -compWidth / 3) {
+            else if (gestureoffset[0] < -compWidth * touchSwitchDistance) {
                 handleNext();
             }
         }

package/src/components/react/app/common.d.ts

@@ -0,0 +1,3 @@
+export declare function singleton<T>(impl: new () => T): {
+    getInstance: () => T;
+};

package/src/components/react/app/common.js

@@ -0,0 +1,13 @@
+export function singleton(impl) {
+    return (function () {
+        var inst;
+        return {
+            getInstance: function () {
+                if (!inst) {
+                    inst = new impl();
+                }
+                return inst;
+            },
+        };
+    })();
+}

package/src/components/{react/app/loadChecker → tools}/LoadChecker.d.ts

@@ -5,6 +5,5 @@ export declare const LoadChecker: (props: {
     timeoutPeriod?: number | undefined;
     onLoad?: Function | undefined;
     enableCompLog?: boolean | undefined;
-    onlyHttp?: boolean | undefined;
     tag?: string | undefined;
 }) => h.JSX.Element;

package/src/components/{react/app/loadChecker → tools}/LoadChecker.js

@@ -10,12 +10,12 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 import h from 'lib/dom';
 import { useEffect, useRef, useState } from 'preact/hooks';
 export var LoadChecker = function (props) {
-    var children = props.children, _a = props.rootClass, rootClass = _a === void 0 ? '' : _a, _b = props.timeoutPeriod, timeoutPeriod = _b === void 0 ? 500 : _b, onLoad = props.onLoad, _c = props.enableCompLog, enableCompLog = _c === void 0 ? false : _c, _d = props.onlyHttp, onlyHttp = _d === void 0 ? false : _d, _e = props.tag, tag = _e === void 0 ? '' : _e;
-    var _f = useState(false), loaded = _f[0], setLoaded = _f[1];
-    var _g = useState(false), collectFinish = _g[0], setCollectFinish = _g[1];
-    var _h = useState([]), loadedElements = _h[0], setLoadedElements = _h[1];
-    var _j = useState([]), collectSrcs = _j[0], setCollectSrcs = _j[1];
-    var _k = useState(new Date().getTime()), timeStamp = _k[0], setTimeStamp = _k[1];
+    var children = props.children, _a = props.rootClass, rootClass = _a === void 0 ? '' : _a, _b = props.timeoutPeriod, timeoutPeriod = _b === void 0 ? 500 : _b, onLoad = props.onLoad, _c = props.enableCompLog, enableCompLog = _c === void 0 ? false : _c, _d = props.tag, tag = _d === void 0 ? '' : _d;
+    var _e = useState(false), loaded = _e[0], setLoaded = _e[1];
+    var _f = useState(false), collectFinish = _f[0], setCollectFinish = _f[1];
+    var _g = useState([]), loadedElements = _g[0], setLoadedElements = _g[1];
+    var _h = useState([]), collectSrcs = _h[0], setCollectSrcs = _h[1];
+    var _j = useState(new Date().getTime()), timeStamp = _j[0], setTimeStamp = _j[1];
     var ref = useRef(null);
     var myLog = function () {
         var args = [];
@@ -29,6 +29,8 @@ export var LoadChecker = function (props) {
     //0.5s后直接显示
     useEffect(function () {
         var timer = setTimeout(function () {
+            if (loaded)
+                return;
             setLoaded(true);
             myLog(timeoutPeriod, 's timeout, direct show');
         }, timeoutPeriod);
@@ -48,7 +50,7 @@ export var LoadChecker = function (props) {
         if (!collectFinish)
             return;
         myLog('elementsLoadedCount:', loadedElements.length, 'collectSrcs:', collectSrcs.length);
-        myLog('loadedElements:', loadedElements, collectSrcs);
+        myLog('loadedElements:', JSON.stringify(loadedElements, null, 4), JSON.stringify(collectSrcs, null, 4));
         if (collectSrcs.length == 0 || loadedElements.length >= collectSrcs.length) {
             myLog('all loaded, srcs:', JSON.stringify(collectSrcs, null, 2));
             myLog('all loaded, timeStamp:', new Date().getTime() - timeStamp);
@@ -84,7 +86,8 @@ export var LoadChecker = function (props) {
             if (src.startsWith('url(')) {
                 src = src.substring(4, src.length - 1);
             }
-            if (onlyHttp && (!src.startsWith('http') || (src.startsWith('http://') && src.substring(7).includes(':')))) {
+            //非http开头：本地资源，在useeffect时已经onload了。 http://后带有:,本地预览时的本地资源，同理
+            if (!src.startsWith('http') || (src.startsWith('http://') && src.substring(7).includes(':'))) {
                 return '';
             }
             return src;

package/src/components/tools/antiRepeat.d.ts

@@ -0,0 +1,7 @@
+declare class AntiRepeatImpl {
+    private lastExecTime;
+    constructor();
+    wrap(func: () => void, interval?: number): () => void;
+}
+export declare const AntiRepeat: AntiRepeatImpl;
+export {};

package/src/components/tools/antiRepeat.js

@@ -0,0 +1,21 @@
+import { singleton } from '../react/app/common';
+var AntiRepeatImpl = /** @class */ (function () {
+    function AntiRepeatImpl() {
+        this.lastExecTime = 0;
+    }
+    AntiRepeatImpl.prototype.wrap = function (func, interval) {
+        var _this = this;
+        if (interval === void 0) { interval = 2000; }
+        return function () {
+            var now = Date.now();
+            if (now - _this.lastExecTime < interval) {
+                console.log('anti repeat block click');
+                return;
+            }
+            _this.lastExecTime = now;
+            func();
+        };
+    };
+    return AntiRepeatImpl;
+}());
+export var AntiRepeat = singleton(AntiRepeatImpl).getInstance();

package/src/components/js/frameAnimationJs/frameAnimationJs.d.ts

@@ -1,46 +0,0 @@
-/**
- * FrameAnimation的js版本
- * @param rootId 根节点id
- * @param rootClassName 根节点className
- * @param totalTime 动画总时长
- * @param width 组件宽度
- * @param height 组件高度
- * @param srcArr 图片url数组
- * @param onShow 每一帧显示时的回调
- * @param onFinish 动画结束时的回调
- * @param preloadCount 预加载节点的数量
- * @param loop 是否循环播放
- * @param showLastFrame 播放结束后是否显示最后一帧
- */
-export class frameAnimationJs {
-    constructor({ rootId, rootClassName, totalTime, width, height, srcArr, onShow, onFinish, preloadCount, loop, showLastFrame, }: {
-        rootId?: string | undefined;
-        rootClassName?: string | undefined;
-        totalTime: any;
-        width: any;
-        height: any;
-        srcArr: any;
-        onShow: any;
-        onFinish: any;
-        preloadCount?: number | undefined;
-        loop?: boolean | undefined;
-        showLastFrame?: boolean | undefined;
-    });
-    rootId: string;
-    rootClassName: string;
-    totalTime: any;
-    width: any;
-    height: any;
-    srcArr: any;
-    onShow: any;
-    onFinish: any;
-    preloadCount: number;
-    loop: boolean;
-    showLastFrame: boolean;
-    cRefArr: HTMLImageElement[];
-    imgEleArr: HTMLImageElement[];
-    nextFrame(startTime: any, oneFrameTime: any, showedFrame: any): void;
-    rootEle: HTMLDivElement;
-    init(): void;
-    getRootEle(): HTMLDivElement;
-}

package/src/components/js/frameAnimationJs/frameAnimationJs.js

@@ -1,125 +0,0 @@
-/**
- * FrameAnimation的js版本
- * @param rootId 根节点id
- * @param rootClassName 根节点className
- * @param totalTime 动画总时长
- * @param width 组件宽度
- * @param height 组件高度
- * @param srcArr 图片url数组
- * @param onShow 每一帧显示时的回调
- * @param onFinish 动画结束时的回调
- * @param preloadCount 预加载节点的数量
- * @param loop 是否循环播放
- * @param showLastFrame 播放结束后是否显示最后一帧
- */
-var frameAnimationJs = /** @class */ (function () {
-    function frameAnimationJs(_a) {
-        var _b = _a.rootId, rootId = _b === void 0 ? '' : _b, _c = _a.rootClassName, rootClassName = _c === void 0 ? '' : _c, totalTime = _a.totalTime, width = _a.width, height = _a.height, srcArr = _a.srcArr, onShow = _a.onShow, onFinish = _a.onFinish, _d = _a.preloadCount, preloadCount = _d === void 0 ? 5 : _d, _e = _a.loop, loop = _e === void 0 ? false : _e, _f = _a.showLastFrame, showLastFrame = _f === void 0 ? true : _f;
-        var _this = this;
-        this.rootId = rootId;
-        this.rootClassName = rootClassName;
-        this.totalTime = totalTime;
-        this.width = width;
-        this.height = height;
-        this.srcArr = srcArr;
-        this.onShow = onShow;
-        this.onFinish = onFinish;
-        this.preloadCount = preloadCount;
-        this.loop = loop;
-        this.showLastFrame = showLastFrame;
-        this.cRefArr = Array.from({ length: preloadCount }, function () { return document.createElement('img'); });
-        this.imgEleArr = Array.from({ length: preloadCount }, function (v, i) {
-            _this.cRefArr[i].src = _this.srcArr[i];
-            _this.cRefArr[i].style.position = 'absolute';
-            _this.cRefArr[i].style.visibility = 'hidden';
-            _this.cRefArr[i].style.width = _this.width;
-            _this.cRefArr[i].style.height = _this.height;
-            return _this.cRefArr[i];
-        });
-        this.nextFrame = this.nextFrame.bind(this);
-        this.rootEle = document.createElement('div');
-        console.log('ccc');
-        this.init();
-    }
-    frameAnimationJs.prototype.init = function () {
-        var _this = this;
-        this.rootEle.style.width = this.width;
-        this.rootEle.style.height = this.height;
-        this.rootEle.id = this.rootId;
-        this.rootEle.className = this.rootClassName;
-        this.imgEleArr.forEach(function (ele) {
-            _this.rootEle.appendChild(ele);
-        });
-        var startTime = Date.now();
-        var oneFrameTime = this.totalTime / this.srcArr.length;
-        //设置第一帧
-        this.cRefArr[0].style.visibility = 'visible';
-        this.nextFrame(startTime, oneFrameTime, 0);
-    };
-    //循环修改imgEleArr的src和visibility实现帧动画,，记录上一帧的序号防止跳帧
-    frameAnimationJs.prototype.nextFrame = function (startTime, oneFrameTime, showedFrame) {
-        var _this = this;
-        var nowTime = Date.now();
-        //该显示第几帧
-        var nowFrame = Math.floor((nowTime - startTime) / oneFrameTime);
-        //使用第几个img元素
-        var nowArrIndex = nowFrame % this.preloadCount;
-        var showedArrIndex = showedFrame % this.preloadCount;
-        // console.log('nextFrame', nowFrame, 'nowArrIndex', nowArrIndex, 'nowFrame', nowFrame);
-        if (!this.cRefArr[0]) {
-            //组件已经被卸载
-            this.onFinish && this.onFinish();
-            return;
-        }
-        if (nowFrame >= this.srcArr.length) {
-            this.onFinish && this.onFinish();
-            if (!this.loop) {
-                this.cRefArr.forEach(function (ref, i) {
-                    ref.style.visibility = 'hidden';
-                });
-                if (this.showLastFrame) {
-                    //跳帧的话，最后一帧可能不是最后一张图片，设为最后一张图片
-                    this.cRefArr[0].src = this.srcArr[this.srcArr.length - 1];
-                    this.cRefArr[0].style.visibility = 'visible';
-                }
-                return;
-            }
-            //重置img标签的 src 和 visibility
-            this.cRefArr.forEach(function (ref, i) {
-                ref.style.visibility = 'hidden';
-                ref.src = _this.srcArr[i];
-            });
-            startTime = Date.now();
-            this.cRefArr[0].style.visibility = 'visible';
-            requestAnimationFrame(function () {
-                _this.nextFrame(startTime, oneFrameTime, 0);
-            });
-            return;
-        }
-        if (nowFrame !== showedFrame) {
-            this.cRefArr[nowArrIndex].style.visibility = 'visible';
-            //隐藏上一帧
-            this.cRefArr[showedArrIndex].style.visibility = 'hidden';
-            //可能跳帧，在所有其他的元素上预加载
-            this.cRefArr.forEach(function (ref, i) {
-                if (i !== nowArrIndex) {
-                    var offset = (i + _this.cRefArr.length - nowArrIndex) % _this.cRefArr.length;
-                    var offsetFrame = (nowFrame + offset) % _this.srcArr.length;
-                    if (ref.src !== _this.srcArr[offsetFrame]) {
-                        ref.src = _this.srcArr[offsetFrame];
-                    }
-                }
-            });
-            showedFrame = nowFrame;
-            this.onShow && this.onShow(nowFrame);
-        }
-        requestAnimationFrame(function () {
-            _this.nextFrame(startTime, oneFrameTime, showedFrame);
-        });
-    };
-    frameAnimationJs.prototype.getRootEle = function () {
-        return this.rootEle;
-    };
-    return frameAnimationJs;
-}());
-export { frameAnimationJs };