pixuireactcomponents 1.1.20 → 1.1.22

package/package.json

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

package/ui/components/carousel/Carousel.js

@@ -51,6 +51,9 @@ export function Carousel(props) {
     }, [children]);
     var isLastCarouseItem = function () { return showIndex === carouselItems.length - 1; };
     var isFirstCarouseLastItem = function () { return showIndex === 0; };
+    useEffect(function () {
+        setNextInterval();
+    }, [autoplay]);
     useEffect(function () {
         //每次跳转前判断打开动画，否则动画关闭以后不会调用handleTransitionEnd
         if (!isLastCarouseItem() && !isFirstCarouseLastItem()) {
@@ -62,8 +65,8 @@ export function Carousel(props) {
         handleNextRef.current = handleNext;
     });
     var setNextInterval = function () {
+        clearInterval(nextInterval.current);
         if (autoplay) {
-            clearInterval(nextInterval.current);
             nextInterval.current = setInterval(function () {
                 handleNextRef.current();
             }, duration);
@@ -179,7 +182,7 @@ export function Carousel(props) {
             onclickEvent(showIndex - 1);
         }
     };
-    return (h("div", { style: { flexDirection: 'column', left: '200px' } },
+    return (h("div", { style: { flexDirection: 'column' } },
         h("div", { style: __assign(__assign({ position: 'relative' }, itemBoxStyle), { overflow: 'hidden', flexShrink: 0 }) },
             h("div", { style: {
                     display: 'flex',

package/ui/components/slapface/Slapface.js

@@ -25,7 +25,6 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { h, Component } from "preact";
-// @ts-ignore
 import SlapfaceLess from "./less/Slapface.less";
 //默认配置项
 var settingsitems = {
@@ -80,7 +79,7 @@ var nodeList = /** @class */ (function () {
     nodeList.prototype.CheckReady = function () {
         var cur = this.head;
         while (cur.next != null) {
-            if (!this.groupArr[cur.next.index].isLoadDone) {
+            if (this.groupArr[cur.next.index].isLoadDone) {
                 cur = cur.next;
             }
             else {
@@ -104,7 +103,7 @@ var Slapface = /** @class */ (function (_super) {
         _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.btn_closeButton = _this.props.btn_closeButton ? _this.props.btn_closeButton : '';
         _this.pic_loading = _this.props.pic_loading;
         _this.actDisplay = "flex";
         return _this;
@@ -130,7 +129,7 @@ var Group = /** @class */ (function (_super) {
         var _this = _super.call(this, props) || this;
         var emptyGroup = [
             {
-                isLoadDone: true,
+                isLoadDone: false,
                 picture: "",
                 width: 0,
                 height: 0
@@ -138,7 +137,8 @@ var Group = /** @class */ (function (_super) {
         ];
         _this.groupArr = emptyGroup.concat(_this.props.LoadGroup);
         _this.groupIndexList = new nodeList(_this.groupArr);
-        _this.loadDisplay = "visible";
+        _this.loadDisplay = "hidden";
+        _this.elseDisplay = "visible";
         _this.state = {
             curIndex: _this.groupIndexList.CheckReady()
         };
@@ -157,16 +157,18 @@ var Group = /** @class */ (function (_super) {
         var _this = this;
         var curIndex = this.state.curIndex;
         setTimeout(function () {
-            if (_this.groupArr[curIndex].isLoadDone) {
-                _this.groupArr[curIndex].isLoadDone = false;
+            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();
-        this.loadDisplay = "visibility";
+        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;
@@ -186,14 +188,15 @@ var Group = /** @class */ (function (_super) {
             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: { 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 = false;
+                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", { className: SlapfaceLess.loading_anim, src: this.props.pic_loading, style: { 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, onClick: function (e) { _this.closeClick(e); } }),
-                h(JumpButton, { 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: 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));
@@ -203,7 +206,7 @@ var CloseButton = /** @class */ (function (_super) {
         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 (h("button", { className: SlapfaceLess.closeButton, style: { visibility: this.props.elseDisplay, backgroundImage: "url(".concat(this.props.btn_closeButton, ")") }, onClick: this.props.onClick }));
     };
     return CloseButton;
 }(Component));
@@ -214,7 +217,7 @@ var JumpButton = /** @class */ (function (_super) {
     }
     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_xuanfu; }, onMouseOver: function () { _this.jumpbtnImg.src = _this.props.jumpButton.pic_xuanfu; }, onMouseOut: function () { _this.jumpbtnImg.src = _this.props.jumpButton.pic_changtai; } },
+        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;

package/ui/components/slapface/less/Slapface.less

@@ -9,19 +9,7 @@
     flex-direction: column;
     position: relative;
 }
-.gameTitle{
-    height : 76px;
-    width:244px; 
-    position: relative;
-    /* left:12px;
-    top:0px; */
-    font-size: 44px; 
-    color:white;
-    background-color: rgb(180, 180, 180);
-    z-index: 999;
-    text-align: center;
-    float:left;
-}
+
 .closeButton{
     width:36px;
     height:36px;
@@ -44,6 +32,15 @@
     }
 }
 
+@keyframes zoomReverse{
+    from{
+        transform: scale(0)
+    }
+    to{
+        transform: scale(0);
+    }
+}
+
 .groupBack{
     animation-name:zoom;
     animation-timing-function:ease-in-out;
@@ -51,6 +48,13 @@
     animation-duration: 1s;
 }
 
+.groupBackReverse{
+    animation-name:zoomReverse;
+    animation-timing-function:'';
+    animation-iteration-count:'';
+    animation-duration:'';
+}
+
 .isShowToday{
     width:36px;
     height:31px;
@@ -59,17 +63,7 @@
     right:0px;
     bottom:0px;
 }
-.title{
-    position: absolute;
-    color:red;
-    left:0px;
-    top:0px;
-}
-.groupFrame{
-    position:absolute;
-    right:0%;
-    bottom:0%;
-}
+
 .jumpButton{
     position: absolute;
     right:50%;
@@ -104,4 +98,28 @@
     // background:url(images/coupon-logo.gif) no-repeat;
     height:100px;background-color:#fff;
     opacity:0.6;
+}
+
+@keyframes rotate_by_myself{
+    from {
+        transform: rotate(0deg);
+    }
+
+    50% {
+        transform: rotate(180deg);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.loading_anim{
+    animation-name: rotate_by_myself;
+    animation-duration: 1.5s;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 50%;
 }