pixuireactcomponents 1.0.2 → 1.0.5

package/index.d.ts

@@ -1,5 +1,9 @@
-import { Tab } from "./ui/components/tab/Tab";
-import { Tabs } from "./ui/components/tab/Tabs";
-
-export type PTab = Tab;
-export type PTabs = Tabs;
+export { Tabs } from "./ui/components/tab/Tabs";
+export { Tab } from "./ui/components/tab/Tab";
+export { Progress } from "./ui/components/progress/Progress";
+export { DropdownOptionUI } from "./ui/components/dropdown/DropdownOptionUI";
+export { DropdownSpreadMainUI } from "./ui/components/dropdown/DropdownSpreadMainUI";
+export { DropdownUnspreadMainUI } from "./ui/components/dropdown/DropdownUnspreadMainUI";
+export { Logger } from "./tools/Logger";
+export { EventDispatcherJs } from "./tools/EventDispatcherJs";
+export { Dropdown, DropdownConfig } from "./ui/components/dropdown/Dropdown";

package/index.js

@@ -1,2 +1,10 @@
-export {Tab} from "./ui/components/tab/Tab"
-export {Tabs} from "./ui/components/tab/Tabs"
+export { Tabs } from "./ui/components/tab/Tabs";
+export { Tab } from "./ui/components/tab/Tab";
+export { Progress } from "./ui/components/progress/Progress";
+export { Dropdown } from "./ui/components/dropdown/Dropdown";
+export { DropdownOptionUI } from "./ui/components/dropdown/DropdownOptionUI";
+export { DropdownSpreadMainUI } from "./ui/components/dropdown/DropdownSpreadMainUI";
+export { DropdownUnspreadMainUI } from "./ui/components/dropdown/DropdownUnspreadMainUI";
+export { Logger } from "./tools/Logger";
+export { EventDispatcherJs } from "./tools/EventDispatcherJs";
+console.log("Hello, 欢迎使用PixUI React Components");

package/package.json

@@ -1,11 +1,11 @@
 {
-  "name": "pixuireactcomponents",
-  "version": "1.0.2",
-  "description": "pixui react components",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "author": "hardenzheng",
-  "license": "ISC"
+    "name": "pixuireactcomponents",
+    "version": "1.0.5",
+    "description": "pixui react components",
+    "main": "index.js",
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "author": "hardenzheng",
+    "license": "ISC"
 }

package/tools/EventDispatcherJs.d.ts

@@ -0,0 +1,10 @@
+declare class EventDispatcherCls {
+    listeners: {};
+    AddEventListener(eventName: string, listener: any, ...args: any[]): void;
+    HasEventListener(eventName: string): boolean;
+    RemoveEventListener(eventName: string, listener: any): void;
+    RemoveEventAllListener(eventName: string): void;
+    DispatchEvent(eventName: string, ...args: any[]): void;
+}
+export declare let EventDispatcherJs: Readonly<EventDispatcherCls>;
+export {};

package/tools/EventDispatcherJs.js

@@ -0,0 +1,71 @@
+var EventDispatcherCls = /** @class */ (function () {
+    function EventDispatcherCls() {
+        this.listeners = {};
+    }
+    EventDispatcherCls.prototype.AddEventListener = function (eventName, listener) {
+        var args = [];
+        for (var _i = 2; _i < arguments.length; _i++) {
+            args[_i - 2] = arguments[_i];
+        }
+        if (listener == undefined) {
+            console.warn("listener为空, eventName: " + eventName);
+            return;
+        }
+        var listeners = this.listeners;
+        if (listeners[eventName] == undefined) {
+            listeners[eventName] = [];
+        }
+        var eventList = listeners[eventName];
+        eventList.forEach(function (v) {
+            if (v.eventName == eventName && v.listener == listener) {
+                console.warn("重复添加的事件监听, eventName: " + eventName);
+                return;
+            }
+        });
+        eventList.push({ "eventName": eventName, "listener": listener, "args": args, });
+    };
+    EventDispatcherCls.prototype.HasEventListener = function (eventName) {
+        if (this.listeners[eventName] == undefined || this.listeners[eventName].length == 0) {
+            return false;
+        }
+        return true;
+    };
+    EventDispatcherCls.prototype.RemoveEventListener = function (eventName, listener) {
+        if (this.HasEventListener(eventName) == false) {
+            return;
+        }
+        var eventList = this.listeners[eventName];
+        for (var i = eventList.length - 1; i >= 0; --i) {
+            var event_1 = eventList[i];
+            if (event_1.eventName == eventName && event_1.listener == listener) {
+                eventList.splice(i, 1);
+            }
+        }
+        if (eventList.length == 0) {
+            this.listeners[eventName] = null;
+        }
+    };
+    EventDispatcherCls.prototype.RemoveEventAllListener = function (eventName) {
+        if (this.HasEventListener(eventName)) {
+            this.listeners[eventName] = null;
+        }
+    };
+    EventDispatcherCls.prototype.DispatchEvent = function (eventName) {
+        var args = [];
+        for (var _i = 1; _i < arguments.length; _i++) {
+            args[_i - 1] = arguments[_i];
+        }
+        if (eventName == undefined || this.HasEventListener(eventName) == false) {
+            return;
+        }
+        var eventList = this.listeners[eventName].slice(0);
+        for (var i = 0; i < eventList.length; ++i) {
+            var obj = eventList[i];
+            var listener = obj.listener;
+            // listener.apply(this, obj.args.concat(args));
+            listener.apply(void 0, obj.args.concat(args));
+        }
+    };
+    return EventDispatcherCls;
+}());
+export var EventDispatcherJs = Object.freeze(new EventDispatcherCls());

