pixuireactcomponents 1.4.6 → 1.4.8

package/index.d.ts

@@ -5,6 +5,7 @@ export { DropDown } from "./src/components/react/app/dropDown/DropDown";
 export { ImageViewer } from "./src/components/react/app/imageViewer/imageViewer";
 export { ToggleGroup } from "./src/components/react/app/togglegroup/ToggleGroup";
 export { VideoPlayer } from "./src/components/react/app/videoPlayer/VideoPlayer";
+export { WheelPicker } from "./src/components/react/app/wheelPicker/WheelPicker";
 export { GradientText } from "./src/components/react/base/gradient/GradientText";
 export { PVideo } from "./src/components/react/base/pixVideo/PixVideo";
 export { OutlineText } from "./src/components/react/base/outlinetext/OutlineText";

package/index.js

@@ -7,6 +7,7 @@ export { ImageViewer } from './src/components/react/app/imageViewer/imageViewer'
 export { Slider } from './src/components/react/app/slider/Slider';
 export { ToggleGroup } from './src/components/react/app/togglegroup/ToggleGroup';
 export { VideoPlayer } from './src/components/react/app/videoPlayer/VideoPlayer';
+export { WheelPicker } from './src/components/react/app/wheelPicker/WheelPicker';
 export { GradientText } from './src/components/react/base/gradient/GradientText';
 export { PVideo } from './src/components/react/base/pixVideo/PixVideo';
 export { OutlineText } from './src/components/react/base/outlinetext/OutlineText';

package/package.json

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

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

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

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

@@ -10,20 +10,32 @@ 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(false), collectFinish = _d[0], setCollectFinish = _d[1];
-    var _e = useState([]), loadedElements = _e[0], setLoadedElements = _e[1];
-    var _f = useState([]), collectSrcs = _f[0], setCollectSrcs = _f[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, _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 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 [".concat(tag, "]: ")], 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;
         }
         getLoadCount(node);
@@ -35,7 +47,11 @@ export var LoadChecker = function (props) {
     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();
         }
@@ -68,6 +84,9 @@ 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(':')))) {
+                return '';
+            }
             return src;
         }
         return '';

package/src/components/react/app/wheelPicker/WheelPicker.d.ts

@@ -0,0 +1,15 @@
+import { CSSProperties, h } from 'preact';
+export interface WheelPickerProps {
+    wrapperStyle: CSSProperties;
+    items: string[];
+    visibleAbove?: number;
+    visibleBelow?: number;
+    itemTextStyle: CSSProperties;
+    selectedTextStyle?: CSSProperties;
+    AboveMaskAreaStyle?: CSSProperties;
+    BelowMaskAreaStyle?: CSSProperties;
+    selectedAreaStyle?: CSSProperties;
+    firstSelectIndex?: number;
+    onChange?: (index: number) => void;
+}
+export declare const WheelPicker: (props: WheelPickerProps) => h.JSX.Element;

package/src/components/react/app/wheelPicker/WheelPicker.js

