pixuireactcomponents 1.4.13 → 1.5.1

package/index.d.ts

@@ -1,9 +1,9 @@
 export { Carousel } from "./src/components/react/app/carousel/Carousel";
+export { CarouselMulti } from "./src/components/react/app/carouselMulti/CarouselMulti";
 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";
 export { VideoPlayer } from "./src/components/react/app/videoPlayer/VideoPlayer";
 export { WheelPicker } from "./src/components/react/app/wheelPicker/WheelPicker";
 export { ScratchCard } from "./src/components/react/app/scratchCard/ScratchCard";

package/index.js

@@ -1,11 +1,13 @@
 // Description: This file is the entry point for the library. It exports all the components.
 export { Carousel } from './src/components/react/app/carousel/Carousel';
+export { CarouselMulti } from './src/components/react/app/carouselMulti/CarouselMulti';
 export { Button } from './src/components/react/app/button/Button';
 export { CheckBox } from './src/components/react/app/checkBox/CheckBox';
+import { CheckBoxGroup } from './src/components/react/app/checkBox/CheckBoxGroup';
 export { DropDown } from './src/components/react/app/dropDown/DropDown';
 export { ImageViewer } from './src/components/react/app/imageViewer/imageViewer';
 export { Slider } from './src/components/react/app/slider/Slider';
-export { ToggleGroup } from './src/components/react/app/togglegroup/ToggleGroup';
+// export { ToggleGroup } from './src/components/react/app/togglegroup/ToggleGroup';
 export { VideoPlayer } from './src/components/react/app/videoPlayer/VideoPlayer';
 export { WheelPicker } from './src/components/react/app/wheelPicker/WheelPicker';
 export { ScratchCard } from './src/components/react/app/scratchCard/ScratchCard';

package/package.json

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

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

@@ -4,6 +4,7 @@ interface ButtonProps {
     rootClassName?: string;
     text: string;
     onClick: Function;
+    disabled?: boolean;
 }
 export declare let Button: (props: ButtonProps) => h.JSX.Element;
 export {};

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

@@ -1,5 +1,34 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { h } from 'preact';
 import { useState } from 'preact/hooks';
+var defaultButtonStyle = {
+    padding: '0px 15px',
+    height: '32px',
+    border: '1px solid transparent',
+    borderRadius: '5px',
+    backgroundColor: '#1677E1',
+    color: 'white',
+    cursor: 'pointer',
+    transition: 'all 0.3s',
+    display: 'flex',
+    flexDirection: 'column',
+    fontSize: '14px',
+    textAlign: 'center',
+    justifyContent: 'center'
+};
+var defaultHoverStyle = __assign(__assign({}, defaultButtonStyle), { backgroundColor: '#4096ff', borderColor: '#4096ff' });
+var defaultClickStyle = __assign(__assign({}, defaultButtonStyle), { backgroundColor: '#1677E1', borderColor: '#1677E1' });
+var defaultDisabledStyle = __assign(__assign({}, defaultButtonStyle), { backgroundColor: '#F5F5F5', borderColor: '#d9d9d9', color: '#D2D2D2' });
 var ButtonState;
 (function (ButtonState) {
     ButtonState[ButtonState["normal"] = 0] = "normal";
@@ -9,14 +38,41 @@ var ButtonState;
 export var Button = function (props) {
     var _a;
     var buttonState = (_a = useState(ButtonState.normal), _a[0]), setButtonState = _a[1];
+    var getStyle = function () {
+        if (props.disabled) {
+            return defaultDisabledStyle;
+        }
+        else {
+            switch (buttonState) {
+                case ButtonState.normal:
+                    return defaultButtonStyle;
+                case ButtonState.hover:
+                    return defaultHoverStyle;
+                case ButtonState.press:
+                    return defaultClickStyle;
+            }
+        }
+    };
     return (h("div", { onMouseDown: function () {
+            if (props.disabled) {
+                return;
+            }
             setButtonState(ButtonState.press);
         }, onMouseUp: function () {
+            if (props.disabled) {
+                return;
+            }
             setButtonState(ButtonState.hover);
             props.onClick();
         }, onMouseOver: function () {
+            if (props.disabled) {
+                return;
+            }
             setButtonState(ButtonState.hover);
         }, onMouseOut: function () {
+            if (props.disabled) {
+                return;
+            }
             setButtonState(ButtonState.normal);
-        }, id: props.rootId, className: props.rootClassName + ' ' + ButtonState[buttonState] }, props.text));
+        }, id: props.rootId, className: props.rootClassName + ' ' + ButtonState[buttonState], style: getStyle() }, props.text));
 };

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

