pixuireactcomponents 1.3.26 → 1.3.27

package/index.d.ts

@@ -1,6 +1,5 @@
 export { Carousel } from "./src/components/react/app/carousel/Carousel";
 export { Button } from "./src/components/react/app/button/Button";
-export { Checkbox } from "./src/components/react/app/checkBox/CheckBox";
 export { Dropdown } from "./src/components/react/app/dropdown/Dropdown";
 export { ImageViewer } from "./src/components/react/app/imageViewer/imageViewer";
 export { ToggleGroup } from "./src/components/react/app/togglegroup/ToggleGroup";

package/package.json

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

package/src/components/react/app/button/Button.d.ts

@@ -6,6 +6,8 @@ interface ButtonProps {
     hoverStyle: JCSSProperties;
     pressStyle: JCSSProperties;
     clickEvent: Function;
+    id: string;
+    className: string;
 }
 export declare let Button: (props: ButtonProps) => h.JSX.Element;
 export {};

package/src/components/react/app/button/Button.js

@@ -9,11 +9,7 @@ var ButtonState;
 export var Button = function (props) {
     var _a;
     var buttonState = (_a = useState(ButtonState.normal), _a[0]), setButtonState = _a[1];
-    return (h("div", { style: buttonState == ButtonState.normal
-            ? props.normalStyle
-            : buttonState == ButtonState.hover
-                ? props.hoverStyle
-                : props.pressStyle, onMouseDown: function () {
+    return (h("div", { style: buttonState == ButtonState.normal ? props.normalStyle : buttonState == ButtonState.hover ? props.hoverStyle : props.pressStyle, onMouseDown: function () {
             setButtonState(ButtonState.press);
         }, onMouseUp: function () {
             setButtonState(ButtonState.hover);
@@ -22,5 +18,5 @@ export var Button = function (props) {
             setButtonState(ButtonState.hover);
         }, onMouseOut: function () {
             setButtonState(ButtonState.normal);
-        } }, props.text));
+        }, id: props.id, className: props.className }, props.text));
 };

package/src/components/react/app/carousel/Carousel.d.ts

@@ -12,9 +12,11 @@ import { h } from 'preact';
  * @param isVertical - 轮播元素滚动方向
  * @param touchable - 是否允许手势切换
  * @param onSlideChange - 切换元素后的回调函数
- * @param onclickEvent - 点击元素的回调函数
+ * @param onClick - 点击元素的回调函数
  */
 export declare function Carousel(props: {
+    id?: string;
+    className?: string;
     cRef?: any;
     children?: preact.JSX.Element[] | HTMLElement[];
     defaultIndex?: number;
@@ -26,5 +28,5 @@ export declare function Carousel(props: {
     isVertical?: boolean;
     touchable?: boolean;
     onSlideChange?: Function | null;
-    onclickEvent?: Function | null;
+    onClick?: Function | null;
 }): h.JSX.Element;

package/src/components/react/app/carousel/Carousel.js

@@ -19,7 +19,7 @@ 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, useImperativeHandle } from '../../../../../lib/preact/hooks/src';
+import { useImperativeHandle, useState, useRef, useMemo, useEffect } from 'preact/hooks';
 // import { memo } from '../../../../../lib/preact/compat/src';
 //组件优化，防止组件的props没有改变但父组件刷新时导致组件刷新
 // export let Carousel = memo(Carouselinner, (prev, next) => {
@@ -58,29 +58,48 @@ import { useState, useEffect, useRef, useMemo, useImperativeHandle } from '../..
  * @param isVertical - 轮播元素滚动方向
  * @param touchable - 是否允许手势切换
  * @param onSlideChange - 切换元素后的回调函数
- * @param onclickEvent - 点击元素的回调函数
+ * @param onClick - 点击元素的回调函数
  */
 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;
+    var _a = props.id, id = _a === void 0 ? '' : _a, _b = props.className, className = _b === void 0 ? '' : _b, _c = props.children, children = _c === void 0 ? [] : _c, _d = props.defaultIndex, defaultIndex = _d === void 0 ? 1 : _d, _e = props.compWidth, compWidth = _e === void 0 ? 100 : _e, _f = props.compHeight, compHeight = _f === void 0 ? 100 : _f, _g = props.autoplay, autoplay = _g === void 0 ? true : _g, _h = props.switchDuration, switchDuration = _h === void 0 ? 3000 : _h, _j = props.loop, loop = _j === void 0 ? true : _j, _k = props.isVertical, isVertical = _k === void 0 ? false : _k, _l = props.touchable, touchable = _l === void 0 ? true : _l, _m = props.onSlideChange, onSlideChange = _m === void 0 ? null : _m, _o = props.onClick, onClick = _o === void 0 ? null : _o;
     // console.log('children', children.length);
+    var safeNext = function () {
+        if (!canClickSwitch.current)
+            return;
+        canClickSwitch.current = false;
+        setTimeout(function () {
+            canClickSwitch.current = true;
+        }, 1000);
+        handleNext();
+    };
+    var safePrev = function () {
+        if (!canClickSwitch.current)
+            return;
+        canClickSwitch.current = false;
+        setTimeout(function () {
+            canClickSwitch.current = true;
+        }, 1000);
+        handlePrev();
+    };
     useImperativeHandle(props.cRef, function () { return ({
-        handleNext: handleNext,
-        handlePrev: handlePrev,
+        handleNext: safeNext,
+        handlePrev: safePrev,
         setShowIndex: setShowIndex,
     }); });
     var duration = switchDuration < 1000 ? 1000 : switchDuration;
-    var _m = useState(defaultIndex), showIndex = _m[0], setShowIndex = _m[1];
+    var _p = useState(defaultIndex), showIndex = _p[0], setShowIndex = _p[1];
     //轮播元素正在滚动
     var isMoving = useRef(false);
     //鼠标手势信息
     var isMouseDown = useRef(false);
     var mouseDownX = useRef(0);
     var mouseDownY = useRef(0);
+    //pixui在 onTransitionEnd 之后马上触发 transform 会丢onTransitionEnd
+    var canClickSwitch = useRef(true);
     var handleNextRef = useRef(function () { });
     var nextInterval = useRef();
-    var _o = useState(true), showTransition = _o[0], setShowTransition = _o[1];
-    var _p = useState([0, 0]), gesteroffset = _p[0], setGesteroffset = _p[1];
-    var _q = useState(''), logTex = _q[0], setLogTex = _q[1];
+    var _q = useState(true), showTransition = _q[0], setShowTransition = _q[1];
+    var _r = useState([0, 0]), gesteroffset = _r[0], setGesteroffset = _r[1];
     var offset = useMemo(function () { return -(isVertical ? compHeight : compWidth) * showIndex; }, [showIndex]);
     var itemBoxStyle = {
         minWidth: compWidth + 'px',
@@ -136,7 +155,6 @@ export function Carousel(props) {
         }
     };
     var handleNext = function () {
-        // console.log('nex', isMoving.current, showIndex, isVertical ? `translate(0px, ${offset}px)` : `translate(${offset}px, 0px)`)
         if (!loop && showIndex == carouselItems.length - 2)
             return;
         if (isMoving.current)
@@ -228,11 +246,11 @@ export function Carousel(props) {
     var gestureClick = function (props) {
         if (isMoving.current)
             return;
-        if (onclickEvent) {
-            onclickEvent(showIndex - 1);
+        if (onClick) {
+            onClick(showIndex - 1);
         }
     };
-    return (h("div", { style: { flexDirection: 'column' } },
+    return (h("div", { style: { flexDirection: 'column', width: compWidth, height: compHeight }, id: id, className: className },
         h("div", { draggable: true, style: __assign(__assign({}, itemBoxStyle), { position: 'absolute' }), onClick: function (ev) {
                 gestureClick(props);
             }, class: 'GestureComp', onDragStart: function (e) {
@@ -254,9 +272,7 @@ export function Carousel(props) {
                         width: isVertical ? compWidth : compWidth * carouselItems.length + 'px',
                         height: isVertical ? compHeight * carouselItems.length : compHeight + 'px',
                         transition: "transform ".concat(showTransition ? '0.5s' : '0s', " ease 0s"),
-                        transform: isVertical
-                            ? "translate(0px, ".concat(offset + gesteroffset[1], "px)")
-                            : "translate(".concat(offset + gesteroffset[0], "px, 0px)"),
+                        transform: isVertical ? "translate(0px, ".concat(offset + gesteroffset[1], "px)") : "translate(".concat(offset + gesteroffset[0], "px, 0px)"),
                         flexDirection: isVertical ? 'column' : 'row',
                         flexShrink: 0,
                     }, class: "wrapper", onTransitionEnd: handleTransitionEnd }, carouselItems.map(function (child) { return child; }))))));

package/src/components/react/app/checkBox/CheckBox.d.ts

@@ -1,7 +1,10 @@
 import { h } from 'preact';
-export declare function Checkbox(props: {
-    selectedChanged: Function | null;
-    defauleSelected: boolean;
-    selectedNode: any;
-    notSelectedNode: any;
+export declare function CheckBox(props: {
+    id?: string;
+    className?: string;
+    selectedChanged?: Function;
+    defauleSelected?: boolean;
+    selectedNode?: any;
+    notSelectedNode?: any;
+    toggleSize?: number;
 }): h.JSX.Element;

package/src/components/react/app/checkBox/CheckBox.js

@@ -1,13 +1,12 @@
 import { h } from 'preact';
-import { useState } from '../../../../../lib/preact/hooks/src';
-export function Checkbox(props) {
-    var _a = props.selectedChanged, selectedChanged = _a === void 0 ? null : _a, _b = props.defauleSelected, defauleSelected = _b === void 0 ? false : _b, _c = props.selectedNode, selectedNode = _c === void 0 ? null : _c, _d = props.notSelectedNode, notSelectedNode = _d === void 0 ? null : _d;
-    var _e = useState(defauleSelected), selected = _e[0], setSelected = _e[1];
-    var cli = function () {
-        if (selectedChanged) {
-            selectedChanged(!selected);
-        }
-        setSelected(!selected);
-    };
-    return h("div", { onClick: cli }, selected ? selectedNode : notSelectedNode);
+import { useState } from 'preact/hooks';
+export function CheckBox(props) {
+    var _a = props.id, id = _a === void 0 ? '' : _a, _b = props.className, className = _b === void 0 ? '' : _b, _c = props.selectedChanged, selectedChanged = _c === void 0 ? null : _c, _d = props.defauleSelected, defauleSelected = _d === void 0 ? false : _d, _e = props.toggleSize, toggleSize = _e === void 0 ? 20 : _e;
+    var _f = useState(defauleSelected), selected = _f[0], setSelected = _f[1];
+    props.selectedNode = props.selectedNode || (h("img", { src: "https://game.gtimg.cn/images/gamelet/cp/pixui-jnResources/check-box.png", style: { width: toggleSize + 'px', height: toggleSize + 'px' } }));
+    props.notSelectedNode = props.notSelectedNode || (h("img", { src: "https://game.gtimg.cn/images/gamelet/cp/pixui-jnResources/blank-check-box.png", style: { width: toggleSize + 'px', height: toggleSize + 'px' } }));
+    return (h("div", { onClick: function () {
+            selectedChanged && selectedChanged(!selected);
+            setSelected(!selected);
+        }, id: id, className: className }, selected ? props.selectedNode : props.notSelectedNode));
 }

package/src/components/react/app/slider/Slider.d.ts

@@ -1,5 +1,7 @@
 import { Component, CSSProperties, h } from 'preact';
 export interface SliderProps {
+    id?: string;
+    className?: string;
     percent?: number;
     wrapperWidth?: number;
     wrapperHeight?: number;

package/src/components/react/app/slider/Slider.js

@@ -40,13 +40,13 @@ var rowCenterCenter = {
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'center',
-    alignItems: 'center'
+    alignItems: 'center',
 };
 var rowBetweenCenter = {
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'space-between',
-    alignItems: 'center'
+    alignItems: 'center',
 };
 export var Slider = /** @class */ (function (_super) {
     __extends(Slider, _super);
@@ -60,9 +60,14 @@ export var Slider = /** @class */ (function (_super) {
         //====================================================================================================
         //事件相关
         _this.onDragStart = function (event) {
-            console.log('【Slider】DragStart event.clientX--' + event.clientX + '-----percent----' + _this.state.percent + '-----currentX----' + (_this.state.percent / 10000 * _this.props.wrapperWidth));
+            console.log('【Slider】DragStart event.clientX--' +
+                event.clientX +
+                '-----percent----' +
+                _this.state.percent +
+                '-----currentX----' +
+                (_this.state.percent / 10000) * _this.props.wrapperWidth);
             _this.lastX = event.clentX;
-            _this.count = _this.state.percent / 10000 * _this.props.wrapperWidth;
+            _this.count = (_this.state.percent / 10000) * _this.props.wrapperWidth;
             _this.setState({
                 onDraging: true,
             });
@@ -71,19 +76,41 @@ export var Slider = /** @class */ (function (_super) {
             }
         };
         _this.onDrag = function (event) {
+            console.log('【Slider】onDrag0 event.clientX--' +
+                event.clientX +
+                '-----percent----' +
+                _this.state.percent +
+                '-----currentX----' +
+                (_this.state.percent / 10000) * _this.props.wrapperWidth +
+                'rect.left' +
+                _this.rect.left +
+                'rect.right' +
+                _this.rect.right);
             if (event.clientX < _this.rect.left - 50 || event.clientX > _this.rect.right + 50)
                 return;
+            console.log('【Slider】onDrag1 event.clientX--' +
+                event.clientX +
+                '-----percent----' +
+                _this.state.percent +
+                '-----currentX----' +
+                (_this.state.percent / 10000) * _this.props.wrapperWidth);
             if (_this.lastX == undefined) {
                 _this.lastX = event.clientX;
                 return;
             }
+            console.log('【Slider】onDrag2 event.clientX--' +
+                event.clientX +
+                '-----percent----' +
+                _this.state.percent +
+                '-----currentX----' +
+                (_this.state.percent / 10000) * _this.props.wrapperWidth);
             var move = Number(event.clientX) - Number(_this.lastX);
             _this.count += move;
             _this.count = Math.min(_this.props.wrapperWidth, _this.count);
             _this.count = Math.max(0, _this.count);
-            var newPercent = _this.count / _this.props.wrapperWidth * 10000;
+            var newPercent = (_this.count / _this.props.wrapperWidth) * 10000;
             if (_this.props.isDiscrete == true) {
-                newPercent = _this.count / _this.props.wrapperWidth * _this.props.maxDiscrete;
+                newPercent = (_this.count / _this.props.wrapperWidth) * _this.props.maxDiscrete;
                 _this.discrete = Math.round(newPercent);
                 if (_this.props.rangeControl) {
                     _this.discrete = Math.min(_this.discrete, _this.props.endRange);
@@ -92,9 +119,16 @@ export var Slider = /** @class */ (function (_super) {
                 newPercent = _this.discrete * (10000 / _this.props.maxDiscrete);
             }
             _this.setState({
-                percent: newPercent
+                percent: newPercent,
             }, function () {
-                console.log('【Slider】OnDrag event.clientX--' + event.clientX + '-----percent----' + _this.state.percent + '-----discrete----' + _this.discrete + '-----currentX----' + (_this.state.percent / 10000 * _this.props.wrapperWidth));
+                console.log('【Slider】OnDrag event.clientX--' +
+                    event.clientX +
+                    '-----percent----' +
+                    _this.state.percent +
+                    '-----discrete----' +
+                    _this.discrete +
+                    '-----currentX----' +
+                    (_this.state.percent / 10000) * _this.props.wrapperWidth);
                 if (_this.props.onDrag)
                     _this.props.onDrag(_this.props.isDiscrete ? _this.discrete : newPercent);
             });
@@ -106,19 +140,31 @@ export var Slider = /** @class */ (function (_super) {
                 //console.log("OnDragEnd -----discrete----"+this.state.discrete)
                 _this.setState({
                     percent: _this.discrete * (10000 / _this.props.maxDiscrete),
-                    onDraging: false
+                    onDraging: false,
                 }, function () {
-                    console.log('【Slider】DragEnd event.clientX--' + event.clientX + '-----percent----' + _this.state.percent + '-----discrete----' + _this.discrete + '-----currentX----' + (_this.state.percent / 10000 * _this.props.wrapperWidth));
+                    console.log('【Slider】DragEnd event.clientX--' +
+                        event.clientX +
+                        '-----percent----' +
+                        _this.state.percent +
+                        '-----discrete----' +
+                        _this.discrete +
+                        '-----currentX----' +
+                        (_this.state.percent / 10000) * _this.props.wrapperWidth);
                     if (_this.props.onDragEnd) {
                         _this.props.onDragEnd(_this.props.isDiscrete ? _this.discrete : _this.state.percent);
                     }
                 });
             }
             else {
-                console.log('【Slider】DragEnd event.clientX--' + event.clientX + '-----percent----' + _this.state.percent + '-----currentX----' + (_this.state.percent / 10000 * _this.props.wrapperWidth));
+                console.log('【Slider】DragEnd event.clientX--' +
+                    event.clientX +
+                    '-----percent----' +
+                    _this.state.percent +
+                    '-----currentX----' +
+                    (_this.state.percent / 10000) * _this.props.wrapperWidth);
                 _this.setState({
-                    percent: _this.count / _this.props.wrapperWidth * 10000,
-                    onDraging: false
+                    percent: (_this.count / _this.props.wrapperWidth) * 10000,
+                    onDraging: false,
                 }, function () {
                     if (_this.props.onDragEnd) {
                         _this.props.onDragEnd(_this.props.isDiscrete ? _this.discrete : _this.state.percent);
@@ -136,7 +182,7 @@ export var Slider = /** @class */ (function (_super) {
                     }
                     var newPercent = _this.discrete * (10000 / _this.props.maxDiscrete);
                     _this.setState({
-                        percent: newPercent
+                        percent: newPercent,
                     }, function () {
                         if (_this.props.onDecClick) {
                             _this.props.onDecClick(_this.discrete);
@@ -148,7 +194,7 @@ export var Slider = /** @class */ (function (_super) {
             else {
                 if (_this.state.percent > 0) {
                     _this.setState({
-                        percent: _this.state.percent - 1
+                        percent: _this.state.percent - 1,
                     }, function () {
                         if (_this.props.onDecClick) {
                             _this.props.onDecClick(_this.state.percent);
@@ -168,7 +214,7 @@ export var Slider = /** @class */ (function (_super) {
                     var newPercent = _this.discrete * (10000 / _this.props.maxDiscrete);
                     _this.setState({
                         // discrete: this.state.discrete + 1,
-                        percent: newPercent
+                        percent: newPercent,
                     }, function () {
                         if (_this.props.onIncClick) {
                             _this.props.onIncClick(_this.discrete);
@@ -180,7 +226,7 @@ export var Slider = /** @class */ (function (_super) {
             else {
                 if (_this.state.percent < 10000) {
                     _this.setState({
-                        percent: _this.state.percent + 1
+                        percent: _this.state.percent + 1,
                     }, function () {
                         if (_this.props.onIncClick) {
                             _this.props.onIncClick(_this.state.percent);
@@ -204,27 +250,25 @@ export var Slider = /** @class */ (function (_super) {
                 display: 'flex',
                 flexDirection: 'row',
                 justifyContent: 'start',
-                alignItems: 'center'
+                alignItems: 'center',
             };
             return outerStyle;
         };
         _this.innerStyle = function () {
             var innerStyle = {
                 // width: innerWidth,
-                height: (_this.props.innerHeight != null) ? _this.props.innerHeight + 'px' : '100%',
+                height: _this.props.innerHeight != null ? _this.props.innerHeight + 'px' : '100%',
                 backgroundImage: "url(".concat(_this.props.innerBg, ")"),
                 backgroundSize: '100% 100%',
                 display: 'flex',
                 flexDirection: 'row',
                 justifyContent: 'start',
-                alignItems: 'center'
+                alignItems: 'center',
             };
             return innerStyle;
         };
         _this.dotWrapperStyle = function () {
-            var dotWrapperStyle = __assign({ position: 'absolute', width: _this.props.dotWrapperWidth + 'px', height: _this.props.dotWrapperHeight + 'px' }, rowCenterCenter
-            // backgroundColor: '#FF000066'
-            );
+            var dotWrapperStyle = __assign({ position: 'absolute', width: _this.props.dotWrapperWidth + 'px', height: _this.props.dotWrapperHeight + 'px' }, rowCenterCenter);
             return dotWrapperStyle;
         };
         _this.dotStyle = function () {
@@ -282,8 +326,7 @@ export var Slider = /** @class */ (function (_super) {
         var _a = this.props, percent = _a.percent, discrete = _a.discrete, styleProps = __rest(_a, ["percent", "discrete"]);
         var nextPercent = nextProps.percent, nextDiscrete = nextProps.discrete, nextstyleProps = __rest(nextProps, ["percent", "discrete"]);
         //拖动状态时，忽略外部传入的percent值，优先用户拖动
-        var shouldUpdatePercent = !(this.state.onDraging) &&
-            !(percent == nextPercent && discrete == nextDiscrete);
+        var shouldUpdatePercent = !this.state.onDraging && !(percent == nextPercent && discrete == nextDiscrete);
         console.log('检查shouldUpdatePercent', shouldUpdatePercent);
         if (shouldUpdatePercent) {
             //如果从外部传入percent/discrete，则组件可根据新props来更新滑动条位置
@@ -291,7 +334,7 @@ export var Slider = /** @class */ (function (_super) {
             if (this.props.isDiscrete == true) {
                 this.discrete = nextProps.discrete;
                 this.setState({
-                    percent: this.discrete * (10000 / this.props.maxDiscrete)
+                    percent: this.discrete * (10000 / this.props.maxDiscrete),
                 });
             }
             //连续情况
@@ -318,8 +361,8 @@ export var Slider = /** @class */ (function (_super) {
     Slider.prototype.render = function () {
         var hasDot = this.props.hasDot === undefined || this.props.hasDot === true;
         var innerWidth = Math.floor(this.state.percent / 100) + '%';
-        var dotWrapperMarginLeft = (this.props.wrapperWidth * this.state.percent / 10000 - this.props.dotWrapperWidth / 2) + 'px';
-        return (h("div", { style: this.props.hasIncDecButton ? this.state.withButtonStyle : {} },
+        var dotWrapperMarginLeft = (this.props.wrapperWidth * this.state.percent) / 10000 - this.props.dotWrapperWidth / 2 + 'px';
+        return (h("div", { style: this.props.hasIncDecButton ? this.state.withButtonStyle : {}, id: this.props.id, className: this.props.className },
             this.props.hasIncDecButton && h("img", { src: this.props.decButtonBg, style: this.state.decButtonStyle, onClick: this.onDecClick }),
             h("div", { ref: this.refWrapper, style: this.state.wrapperStyle },
                 h("div", { style: this.state.outerStyle },