@@ -0,0 +1,147 @@
+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);
+};
+import { h } from 'preact';
+import { useEffect, useRef, useState } from 'preact/hooks';
+var defaulWrapperStyle = {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center'
+};
+var defaultItemTextStyle = {
+    fontFamily: 'Font_FounderZZ',
+    fontStyle: 'normal',
+    fontSize: '24px',
+    lineHeight: '32px',
+    display: 'flex',
+    alignItems: 'center',
+    textAlign: 'center',
+    color: '#000000'
+};
+var defaultSelectedTextStyle = {
+    fontFamily: 'Font_FounderZZ',
+    fontStyle: 'normal',
+    fontSize: '24px',
+    lineHeight: '32px',
+    display: 'flex',
+    alignItems: 'center',
+    textAlign: 'center',
+    color: '#F0E6D2',
+};
+var defaultScrollStyle = {
+    width: '100%',
+    height: '100%',
+    overflow: 'scroll',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'start',
+    alignItems: 'center',
+    overflowStyle: 'none',
+};
+var defaultMaskAreaStyle = {
+    position: 'absolute',
+    pointerEvents: 'none'
+};
+var defaultItemStyle = {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '100%'
+};
+export var WheelPicker = function (props) {
+    var wrapperStyle = props.wrapperStyle, items = props.items, _a = props.visibleAbove, visibleAbove = _a === void 0 ? 1 : _a, _b = props.visibleBelow, visibleBelow = _b === void 0 ? 1 : _b, itemTextStyle = props.itemTextStyle, selectedTextStyle = props.selectedTextStyle, _c = props.firstSelectIndex, firstSelectIndex = _c === void 0 ? 0 : _c, AboveMaskAreaStyle = props.AboveMaskAreaStyle, BelowMaskAreaStyle = props.BelowMaskAreaStyle, selectedAreaStyle = props.selectedAreaStyle, onChange = props.onChange;
+    var scrollRef = useRef(null);
+    var _d = useState(0), itemHeight = _d[0], setItemHeight = _d[1];
+    var _e = useState([]), itemList = _e[0], setItemList = _e[1];
+    var _f = useState(false), isDraging = _f[0], setIsDraging = _f[1];
+    var _g = useState(0), selectIndex = _g[0], setSelectIndex = _g[1];
+    var scrollTimmer = useRef(null);
+    useEffect(function () {
+        var calcuItemHeight = parseInt(wrapperStyle.height) / (visibleAbove + visibleBelow + 1);
+        setItemHeight(calcuItemHeight);
+        setSelectIndex(firstSelectIndex + visibleAbove);
+        setItemList(fillBlankItems());
+        var timer = setTimeout(function () {
+            if (scrollRef.current) {
+                scrollRef.current.scrollTop = firstSelectIndex * calcuItemHeight;
+            }
+        }, 0);
+        return function () { return clearTimeout(timer); };
+    }, []);
+    useEffect(function () {
+        if (onChange) {
+            onChange(selectIndex - visibleAbove);
+        }
+    }, [selectIndex]);
+    var fillBlankItems = function () {
+        var startPadding = new Array(visibleAbove).fill('');
+        var endPadding = new Array(visibleBelow).fill('');
+        return startPadding.concat(items, endPadding);
+    };
+    var onScroll = function (e) {
+        // console.log('onScroll: ', scrollRef.current.scrollTop)
+        if (scrollTimmer.current) {
+            clearTimeout(scrollTimmer.current);
+            scrollTimmer.current = null;
+        }
+        scrollTimmer.current = window.setTimeout(function () {
+            var finalPos = (selectIndex - visibleAbove) * itemHeight;
+            if (!isDraging && scrollRef.current.scrollTop < finalPos - 1 || scrollRef.current.scrollTop > finalPos + 1) {
+                animateScroll(scrollRef.current.scrollTop, finalPos, performance.now(), 100);
+            }
+            if (scrollTimmer.current) {
+                clearTimeout(scrollTimmer.current);
+                scrollTimmer.current = null;
+            }
+        }, 50);
+        var nowSelectIndex = Math.round((scrollRef.current.scrollTop + visibleAbove * itemHeight) / itemHeight);
+        if (selectIndex !== nowSelectIndex) {
+            setSelectIndex(nowSelectIndex);
+        }
+    };
+    var animateScroll = function (currentPos, targetPos, startTime, duration) {
+        var step = function () {
+            var currentTime = performance.now();
+            var time = Math.min(1, (currentTime - startTime) / duration);
+            var timeFunction = time * (2 - time);
+            var newPos = currentPos + (targetPos - currentPos) * timeFunction;
+            scrollRef.current.scrollTop = newPos;
+            if (time < 1 && !isDraging) {
+                requestAnimationFrame(step);
+            }
+        };
+        requestAnimationFrame(step);
+    };
+    var onMouseEvent = function (isDraging) {
+        if (isDraging) {
+            setIsDraging(true);
+        }
+        else {
+            setIsDraging(false);
+            if (!scrollTimmer.current) {
+                var finalPos = (selectIndex - visibleAbove) * itemHeight;
+                animateScroll(scrollRef.current.scrollTop, finalPos, performance.now(), 100);
+                var nowSelectIndex = Math.round((scrollRef.current.scrollTop + visibleAbove * itemHeight) / itemHeight);
+                if (selectIndex !== nowSelectIndex) {
+                    setSelectIndex(nowSelectIndex);
+                }
+            }
+        }
+    };
+    return (h("div", { style: __assign(__assign({}, wrapperStyle), defaulWrapperStyle) },
+        h("div", { style: __assign({}, defaultScrollStyle), 
+            // movement-type={'clamped'} 
+            ref: scrollRef, onScroll: function (e) { onScroll(e); }, onMouseDown: function () { onMouseEvent(true); }, onMouseUp: function () { onMouseEvent(false); } }, itemList.map(function (item, index) { return (h("div", { style: __assign(__assign({}, defaultItemStyle), { minHeight: "".concat(itemHeight, "px") }) },
+            h("text", { style: selectedTextStyle ? (index === selectIndex ? selectedTextStyle : itemTextStyle) : itemTextStyle }, item))); })),
+        selectedAreaStyle && h("div", { style: __assign(__assign(__assign({}, selectedAreaStyle), defaultMaskAreaStyle), { height: "".concat(itemHeight, "px"), top: "".concat(itemHeight * visibleAbove, "px") }) }),
+        AboveMaskAreaStyle && h("div", { style: __assign(__assign(__assign({}, AboveMaskAreaStyle), defaultMaskAreaStyle), { height: "".concat(itemHeight * visibleAbove, "px"), top: '0px' }) }),
+        BelowMaskAreaStyle && h("div", { style: __assign(__assign(__assign({}, BelowMaskAreaStyle), defaultMaskAreaStyle), { height: "".concat(itemHeight * visibleBelow, "px"), top: "".concat(itemHeight * (visibleAbove + 1), "px") }) })));
+};