pixuireactcomponents 1.1.16 → 1.1.17

package/index.js

@@ -12,4 +12,5 @@ export { Logger } from "./tools/Logger";
 export { EventDispatcherJs } from "./tools/EventDispatcherJs";
 export { Carousel } from "./ui/components/carousel/Carousel";
 export { Slapface } from "./ui/components/slapface/Slapface";
+export { SlapfaceLess } from "./ui/components/slapface/less/Slapface.less";
 console.log("Hello, 欢迎使用PixUI React Components");

package/package.json

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

package/ui/components/carousel/Carousel.js

@@ -19,12 +19,16 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { h } from "preact";
-import { useState, useEffect, useRef, useMemo } from '../../../../../lib/preact/hooks/src';
+import { useState, useEffect, useRef, useMemo, useImperativeHandle } from '../../../../../lib/preact/hooks/src';
 // import React, { useState, useEffect, useRef, useMemo } from 'preact/hooks';
 var indicatorStyle = { width: '20px', height: '8px', margin: '5px', backgroundColor: '#cecfda', borderRadius: '3px' };
 var indicatorSelectedStyle = __assign(__assign({}, indicatorStyle), { backgroundColor: '#fafbfc' });
 export function Carousel(props) {
     var _a = props.children, children = _a === void 0 ? [] : _a, _b = props.defaultIndex, defaultIndex = _b === void 0 ? 1 : _b, _c = props.compWidth, compWidth = _c === void 0 ? 100 : _c, _d = props.compHeight, compHeight = _d === void 0 ? 100 : _d, _e = props.autoplay, autoplay = _e === void 0 ? true : _e, _f = props.switchDuration, switchDuration = _f === void 0 ? 3000 : _f, _g = props.loop, loop = _g === void 0 ? true : _g, _h = props.isVertical, isVertical = _h === void 0 ? false : _h, _j = props.touchable, touchable = _j === void 0 ? true : _j, _k = props.onSlideChange, onSlideChange = _k === void 0 ? null : _k, _l = props.onclickEvent, onclickEvent = _l === void 0 ? null : _l;
+    useImperativeHandle(props.cRef, function () { return ({
+        handleNext: handleNext,
+        handlePrev: handlePrev
+    }); });
     var duration = switchDuration < 1000 ? 1000 : switchDuration;
     var _m = useState(defaultIndex), showIndex = _m[0], setShowIndex = _m[1];
     //轮播元素正在滚动
@@ -199,9 +203,7 @@ export function Carousel(props) {
             }, onDragEnd: function () { gestureUp(); } }),
         h("div", { style: { flexDirection: isVertical ? 'column' : 'row', } }, children.map(function (v, i) {
             return h("div", { style: (showIndex == i + 1) ? indicatorSelectedStyle : indicatorStyle, onClick: function () { setShowIndex(i + 1); } });
-        })),
-        h("div", { onClick: handlePrev, style: { width: '50px', height: '50px' } }, "left"),
-        h("div", { onClick: handleNext, style: { width: '50px', height: '50px' } }, "right")));
+        }))));
 }
 Carousel.Item = function (props) {
     return h("div", { style: {

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

@@ -0,0 +1,107 @@
+.maininterface{
+    width:1200px;
+    height:682px;
+    /* width:100%;
+    height:100%; */
+    margin: auto;
+    /* padding:  0px 36px 36px 36px; */
+    /* background-color: grey; */
+    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;
+    background-size: contain;
+    /* float: left; */
+    position: absolute;
+    right:0px;
+    top:0px;
+}
+
+@keyframes zoom{
+    from{
+        transform: scale(0)
+    }
+    80%{
+        transform: scale(1.1);
+    }
+    to{
+        transform: scale(1);
+    }
+}
+
+.groupBack{
+    animation-name:zoom;
+    animation-timing-function:ease-in-out;
+    animation-iteration-count:1;
+    animation-duration: 1s;
+}
+
+.isShowToday{
+    width:36px;
+    height:31px;
+    background-size: contain;
+    position: absolute;
+    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%;
+    bottom:10%;
+    /* top:80%; */
+    transform: translate(50%, -50%);
+}
+.slapImage{
+    box-sizing:  content-box;
+    /* border-width: 5px;
+    border-color: black;
+    border-style: solid; */
+    position: absolute;
+    left:50%;
+    top:50%;
+    transform:translate(-50%,-50%);
+}
+.frame {
+    border: 12px solid rgb(60, 65, 71); 
+    display: flex;
+    /* flex-direction: row; */
+    /* flex-basis: content; */
+    /* justify-content: space-around; */
+    width: 1128px;
+    height: 604px;
+    position: relative;
+    top:-12px;
+    background-color: rgb(60, 65, 71);
+}
+
+.mask{
+    // background:url(images/coupon-logo.gif) no-repeat;
+    height:100px;background-color:#fff;
+    opacity:0.6;
+}