pixuireactcomponents 1.3.101 → 1.3.102

package/package.json

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

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

@@ -1,7 +1,8 @@
 import { h } from 'preact';
 /**
  * 轮播组件
- * @param cRef - 组件引用
+ * @param cRef - 组件引用,其中导出了3个方法：handleNext，handlePrev，setShowIndex
+ *          使用cRef.current.handleNext(),cRef.current.handlePrev(),cRef.current.setShowIndex(index)来调用
  * @param children - 轮播元素
  * @param defaultIndex - 默认展示元素的索引，从1开始
  * @param compWidth - 轮播元素宽度

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

@@ -47,7 +47,8 @@ import { useImperativeHandle, useState, useRef, useMemo, useEffect } from 'preac
 // });
 /**
  * 轮播组件
- * @param cRef - 组件引用
+ * @param cRef - 组件引用,其中导出了3个方法：handleNext，handlePrev，setShowIndex
+ *          使用cRef.current.handleNext(),cRef.current.handlePrev(),cRef.current.setShowIndex(index)来调用
  * @param children - 轮播元素
  * @param defaultIndex - 默认展示元素的索引，从1开始
  * @param compWidth - 轮播元素宽度
@@ -187,10 +188,9 @@ export function Carousel(props) {
         if (isLastCarouseItem() || isFirstCarouseLastItem()) {
             setShowTransition(false);
         }
-        // console.log('showIndex' + showIndex)
         isMoving.current = false;
         //触发onSlideChange
-        if (!isLastCarouseItem() && !isFirstCarouseLastItem() && onSlideChange)
+        if (!isLastCarouseItem() && !isFirstCarouseLastItem() && onSlideChange && showTransition)
             onSlideChange(showIndex - 1);
         // 处理首尾特殊case
         if (isLastCarouseItem()) {

package/src/components/react/app/loadChecker/LoadChecker.d.ts

@@ -0,0 +1,7 @@
+import h from 'lib/dom';
+export declare const LoadChecker: (props: {
+    children?: h.JSX.Element | HTMLElement | h.JSX.Element[] | HTMLElement[] | undefined;
+    rootClass?: string | undefined;
+    timeoutPeriod?: number | undefined;
+    onLoad?: Function | undefined;
+}) => h.JSX.Element;

package/src/components/react/app/loadChecker/LoadChecker.js

@@ -0,0 +1,68 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+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;
+    var _c = useState(false), loaded = _c[0], setLoaded = _c[1];
+    var _d = useState(0), total = _d[0], setTotal = _d[1];
+    var _e = useState([]), loadedElements = _e[0], setLoadedElements = _e[1];
+    var ref = useRef(null);
+    //0.5s后直接显示
+    useEffect(function () {
+        var timer = setTimeout(function () {
+            setLoaded(true);
+        }, timeoutPeriod);
+        var node = ref.current;
+        if (!node) {
+            setLoaded(true);
+            return;
+        }
+        setTotal(getLoadCount(node, 0));
+        return function () {
+            clearTimeout(timer);
+        };
+    }, []);
+    var getLoadCount = function (node, preCount) {
+        if (!node)
+            return preCount;
+        var temp = 0;
+        if (node.tagName.toLowerCase() === 'img' || (node.style && node.style.backgroundImage)) {
+            temp++;
+            //   console.log(node.id);
+            node.addEventListener('load', handleLoad);
+        }
+        node.childNodes &&
+            node.childNodes.forEach(function (child) {
+                temp += getLoadCount(child, temp);
+            });
+        return temp;
+    };
+    useEffect(function () {
+        if (loaded && onLoad) {
+            onLoad();
+        }
+    }, [loaded]);
+    var handleLoad = function (event) {
+        setLoadedElements(function (prevElements) {
+            if (prevElements.includes(event.target)) {
+                return prevElements;
+            }
+            else {
+                var newElements = __spreadArray(__spreadArray([], prevElements, true), [event.target], false);
+                if (newElements.length >= total) {
+                    setLoaded(true);
+                }
+                return newElements;
+            }
+        });
+    };
+    return (h("div", { ref: ref, style: { visibility: loaded ? 'visible' : 'hidden' }, className: rootClass }, children));
+};