pixuireactcomponents 1.2.2 → 1.2.31

package/ui/components/outlinetext/OutlineText.js

@@ -0,0 +1,168 @@
+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';
+export var FontStyle;
+(function (FontStyle) {
+    FontStyle[FontStyle["Normal"] = 0] = "Normal";
+    FontStyle[FontStyle["Bold"] = 1] = "Bold";
+    FontStyle[FontStyle["Italic"] = 2] = "Italic";
+    FontStyle[FontStyle["BoldAndItalic"] = 3] = "BoldAndItalic";
+})(FontStyle || (FontStyle = {}));
+export var TextAnchor;
+(function (TextAnchor) {
+    TextAnchor[TextAnchor["UpperLeft"] = 0] = "UpperLeft";
+    TextAnchor[TextAnchor["UpperCenter"] = 1] = "UpperCenter";
+    TextAnchor[TextAnchor["UpperRight"] = 2] = "UpperRight";
+    TextAnchor[TextAnchor["MiddleLeft"] = 3] = "MiddleLeft";
+    TextAnchor[TextAnchor["MiddleCenter"] = 4] = "MiddleCenter";
+    TextAnchor[TextAnchor["MiddleRight"] = 5] = "MiddleRight";
+    TextAnchor[TextAnchor["LowerLeft"] = 6] = "LowerLeft";
+    TextAnchor[TextAnchor["LowerCenter"] = 7] = "LowerCenter";
+    TextAnchor[TextAnchor["LowerRight"] = 8] = "LowerRight";
+})(TextAnchor || (TextAnchor = {}));
+export var HorizontalWrapMode;
+(function (HorizontalWrapMode) {
+    HorizontalWrapMode[HorizontalWrapMode["Wrap"] = 0] = "Wrap";
+    HorizontalWrapMode[HorizontalWrapMode["Overflow"] = 1] = "Overflow";
+})(HorizontalWrapMode || (HorizontalWrapMode = {}));
+export var VerticalWrapMode;
+(function (VerticalWrapMode) {
+    VerticalWrapMode[VerticalWrapMode["Truncate"] = 0] = "Truncate";
+    VerticalWrapMode[VerticalWrapMode["Overflow"] = 1] = "Overflow";
+})(VerticalWrapMode || (VerticalWrapMode = {}));
+var defaultStyle = {
+    width: 200,
+    height: 200
+};
+var OutlineText = /** @class */ (function (_super) {
+    __extends(OutlineText, _super);
+    function OutlineText(props) {
+        var _this = _super.call(this, props) || this;
+        _this.OnLoad = function (e) {
+            console.log('!!!!!!!!!!!!!!');
+            if (!require) {
+                console.error('need puerts env');
+            }
+            var CS = require('csharp');
+            if (!CS) {
+                console.error('need puerts env');
+                return;
+            }
+            var puerts = require('puerts');
+            console.log('?????');
+            var windowId = window.external.id;
+            var handle = e.target.attachment.handle;
+            var attachment = CS.com.tencent.pandora.CSharpInterface.GetSlotAttachmentByHandle(windowId, handle);
+            if (!attachment) {
+                console.error("can't get relected attachment, handle:".concat(handle));
+                return;
+            }
+            console.log('windowId:' + windowId.toString() + '    handle:' + handle.toString());
+            var placeholder = attachment.GetMountingGameObject();
+            var text = placeholder.AddComponent(puerts.$typeof(CS.UnityEngine.UI.Text));
+            _this.text = text;
+            var outline = placeholder.AddComponent(puerts.$typeof(CS.UnityEngine.UI.Outline));
+            _this.outline = outline;
+            _this.updateOutlineText();
+        };
+        return _this;
+    }
+    OutlineText.prototype.componentDidUpdate = function () {
+        console.log('componentDidUpdate');
+        this.updateOutlineText();
+    };
+    OutlineText.prototype.colorRgb = function (colorStr) {
+        //十六进制颜色值的正则表达式
+        var reg = /^#([0-9a-fA-f]{0,}|)$/;
+        var matchRes = colorStr.toString().toLowerCase().match(reg);
+        var transColor = '';
+        if (matchRes.length > 0)
+            transColor = matchRes[matchRes.length - 1];
+        // eslint-disable-next-line @typescript-eslint/no-array-constructor
+        var colorList = new Array();
+        while (transColor != '') {
+            var hex = '0x' + transColor.substring(0, 2);
+            colorList.push(parseInt(hex, 16));
+            transColor = transColor.substring(2, transColor.length);
+        }
+        var r, g, b, a = 1;
+        for (var i = 0; i < colorList.length; i++) {
+            if (i == 0 && colorList[i] != null && colorList[i] != undefined) {
+                r = colorList[i] / 255;
+            }
+            if (i == 1 && colorList[i] != null && colorList[i] != undefined) {
+                g = colorList[i] / 255;
+            }
+            if (i == 2 && colorList[i] != null && colorList[i] != undefined) {
+                b = colorList[i] / 255;
+            }
+            if (i == 3 && colorList[i] != null && colorList[i] != undefined) {
+                a = colorList[i] / 255;
+            }
+        }
+        var CS = window.require('csharp');
+        return CS.UnityEngine.Color(r, g, b, a);
+    };
+    OutlineText.prototype.updateOutlineText = function () {
+        var CS = window.require('csharp');
+        this.text.text = this.props.text;
+        this.text.font = CS.com.tencent.pandora.TextPartner.GetFont.Invoke(this.props.font);
+        this.text.fontStyle = this.props.fontStyle;
+        this.text.fontSize = this.props.fontSize;
+        this.text.lineSpacing = this.props.lineSpacing;
+        this.text.alignment = this.props.alignment;
+        this.text.alignByGeometry = this.props.alignByGeometry;
+        this.text.horizontalOverflow = this.props.horizontalOverflow;
+        this.text.verticalOverflow = this.props.verticalOverflow;
+        this.text.color = CS.UnityEngine.Color(this.props.color.r, this.props.color.g, this.props.color.b, this.props.color.a);
+        this.outline.effectColor = CS.UnityEngine.Color(this.props.outlineColor.r, this.props.outlineColor.g, this.props.outlineColor.b, this.props.outlineColor.a);
+        this.outline.effectDistance = new CS.UnityEngine.Vector2(this.props.outlineDistance.x, this.props.outlineDistance.y);
+    };
+    OutlineText.prototype.render = function () {
+        return (h("div", { style: this.props.style },
+            h("pixslot", { style: { width: '100%', height: '100%' }, src: 'pixui://method:placeholder', onLoad: this.OnLoad.bind(this) })));
+    };
+    OutlineText.defaultProps = {
+        style: defaultStyle,
+        text: 'NEW TEXT',
+        font: 'gamefont',
+        fontStyle: FontStyle.Normal,
+        fontSize: 14,
+        lineSpacing: 1,
+        alignment: TextAnchor.UpperLeft,
+        alignByGeometry: false,
+        horizontalOverflow: HorizontalWrapMode.Wrap,
+        verticalOverflow: VerticalWrapMode.Truncate,
+        color: {
+            r: 1,
+            g: 1,
+            b: 1,
+            a: 1
+        },
+        outlineColor: {
+            r: 0,
+            g: 0,
+            b: 0,
+            a: 1
+        },
+        outlineDistance: {
+            x: 1,
+            y: -1
+        },
+    };
+    return OutlineText;
+}(Component));
+export { OutlineText };

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

