pixuireactcomponents 1.3.30 → 1.3.32

package/index.d.ts

@@ -6,6 +6,7 @@ export { ToggleGroup } from "./src/components/react/app/togglegroup/ToggleGroup"
 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";
-export { ImgPreLoader } from "./src/components/tools/ImgPreLoader";
 export { Logger } from "./src/components/tools/Logger";
+export { makeImages } from "./src/components/tools/makeImage";
 export { Slider, SliderProps } from "./src/components/react/app/slider/Slider";
+export { ImgPreLoader, PreLoadPic } from "./src/components/tools/ImgPreLoader";

package/index.js

@@ -9,5 +9,6 @@ export { ToggleGroup } from './src/components/react/app/togglegroup/ToggleGroup'
 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';
-export { ImgPreLoader } from './src/components/tools/ImgPreLoader';
+export { ImgPreLoader, PreLoadPic } from './src/components/tools/ImgPreLoader';
 export { Logger } from './src/components/tools/Logger';
+export { makeImages } from './src/components/tools/makeImage';

package/package.json

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

package/src/components/react/app/button/Button.d.ts

@@ -1,13 +1,9 @@
-import { JCSSProperties } from 'lib/preact/src/jsx';
 import { h } from 'preact';
 interface ButtonProps {
+    rootId?: string;
+    rootClassName?: string;
     text: string;
-    normalStyle: JCSSProperties;
-    hoverStyle: JCSSProperties;
-    pressStyle: JCSSProperties;
-    clickEvent: Function;
-    id: string;
-    className: string;
+    onClick: Function;
 }
 export declare let Button: (props: ButtonProps) => h.JSX.Element;
 export {};

package/src/components/react/app/button/Button.js

@@ -9,14 +9,14 @@ var ButtonState;
 export var Button = function (props) {
     var _a;
     var buttonState = (_a = useState(ButtonState.normal), _a[0]), setButtonState = _a[1];
-    return (h("div", { style: buttonState == ButtonState.normal ? props.normalStyle : buttonState == ButtonState.hover ? props.hoverStyle : props.pressStyle, onMouseDown: function () {
+    return (h("div", { onMouseDown: function () {
             setButtonState(ButtonState.press);
         }, onMouseUp: function () {
             setButtonState(ButtonState.hover);
-            props.clickEvent();
+            props.onClick();
         }, onMouseOver: function () {
             setButtonState(ButtonState.hover);
         }, onMouseOut: function () {
             setButtonState(ButtonState.normal);
-        }, id: props.id, className: props.className }, props.text));
+        }, id: props.rootId, className: props.rootClassName + ' ' + ButtonState[buttonState] }, props.text));
 };

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