package/tools/Logger.d.ts

@@ -0,0 +1,6 @@
+export declare function Logger(): void;
+export declare namespace Logger {
+    var ObjectPrinter: (object: any, name: any) => void;
+    var ObjectPrinter2: (object: any, name: any) => void;
+    var HierarchyPrinter: (object: any, name: any) => void;
+}

package/tools/Logger.js

@@ -0,0 +1,133 @@
+export function Logger() {
+}
+/**
+ * printer1: 完整打印，用4个空格缩进
+ */
+// 移除最后一个(key, value)后面的 ','
+var regex = new RegExp("(,)(\n$)");
+Logger.ObjectPrinter = function (object, name) {
+    var strResult = "";
+    strResult += name + " = ";
+    strResult += getTreeStyleStr(object, 1);
+    strResult = strResult.replace(regex, "$2");
+    console.warn(strResult);
+};
+function getTreeStyleStr(object, level) {
+    var isArray = object instanceof Array;
+    var str = isArray ? "[\n" : "{\n";
+    for (var key in object) {
+        var value = object[key];
+        var curSeparation = getSeparation1(level);
+        if (typeof (value) != 'object') {
+            str += curSeparation + key + " : " + value + ",\n";
+        }
+        else {
+            str += curSeparation + key + " : " + getTreeStyleStr(value, level + 1);
+        }
+    }
+    str = str.replace(regex, "$2");
+    str += getSeparation1(level - 1) + (isArray ? "],\n" : "},\n");
+    return str;
+}
+var SEPARARION1 = "    ";
+function getSeparation1(level) {
+    var totalSeparation = "";
+    while (level > 0) {
+        totalSeparation += SEPARARION1;
+        level--;
+    }
+    return totalSeparation;
+}
+/**
+    printer2: 完整打印，用\t
+ *
+ */
+var regexForLine = new RegExp(",$");
+Logger.ObjectPrinter2 = function (object, name) {
+    var lines = [];
+    lines.push("".concat(name, " = "));
+    getTreeStyleLines(object, 1, lines);
+    console.warn(lines.join("\n"));
+};
+function getTreeStyleLines(object, level, lines) {
+    var isArray = object instanceof Array;
+    var linePostFix = isArray ? "[" : "{";
+    var lastLine = lines.pop();
+    lines.push(lastLine + linePostFix);
+    for (var key in object) {
+        var value = object[key];
+        var curSeparation = getSeparation2(level);
+        if (typeof (value) != 'object') {
+            var curLine = curSeparation + key + " : " + value + ",";
+            lines.push(curLine);
+        }
+        else {
+            var curLinePreFix = curSeparation + key + " : ";
+            lines.push(curLinePreFix);
+            getTreeStyleLines(value, level + 1, lines);
+        }
+    }
+    lastLine = lines.pop();
+    if (lastLine)
+        lines.push(lastLine.replace(regexForLine, "")); // 一定执行
+    lines.push(getSeparation2(level - 1) + (isArray ? "]" : "}"));
+}
+var SEPARARION2 = "\t";
+function getSeparation2(level) {
+    var totalSeparation = "";
+    while (level > 0) {
+        totalSeparation += SEPARARION2;
+        level--;
+    }
+    return totalSeparation;
+}
+/**
+    printer3: 打印关键层级信息，如果是数组，只打印第一个，后续用 ...len 代替（PS: 假定数组中每个元素都是一样的格式）
+ *
+ */
+Logger.HierarchyPrinter = function (object, name) {
+    var lines = [];
+    lines.push("".concat(name, " = "));
+    getTreeStyleHierarchyLines(object, 1, lines);
+    console.warn(lines.join("\n"));
+};
+function getTreeStyleHierarchyLines(object, level, lines) {
+    var isArray = object instanceof Array;
+    var linePostFix = isArray ? "[" : "{";
+    var lastLine = lines.pop();
+    lines.push(lastLine + linePostFix);
+    if (isArray) {
+        var key = 0;
+        var value = object[key];
+        var curSeparation = getSeparation2(level);
+        if (typeof (value) != 'object') {
+            var curLine = curSeparation + key + " : " + value + ",";
+            lines.push(curLine);
+        }
+        else {
+            var curLinePreFix = curSeparation + key + " : ";
+            lines.push(curLinePreFix);
+            getTreeStyleHierarchyLines(value, level + 1, lines);
+        }
+        lines.push(curSeparation + "...len=" + object.length);
+    }
+    else {
+        for (var key in object) {
+            var value = object[key];
+            var curSeparation = getSeparation2(level);
+            if (typeof (value) != 'object') {
+                var curLine = curSeparation + key + " : " + value + ",";
+                lines.push(curLine);
+            }
+            else {
+                var curLinePreFix = curSeparation + key + " : ";
+                lines.push(curLinePreFix);
+                getTreeStyleHierarchyLines(value, level + 1, lines);
+            }
+        }
+        lastLine = lines.pop();
+        if (lastLine)
+            lines.push(lastLine.replace(regexForLine, "")); // 一定执行
+    }
+    lines.push(getSeparation2(level - 1) + (isArray ? "]" : "}"));
+}

