pixuireactcomponents 1.1.19 → 1.1.21

package/ui/components/slapface/Slapface.js

@@ -1,198 +1,227 @@
-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 __());
-    };
-})();
-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, Component } from "preact";
-// @ts-ignore
-import SlapfaceLess from "./less/Slapface.less";
-//默认配置项
-var settingsitems = {
-    ani_switch_type: 1,
-    is_mask: false
-};
-//默认无跳转按钮
-var jumpButton = {
-    pic_changtai: '',
-    pic_yaxia: '',
-    pic_xuanfu: ''
-};
-var node = /** @class */ (function () {
-    function node(par_index) {
-        if (par_index == undefined)
-            this.index = -1;
-        else
-            this.index = par_index;
-        this.next = null;
-    }
-    return node;
-}());
-var nodeList = /** @class */ (function () {
-    function nodeList(groupArr) {
-        this.head = new node();
-        var cur = this.head;
-        this.size = 0;
-        if (groupArr) {
-            for (var i = 0; i < groupArr.length; i++) {
-                cur.next = new node(i);
-                cur = cur.next;
-            }
-            this.groupArr = groupArr;
-            this.size += groupArr.length;
-        }
-        this.tail = cur;
-    }
-    nodeList.prototype.Add = function (index, next) {
-        this.tail.next = new node(index);
-        this.tail = this.tail.next;
-        ++this.size;
-        return this.tail;
-    };
-    nodeList.prototype.DeleteNext = function (curParam) {
-        if (curParam.next == null)
-            return;
-        else {
-            curParam.next = curParam.next.next;
-        }
-        --this.size;
-    };
-    nodeList.prototype.CheckReady = function () {
-        var cur = this.head;
-        while (cur.next != null) {
-            if (!this.groupArr[cur.next.index].isLoadDone) {
-                cur = cur.next;
-            }
-            else {
-                var retIndex = cur.next.index;
-                this.DeleteNext(cur);
-                return retIndex;
-            }
-        }
-        return -1;
-    };
-    return nodeList;
-}());
-var Slapface = /** @class */ (function (_super) {
-    __extends(Slapface, _super);
-    function Slapface(props) {
-        var _this = _super.call(this, props) || this;
-        _this.LoadGroup = _this.props.LoadGroup;
-        _this.jumpButton = _this.props.jumpButton ? _this.props.jumpButton : jumpButton;
-        _this.settingsitems = _this.props.settingsitems ? _this.props.settingsitems : settingsitems;
-        _this.btn_closeButton = _this.props.btn_closeButton;
-        return _this;
-    }
-    Slapface.prototype.render = function () {
-        var slapfaceinfo = {
-            LoadGroup: this.LoadGroup,
-            jumpButton: this.jumpButton,
-            settingsitems: this.settingsitems,
-            btn_closeButton: this.btn_closeButton
-        };
-        return (h("div", { className: SlapfaceLess.maininterface },
-            h("div", { style: { flexDirection: 'row', flexWrap: 'nowrap' } }),
-            h("div", { style: { width: '100%', height: '100%', backgroundColor: "rgba(0,0,0,0.5)" } }, h(Group, __assign({}, slapfaceinfo)))));
-    };
-    return Slapface;
-}(Component));
-export { Slapface };
-var Group = /** @class */ (function (_super) {
-    __extends(Group, _super);
-    function Group(props) {
-        var _this = _super.call(this, props) || this;
-        var emptyGroup = [
-            {
-                groupId: -2,
-                isLoadDone: true,
-                picture: "",
-                width: 0,
-                height: 0
-            }
-        ];
-        _this.groupArr = emptyGroup.concat(_this.props.LoadGroup());
-        _this.groupIndexList = new nodeList(_this.groupArr);
-        _this.state = {
-            curIndex: _this.groupIndexList.CheckReady()
-        };
-        return _this;
-    }
-    Group.prototype.componentDidMount = function () {
-        var _this = this;
-        if (this.picBack.style.visibility == 'hidden') {
-            setTimeout(function () {
-                _this.picBack.style.visibility = 'visible';
-                _this.closeClick();
-            }, 600);
-        }
-    };
-    Group.prototype.closeClick = function (e) {
-        e === null || e === void 0 ? void 0 : e.stopPropagation();
-        var nextIndex = this.groupIndexList.CheckReady();
-        if (nextIndex != -1) {
-            if (this.props.settingsitems.ani_switch_type == 2) {
-                this.picBack.classList.add(SlapfaceLess.groupBack);
-            }
-            this.setState({ curIndex: nextIndex });
-        }
-        else {
-            this.picBack.style.visibility = "hidden";
-            this.forceUpdate();
-        }
-    };
-    Group.prototype.render = function () {
-        var _this = this;
-        if (this.state.curIndex == -1) {
-            this.setState({ curIndex: this.groupIndexList.CheckReady() });
-        }
-        return (h("div", { ref: function (div) { _this.picBack = div; }, style: { width: '100%', height: '100%', alignItems: 'center', justifyContent: 'center', position: 'absolute', visibility: 'hidden' }, onAnimationEnd: function () { _this.picBack.classList.remove(SlapfaceLess.groupBack); } },
-            h("div", { onClick: function () { if (_this.props.settingsitems.is_mask == false)
-                    return; _this.closeClick(); }, style: { position: "absolute", width: "100%", height: "100%" } }),
-            h("div", { style: { backgroundImage: "url(".concat(this.groupArr[this.state.curIndex].picture, ")"), width: this.groupArr[this.state.curIndex].width, height: this.groupArr[this.state.curIndex].height } },
-                h(CloseButton, { btn_closeButton: this.props.btn_closeButton, onClick: function (e) { _this.closeClick(e); } }),
-                h(JumpButton, { jumpButton: this.props.jumpButton }))));
-    };
-    return Group;
-}(Component));
-var CloseButton = /** @class */ (function (_super) {
-    __extends(CloseButton, _super);
-    function CloseButton() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    CloseButton.prototype.render = function () {
-        return (h("button", { className: SlapfaceLess.closeButton, style: { backgroundImage: "url(".concat(this.props.btn_closeButton, ")") }, onClick: this.props.onClick }));
-    };
-    return CloseButton;
-}(Component));
-var JumpButton = /** @class */ (function (_super) {
-    __extends(JumpButton, _super);
-    function JumpButton() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    JumpButton.prototype.render = function () {
-        var _this = this;
-        return (h("div", { className: SlapfaceLess.jumpButton, onMouseDown: function () { _this.jumpbtnImg.src = _this.props.jumpButton.pic_yaxia; }, onMouseUp: function () { _this.jumpbtnImg.src = _this.props.jumpButton.pic_changtai; }, onMouseOver: function () { _this.jumpbtnImg.src = _this.props.jumpButton.pic_xuanfu; }, onMouseOut: function () { _this.jumpbtnImg.src = _this.props.jumpButton.pic_changtai; } },
-            h("img", { ref: function (img) { _this.jumpbtnImg = img; }, src: this.props.jumpButton.pic_changtai })));
-    };
-    return JumpButton;
-}(Component));
+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 __());
+    };
+})();
+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, Component } from "preact";
+// @ts-ignore
+import SlapfaceLess from "./less/Slapface.less";
+// @ts-ignore
+import btn_close from "src/pixUIReactComponents/ui/sample/asset/btn_close.png";
+//默认配置项
+var settingsitems = {
+    ani_switch_type: 1,
+    is_mask: false
+};
+//默认无跳转按钮
+var jumpButton = {
+    pic_changtai: '',
+    pic_yaxia: '',
+    pic_xuanfu: ''
+};
+var node = /** @class */ (function () {
+    function node(par_index) {
+        if (par_index == undefined)
+            this.index = -1;
+        else
+            this.index = par_index;
+        this.next = null;
+    }
+    return node;
+}());
+var nodeList = /** @class */ (function () {
+    function nodeList(groupArr) {
+        this.head = new node();
+        var cur = this.head;
+        this.size = 0;
+        if (groupArr) {
+            for (var i = 0; i < groupArr.length; i++) {
+                cur.next = new node(i);
+                cur = cur.next;
+            }
+            this.groupArr = groupArr;
+            this.size += groupArr.length;
+        }
+        this.tail = cur;
+    }
+    nodeList.prototype.Add = function (index, next) {
+        this.tail.next = new node(index);
+        this.tail = this.tail.next;
+        ++this.size;
+        return this.tail;
+    };
+    nodeList.prototype.DeleteNext = function (curParam) {
+        if (curParam.next == null)
+            return;
+        else {
+            curParam.next = curParam.next.next;
+        }
+        --this.size;
+    };
+    nodeList.prototype.CheckReady = function () {
+        var cur = this.head;
+        while (cur.next != null) {
+            if (this.groupArr[cur.next.index].isLoadDone) {
+                cur = cur.next;
+            }
+            else {
+                var retIndex = cur.next.index;
+                this.DeleteNext(cur);
+                return retIndex;
+            }
+        }
+        return -1;
+    };
+    return nodeList;
+}());
+var Slapface = /** @class */ (function (_super) {
+    __extends(Slapface, _super);
+    function Slapface(props) {
+        var _this = _super.call(this, props) || this;
+        _this.closeAct = function () {
+            _this.actDisplay = "none";
+            _this.forceUpdate();
+        };
+        _this.LoadGroup = _this.props.LoadGroup;
+        _this.jumpButton = _this.props.jumpButton ? _this.props.jumpButton : jumpButton;
+        _this.settingsitems = _this.props.settingsitems ? _this.props.settingsitems : settingsitems;
+        _this.btn_closeButton = _this.props.btn_closeButton ? _this.props.btn_closeButton : btn_close;
+        _this.pic_loading = _this.props.pic_loading;
+        _this.actDisplay = "flex";
+        return _this;
+    }
+    Slapface.prototype.render = function () {
+        var slapfaceinfo = {
+            LoadGroup: this.LoadGroup,
+            jumpButton: this.jumpButton,
+            settingsitems: this.settingsitems,
+            btn_closeButton: this.btn_closeButton,
+            pic_loading: this.pic_loading
+        };
+        return (h("div", { className: SlapfaceLess.maininterface, style: { display: this.actDisplay } },
+            h("div", { style: { flexDirection: 'row', flexWrap: 'nowrap' } }),
+            h("div", { style: { width: '100%', height: '100%', backgroundColor: "rgba(0,0,0,0.5)" } }, h(Group, __assign({}, slapfaceinfo, { closeAct: this.closeAct })))));
+    };
+    return Slapface;
+}(Component));
+export { Slapface };
+var Group = /** @class */ (function (_super) {
+    __extends(Group, _super);
+    function Group(props) {
+        var _this = _super.call(this, props) || this;
+        var emptyGroup = [
+            {
+                isLoadDone: false,
+                picture: "",
+                width: 0,
+                height: 0
+            }
+        ];
+        _this.groupArr = emptyGroup.concat(_this.props.LoadGroup);
+        _this.groupIndexList = new nodeList(_this.groupArr);
+        _this.loadDisplay = "hidden";
+        _this.elseDisplay = "visible";
+        _this.state = {
+            curIndex: _this.groupIndexList.CheckReady()
+        };
+        return _this;
+    }
+    Group.prototype.componentDidMount = function () {
+        var _this = this;
+        if (this.picBack.style.visibility == 'hidden') {
+            setTimeout(function () {
+                _this.picBack.style.visibility = 'visible';
+                _this.closeClick();
+            }, 600);
+        }
+    };
+    Group.prototype.componentDidUpdate = function () {
+        var _this = this;
+        var curIndex = this.state.curIndex;
+        setTimeout(function () {
+            if (!_this.groupArr[curIndex].isLoadDone) {
+                _this.groupArr[curIndex].isLoadDone = true;
+                _this.closeClick();
+            }
+        }, 1000);
+    };
+    Group.prototype.closeClick = function (e) {
+        var _this = this;
+        e === null || e === void 0 ? void 0 : e.stopPropagation();
+        var nextIndex = this.groupIndexList.CheckReady();
+        setTimeout(function () { _this.loadDisplay = "visible"; }, 1000);
+        this.elseDisplay = "hidden";
+        if (nextIndex != -1) {
+            if (this.props.settingsitems.ani_switch_type == 2) {
+                this.picBack.className = SlapfaceLess.groupBack;
+            }
+            this.setState({ curIndex: nextIndex });
+        }
+        else {
+            this.props.closeAct();
+        }
+    };
+    Group.prototype.render = function () {
+        var _this = this;
+        if (this.state.curIndex == -1) {
+            this.setState({ curIndex: this.groupIndexList.CheckReady() });
+        }
+        return (h("div", { ref: function (div) { _this.picBack = div; }, style: { width: '100%', height: '100%', alignItems: 'center', justifyContent: 'center', position: 'absolute', visibility: 'hidden' }, onAnimationEnd: function () { _this.picBack.className = SlapfaceLess.groupBackReverse; } },
+            h("div", { onClick: function () { if (_this.props.settingsitems.is_mask == false)
+                    return; _this.closeClick(); }, style: { position: "absolute", width: "100%", height: "100%" } }),
+            h("div", null,
+                h("img", { src: this.groupArr[this.state.curIndex].picture, style: { visibility: this.elseDisplay, width: this.groupArr[this.state.curIndex].width, height: this.groupArr[this.state.curIndex].height }, onLoad: function () { var curIndex = _this.state.curIndex; if (!_this.groupArr[curIndex].isLoadDone) {
+                        _this.groupArr[curIndex].isLoadDone = true;
+                        _this.loadDisplay = "hidden";
+                        _this.elseDisplay = "visible";
+                        _this.forceUpdate();
+                    } } }),
+                h("div", { ref: function (div) { _this.loadPic = div; }, className: SlapfaceLess.loading_anim, style: { backgroundImage: "url(".concat(this.props.pic_loading, ")"), width: this.groupArr[this.state.curIndex].width, height: this.groupArr[this.state.curIndex].height, position: "absolute", visibility: this.loadDisplay } }, " "),
+                h(CloseButton, { btn_closeButton: this.props.btn_closeButton, elseDisplay: this.elseDisplay, onClick: function (e) { _this.closeClick(e); } }),
+                h(JumpButton, { elseDisplay: this.elseDisplay, jumpButton: this.props.jumpButton }))));
+    };
+    return Group;
+}(Component));
+var CloseButton = /** @class */ (function (_super) {
+    __extends(CloseButton, _super);
+    function CloseButton() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    CloseButton.prototype.render = function () {
+        return (h("button", { className: SlapfaceLess.closeButton, style: { visibility: this.props.elseDisplay, backgroundImage: "url(".concat(this.props.btn_closeButton, ")") }, onClick: this.props.onClick }));
+    };
+    return CloseButton;
+}(Component));
+var JumpButton = /** @class */ (function (_super) {
+    __extends(JumpButton, _super);
+    function JumpButton() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    JumpButton.prototype.render = function () {
+        var _this = this;
+        return (h("div", { className: SlapfaceLess.jumpButton, style: { visibility: this.props.elseDisplay }, onMouseDown: function () { _this.jumpbtnImg.src = _this.props.jumpButton.pic_yaxia; }, onMouseUp: function () { _this.jumpbtnImg.src = _this.props.jumpButton.pic_xuanfu; }, onMouseOver: function () { _this.jumpbtnImg.src = _this.props.jumpButton.pic_xuanfu; }, onMouseOut: function () { _this.jumpbtnImg.src = _this.props.jumpButton.pic_changtai; } },
+            h("img", { ref: function (img) { _this.jumpbtnImg = img; }, src: this.props.jumpButton.pic_changtai })));
+    };
+    return JumpButton;
+}(Component));