package/ui/components/progress/Progress.js

@@ -0,0 +1,142 @@
+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 { Component, createRef, h } from 'preact';
+var row_center_center = {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center'
+};
+var wrapperStyle;
+var outerStyle;
+var innerStyle;
+var dotStyle;
+var dotWrapperStyle;
+var lastX = undefined; // 上一次位置的横坐标
+var count = 0; // 拖动条距离最左端的位置 [0, this.props.wrapperWidth]
+var rect = undefined; // 滑动区域
+var Progress = /** @class */ (function (_super) {
+    __extends(Progress, _super);
+    function Progress(props) {
+        var _this = _super.call(this, props) || this;
+        _this.refWrapper = createRef();
+        _this.onDragStart = function (event) {
+            console.log('【Progress】DragStart event.clientX--' + event.clientX + '-----percent----' + _this.state.percent + '-----currentX----' + (_this.state.percent / 100 * _this.props.wrapperWidth));
+            lastX = event.clentX;
+            count = _this.state.percent / 100 * _this.props.wrapperWidth;
+            if (_this.props.onDragStart) {
+                _this.props.onDragStart();
+            }
+        };
+        _this.onDrag = function (event) {
+            if (event.clientX < rect.left || event.clientX > rect.right)
+                return;
+            if (lastX == undefined) {
+                lastX = event.clientX;
+                return;
+            }
+            var move = Number(event.clientX) - Number(lastX);
+            count += move;
+            count = Math.min(_this.props.wrapperWidth, count);
+            count = Math.max(0, count);
+            var newPercent = count / _this.props.wrapperWidth * 100;
+            _this.setState({
+                percent: newPercent
+            }, function () {
+                if (_this.props.onDrag)
+                    _this.props.onDrag(newPercent);
+            });
+            lastX = event.clientX;
+        };
+        _this.onDragEnd = function (event) {
+            lastX = undefined;
+            console.log('【Progress】DragEnd event.clientX--' + event.clientX + '-----percent----' + _this.state.percent + '-----currentX----' + (_this.state.percent / 100 * _this.props.wrapperWidth));
+            if (_this.props.onDragEnd) {
+                _this.props.onDragEnd(_this.state.percent);
+            }
+        };
+        _this.computeWrapperStyle = function () {
+            wrapperStyle = __assign({ width: _this.props.wrapperWidth + 'px', height: _this.props.wrapperHeight + 'px' }, row_center_center);
+        };
+        _this.computeOuterStyle = function () {
+            outerStyle = {
+                width: '100%',
+                height: _this.props.height + 'px',
+                backgroundImage: "url(".concat(_this.props.outerBg, ")"),
+                backgroundSize: '100% 100%'
+            };
+        };
+        _this.computeInnerStyle = function () {
+            var _width = Math.floor(_this.state.percent) + '%';
+            innerStyle = {
+                width: _width,
+                height: '100%',
+                backgroundImage: "url(".concat(_this.props.innerBg, ")"),
+                backgroundSize: '100% 100%'
+            };
+        };
+        _this.computeDotWrapperStyle = function () {
+            dotWrapperStyle = __assign({ position: 'absolute', width: _this.props.dotWrapperWidth + 'px', height: _this.props.dotWrapperHeight + 'px', marginTop: (_this.props.height - _this.props.dotWrapperHeight) / 2 + 'px', marginLeft: (_this.props.wrapperWidth * _this.state.percent / 100 - _this.props.dotWrapperWidth / 2) + 'px' }, row_center_center
+            // backgroundColor: '#FF000066'
+            );
+        };
+        _this.computeDotStyle = function () {
+            dotStyle = {
+                width: _this.props.dotWidth + 'px',
+                height: _this.props.dotHeight + 'px',
+            };
+        };
+        _this.state = {
+            percent: Math.floor(_this.props.percent)
+        };
+        _this.computeWrapperStyle();
+        _this.computeOuterStyle();
+        return _this;
+    }
+    Progress.prototype.componentDidMount = function () {
+        rect = this.refWrapper.current.getBoundingClientRect();
+    };
+    Progress.prototype.componentWillReceiveProps = function (nextProps) {
+        if (nextProps.percent == this.props.percent)
+            return;
+        this.setState({
+            percent: nextProps.percent
+        });
+    };
+    Progress.prototype.render = function () {
+        this.computeInnerStyle();
+        this.computeDotWrapperStyle();
+        this.computeDotStyle();
+        return (h("div", { ref: this.refWrapper, style: wrapperStyle },
+            h("div", { style: outerStyle },
+                h("div", { style: innerStyle },
+                    h("div", { style: dotWrapperStyle, draggable: true, onDragStart: this.onDragStart, onDrag: this.onDrag, onDragEnd: this.onDragEnd },
+                        h("img", { src: this.props.dotBg, style: dotStyle }))))));
+    };
+    return Progress;
+}(Component));
+export { Progress };