package/tools/tools.md

@@ -0,0 +1,22 @@
+# 工具类组件
+### 1. EventDispatcherJs.tsx
+React里可供使用的事件派发器，类似Pandora Lua里的EventDispatcher。
+
+用法主要就3个接口：
+
+* AddEventListener： 添加监听事件
+* DispatchEvent： 分发监听事件
+* RemoveEventListener： 移除监听事件
+
+### 2. Logger.tsx
+React里可供使用的对象（数组）打印器。
+
+直接console.log一个对象时，在游戏引擎中，无法打印出这个对象里的东西。而实际开发时，前后端联调时，需要方便的确认各种对象里的细节。
+
+ 用法一共3个接口，打印粒度有差异。
+
+* ObjectPrinter: 打印一个对象的内部细节，效果如下
+	![](./img/logger.png)
+	
+* ObjectPrinter2：比上一个打印的信息更多
+* HierarchyPrinter： 采样打印，对数组进行采样，能打印最多的信息

package/ui/components/dropdown/Dropdown.d.ts

@@ -0,0 +1,30 @@
+import { Component, CSSProperties, h } from "preact";
+import { DropdownOptionUI } from "./DropdownOptionUI";
+import { DropdownSpreadMainUI } from "./DropdownSpreadMainUI";
+import { DropdownUnspreadMainUI } from "./DropdownUnspreadMainUI";
+export interface DropdownConfig<T> {
+    spreadStyle: CSSProperties;
+    datas: T[];
+}
+export declare class Dropdown<T, DDUnspreadMainUI extends DropdownUnspreadMainUI<T>, DDSpreadMainUI extends DropdownSpreadMainUI<T>, DDOptionUI extends DropdownOptionUI<T>> extends Component<{
+    config: DropdownConfig<T>;
+    onChoose: Function;
+    defaultIndex: number | null;
+    unspreadMainUI: DDUnspreadMainUI;
+    spreadMainUI: DDSpreadMainUI;
+    optionsUI: DDOptionUI[];
+}, {
+    selectedIndex: number;
+    isSpread: boolean;
+}> {
+    constructor(props: any);
+    componentWillUnmount(): void;
+    addNetEvents: () => void;
+    removeNetEvents: () => void;
+    addLogicEvents: () => void;
+    removeLogicEvents: () => void;
+    openList: () => void;
+    closeList: () => void;
+    onChoose: (index: number) => void;
+    render(): h.JSX.Element;
+}

package/ui/components/dropdown/Dropdown.js

