pixuireactcomponents 1.2.32 → 1.2.34

package/index.d.ts

@@ -2,6 +2,7 @@ export { Tabs } from "./ui/components/tab/Tabs";
 export { Tab } from "./ui/components/tab/Tab";
 export { Slider } from "./ui/components/slider/Slider";
 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";
@@ -12,4 +13,4 @@ export { EventDispatcherJs } from "./tools/EventDispatcherJs";
 export { Carousel } from "./ui/components/carousel/Carousel";
 export { Slapface } from "./ui/components/slapface/Slapface";
 export { Button } from "./ui/components/button/Button";
-export { Dropdown, DropdownConfig } from "./ui/components/dropdown/Dropdown";
+export { ToggleGroup } from "./ui/components/togglegroup/ToggleGroup";

package/index.js

@@ -13,4 +13,5 @@ export { EventDispatcherJs } from "./tools/EventDispatcherJs";
 export { Carousel } from "./ui/components/carousel/Carousel";
 export { Slapface } from "./ui/components/slapface/Slapface";
 export { Button } from "./ui/components/button/Button";
+export { ToggleGroup } from "./ui/components/togglegroup/ToggleGroup";
 console.log("Hello, 欢迎使用PixUI React Components");

package/package.json

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

package/ui/components/outlinetext/OutlineText.js