package/ui/components/slapface/Slapface.d.ts

@@ -0,0 +1,12 @@
+import { h, Component } from "preact";
+export declare class Slapface extends Component<any, any> {
+    private LoadGroup;
+    private jumpButton;
+    private settingsitems;
+    private btn_closeButton;
+    private pic_loading;
+    private actDisplay;
+    closeAct: () => void;
+    constructor(props: any);
+    render(): h.JSX.Element;
+}

package/ui/components/slapface/Slapface.js

@@ -0,0 +1,235 @@
+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 slapfaceNode = /** @class */ (function () {
+    function slapfaceNode(par_index) {
+        if (par_index == undefined)
+            this.index = -1;
+        else
+            this.index = par_index;
+        this.next = null;
+    }
+    return slapfaceNode;
+}());
+var slapfaceNodeList = /** @class */ (function () {
+    function slapfaceNodeList(groupArr) {
+        this.head = new slapfaceNode();
+        var cur = this.head;
+        this.size = 0;
+        if (groupArr) {
+            for (var i = 0; i < groupArr.length; i++) {
+                cur.next = new slapfaceNode(i);
+                cur = cur.next;
+            }
+            this.groupArr = groupArr;
+            this.size += groupArr.length;
+        }
+        this.tail = cur;
+    }
+    slapfaceNodeList.prototype.Add = function (index, next) {
+        this.tail.next = new slapfaceNode(index);
+        this.tail = this.tail.next;
+        ++this.size;
+        return this.tail;
+    };
+    slapfaceNodeList.prototype.DeleteNext = function (curParam) {
+        if (curParam.next == null)
+            return;
+        else {
+            curParam.next = curParam.next.next;
+        }
+        --this.size;
+    };
+    slapfaceNodeList.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 slapfaceNodeList;
+}());
+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;
+        for (var i = 0; i < _this.LoadGroup.length; i++) {
+            _this.LoadGroup[i].isLoadDone = false;
+        }
+        _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 : '';
+        _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", { style: { display: this.actDisplay, width: "100%", height: "100%" } },
+            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 slapfaceNodeList(_this.groupArr);
+        _this.loadDisplay = "hidden";
+        _this.elseDisplay = "visible";
+        _this.firstFrameDisplay = "none";
+        _this.state = {
+            curIndex: _this.groupIndexList.CheckReady()
+        };
+        return _this;
+    }
+    Group.prototype.componentDidMount = function () {
+        var _this = this;
+        // if(this.picBack.style.display == 'none'){
+        //     setTimeout(()=>{this.picBack.style.display = 'flex';
+        //     this.closeClick()},300)
+        // }
+        this.loadDisplay = "hidden";
+        if (this.firstFrameDisplay == "none") {
+            setTimeout(function () {
+                _this.firstFrameDisplay = 'flex';
+                _this.closeClick();
+            }, 300);
+        }
+    };
+    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) {
+        e === null || e === void 0 ? void 0 : e.stopPropagation();
+        var nextIndex = this.groupIndexList.CheckReady();
+        // setTimeout(() => {
+        //     this.loadDisplay = "visible"
+        // }, 50);
+        this.loadDisplay = "visible";
+        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", { style: { width: '100%', height: '100%', alignItems: 'center', justifyContent: 'center', position: 'absolute' } },
+            h("div", { onClick: function () { if (_this.props.settingsitems.is_mask == false)
+                    return; _this.closeClick(); }, style: { position: "absolute", width: "100%", height: "100%" } }),
+            h("div", { ref: function (div) { _this.picBack = div; }, onAnimationEnd: function () { setTimeout(function () { _this.picBack.className = SlapfaceLess.groupBackReverse; }, 0); } },
+                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(CloseButton, { firstFrameDisplay: this.firstFrameDisplay, btn_closeButton: this.props.btn_closeButton, elseDisplay: this.elseDisplay, onClick: function (e) { _this.closeClick(e); } }),
+                h(JumpButton, { firstFrameDisplay: this.firstFrameDisplay, elseDisplay: this.elseDisplay, jumpButton: this.props.jumpButton })),
+            h("div", { ref: function (div) { _this.loadPic = div; }, className: SlapfaceLess.loading_anim, style: { backgroundImage: "url(".concat(this.props.pic_loading, ")"), width: "300px", height: "300px", position: "absolute", visibility: this.loadDisplay } }, " ")));
+    };
+    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: { display: this.props.firstFrameDisplay, visibility: this.props.elseDisplay, backgroundSize: "contain", 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: { display: this.props.firstFrameDisplay, 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

@@ -0,0 +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;
+}