pixuireactcomponents 1.4.7 → 1.4.9

package/index.d.ts

@@ -5,6 +5,8 @@ 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 { ScratchCard } from "src/components/react/app/scratchCard/ScratchCard";
 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,8 @@ 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 { ScratchCard } from 'src/components/react/app/scratchCard/ScratchCard';
 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.7",
+    "version": "1.4.9",
     "description": "pixui react components",
     "main": "index.js",
     "scripts": {

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

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

package/src/components/react/app/loadChecker/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;
-    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 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 = [];
@@ -23,7 +23,7 @@ export var LoadChecker = function (props) {
             args[_i] = arguments[_i];
         }
         if (enableCompLog) {
-            console.log.apply(console, __spreadArray(['LoadChecker: '], args, false));
+            console.log.apply(console, __spreadArray(["LoadChecker [".concat(tag, "]: ")], args, false));
         }
     };
     //0.5s后直接显示
@@ -84,7 +84,7 @@ export var LoadChecker = function (props) {
             if (src.startsWith('url(')) {
                 src = src.substring(4, src.length - 1);
             }
-            if (onlyHttp && (!src.startsWith('http') || src.startsWith('http://localhost'))) {
+            if (onlyHttp && (!src.startsWith('http') || (src.startsWith('http://') && src.substring(7).includes(':')))) {
                 return '';
             }
             return src;

package/src/components/react/app/scratchCard/ScratchCard.d.ts

@@ -0,0 +1,15 @@
+import { CSSProperties, h } from 'preact';
+export interface ScratchCardProps {
+    cardId?: string;
+    ratio?: number;
+    moveRadius?: number;
+    startCallback?: Function;
+    clearCallback?: Function;
+    coverImage?: string;
+    coverColor?: string;
+    coverWidth: number;
+    coverHeight: number;
+    coverStyle?: CSSProperties;
+    resultStyle?: CSSProperties;
+}
+export declare const ScratchCard: (props: ScratchCardProps, ref: any) => h.JSX.Element;

package/src/components/react/app/scratchCard/ScratchCard.js

@@ -0,0 +1,217 @@
+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);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { h } from 'preact';
+import { useEffect, useRef, useState } from 'preact/hooks';
+// export type ScratchCardRef = {
+//     // canvasContainer: HTMLCanvasElement;
+//     // initDone: boolean;
+//     clearCard: () => void;
+//   };
+var defaultStyle = {
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center'
+};
+export var ScratchCard = function (props, ref) {
+    var _a = props.cardId, cardId = _a === void 0 ? 'scratch-card' : _a, _b = props.ratio, ratio = _b === void 0 ? 1 : _b, startCallback = props.startCallback, clearCallback = props.clearCallback, coverImage = props.coverImage, coverColor = props.coverColor, coverWidth = props.coverWidth, coverHeight = props.coverHeight, coverStyle = props.coverStyle, resultStyle = props.resultStyle, _c = props.moveRadius, moveRadius = _c === void 0 ? 10 : _c;
+    var canvasRef = useRef(null);
+    var _d = useState(false), isResultLoad = _d[0], setIsResultLoad = _d[1];
+    // 记录鼠标位置，用作平滑效果
+    var lastPos = { x: 0, y: 0 };
+    // 记录首次刮卡
+    var isStarted = false;
+    // 记录是否正在刮卡
+    var isDrawing = false;
+    // 已经刮过的元素数量
+    var scratchedPixels = 0;
+    // canvas元素二维数组
+    var scratchMap;
+    useEffect(function () {
+        var drawCanvas = function () { return __awaiter(void 0, void 0, void 0, function () {
+            var canvas, ctx;
+            return __generator(this, function (_a) {
+                canvas = canvasRef.current;
+                ctx = canvas.getContext('2d');
+                console.log("canvas: ", canvas, ctx);
+                if (ctx) {
+                    if (coverColor) {
+                        ctx.fillStyle = coverColor;
+                        ctx.fillRect(0, 0, canvas.width, canvas.height);
+                        setIsResultLoad(true);
+                    }
+                }
+                scratchMap = Array.from({ length: canvas.height }, function () { return Array(canvas.width).fill(false); });
+                canvas.addEventListener('mousedown', handleMouseDown);
+                canvas.addEventListener('mouseup', handleMouseUp);
+                canvas.addEventListener('mousemove', handleMouseMove);
+                return [2 /*return*/];
+            });
+        }); };
+        drawCanvas();
+        return function () { removeListener(); };
+    }, [coverColor]);
+    var drawImage = function () {
+        var canvas = canvasRef.current;
+        var ctx = canvas.getContext('2d');
+        if (ctx) {
+            var image = document.getElementById("".concat(cardId, "_img"));
+            ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
+            setIsResultLoad(true);
+        }
+    };
+    var handleMouseDown = function (e) {
+        // console.log("handleMouseDown: ", e )
+        isDrawing = true;
+        if (!isStarted && startCallback) {
+            startCallback();
+            isStarted = true;
+        }
+        var rect = canvasRef.current.getBoundingClientRect();
+        var x = e.clientX - rect.left;
+        var y = e.clientY - rect.top;
+        lastPos = { x: x, y: y };
+        handleScratch(x, y);
+    };
+    var handleMouseUp = function (e) {
+        // console.log("handleMouseUp: ", e )
+        isDrawing = false;
+        handleIfComplete();
+    };
+    var handleMouseMove = function (e) {
+        // console.log("handleMouseMove: ", isDrawing, e )
+        if (!isDrawing) {
+            return;
+        }
+        var rect = canvasRef.current.getBoundingClientRect();
+        var x = e.clientX - rect.left;
+        var y = e.clientY - rect.top;
+        var ctx = canvasRef.current.getContext('2d');
+        if (ctx) {
+            ctx.globalCompositeOperation = "destination-out";
+            ctx.beginPath();
+            ctx.moveTo(lastPos.x, lastPos.y);
+            ctx.lineTo(x, y);
+            ctx.strokeStyle = 'rgba(0,0,0,1)';
+            ctx.lineWidth = moveRadius * 2;
+            ctx.stroke();
+        }
+        lastPos = { x: x, y: y };
+        handleScratch(x, y);
+    };
+    var handleScratch = function (x, y) {
+        var canvas = canvasRef.current;
+        var ctx = canvas.getContext('2d');
+        // console.log("handleScratch: ", e )
+        if (ctx) {
+            for (var i = -moveRadius; i <= moveRadius; i++) {
+                for (var j = -moveRadius; j <= moveRadius; j++) {
+                    var dx = x + i;
+                    var dy = y + j;
+                    if (dx >= 0 && dx < canvas.width && dy >= 0 && dy < canvas.height && !scratchMap[dy][dx]) {
+                        scratchMap[dy][dx] = true;
+                        scratchedPixels++;
+                    }
+                }
+            }
+            ctx.globalCompositeOperation = coverImage ? "source-out" : "destination-out";
+            ctx.beginPath();
+            ctx.arc(x, y, moveRadius, 0, Math.PI * 2);
+            ctx.fill();
+        }
+    };
+    var handleIfComplete = function () {
+        var canvas = canvasRef.current;
+        var ctx = canvas.getContext('2d');
+        if (ctx) {
+            // getImageData方法目前暂不支持
+            // const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+            // const pixels = imageData.data;
+            // let scratchedPixels = 0;
+            // for(let i = 0; i < pixels.length; i += 4) {
+            //     if(pixels[i + 3] === 0) {
+            //         scratchedPixels++;
+            //     }
+            // }
+            // if((scratchedPixels / (pixels.length / 4)) > ratio) {
+            //     if(clearCallback) {
+            //         clearCallback();
+            //     }
+            //     clearCard();
+            // }
+            var scratchedRatio = scratchedPixels / (canvas.width * canvas.height);
+            if (scratchedRatio > ratio) {
+                if (clearCallback) {
+                    clearCallback();
+                }
+                clearCard();
+            }
+        }
+    };
+    var clearCard = function () {
+        var canvas = canvasRef.current;
+        var ctx = canvas.getContext('2d');
+        if (ctx) {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            removeListener();
+        }
+    };
+    var removeListener = function () {
+        var canvas = canvasRef.current;
+        if (canvas) {
+            canvas.removeEventListener('mousedown', handleMouseDown);
+            canvas.removeEventListener('mouseup', handleMouseUp);
+            canvas.removeEventListener('mousemove', handleMouseMove);
+        }
+    };
+    return (h("div", { id: cardId, style: __assign({}, defaultStyle) },
+        isResultLoad && h("div", { style: __assign({}, resultStyle) }),
+        coverImage && h("img", { style: { position: 'absolute', width: "1px", height: "1px" }, id: "".concat(cardId, "_img"), src: coverImage, onLoad: drawImage }),
+        h("canvas", { ref: canvasRef, width: coverWidth, height: coverHeight, style: __assign(__assign({}, coverStyle), { position: 'absolute' }) })));
+};

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") }) })));
+};