@@ -1,13 +1,13 @@
-let __extends = (this && this.__extends) || (function () {
+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 (let p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+            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');
+        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 __());
@@ -16,65 +16,65 @@ let __extends = (this && this.__extends) || (function () {
 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["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["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["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["Truncate"] = 0] = "Truncate";
+    VerticalWrapMode[VerticalWrapMode["Overflow"] = 1] = "Overflow";
 })(VerticalWrapMode || (VerticalWrapMode = {}));
-let defaultStyle = {
+var defaultStyle = {
     width: 200,
     height: 200
 };
-let OutlineText = /** @class */ (function (_super) {
+var OutlineText = /** @class */ (function (_super) {
     __extends(OutlineText, _super);
     function OutlineText(props) {
-        let _this = _super.call(this, props) || this;
+        var _this = _super.call(this, props) || this;
         _this.OnLoad = function (e) {
             console.log('!!!!!!!!!!!!!!');
             if (!window.require) {
                 console.error('need puerts env');
             }
-            let CS = window.require('csharp');
+            var CS = window.require('csharp');
             if (!CS) {
                 console.error('need puerts env');
                 return;
             }
-            let puerts = window.require('puerts');
+            var puerts = window.require('puerts');
             console.log('?????');
-            let windowId = window.external.id;
-            let handle = e.target.attachment.handle;
-            let attachment = CS.com.tencent.pandora.CSharpInterface.GetSlotAttachmentByHandle(windowId, handle);
+            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());
-            let placeholder = attachment.GetMountingGameObject();
-            let text = placeholder.AddComponent(puerts.$typeof(CS.UnityEngine.UI.Text));
+            var placeholder = attachment.GetMountingGameObject();
+            var text = placeholder.AddComponent(puerts.$typeof(CS.UnityEngine.UI.Text));
             _this.text = text;
-            let outline = placeholder.AddComponent(puerts.$typeof(CS.UnityEngine.UI.Outline));
+            var outline = placeholder.AddComponent(puerts.$typeof(CS.UnityEngine.UI.Outline));
             _this.outline = outline;
             _this.updateOutlineText();
         };
@@ -86,20 +86,20 @@ let OutlineText = /** @class */ (function (_super) {
     };
     OutlineText.prototype.colorRgb = function (colorStr) {
         //十六进制颜色值的正则表达式
-        let reg = /^#([0-9a-fA-f]{0,}|)$/;
-        let matchRes = colorStr.toString().toLowerCase().match(reg);
-        let transColor = '';
+        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
-        let colorList = new Array();
+        var colorList = new Array();
         while (transColor != '') {
-            let hex = '0x' + transColor.substring(0, 2);
+            var hex = '0x' + transColor.substring(0, 2);
             colorList.push(parseInt(hex, 16));
             transColor = transColor.substring(2, transColor.length);
         }
-        let r, g, b, a = 1;
-        for (let i = 0; i < colorList.length; i++) {
+        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;
             }
@@ -113,11 +113,11 @@ let OutlineText = /** @class */ (function (_super) {
                 a = colorList[i] / 255;
             }
         }
-        let CS = window.require('csharp');
+        var CS = window.require('csharp');
         return CS.UnityEngine.Color(r, g, b, a);
     };
     OutlineText.prototype.updateOutlineText = function () {
-        let CS = window.require('csharp');
+        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;
@@ -132,8 +132,8 @@ let OutlineText = /** @class */ (function (_super) {
         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) })));
+        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,

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

@@ -1,11 +1,11 @@
 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;
+    private jumpFun;
     closeAct: () => void;
     constructor(props: any);
     render(): h.JSX.Element;

package/ui/components/slapface/Slapface.js

@@ -26,7 +26,7 @@ var __assign = (this && this.__assign) || function () {
 };
 import { h, Component } from "preact";
 //@ts-ignore
-import SlapfaceLess from "./less/Slapface.less";
+import SlapfaceLess from "./Slapface.less";
 //默认配置项
 var settingsitems = {
     ani_switch_type: 1,
@@ -36,7 +36,9 @@ var settingsitems = {
 var jumpButton = {
     pic_changtai: '',
     pic_yaxia: '',
-    pic_xuanfu: ''
+    pic_xuanfu: '',
+    rightPos: 0,
+    bottomPos: 0
 };
 var slapfaceNode = /** @class */ (function () {
     function slapfaceNode(par_index) {
@@ -105,23 +107,22 @@ var Slapface = /** @class */ (function (_super) {
         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";
+        _this.jumpFun = props.jumpFun;
         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 })))));
+            h("div", { style: { width: '100%', height: '100%', backgroundColor: "rgba(0,0,0,0.5)" } }, h(Group, __assign({}, slapfaceinfo, { closeAct: this.closeAct, jumpFun: this.jumpFun })))));
     };
     return Slapface;
 }(Component));
@@ -135,11 +136,13 @@ var Group = /** @class */ (function (_super) {
                 isLoadDone: false,
                 picture: "",
                 width: 0,
-                height: 0
+                height: 0,
+                jumpButton: jumpButton,
             }
         ];
         _this.groupArr = emptyGroup.concat(_this.props.LoadGroup);
         _this.groupIndexList = new slapfaceNodeList(_this.groupArr);
+        _this.jumpFun = props.jumpFun;
         _this.loadDisplay = "hidden";
         _this.elseDisplay = "visible";
         _this.firstFrameDisplay = "none";
@@ -175,14 +178,12 @@ var Group = /** @class */ (function (_super) {
     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.picBack.className = SlapfaceLess.groupBack
+                this.picBack.className = SlapfaceLess.groupBackReverse;
             }
             this.setState({ curIndex: nextIndex });
         }
@@ -195,18 +196,20 @@ var Group = /** @class */ (function (_super) {
         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' } },
+        return (h("div", { style: { width: '100%', height: '100%', alignItems: 'center', justifyContent: 'center' } },
             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("div", { ref: function (div) { _this.picBack = div; }, style: { position: "relative" } },
                 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";
+                        if (_this.props.settingsitems.ani_switch_type == 2)
+                            _this.picBack.className = SlapfaceLess.groupBack;
                         _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(JumpButton, { firstFrameDisplay: this.firstFrameDisplay, elseDisplay: this.elseDisplay, jumpButton: this.groupArr[this.state.curIndex].jumpButton, jumpFun: function () { _this.jumpFun(_this.state.curIndex); } })),
             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;
@@ -217,18 +220,20 @@ var CloseButton = /** @class */ (function (_super) {
         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 (h("button", { className: SlapfaceLess.closeButton, style: { display: this.props.firstFrameDisplay, 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;
+    function JumpButton(props) {
+        return _super.call(this, props) || 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; } },
+        if (!this.props.jumpButton)
+            return;
+        return (h("div", { onClick: function () { _this.props.jumpFun(); }, style: { display: this.props.firstFrameDisplay, visibility: this.props.elseDisplay, position: "absolute", bottom: "".concat(this.props.jumpButton.bottomPos, "px"), right: "".concat(this.props.jumpButton.rightPos, "px") }, onMouseDown: function () { _this.jumpbtnImg.src = _this.props.jumpButton.pic_yaxia; _this.forceUpdate(); }, onMouseUp: function () { _this.jumpbtnImg.src = _this.props.jumpButton.pic_xuanfu; _this.forceUpdate(); } },
             h("img", { ref: function (img) { _this.jumpbtnImg = img; }, src: this.props.jumpButton.pic_changtai })));
     };
     return JumpButton;

package/ui/components/slapface/{less/Slapface.less → Slapface.less}

@@ -13,9 +13,11 @@
 .closeButton{
     width:36px;
     height:36px;
-    background-size: contain;
     /* float: left; */
     position: absolute;
+    // background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
     right:0px;
     top:0px;
 }
@@ -64,13 +66,6 @@
     bottom:0px;
 }
 
-.jumpButton{
-    position: absolute;
-    right:50%;
-    bottom:10%;
-    /* top:80%; */
-    transform: translate(50%, -50%);
-}
 .slapImage{
     box-sizing:  content-box;
     /* border-width: 5px;

package/ui/components/slider/Slider.js

@@ -142,8 +142,8 @@ var Slider = /** @class */ (function (_super) {
                     _this.setState({
                         percent: _this.state.percent - 1
                     }, function () {
-                        if (_this.props.onIncClick) {
-                            _this.props.onIncClick(_this.state.percent);
+                        if (_this.props.onDecClick) {
+                            _this.props.onDecClick(_this.state.percent);
                         }
                     });
                 }

package/ui/components/togglegroup/ToggleGroup.d.ts

@@ -0,0 +1,13 @@
+import { h, Component } from "preact";
+export declare class ToggleGroup extends Component<any, any> {
+    private isMultiOption;
+    private toggleArray;
+    private togglePic;
+    private currentIndex;
+    private items;
+    private refreshAll;
+    private GenerateToggleItem;
+    private checkSelected;
+    constructor(props: any);
+    render(props: any): h.JSX.Element;
+}

package/ui/components/togglegroup/ToggleGroup.js

@@ -0,0 +1,99 @@
+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 { h, Component } from "preact";
+var ToggleGroup = /** @class */ (function (_super) {
+    __extends(ToggleGroup, _super);
+    function ToggleGroup(props) {
+        var _this = _super.call(this, props) || this;
+        _this.GenerateToggleItem = function (toggleItem, togglePic, index, refreshAll) {
+            return h(Toggle, { toggleText: toggleItem.toggleText, selectedFun: toggleItem.selectedFun, notSelectedFun: toggleItem.notSelectedFun, isSelected: toggleItem.isSelected, selected_pic: togglePic.selected_pic, not_selected_pic: togglePic.not_selected_pic, index: index, checkSelected: _this.checkSelected, refreshAll: _this.refreshAll });
+        };
+        _this.checkSelected = function (index) {
+            if (_this.isMultiOption)
+                return;
+            else {
+                if (index == _this.currentIndex) {
+                    _this.toggleArray[index].isSelected = false;
+                    _this.currentIndex = -1;
+                }
+                else {
+                    if (_this.currentIndex == -1) {
+                        _this.currentIndex = index;
+                        _this.toggleArray[index].isSelected = true;
+                        return;
+                    }
+                    _this.refreshAll = !_this.refreshAll;
+                    _this.toggleArray[_this.currentIndex].isSelected = false;
+                    _this.toggleArray[_this.currentIndex].notSelectedFun();
+                    _this.toggleArray[index].isSelected = true;
+                    _this.currentIndex = index;
+                    _this.items = [];
+                    _this.forceUpdate();
+                }
+            }
+        };
+        _this.toggleArray = props.toggleArray;
+        for (var i = 0; i < _this.toggleArray.length; i++) {
+            _this.toggleArray[i].isSelected = false;
+        }
+        _this.togglePic = props.togglePic;
+        _this.isMultiOption = props.isMultiOption != undefined ? props.isMultiOption : true;
+        _this.currentIndex = -1;
+        _this.refreshAll = true;
+        _this.items = [];
+        return _this;
+    }
+    ToggleGroup.prototype.render = function (props) {
+        for (var i = 0; i < this.toggleArray.length; i++) {
+            this.items.push(this.GenerateToggleItem(this.toggleArray[i], this.togglePic, i, this.refreshAll));
+        }
+        return (h("div", { style: { flexDirection: "row" } }, this.items));
+    };
+    return ToggleGroup;
+}(Component));
+export { ToggleGroup };
+var Toggle = /** @class */ (function (_super) {
+    __extends(Toggle, _super);
+    function Toggle(props) {
+        var _this = _super.call(this, props) || this;
+        _this.selected_pic = props.selected_pic;
+        _this.not_selected_pic = props.not_selected_pic;
+        _this.toggleText = props.toggleText;
+        _this.selectedFun = props.selectedFun;
+        _this.notSelectedFun = props.notSelectedFun;
+        _this.index = props.index;
+        _this.checkSelected = props.checkSelected;
+        _this.refreshAll = props.refreshAll;
+        _this.state = {
+            isSelected: props.isSelected
+        };
+        return _this;
+    }
+    Toggle.prototype.render = function (props) {
+        var _this = this;
+        if (props.refreshAll != this.refreshAll && props.isSelected != this.state.isSelected) {
+            this.setState({ isSelected: !this.state.isSelected });
+            return;
+        }
+        this.refreshAll = props.refreshAll;
+        return (h("div", { style: { alignItems: "flex-end", flexDirection: "row" } },
+            h("div", { style: { width: "36px", height: "36px", backgroundSize: "contain", backgroundImage: "url(".concat(this.state.isSelected ? this.selected_pic : this.not_selected_pic, ")") }, onClick: function () { _this.state.isSelected ? _this.notSelectedFun() : _this.selectedFun(); _this.setState({ isSelected: !_this.state.isSelected }); _this.checkSelected(_this.index); } }),
+            h("div", null,
+                h("text", null, "".concat(this.toggleText))),
+            h("div", { style: { width: "50px" } })));
+    };
+    return Toggle;
+}(Component));