@@ -0,0 +1,82 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import { Component, h } from "preact";
+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
+            });
+        };
+        _this.closeList = function () {
+            // console.warn("close dropdown====")
+            _this.setState({
+                isSpread: false
+            });
+        };
+        _this.onChoose = function (index) {
+            _this.props.onChoose(index);
+            // console.warn('dropdown-=----', index)
+            _this.setState({
+                selectedIndex: index,
+                isSpread: false
+            });
+        };
+        _this.addNetEvents();
+        _this.addLogicEvents();
+        var initIndex = _this.props.defaultIndex == null ? 0 : _this.props.defaultIndex;
+        _this.state = {
+            selectedIndex: initIndex,
+            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));
+        }
+        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); }; });
+        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;
+        return (h("div", null,
+            h("div", { style: this.props.config.spreadStyle },
+                this.props.spreadMainUI,
+                _optionsUI)));
+    };
+    return Dropdown;
+}(Component));
+export { Dropdown };

package/ui/components/dropdown/DropdownOptionUI.d.ts

@@ -0,0 +1,10 @@
+import { Component } from "preact";
+/**
+ * dropdown 打开时options列表的单个Item UI
+ */
+export declare abstract class DropdownOptionUI<T> extends Component<{
+    info: T;
+    onChoose: Function;
+    index: number;
+}, any> {
+}

package/ui/components/dropdown/DropdownOptionUI.js

@@ -0,0 +1,27 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import { Component } from "preact";
+/**
+ * dropdown 打开时options列表的单个Item UI
+ */
+var DropdownOptionUI = /** @class */ (function (_super) {
+    __extends(DropdownOptionUI, _super);
+    function DropdownOptionUI() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return DropdownOptionUI;
+}(Component));
+export { DropdownOptionUI };

package/ui/components/dropdown/DropdownSpreadMainUI.d.ts

@@ -0,0 +1,9 @@
+import { Component } from "preact";
+/**
+ * dropdown 打开时选中框的UI
+ */
+export declare abstract class DropdownSpreadMainUI<T> extends Component<{
+    info: T;
+    closeList: Function;
+}, any> {
+}

package/ui/components/dropdown/DropdownSpreadMainUI.js

@@ -0,0 +1,27 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import { Component } from "preact";
+/**
+ * dropdown 打开时选中框的UI
+ */
+var DropdownSpreadMainUI = /** @class */ (function (_super) {
+    __extends(DropdownSpreadMainUI, _super);
+    function DropdownSpreadMainUI() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return DropdownSpreadMainUI;
+}(Component));
+export { DropdownSpreadMainUI };

package/ui/components/dropdown/DropdownUnspreadMainUI.d.ts

@@ -0,0 +1,9 @@
+import { Component } from "preact";
+/**
+ * dropdown 未打开时选中框的UI
+ */
+export declare abstract class DropdownUnspreadMainUI<T> extends Component<{
+    info: T;
+    openList: Function;
+}, any> {
+}

package/ui/components/dropdown/DropdownUnspreadMainUI.js

@@ -0,0 +1,27 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import { Component } from "preact";
+/**
+ * dropdown 未打开时选中框的UI
+ */
+var DropdownUnspreadMainUI = /** @class */ (function (_super) {
+    __extends(DropdownUnspreadMainUI, _super);
+    function DropdownUnspreadMainUI() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return DropdownUnspreadMainUI;
+}(Component));
+export { DropdownUnspreadMainUI };

package/ui/components/progress/Progress.d.ts

@@ -0,0 +1,34 @@
+import { Component, h } from "preact";
+export interface ProgressProps {
+    percent: number;
+    wrapperWidth: number;
+    wrapperHeight: number;
+    height: number;
+    dotWidth: number;
+    dotHeight: number;
+    dotWrapperWidth: number;
+    dotWrapperHeight: number;
+    outerBg: string;
+    innerBg: string;
+    dotBg: string;
+    onDragStart: Function | null;
+    onDrag: Function | null;
+    onDragEnd: Function | null;
+}
+export declare class Progress extends Component<ProgressProps, {
+    percent: number;
+}> {
+    private refWrapper;
+    constructor(props: any);
+    componentDidMount(): void;
+    componentWillReceiveProps(nextProps: any): void;
+    onDragStart: (event: any) => void;
+    onDrag: (event: any) => void;
+    onDragEnd: (event: any) => void;
+    computeWrapperStyle: () => void;
+    computeOuterStyle: () => void;
+    computeInnerStyle: () => void;
+    computeDotWrapperStyle: () => void;
+    computeDotStyle: () => void;
+    render(): h.JSX.Element;
+}