package/ui/components/slider/Slider.d.ts

@@ -1,57 +1,57 @@
-import { Component, h } from "preact";
-export interface SliderProps {
-    percent: number;
-    wrapperWidth: number;
-    wrapperHeight: number;
-    height: number;
-    innerHeight?: number;
-    dotWidth: number;
-    dotHeight: number;
-    dotWrapperWidth: number;
-    dotWrapperHeight: number;
-    outerBg: string;
-    innerBg: string;
-    dotBg: string;
-    onDragStart: Function | null;
-    onDrag: Function | null;
-    onDragEnd: Function | null;
-    isDiscrete: Boolean | null;
-    discrete?: number;
-    maxDiscrete?: number;
-    hasIncDecButton: Boolean | null;
-    incButtonWidth?: number;
-    incButtonHeight?: number;
-    decButtonWidth?: number;
-    decButtonHeight?: number;
-    incButtonBg?: string;
-    decButtonBg?: string;
-    overallWidth?: number;
-    onIncClick?: Function | null;
-    onDecClick?: Function | null;
-    rangeControl?: Boolean;
-    startRange?: number;
-    endRange?: number;
-}
-export declare class Slider extends Component<SliderProps, {
-    percent: number;
-}> {
-    discrete: number;
-    private refWrapper;
-    constructor(props: any);
-    componentDidMount(): void;
-    componentWillReceiveProps(nextProps: any): void;
-    onDragStart: (event: any) => void;
-    onDrag: (event: any) => void;
-    onDragEnd: (event: any) => void;
-    onDecClick: () => void;
-    onIncClick: () => void;
-    computeWrapperStyle: () => void;
-    computeOuterStyle: () => void;
-    computeInnerStyle: () => void;
-    computeDotWrapperStyle: () => void;
-    computeDotStyle: () => void;
-    computeIncButtonStyle: () => void;
-    computeDecButtonStyle: () => void;
-    computeWithButtonStyle: () => void;
-    render(): h.JSX.Element;
-}
+import { Component, h } from 'preact';
+export interface SliderProps {
+    percent: number;
+    wrapperWidth: number;
+    wrapperHeight: number;
+    height: number;
+    innerHeight?: number;
+    dotWidth: number;
+    dotHeight: number;
+    dotWrapperWidth: number;
+    dotWrapperHeight: number;
+    outerBg: string;
+    innerBg: string;
+    dotBg: string;
+    onDragStart: Function | null;
+    onDrag: Function | null;
+    onDragEnd: Function | null;
+    isDiscrete: boolean | null;
+    discrete?: number;
+    maxDiscrete?: number;
+    hasIncDecButton: boolean | null;
+    incButtonWidth?: number;
+    incButtonHeight?: number;
+    decButtonWidth?: number;
+    decButtonHeight?: number;
+    incButtonBg?: string;
+    decButtonBg?: string;
+    overallWidth?: number;
+    onIncClick?: Function | null;
+    onDecClick?: Function | null;
+    rangeControl?: boolean;
+    startRange?: number;
+    endRange?: number;
+}
+export declare class Slider extends Component<SliderProps, {
+    percent: number;
+}> {
+    discrete: number;
+    private refWrapper;
+    constructor(props: any);
+    componentDidMount(): void;
+    componentWillReceiveProps(nextProps: any): void;
+    onDragStart: (event: any) => void;
+    onDrag: (event: any) => void;
+    onDragEnd: (event: any) => void;
+    onDecClick: () => void;
+    onIncClick: () => void;
+    computeWrapperStyle: () => void;
+    computeOuterStyle: () => void;
+    computeInnerStyle: () => void;
+    computeDotWrapperStyle: () => void;
+    computeDotStyle: () => void;
+    computeIncButtonStyle: () => void;
+    computeDecButtonStyle: () => void;
+    computeWithButtonStyle: () => void;
+    render(): h.JSX.Element;
+}