@@ -20,7 +20,7 @@ export declare function Carousel(props: {
     rootId?: string;
     rootClassName?: string;
     cRef?: any;
-    children?: preact.JSX.Element[] | HTMLElement[];
+    children?: h.JSX.Element[] | HTMLElement[];
     defaultIndex?: number;
     compWidth?: number;
     compHeight?: number;
@@ -29,7 +29,7 @@ export declare function Carousel(props: {
     loop?: boolean;
     isVertical?: boolean;
     touchable?: boolean;
-    onSlideChange?: Function | null;
-    onClick?: Function | null;
+    onSlideChange?: (index: number) => void;
+    onClick?: (index: number) => void;
     touchSwitchDistance?: number;
 }): h.JSX.Element;

package/src/components/react/app/carouselMulti/CarouselMulti.d.ts

@@ -2,16 +2,14 @@ import { h } from 'preact';
 export declare let CarouselMulti: (props: {
     rootId?: string | undefined;
     rootClassName?: string | undefined;
+    cRef?: any;
+    children: h.JSX.Element[];
     extShowCount: number;
-    extShowDist: {
-        num: number;
-        unit: 'px' | '%' | 'rem';
-    };
+    extShowDist: number;
     animationTime?: number | undefined;
     maxScale?: number | undefined;
     minOpacity?: number | undefined;
+    touchable?: boolean | undefined;
     onClick?: ((index: number) => void) | undefined;
-    onIndexChange?: ((index: number) => void) | undefined;
-    cRef?: any;
-    children: h.JSX.Element[];
+    onSlideChange?: ((index: number) => void) | undefined;
 }) => h.JSX.Element | null;

package/src/components/react/app/carouselMulti/CarouselMulti.js

@@ -1,10 +1,21 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { h } from 'preact';
 import { useImperativeHandle, useState, useRef, useEffect } from 'preact/hooks';
 export var CarouselMulti = function (props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    var extShowCount = props.extShowCount, extShowDist = props.extShowDist, rootId = (_a = props.rootId, _a === void 0 ? '' : _a), rootClassName = (_b = props.rootClassName, _b === void 0 ? '' : _b), animationTime = (_c = props.animationTime, _c === void 0 ? 500 : _c), maxScale = (_d = props.maxScale, _d === void 0 ? 1.5 : _d), minOpacity = (_e = props.minOpacity, _e === void 0 ? 0.5 : _e), onClick = props.onClick, 
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var extShowCount = props.extShowCount, extShowDist = props.extShowDist, rootId = (_a = props.rootId, _a === void 0 ? '' : _a), rootClassName = (_b = props.rootClassName, _b === void 0 ? '' : _b), animationTime = (_c = props.animationTime, _c === void 0 ? 500 : _c), maxScale = (_d = props.maxScale, _d === void 0 ? 1.5 : _d), minOpacity = (_e = props.minOpacity, _e === void 0 ? 0.5 : _e), touchable = (_f = props.touchable, _f === void 0 ? true : _f), onClick = props.onClick, 
     // fillAndLoop = true,
-    onIndexChange = props.onIndexChange;
+    onSlideChange = props.onSlideChange;
     //元素不足extShowCount*2+3时，复制原数组到可以播放动画的长度
     var children = (function () {
         var preChildren = props.children;
@@ -18,59 +29,67 @@ export var CarouselMulti = function (props) {
         // }
         return preChildren;
     })();
-    var onload = (_f = useState(false), _f[0]), setOnload = _f[1];
-    var zIndexArr = (_g = useState(Array.from({ length: children.length }).map(function () { return 0; })), _g[0]), setZIndexArr = _g[1];
-    var opacitiyArr = (_h = useState(Array.from({ length: children.length }).map(function () { return 0; })), _h[0]), setOpacitiyArr = _h[1];
-    var showIndex = (_j = useState(Math.floor((props.children.length - 1) / 2)), _j[0]), setShowIndex = _j[1];
-    //用于填入 style 的距离
-    var getDist = function (num) {
-        return num + extShowDist.unit;
-    };
+    var rootSize = (_g = useState({ width: 0, height: 0 }), _g[0]), setRootSize = _g[1];
+    var firstChildRef = useRef(null);
+    var onload = (_h = useState(false), _h[0]), setOnload = _h[1];
+    var zIndexArr = (_j = useState(Array.from({ length: children.length }).map(function () { return 0; })), _j[0]), setZIndexArr = _j[1];
+    var opacitiyArr = (_k = useState(Array.from({ length: children.length }).map(function () { return 0; })), _k[0]), setOpacitiyArr = _k[1];
+    var showIndex = (_l = useState(Math.floor((props.children.length - 1) / 2)), _l[0]), setShowIndex = _l[1];
     var dragX = useRef(0);
     var isDraging = useRef(false);
     var getMinDist = function (_index, _showindex) { return Math.min(Math.abs(_index - _showindex), children.length - Math.abs(_index - _showindex)); };
-    var getLeft = function (index) {
+    var getTrueIndex = function (index, minDist) {
         //计算元素的left，间隔为extShowDist.num，以showIndex为中心，左右两边各显示extShowCount个元素，余下的元素按数组首尾相接的顺序计算 zindex
-        var left = -1;
-        var minDist = getMinDist(index, showIndex);
+        var trueIndex = -1;
         if (index == showIndex) {
-            left = extShowCount;
+            trueIndex = extShowCount;
         }
         else if (minDist <= extShowCount) {
             //需要展示
             if (index < showIndex) {
                 if (Math.abs(index - showIndex) <= extShowCount) {
                     //没跨边界
-                    left = extShowCount - minDist;
+                    trueIndex = extShowCount - minDist;
                 }
                 else {
-                    left = extShowCount + minDist;
+                    trueIndex = extShowCount + minDist;
                 }
             }
             else if (index > showIndex) {
                 if (Math.abs(index - showIndex) <= extShowCount) {
                     //没跨边界
-                    left = extShowCount + minDist;
+                    trueIndex = extShowCount + minDist;
                 }
                 else {
-                    left = extShowCount - minDist;
+                    trueIndex = extShowCount - minDist;
                 }
             }
         }
         else {
             //盖在下面的元素，计算放到哪边
             if (Math.abs(index - showIndex + children.length) % children.length <= Math.abs(showIndex - index + children.length) % children.length) {
-                left = extShowCount * 2;
+                trueIndex = extShowCount * 2 + 1;
             }
             else {
-                left = 0;
+                trueIndex = -1;
             }
         }
-        return left * extShowDist.num;
+        return trueIndex;
+    };
+    var getStyle = function (index) {
+        var style = { transform: '' };
+        var minDist = getMinDist(index, showIndex);
+        var trueIndex = getTrueIndex(index, minDist);
+        var transformLeft = trueIndex * extShowDist + 'px';
+        var topScale = maxScale;
+        var baseScale = 1;
+        var transformScale = Math.max(baseScale + ((topScale - baseScale) * (extShowCount - minDist)) / extShowCount, baseScale);
+        style.transform = "translate(".concat(transformLeft, ",0) scale(").concat(transformScale, ")");
+        return style;
     };
     var onTransitionEnd = function (ev) { };
     useEffect(function () {
-        onIndexChange && onIndexChange(showIndex);
+        onSlideChange && onSlideChange(showIndex);
     }, [showIndex]);
     useImperativeHandle(props.cRef, function () { return ({
         switchNext: function () {
@@ -90,12 +109,14 @@ export var CarouselMulti = function (props) {
         var topOpacity = 1;
         var baseOpacity = minOpacity;
         //getMinDist越大，越靠近中间，透明度越高
-        return Math.max(baseOpacity + ((topOpacity - baseOpacity) * (extShowCount - getMinDist(index, showIndex))) / extShowCount, baseOpacity);
-    };
-    var getScale = function (index) {
-        var topScale = maxScale;
-        var baseScale = 1;
-        return Math.max(baseScale + ((topScale - baseScale) * (extShowCount - getMinDist(index, showIndex))) / extShowCount, baseScale);
+        var minDist = getMinDist(index, showIndex);
+        if (minDist <= extShowCount) {
+            return Math.max(baseOpacity + ((topOpacity - baseOpacity) * (extShowCount - minDist)) / extShowCount, baseOpacity);
+        }
+        else {
+            // 不在可视区的情况下透明度调为0
+            return 0;
+        }
     };
     useEffect(function () {
         if (children.length == 0) {
@@ -116,9 +137,11 @@ export var CarouselMulti = function (props) {
         children.forEach(function (_, _index) {
             newOpacityArr[_index] = getOpacity(index, _index);
         });
+        console.log("newOpacityArr, ", newOpacityArr);
         setOpacitiyArr(newOpacityArr);
     };
     var changeShowIndex = function (index) {
+        console.log('changeShowIndex: ', index, showIndex);
         if (index >= 0 && index < children.length) {
             setShowIndex(index);
             setTimeout(function () {
@@ -126,8 +149,19 @@ export var CarouselMulti = function (props) {
             }, animationTime * 0.4);
         }
     };
-    return onload ? (h("div", { id: rootId, className: rootClassName, style: { flexDirection: 'column' }, onDrag: function (ev) {
-            if (!isDraging.current) {
+    // 获取第一个子元素宽高来设置父元素的可见区
+    useEffect(function () {
+        var _a;
+        if (firstChildRef.current) {
+            var clientWidth = (_a = firstChildRef.current, _a.clientWidth), clientHeight = _a.clientHeight;
+            var rootHeight = clientHeight * maxScale;
+            var rootWidth = clientWidth + extShowDist * extShowCount * 2;
+            console.log('rootSizepx: ', rootWidth, rootHeight);
+            setRootSize({ width: rootWidth, height: rootHeight });
+        }
+    }, [onload]);
+    return onload ? (h("div", { id: rootId, className: rootClassName, style: { display: 'flex', flexDirection: 'column', overflow: 'hidden', justifyContent: 'center', width: "".concat(rootSize.width, "px"), height: "".concat(rootSize.height, "px") }, onDrag: function (ev) {
+            if (!isDraging.current || !touchable) {
                 return;
             }
             //在外层接受 drag 事件，触发切换动作
@@ -147,23 +181,14 @@ export var CarouselMulti = function (props) {
         }, onDragEnd: function (ev) {
             isDraging.current = false;
         }, draggable: true }, children.map(function (child, index) {
-        return (h("div", { ref: function (ele) {
-                if (ele) {
-                    //绕过 pixui 初始化设置zIndex 和 opcity 后 transform 错误的问题
-                    // ele.style.transform = `translate(${getDist(getLeft(index) + 1)},0rem) scale(${getScale(index)})`;
-                    ele.style.transition = "transform ".concat(animationTime, "ms");
-                }
-            }, 
+        return (h("div", { ref: index === 0 ? firstChildRef : undefined, 
             /**
              * child数组首尾相接，拼成一个环，除了显示的 extShowCount*2+1 个元素，其余元素分别放到最左和最右，按离中间元素的距离计算 zindex 和 scale
              * 用getLeft函数统一计算每个元素当前的left值，pixui 不支持zIndex和opacity动画，直接在播放过程中setstate改变元素的zIndex和opacity值
              */
-            style: {
-                position: 'absolute',
-                transform: "translate(".concat(getDist(getLeft(index)), ",0px) scale(").concat(getScale(index), ")"),
-                zIndex: zIndexArr[index] || 0,
-                opacity: opacitiyArr[index] || 1,
-            }, onClick: function (ev) {
+            style: __assign({ position: 'absolute', zIndex: zIndexArr[index] || 0, opacity: opacitiyArr[index] !== undefined ? opacitiyArr[index] : 1, transition: "transform ".concat(animationTime, "ms") }, getStyle(index)), onClick: function (ev) {
+                if (!touchable)
+                    return;
                 changeShowIndex(index);
                 onClick && onClick(index);
                 ev.stopPropagation();

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

@@ -1,10 +1,19 @@
-import { h } from 'preact';
-export declare function CheckBox(props: {
+import { CSSProperties, h } from 'preact';
+export interface checkboxElement {
+    checkmarkStyle?: string | CSSProperties;
+    checkmarkCheckedStyle?: string | CSSProperties;
+    checkmarkAfterStyle?: string | CSSProperties;
+    checkmarkAfterCheckedStyle?: string | CSSProperties;
+    disabledStyle?: string | CSSProperties;
+}
+export interface CheckBoxProps {
     rootId?: string;
     rootClassName?: string;
-    onSelected?: (selected: boolean) => void;
-    defauleSelected?: boolean;
-    toggleSize?: number;
-    content?: string;
-    contentClassName?: string;
-}): h.JSX.Element;
+    defaultChecked?: boolean;
+    checked?: boolean;
+    disabled?: boolean;
+    onChange?: (checked: boolean) => void;
+    element?: checkboxElement;
+    children?: h.JSX.Element;
+}
+export declare const CheckBox: (props: CheckBoxProps) => h.JSX.Element;

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

@@ -1,14 +1,97 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { h } from 'preact';
-import { useState } from 'preact/hooks';
-export function CheckBox(props) {
-    var _a = props.rootId, rootId = _a === void 0 ? '' : _a, _b = props.rootClassName, rootClassName = _b === void 0 ? '' : _b, _c = props.onSelected, onSelected = _c === void 0 ? null : _c, _d = props.defauleSelected, defauleSelected = _d === void 0 ? false : _d, _e = props.toggleSize, toggleSize = _e === void 0 ? 20 : _e, _f = props.content, content = _f === void 0 ? '' : _f, contentClassName = props.contentClassName;
-    var _g = useState(defauleSelected), selected = _g[0], setSelected = _g[1];
-    var selectedNode = (h("img", { src: "https://game.gtimg.cn/images/gamelet/cp/pixui-jnResources/check-box.png", style: { width: toggleSize + 'px', height: toggleSize + 'px' } }));
-    var notSelectedNode = (h("img", { src: "https://game.gtimg.cn/images/gamelet/cp/pixui-jnResources/blank-check-box.png", style: { width: toggleSize + 'px', height: toggleSize + 'px' } }));
+import { useEffect, useState } from 'preact/hooks';
+var checkmarkStyle = {
+    position: 'relative',
+    height: '20px',
+    width: '20px',
+    backgroundColor: '#fff',
+    border: '2px solid #d9d9d9',
+    borderRadius: '4px',
+};
+var checkmarkCheckedStyle = __assign(__assign({}, checkmarkStyle), { backgroundColor: '#1890ff', border: '2px solid #1890ff' });
+var checkmarkAfterStyle = {
+    position: 'absolute',
+    display: 'none',
+};
+var checkmarkAfterCheckedStyle = __assign(__assign({}, checkmarkAfterStyle), { display: 'block', top: '-2px', width: '18px', height: '18px', backgroundImage: 'url(https://game.gtimg.cn/images/gamelet/cp/pixui-components/check.png)', backgroundSize: '100% 100%' });
+var disabledStyle = __assign(__assign({}, checkmarkStyle), { backgroundColor: 'rgba(0, 0, 0, 0.04)', border: '2px solid #d9d9d9' });
+export var CheckBox = function (props) {
+    var rootId = props.rootId, rootClassName = props.rootClassName, _a = props.defaultChecked, defaultChecked = _a === void 0 ? false : _a, onChange = props.onChange, element = props.element, children = props.children;
+    var getElementStyleOrClass = function () {
+        if (element == undefined) {
+            return {
+                checkmarkStyle: checkmarkStyle,
+                checkmarkCheckedStyle: checkmarkCheckedStyle,
+                checkmarkAfterStyle: checkmarkAfterStyle,
+                checkmarkAfterCheckedStyle: checkmarkAfterCheckedStyle,
+                disabledStyle: disabledStyle
+            };
+        }
+        else {
+            return element;
+        }
+    };
+    var _b = useState(defaultChecked), nowChecked = _b[0], setNowChecked = _b[1];
+    var _c = useState(false), nowDisabled = _c[0], setNowDisabled = _c[1];
+    useEffect(function () {
+        if (nowDisabled) {
+            return;
+        }
+        setNowChecked(props.checked);
+    }, [props.checked]);
+    useEffect(function () {
+        setNowDisabled(props.disabled);
+    }, [props.disabled]);
+    var elementStyleOrClass = getElementStyleOrClass();
+    var getClassName = function () {
+        if (nowDisabled) {
+            return typeof elementStyleOrClass.disabledStyle === 'string' ? elementStyleOrClass.disabledStyle : '';
+        }
+        if (nowChecked) {
+            return typeof elementStyleOrClass.checkmarkCheckedStyle === 'string' ? elementStyleOrClass.checkmarkCheckedStyle : '';
+        }
+        return typeof elementStyleOrClass.checkmarkStyle === 'string' ? elementStyleOrClass.checkmarkStyle : '';
+    };
+    var getStyle = function () {
+        if (nowDisabled) {
+            return typeof elementStyleOrClass.disabledStyle === 'object' ? elementStyleOrClass.disabledStyle : undefined;
+        }
+        if (nowChecked) {
+            return typeof elementStyleOrClass.checkmarkCheckedStyle === 'object' ? elementStyleOrClass.checkmarkCheckedStyle : undefined;
+        }
+        return typeof elementStyleOrClass.checkmarkStyle === 'object' ? elementStyleOrClass.checkmarkStyle : undefined;
+    };
+    var getCheckmaskClassName = function () {
+        if (nowChecked) {
+            return typeof elementStyleOrClass.checkmarkAfterCheckedStyle === 'string' ? elementStyleOrClass.checkmarkAfterCheckedStyle : '';
+        }
+        return typeof elementStyleOrClass.checkmarkAfterStyle === 'string' ? elementStyleOrClass.checkmarkAfterStyle : '';
+    };
+    var getCheckmarkStyle = function () {
+        if (nowChecked) {
+            return typeof elementStyleOrClass.checkmarkAfterCheckedStyle === 'object' ? elementStyleOrClass.checkmarkAfterCheckedStyle : undefined;
+        }
+        return typeof elementStyleOrClass.checkmarkAfterStyle === 'object' ? elementStyleOrClass.checkmarkAfterStyle : undefined;
+    };
     return (h("div", { onClick: function () {
-            onSelected && onSelected(!selected);
-            setSelected(!selected);
-        }, id: rootId, className: rootClassName + ' ' + (selected ? 'selected' : 'not-selected'), style: { display: 'flex', flexdirection: 'row' } },
-        selected ? selectedNode : notSelectedNode,
-        h("div", { className: contentClassName, style: { flexShrink: 0 } }, content)));
-}
+            if (nowDisabled) {
+                return;
+            }
+            onChange && onChange(!nowChecked);
+            setNowChecked(!nowChecked);
+        }, id: rootId, className: rootClassName },
+        h("div", { className: getClassName(), style: __assign({ display: 'flex' }, getStyle()) },
+            h("div", { className: getCheckmaskClassName(), style: getCheckmarkStyle() }),
+            children)));
+};

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

@@ -0,0 +1,19 @@
+import { h } from 'preact';
+import { checkboxElement } from './CheckBox';
+export interface checkBoxOption {
+    label?: h.JSX.Element;
+    value: string;
+    disabled?: boolean;
+}
+export interface CheckBoxGroupProps {
+    rootId?: string;
+    rootClassName?: string;
+    defaultValue?: string[];
+    value?: string[];
+    disabled?: boolean;
+    onChange?: (value: string[]) => void;
+    options: checkBoxOption[];
+    checkedOptionNum?: number;
+    element?: checkboxElement;
+}
+export declare const CheckBoxGroup: (props: CheckBoxGroupProps) => h.JSX.Element;

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

@@ -0,0 +1,56 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { h } from 'preact';
+import { useEffect, useState } from 'preact/hooks';
+import { CheckBox } from './CheckBox';
+export var CheckBoxGroup = function (props) {
+    var rootId = props.rootId, rootClassName = props.rootClassName, _a = props.defaultValue, defaultValue = _a === void 0 ? [] : _a, onChange = props.onChange, element = props.element, options = props.options, _b = props.checkedOptionNum, checkedOptionNum = _b === void 0 ? options.length : _b;
+    var _c = useState(defaultValue), checkedValueList = _c[0], setCheckedValueList = _c[1];
+    var _d = useState(false), nowDisabled = _d[0], setNowDisabled = _d[1];
+    useEffect(function () {
+        if (nowDisabled) {
+            return;
+        }
+        if (props.value) {
+            if (props.value.length < checkedOptionNum) {
+                setCheckedValueList(props.value);
+            }
+        }
+    }, [props.value]);
+    useEffect(function () {
+        setNowDisabled(props.disabled);
+    }, [props.disabled]);
+    var setCurrentCheckedValue = function (value, isChecked) {
+        var oldCheckedValueList = __spreadArray([], checkedValueList, true);
+        if (oldCheckedValueList) {
+            var index = oldCheckedValueList.findIndex(function (checkedValue) { return checkedValue === value; });
+            if (index !== -1) {
+                if (!isChecked) {
+                    oldCheckedValueList === null || oldCheckedValueList === void 0 ? void 0 : oldCheckedValueList.splice(index, 1);
+                    setCheckedValueList(oldCheckedValueList);
+                    onChange && onChange(oldCheckedValueList);
+                }
+            }
+            else {
+                if (isChecked) {
+                    if (oldCheckedValueList.length >= checkedOptionNum) {
+                        oldCheckedValueList.splice(0, 1);
+                    }
+                    oldCheckedValueList.push(value);
+                    setCheckedValueList(oldCheckedValueList);
+                    onChange && onChange(oldCheckedValueList);
+                }
+            }
+        }
+    };
+    return (h("div", { id: rootId, className: rootClassName }, options.map(function (option, index) {
+        return (h(CheckBox, { checked: checkedValueList.includes(option.value), disabled: option.disabled, onChange: function (isChecked) { setCurrentCheckedValue(option.value, isChecked); }, element: element }, option.label));
+    })));
+};

package/src/components/react/app/dropDown/DropDown.d.ts

@@ -1,25 +1,18 @@
-import { h } from 'preact';
-/**
- *
- * @param rootId  根节点id
- * @param rootClassName 根节点className
- * @param spreadFrameClassName 展开框className
- * @param mainItemClassName 标题项className
- * @param itemClassName 选项className
- * @param mainContent 标题项内容
- * @param itemContent 选项内容
- * @param onClick 点击选项回调
- * @param onSpread 展开收缩回调
- */
-export declare let DropDown: (props: {
-    rootId?: string | undefined;
-    rootClassName?: string | undefined;
-    spreadFrameClassName?: string | undefined;
-    mainItemClassName?: string | undefined;
-    itemClassName?: string | undefined;
-    mainContent: string;
-    itemContent: string[];
-    onClick?: ((index: number) => void) | undefined;
-    onSpread?: ((spread: boolean) => void) | undefined;
-    compRef?: any;
-}) => h.JSX.Element;
+import preact, { CSSProperties, h } from 'preact';
+export interface dropDownOption {
+    value: string;
+    label?: h.JSX.Element;
+}
+export interface dropdownElement {
+    dropdownBg?: string | CSSProperties;
+}
+export interface DropDownProps {
+    rootId?: string;
+    rootClassName?: string;
+    options: dropDownOption[];
+    element?: dropdownElement;
+    children?: h.JSX.Element;
+    onChange?: (value: string) => void;
+    onSpread?: (spread: boolean) => void;
+}
+export declare const DropDown: (props: DropDownProps) => preact.JSX.Element;