pixuireactcomponents 1.2.33 → 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.33",
+    "version": "1.2.34",
     "description": "pixui react components",
     "main": "index.js",
     "scripts": {

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

@@ -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; }, style: { position: "absolute" }, 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/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,19 +66,12 @@
     bottom:0px;
 }
 
-.jumpButton{
-    position: absolute;
-    right:50%;
-    bottom:10%;
-    /* top:80%; */
-    transform: translate(50%, -50%);
-}
 .slapImage{
     box-sizing:  content-box;
     /* border-width: 5px;
     border-color: black;
     border-style: solid; */
-    position: relative;
+    position: absolute;
     left:50%;
     top:50%;
     transform:translate(-50%,-50%);

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));