@@ -15,8 +15,8 @@ import { h } from 'preact';
  * @param onClick - 点击元素的回调函数
  */
 export declare function Carousel(props: {
-    id?: string;
-    className?: string;
+    rootId?: string;
+    rootClassName?: string;
     cRef?: any;
     children?: preact.JSX.Element[] | HTMLElement[];
     defaultIndex?: number;

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

@@ -61,7 +61,7 @@ import { useImperativeHandle, useState, useRef, useMemo, useEffect } from 'preac
  * @param onClick - 点击元素的回调函数
  */
 export function Carousel(props) {
-    var _a = props.id, id = _a === void 0 ? '' : _a, _b = props.className, className = _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;
     // console.log('children', children.length);
     var safeNext = function () {
         if (!canClickSwitch.current)
@@ -250,7 +250,7 @@ export function Carousel(props) {
             onClick(showIndex - 1);
         }
     };
-    return (h("div", { style: { flexDirection: 'column', width: compWidth, height: compHeight }, id: id, className: className },
+    return (h("div", { style: { flexDirection: 'column', width: compWidth, height: compHeight }, id: rootId, className: rootClassName },
         h("div", { draggable: true, style: __assign(__assign({}, itemBoxStyle), { position: 'absolute' }), onClick: function (ev) {
                 gestureClick(props);
             }, class: 'GestureComp', onDragStart: function (e) {

package/src/components/react/app/checkBox/CheckBox.d.ts

@@ -1,7 +1,7 @@
 import { h } from 'preact';
 export declare function CheckBox(props: {
-    id?: string;
-    className?: string;
+    rootId?: string;
+    rootClassName?: string;
     selectedChanged?: Function;
     defauleSelected?: boolean;
     selectedNode?: any;

package/src/components/react/app/checkBox/CheckBox.js

@@ -1,12 +1,12 @@
 import { h } from 'preact';
 import { useState } from 'preact/hooks';
 export function CheckBox(props) {
-    var _a = props.id, id = _a === void 0 ? '' : _a, _b = props.className, className = _b === void 0 ? '' : _b, _c = props.selectedChanged, selectedChanged = _c === void 0 ? null : _c, _d = props.defauleSelected, defauleSelected = _d === void 0 ? false : _d, _e = props.toggleSize, toggleSize = _e === void 0 ? 20 : _e;
+    var _a = props.rootId, rootId = _a === void 0 ? '' : _a, _b = props.rootClassName, rootClassName = _b === void 0 ? '' : _b, _c = props.selectedChanged, selectedChanged = _c === void 0 ? null : _c, _d = props.defauleSelected, defauleSelected = _d === void 0 ? false : _d, _e = props.toggleSize, toggleSize = _e === void 0 ? 20 : _e;
     var _f = useState(defauleSelected), selected = _f[0], setSelected = _f[1];
     props.selectedNode = props.selectedNode || (h("img", { src: "https://game.gtimg.cn/images/gamelet/cp/pixui-jnResources/check-box.png", style: { width: toggleSize + 'px', height: toggleSize + 'px' } }));
     props.notSelectedNode = props.notSelectedNode || (h("img", { src: "https://game.gtimg.cn/images/gamelet/cp/pixui-jnResources/blank-check-box.png", style: { width: toggleSize + 'px', height: toggleSize + 'px' } }));
     return (h("div", { onClick: function () {
             selectedChanged && selectedChanged(!selected);
             setSelected(!selected);
-        }, id: id, className: className }, selected ? props.selectedNode : props.notSelectedNode));
+        }, id: rootId, className: rootClassName + ' ' + (selected ? 'selected' : 'not-selected') }, selected ? props.selectedNode : props.notSelectedNode));
 }

package/src/components/react/app/dropdown/Dropdown.d.ts

@@ -18,11 +18,6 @@ export declare class Dropdown<T, DDUnspreadMainUI extends DropdownUnspreadMainUI
     isSpread: boolean;
 }> {
     constructor(props: any);
-    componentWillUnmount(): void;
-    addNetEvents: () => void;
-    removeNetEvents: () => void;
-    addLogicEvents: () => void;
-    removeLogicEvents: () => void;
     openList: () => void;
     closeList: () => void;
     onChoose: (index: number) => void;

package/src/components/react/app/dropdown/Dropdown.js

@@ -28,57 +28,46 @@ var Dropdown = /** @class */ (function (_super) {
     __extends(Dropdown, _super);
     function Dropdown(props) {
         var _this = _super.call(this, props) || this;
-        _this.addNetEvents = function () {
-        };
-        _this.removeNetEvents = function () {
-        };
-        _this.addLogicEvents = function () {
-        };
-        _this.removeLogicEvents = function () {
-        };
         _this.openList = function () {
             // console.warn("open dropdown====")
             _this.setState({
-                isSpread: true
+                isSpread: true,
             });
         };
         _this.closeList = function () {
             // console.warn("close dropdown====")
             _this.setState({
-                isSpread: false
+                isSpread: false,
             });
         };
         _this.onChoose = function (index) {
             _this.props.onChoose(index);
-            // console.warn('dropdown-=----', index)
             _this.setState({
                 selectedIndex: index,
-                isSpread: false
+                isSpread: false,
             });
         };
-        _this.addNetEvents();
-        _this.addLogicEvents();
         var initIndex = _this.props.defaultIndex == null ? 0 : _this.props.defaultIndex;
         _this.state = {
             selectedIndex: initIndex,
-            isSpread: false
+            isSpread: false,
         };
         return _this;
     }
-    Dropdown.prototype.componentWillUnmount = function () {
-        this.removeLogicEvents();
-        this.removeNetEvents();
-    };
     Dropdown.prototype.render = function () {
         var _this = this;
         if (!this.state.isSpread) {
             this.props.unspreadMainUI.props.info = this.props.config.datas[this.state.selectedIndex];
             this.props.unspreadMainUI.props.openList = this.openList;
-            return (h("div", null, this.props.unspreadMainUI));
+            return h("div", null, this.props.unspreadMainUI);
         }
         this.props.spreadMainUI.props.info = this.props.config.datas[this.state.selectedIndex];
         this.props.spreadMainUI.props.closeList = this.closeList;
-        this.props.optionsUI.forEach(function (v, index) { v.props.onChoose = function () { _this.onChoose(index); }; });
+        this.props.optionsUI.forEach(function (v, index) {
+            v.props.onChoose = function () {
+                _this.onChoose(index);
+            };
+        });
         var _optionsUI = this.props.optionsUI.filter(function (v) { return v.props.index != _this.state.selectedIndex; });
         if (_optionsUI.length > 0)
             _optionsUI[_optionsUI.length - 1].props['isLast'] = true;

package/src/components/react/app/frameAnimation/FrameAnimation.d.ts

@@ -1,10 +1,13 @@
 import { h } from 'preact';
 export declare let FrameAnimation: (props: {
+    rootId?: string | undefined;
+    rootClassName?: string | undefined;
     totalTime: number;
-    width: number;
-    height: number;
+    width?: string | undefined;
+    height?: string | undefined;
     srcArr: string[];
     onShow?: Function | undefined;
+    onFinish?: Function | undefined;
     preloadCount?: number | undefined;
     loop?: boolean | undefined;
     showLastFrame?: boolean | undefined;

package/src/components/react/app/frameAnimation/FrameAnimation.js

@@ -1,13 +1,12 @@
 import { useEffect, useRef } from 'preact/hooks';
 import { createRef, h } from 'preact';
 export var FrameAnimation = function (props) {
+    var _a, _b;
     props.preloadCount = Math.max(props.preloadCount || 5, 5);
-    props.loop = props.loop || false;
-    props.showLastFrame = props.showLastFrame || true;
-    var totalTime = props.totalTime, width = props.width, height = props.height, srcArr = props.srcArr, onShow = props.onShow, preloadCount = props.preloadCount, loop = props.loop;
+    var totalTime = props.totalTime, width = props.width, height = props.height, srcArr = props.srcArr, onShow = props.onShow, preloadCount = props.preloadCount, loop = (_a = props.loop, _a === void 0 ? false : _a), onFinish = props.onFinish, showLastFrame = (_b = props.showLastFrame, _b === void 0 ? true : _b), rootId = props.rootId, rootClassName = props.rootClassName;
     var cRefArr = useRef(Array.from({ length: preloadCount }, function () { return createRef(); })).current;
     var imgEleArr = useRef(Array.from({ length: preloadCount }, function (v, i) {
-        return (h("img", { ref: cRefArr[i], src: srcArr[i], style: { position: 'absolute', visibility: 'hidden', width: width + 'px', height: height + 'px' } }));
+        return h("img", { ref: cRefArr[i], src: srcArr[i], style: { position: 'absolute', visibility: 'hidden', width: width, height: height } });
     })).current;
     useEffect(function () {
         var startTime = Date.now();
@@ -27,8 +26,9 @@ export var FrameAnimation = function (props) {
         var nowArrIndex = nowFrame % preloadCount;
         var showedArrIndex = showedFrame % preloadCount;
         if (nowFrame >= srcArr.length) {
+            onFinish && onFinish();
             if (!loop) {
-                if (!props.showLastFrame) {
+                if (!showLastFrame) {
                     cRefArr.forEach(function (ref, i) {
                         ref.current.style.visibility = 'hidden';
                     });
@@ -59,5 +59,5 @@ export var FrameAnimation = function (props) {
             nextFrame(startTime, v, showedFrame);
         });
     };
-    return h("div", { style: { width: width + 'px', height: height + 'px' } }, imgEleArr);
+    return (h("div", { style: { width: width, height: height }, id: rootId, className: rootClassName }, imgEleArr));
 };

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

@@ -1,5 +1,13 @@
+import { h } from 'preact';
 export declare function ImgPreLoader(): void;
 export declare namespace ImgPreLoader {
     var preLoadUrl: (url: string) => Promise<void>;
-    var getPreLoadUrl: (url: string) => Promise<string>;
 }
+export declare let PreLoadPic: (props: {
+    url: string;
+    className: string;
+    onClick: any;
+    usePreload: boolean;
+    width?: string | undefined;
+    height?: string | undefined;
+}) => h.JSX.Element;

package/src/components/tools/ImgPreLoader.js

@@ -34,7 +34,9 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-import { utils } from "./utils";
+import { h } from 'preact';
+import { useState, useEffect } from 'preact/hooks';
+import { utils } from './utils';
 export function ImgPreLoader() { }
 /**
  * 预加载一个png，jpg的url
@@ -81,7 +83,7 @@ ImgPreLoader.preLoadUrl = function (url) { return __awaiter(void 0, void 0, void
 /**
  * 判断一个url是否已经预加载过，如果预加载过，返回base64，否则返回原url
  */
-ImgPreLoader.getPreLoadUrl = function (url) { return __awaiter(void 0, void 0, void 0, function () {
+var getPreLoadUrl = function (url) { return __awaiter(void 0, void 0, void 0, function () {
     var res;
     return __generator(this, function (_a) {
         switch (_a.label) {
@@ -99,3 +101,26 @@ ImgPreLoader.getPreLoadUrl = function (url) { return __awaiter(void 0, void 0, v
         }
     });
 }); };
+export var PreLoadPic = function (props) {
+    var _a, _b;
+    var url = props.url, className = props.className, onClick = props.onClick, usePreload = props.usePreload, width = props.width, height = props.height;
+    var _url = (_a = useState(url), _a[0]), setUrl = _a[1];
+    var loaded = (_b = useState(false), _b[0]), setLoaded = _b[1];
+    console.log('PicComp---', url, usePreload);
+    useEffect(function () {
+        if (usePreload) {
+            getPreLoadUrl(url).then(function (__url) {
+                if (!loaded) {
+                    console.log('PicComp--替换加载的url为base64', url);
+                    setUrl(__url);
+                }
+                else {
+                    console.log('PicComp--onLoaded,不替换', url);
+                }
+            });
+        }
+    }, []);
+    return (h("img", { src: _url, style: { width: width, height: height }, className: className, onClick: onClick, onLoad: function () {
+            setLoaded(true);
+        } }));
+};

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

@@ -1,3 +1,2 @@
 #!/usr/bin/env node
-export function preProcessPath(texturePath: any): any;
-export function createAutoGen(): void;
+export function makeImages(_inputPath: any, _outputPath: any): void;

package/src/components/tools/makeImage.js

@@ -8,37 +8,15 @@
 */
 var fs = require('fs');
 var path = require('path');
-var texturePath = 'src/tempAssets/asset/textures';
-var targetPath = 'src/tempAssets/autoGen/';
-module.exports.preProcessPath = function (texturePath) {
-    var _path = texturePath;
-    if (isStartWithLetter(_path)) {
-        _path = './' + _path;
-    }
-    else if (_path.startsWith('../')) {
-        _path = './' + _path;
-    }
-    if (_path.endsWith('/'))
-        _path = _path.substring(0, _path.length - 1);
-    return _path;
-};
-function isStartWithLetter(path) {
-    if (path.length == 0)
-        return false;
-    var firstChar = path.charAt(0);
-    if ((firstChar >= 'a' && firstChar <= 'z') || (firstChar >= 'A' && firstChar <= 'Z'))
-        return true;
-    return false;
-}
-module.exports.createAutoGen = function () {
+var inputPath = '';
+var outputPath = '';
+module.exports.makeImages = function (_inputPath, _outputPath) {
     var imgUrls = [];
-    var includesUrls = [];
-    collectImageUrls(texturePath, imgUrls, true);
-    collectIncludes(FCsPath, includesUrls, true);
+    inputPath = _inputPath;
+    outputPath = _outputPath;
+    collectImageUrls(inputPath, imgUrls, true);
     imgUrls.sort();
-    includesUrls.sort();
-    generateImage(texturePath, imgUrls);
-    generateInclude(includesUrls);
+    generateImage(inputPath, imgUrls);
 };
 function isDirectoryExist(directory) {
     var stat;
@@ -50,51 +28,31 @@ function isDirectoryExist(directory) {
     }
     return stat.isDirectory();
 }
-function collectImageUrls(texturePath, imgUrls, isFirst) {
-    var files = fs.readdirSync(texturePath);
+function collectImageUrls(inputPath, imgUrls, isFirst) {
+    var files = fs.readdirSync(inputPath);
     for (var i = 0; i < files.length; i++) {
-        var current = path.join(texturePath, files[i]).replaceAll('\\', '/');
+        var current = path.join(inputPath, files[i]).replaceAll('\\', '/');
         if (isDirectoryExist(current)) {
             // if it's a directory ,recursive
             collectImageUrls(current, imgUrls, false);
         }
         else {
-            if (!isAnImg(current))
-                continue;
-            imgUrls.push(current);
+            if (current.endsWith('.png') || current.endsWith('.jpg') || current.endsWith('.jpeg') || current.endsWith('.gif')) {
+                imgUrls.push(current);
+            }
         }
     }
 }
-function collectIncludes(FCsPath, includesUrls, isFirst) {
-    var files = fs.readdirSync(FCsPath);
-    for (var i = 0; i < files.length; i++) {
-        var current = path.join(FCsPath, files[i]).replaceAll('\\', '/');
-        if (isDirectoryExist(current)) {
-            // if it's a directory ,recursive
-            collectIncludes(current, includesUrls, false);
-        }
-        else {
-            if (!current.endsWith('.tsx'))
-                continue;
-            includesUrls.push(current);
-        }
-    }
-}
-function isAnImg(imgUrl) {
-    if (imgUrl.endsWith('.png') || imgUrl.endsWith('.jpg') || imgUrl.endsWith('.jpeg') || imgUrl.endsWith('.gif'))
-        return true;
-    return false;
-}
-function generateImage(texturePath, imgUrls, keyMap) {
-    var out = targetPath + 'Images.ts';
+function generateImage(inputPath, imgUrls, keyMap) {
+    var out = path.resolve(outputPath, 'Images.ts');
     fs.writeFileSync(out, '');
     // write import
     for (var i = 0; i < imgUrls.length; i++) {
         var current = imgUrls[i];
-        var imgKey = generateImgKey(texturePath, current);
+        var imgKey = generateImgKey(inputPath, current);
         if (current.startsWith('../'))
             current = './' + current;
-        // console.warn(texturePath, current, imgKey)
+        // console.warn(inputPath, current, imgKey)
         fs.writeFileSync(out, 'import '.concat(imgKey, ' from "').concat(current, '";\n'), { flag: 'a+' });
     }
     fs.writeFileSync(out, '\n\n', { flag: 'a+' });
@@ -102,15 +60,15 @@ function generateImage(texturePath, imgUrls, keyMap) {
     fs.writeFileSync(out, '\nexport const Images = {\n', { flag: 'a+' });
     for (var i = 0; i < imgUrls.length; i++) {
         var current = imgUrls[i];
-        var imgKey = generateImgKey(texturePath, current);
+        var imgKey = generateImgKey(inputPath, current);
         var imgNewname = keyMap == null || keyMap.get(imgKey) == undefined ? imgKey : keyMap.get(imgKey);
         fs.writeFileSync(out, '  '.concat(imgNewname, ': ').concat(imgKey, ',\n'), { flag: 'a+' });
     }
     fs.writeFileSync(out, '}\n\n', { flag: 'a+' });
     console.log(keyMap == null ? 'generate' : 'update', ' Images.ts successfully!');
 }
-function generateImgKey(texturePath, imgUrl) {
-    var key = imgUrl.substring(texturePath.length);
+function generateImgKey(inputPath, imgUrl) {
+    var key = imgUrl.substring(inputPath.length);
     key = key.replace(/\//g, '_');
     if (key.startsWith('_'))
         key = key.substring(1);
@@ -118,12 +76,3 @@ function generateImgKey(texturePath, imgUrl) {
     key = key.substring(0, key.length - extname.length);
     return key;
 }
-function generateInclude(fileUrls) {
-    var out = targetPath + 'templatesImport.ts';
-    fs.writeFileSync(out, '');
-    for (var i = 0; i < fileUrls.length; i++) {
-        var current = fileUrls[i];
-        var writestr = 'import '.concat("'" + current.substring(0, current.length - 4), "';\n");
-        fs.writeFileSync(out, writestr, { flag: 'a+' });
-    }
-}