pixuireactcomponents 1.4.5 → 1.4.7

package/package.json

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

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

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

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

@@ -10,57 +10,95 @@ 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;
-    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 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;
+    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 = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        if (enableCompLog) {
+            console.log.apply(console, __spreadArray(['LoadChecker: '], args, false));
+        }
+    };
     //0.5s后直接显示
     useEffect(function () {
         var timer = setTimeout(function () {
             setLoaded(true);
+            myLog(timeoutPeriod, 's timeout, direct show');
         }, timeoutPeriod);
         var node = ref.current;
         if (!node) {
             setLoaded(true);
+            myLog('no root node, direct show');
             return;
         }
-        setTotal(getLoadCount(node, 0));
+        getLoadCount(node);
+        setCollectFinish(true);
         return function () {
             clearTimeout(timer);
         };
     }, []);
-    var getLoadCount = function (node, preCount) {
+    useEffect(function () {
+        if (!collectFinish)
+            return;
+        myLog('elementsLoadedCount:', loadedElements.length, 'collectSrcs:', collectSrcs.length);
+        myLog('loadedElements:', loadedElements, collectSrcs);
+        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);
+            setLoaded(true);
+            onLoad && onLoad();
+        }
+    }, [loadedElements, collectFinish]);
+    var getLoadCount = function (node) {
         if (!node)
-            return preCount;
-        var temp = 0;
+            return;
         if (node.tagName.toLowerCase() === 'img' || (node.style && node.style.backgroundImage)) {
-            temp++;
-            //   console.log(node.id);
+            // node.id = 'img_' + cnt++;
+            setCollectSrcs(function (prevRecords) {
+                var src = getEleSrc(node);
+                if (src == '' || prevRecords.includes(src)) {
+                    return prevRecords;
+                }
+                else {
+                    return __spreadArray(__spreadArray([], prevRecords, true), [src], false);
+                }
+            });
             node.addEventListener('load', handleLoad);
         }
         node.childNodes &&
             node.childNodes.forEach(function (child) {
-                temp += getLoadCount(child, temp);
+                getLoadCount(child);
             });
-        return temp;
+        return;
     };
-    useEffect(function () {
-        if (loaded && onLoad) {
-            onLoad();
+    var getEleSrc = function (node) {
+        if (node.tagName.toLowerCase() === 'img' || (node.style && node.style.backgroundImage)) {
+            var src = node.src || node.style.backgroundImage || '';
+            if (src.startsWith('url(')) {
+                src = src.substring(4, src.length - 1);
+            }
+            if (onlyHttp && (!src.startsWith('http') || src.startsWith('http://localhost'))) {
+                return '';
+            }
+            return src;
         }
-    }, [loaded]);
+        return '';
+    };
     var handleLoad = function (event) {
         setLoadedElements(function (prevElements) {
-            if (prevElements.includes(event.target)) {
+            var src = getEleSrc(event.target);
+            if (src == '' || prevElements.includes(src)) {
                 return prevElements;
             }
             else {
-                var newElements = __spreadArray(__spreadArray([], prevElements, true), [event.target], false);
-                if (newElements.length >= total) {
-                    setLoaded(true);
-                }
-                return newElements;
+                return __spreadArray(__spreadArray([], prevElements, true), [src], false);
             }
         });
     };