pixuireactcomponents 1.3.18 → 1.3.20

package/index.d.ts

@@ -4,6 +4,7 @@ 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 { Slider } from "./src/components/react/app/slider/Slider";
+export { ToggleGroup } from "./src/components/react/app/togglegroup/ToggleGroup";
 export { GradientText } from "./src/components/react/base/gradient/GradientText";
 export { PVideo } from "./src/components/react/base/pixVideo/PixVideo";
 export { OutlineText } from "./src/components/react/base/outlinetext/OutlineText";

package/index.js

@@ -5,6 +5,7 @@ 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 { Slider } from './src/components/react/app/slider/Slider';
+export { ToggleGroup } from './src/components/react/app/togglegroup/ToggleGroup';
 export { GradientText } from './src/components/react/base/gradient/GradientText';
 export { PVideo } from './src/components/react/base/pixVideo/PixVideo';
 export { OutlineText } from './src/components/react/base/outlinetext/OutlineText';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "pixuireactcomponents",
-    "version": "1.3.18",
+    "version": "1.3.20",
     "description": "pixui react components",
     "main": "index.js",
     "scripts": {
@@ -9,8 +9,6 @@
     "author": "hardenzheng",
     "license": "ISC",
     "dependencies": {
-        "@improbable-eng/grpc-web": "^0.12.0",
-        "@tencent/pandora-sdk-utils": "^1.0.0",
         "animate.css": "^3.7.2",
         "babel-plugin-transform-decorators-legacy": "^1.3.5",
         "gamelet-pixui-frame": "0.4.7",
@@ -19,7 +17,6 @@
         "gsap": "^3.2.6",
         "mobx": "^5.10.1",
         "mobx-react": "^6.2.2",
-        "pixui-tester": "^1.0.10",
         "preact": "^10.4.0",
         "prebuild-webpack-plugin": "^1.1.1",
         "react-virtualized": "^9.21.2",

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

@@ -1,21 +1,11 @@
-import { h, Component } from 'preact';
-interface ButtonInfo {
-    buttonPic: string;
-    buttonText: string;
-    width: number;
-    height: number;
-    fontSize: number;
-}
+import { JCSSProperties } from 'lib/preact/src/jsx';
+import { h } from 'preact';
 interface ButtonProps {
-    picNormal: ButtonInfo;
-    picPress: ButtonInfo;
-    picHover: ButtonInfo;
-    [key: string]: any;
-}
-export declare class Button extends Component<ButtonProps, any> {
-    private btnImg;
-    private btnText;
-    private buttonStateChange;
-    render(props: any): h.JSX.Element;
+    text: string;
+    normalStyle: JCSSProperties;
+    hoverStyle: JCSSProperties;
+    pressStyle: JCSSProperties;
+    clickEvent: Function;
 }
+export declare let Button: (props: ButtonProps) => h.JSX.Element;
 export {};

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

@@ -1,71 +1,28 @@
-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 Button = /** @class */ (function (_super) {
-    __extends(Button, _super);
-    function Button() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.btnImg = null;
-        _this.btnText = null;
-        _this.buttonStateChange = function (picState) {
-            if (!_this.btnImg) {
-                return;
-            }
-            _this.btnImg.src = picState.buttonPic;
-            _this.btnImg.style.width = "".concat(picState.width, "px");
-            _this.btnImg.style.height = "".concat(picState.height, "px");
-            if (!_this.btnText) {
-                return;
-            }
-            _this.btnText.textContent = picState.buttonText;
-            _this.btnText.style.fontSize = "".concat(picState.fontSize, "px");
-        };
-        return _this;
-    }
-    Button.prototype.render = function (props) {
-        var _this = this;
-        return (<div style={{ alignItems: 'center', justifyContent: 'center' }} onClick={function () {
-                var _a;
-                if (_this.props.clickEvent) {
-                    if (_this.props.clickArr) {
-                        (_a = _this.props).clickEvent.apply(_a, props.clickArr);
-                    }
-                    else {
-                        _this.props.clickEvent();
-                    }
-                }
-            }} onMouseDown={function () {
-                _this.buttonStateChange(_this.props.picPress);
-            }} onMouseUp={function () {
-                _this.buttonStateChange(_this.props.picHover);
-            }} onMouseOver={function () {
-                _this.buttonStateChange(_this.props.picHover);
-            }} onMouseOut={function () {
-                _this.buttonStateChange(_this.props.picNormal);
-            }}>
-        <img ref={function (img) {
-                _this.btnImg = img;
-            }} style={{ width: "".concat(props.picNormal.width, "px"), height: "".concat(props.picNormal.height, "px") }} src={this.props.picNormal.buttonPic}></img>
-        <div ref={function (text) {
-                _this.btnText = text;
-            }} style={{ position: 'absolute', fontSize: "".concat(props.picNormal.fontSize, "px") }}>
-          {this.props.picNormal.buttonText}
-        </div>
-      </div>);
-    };
-    return Button;
-}(Component));
-export { Button };
+import { h } from 'preact';
+import { useState } from 'preact/hooks';
+var ButtonState;
+(function (ButtonState) {
+    ButtonState[ButtonState["normal"] = 0] = "normal";
+    ButtonState[ButtonState["hover"] = 1] = "hover";
+    ButtonState[ButtonState["press"] = 2] = "press";
+})(ButtonState || (ButtonState = {})); //按钮状态
+export var Button = function (props) {
+    var _a;
+    var buttonState = (_a = useState(ButtonState.normal), _a[0]), setButtonState = _a[1];
+    return (<div style={buttonState == ButtonState.normal
+            ? props.normalStyle
+            : buttonState == ButtonState.hover
+                ? props.hoverStyle
+                : props.pressStyle} onMouseDown={function () {
+            setButtonState(ButtonState.press);
+        }} onMouseUp={function () {
+            setButtonState(ButtonState.hover);
+            props.clickEvent();
+        }} onMouseOver={function () {
+            setButtonState(ButtonState.hover);
+        }} onMouseOut={function () {
+            setButtonState(ButtonState.normal);
+        }}>
+            {props.text}
+        </div>);
+};

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

@@ -1,2 +1,30 @@
 import { h } from 'preact';
-export declare function Carousel(props: any): h.JSX.Element;
+/**
+ * 轮播组件
+ * @param cRef - 组件引用
+ * @param children - 轮播元素
+ * @param defaultIndex - 默认展示元素的索引，从1开始
+ * @param compWidth - 轮播元素宽度
+ * @param compHeight - 轮播元素高度
+ * @param autoplay - 是否自动轮播
+ * @param switchDuration - 自动轮播切换间隔（>1000）
+ * @param loop - 是否循环播放
+ * @param isVertical - 轮播元素滚动方向
+ * @param touchable - 是否允许手势切换
+ * @param onSlideChange - 切换元素后的回调函数
+ * @param onclickEvent - 点击元素的回调函数
+ */
+export declare function Carousel(props: {
+    cRef?: any;
+    children?: HTMLElement[];
+    defaultIndex?: number;
+    compWidth?: number;
+    compHeight?: number;
+    autoplay?: boolean;
+    switchDuration?: number;
+    loop?: boolean;
+    isVertical?: boolean;
+    touchable?: boolean;
+    onSlideChange?: Function | null;
+    onclickEvent?: Function | null;
+}): h.JSX.Element;

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

@@ -45,6 +45,21 @@ import { useState, useEffect, useRef, useMemo, useImperativeHandle } from '../..
 //     });
 //     return isSame;
 // });
+/**
+ * 轮播组件
+ * @param cRef - 组件引用
+ * @param children - 轮播元素
+ * @param defaultIndex - 默认展示元素的索引，从1开始
+ * @param compWidth - 轮播元素宽度
+ * @param compHeight - 轮播元素高度
+ * @param autoplay - 是否自动轮播
+ * @param switchDuration - 自动轮播切换间隔（>1000）
+ * @param loop - 是否循环播放
+ * @param isVertical - 轮播元素滚动方向
+ * @param touchable - 是否允许手势切换
+ * @param onSlideChange - 切换元素后的回调函数
+ * @param onclickEvent - 点击元素的回调函数
+ */
 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;
     // console.log('children', children.length);
@@ -67,7 +82,12 @@ export function Carousel(props) {
     var _p = useState([0, 0]), gesteroffset = _p[0], setGesteroffset = _p[1];
     var _q = useState(''), logTex = _q[0], setLogTex = _q[1];
     var offset = useMemo(function () { return -(isVertical ? compHeight : compWidth) * showIndex; }, [showIndex]);
-    var itemBoxStyle = { minWidth: compWidth + 'px', minHeight: compHeight + 'px', maxWidth: compWidth + 'px', maxHeight: compHeight + 'px' };
+    var itemBoxStyle = {
+        minWidth: compWidth + 'px',
+        minHeight: compHeight + 'px',
+        maxWidth: compWidth + 'px',
+        maxHeight: compHeight + 'px',
+    };
     var carouselItems = useMemo(function () {
         var firstChild = children[0];
         var lastChild = children[children.length - 1];
@@ -175,12 +195,13 @@ export function Carousel(props) {
     var gestureMove = function (e) {
         if (!touchable)
             return;
-        if (!isMouseDown.current)
+        if (!isMouseDown.current || !e || !e.target)
             return;
-        var l = e.target.getBoundingClientRect().left;
-        var r = e.target.getBoundingClientRect().right;
-        var t = e.target.getBoundingClientRect().top;
-        var b = e.target.getBoundingClientRect().bottom;
+        var rect = e.target.getBoundingClientRect();
+        var l = rect.left;
+        var r = rect.right;
+        var t = rect.top;
+        var b = rect.bottom;
         var x = e.clientX;
         var y = e.clientY;
         setGesteroffset([e.clientX - mouseDownX.current, e.clientY - mouseDownY.current]);
@@ -218,7 +239,9 @@ 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}>

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

@@ -1,2 +1,7 @@
 import { h } from 'preact';
-export declare function Checkbox(props: any): h.JSX.Element;
+export declare function Checkbox(props: {
+    selectedChanged: Function | null;
+    defauleSelected: boolean;
+    selectedNode: any;
+    notSelectedNode: any;
+}): h.JSX.Element;

package/src/components/react/base/pixVideo/PixPlaceHolder.d.ts

@@ -22,6 +22,7 @@ export declare class PixPlaceHolder<T extends PixPlaceHolderProps> extends Compo
     protected attachment: any;
     protected dom: any;
     private timer;
+    private com;
     getAttachment: (e: PixPlaceHolderLoadEvent) => any;
     onAttach(attachment: any, windowId: any, handle: any): void;
     onLoad(e: PixPlaceHolderLoadEvent, ...rest: any[]): void;

package/src/components/react/base/pixVideo/PixPlaceHolder.jsx

@@ -23,19 +23,18 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { Component } from 'preact';
-// @ts-ignore
-import { com } from 'csharp';
 var PixPlaceHolder = /** @class */ (function (_super) {
     __extends(PixPlaceHolder, _super);
     function PixPlaceHolder() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.com = window.require('csharp').com;
         _this.getAttachment = function (e) {
             var _a;
             if (!((_a = e.target) === null || _a === void 0 ? void 0 : _a.attachment)) {
                 console.error('[PixSlot][getAttachment]', '无法获取 e.target?.attachment');
                 return;
             }
-            if (!com) {
+            if (!_this.com) {
                 console.error('[PixSlot][getAttachment]', '未能成功加载 com');
                 return;
             }
@@ -43,7 +42,7 @@ var PixPlaceHolder = /** @class */ (function (_super) {
             // @ts-ignore
             var windowId = external.id;
             var handle = e.target.attachment.handle;
-            var attachment = com.tencent.pandora.CSharpInterface.GetSlotAttachmentByHandle(windowId, handle);
+            var attachment = _this.com.tencent.pandora.CSharpInterface.GetSlotAttachmentByHandle(windowId, handle);
             if (!attachment) {
                 console.error('[PixSlot][getAttachment]', "\u65E0\u6CD5\u83B7\u53D6\u6302\u8F7D\u5BF9\u8C61: GetSlotAttachmentByHandle(".concat(windowId, ", ").concat(handle, ")"));
                 return;

package/src/components/react/base/pixVideo/PixVideo.d.ts

@@ -13,6 +13,8 @@ interface DemoPageProps extends PixPlaceHolderProps {
 }
 export declare class PVideo extends PixPlaceHolder<DemoPageProps> {
     videoPlayerInstance: null;
+    CS: any;
+    puerts: any;
     constructor(props: any);
     onAttach: () => void;
     initVideo: (video: any, parent: any) => void;

package/src/components/react/base/pixVideo/PixVideo.jsx

@@ -13,42 +13,62 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-// @ts-ignore
-import { UnityEngine, com } from 'csharp';
 import { PixPlaceHolder } from './PixPlaceHolder';
-// @ts-ignore
-import { $typeof } from 'puerts';
-var CS = require('csharp');
+var getCSharp = function () {
+    if (!window.require) {
+        console.error('need puerts env');
+        return null;
+    }
+    var CS = window.require('csharp');
+    if (!CS) {
+        console.error('need puerts env');
+        return null;
+    }
+    return CS;
+};
+var getPuerts = function () {
+    if (!window.require) {
+        console.error('need puerts env');
+        return null;
+    }
+    var puerts = window.require('puerts');
+    if (!puerts) {
+        console.error('need puerts env');
+        return null;
+    }
+    return puerts;
+};
 var PVideo = /** @class */ (function (_super) {
     __extends(PVideo, _super);
     function PVideo(props) {
         var _this = _super.call(this, props) || this;
         _this.videoPlayerInstance = null;
+        _this.CS = getCSharp();
+        _this.puerts = getPuerts();
         _this.onAttach = function () {
             var placeholder = _this.mountingGameObject;
             console.log("placeholder-----  ".concat(placeholder));
             if (placeholder) {
-                var video = new UnityEngine.GameObject();
+                var video = new _this.CS.UnityEngine.GameObject();
                 video.transform.SetParent(placeholder.transform);
-                video.AddComponent($typeof(com.tencent.pandora.PVideoImage));
+                video.AddComponent(_this.puerts.$typeof(_this.CS.com.tencent.pandora.PVideoImage));
                 _this.initVideo(video, placeholder);
             }
         };
         _this.initVideo = function (video, parent) {
-            var CSInterface = CS.com.tencent.pandora.CSharpInterface;
-            var rectTransform = video.GetComponent($typeof(UnityEngine.RectTransform));
-            var parentTransform = parent.GetComponent($typeof(UnityEngine.RectTransform));
+            var CSInterface = _this.CS.com.tencent.pandora.CSharpInterface;
+            var rectTransform = video.GetComponent(_this.puerts.$typeof(_this.CS.UnityEngine.RectTransform));
+            var parentTransform = parent.GetComponent(_this.puerts.$typeof(_this.CS.UnityEngine.RectTransform));
             rectTransform.pivot = parentTransform.pivot;
             rectTransform.anchorMax = parentTransform.anchorMax;
             rectTransform.anchorMin = parentTransform.anchorMin;
             rectTransform.sizeDelta = parentTransform.sizeDelta;
             rectTransform.localPosition = parentTransform.localPosition;
-            rectTransform.localScale = UnityEngine.Vector3.one;
-            // @ts-ignore
-            rectTransform.localRotation = UnityEngine.Quaternion.identity;
-            var shader = UnityEngine.Shader.Find('pandora/pvideo');
-            var mat = new UnityEngine.Material(shader);
-            video.GetComponent($typeof(com.tencent.pandora.PVideoImage)).material = mat;
+            rectTransform.localScale = _this.CS.UnityEngine.Vector3.one;
+            rectTransform.localRotation = _this.CS.UnityEngine.Quaternion.identity;
+            var shader = _this.CS.UnityEngine.Shader.Find('pandora/pvideo');
+            var mat = new _this.CS.UnityEngine.Material(shader);
+            video.GetComponent(_this.puerts.$typeof(_this.CS.com.tencent.pandora.PVideoImage)).material = mat;
             var pVideoPlayer = CSInterface.PCreateVideoPlayerInstance(video);
             CSInterface.PSetVideoEventDelegate(pVideoPlayer, function (a, b, c, d, e) {
                 //加载完第一帧以后setActive绕过alpha不正确的问题
@@ -107,7 +127,7 @@ var PVideo = /** @class */ (function (_super) {
         _this.loadUrl = function (url, loop) {
             if (loop === void 0) { loop = false; }
             if (_this.videoPlayerInstance) {
-                CS.com.tencent.pandora.CSharpInterface.PPlayVideo(_this.videoPlayerInstance, url, loop);
+                _this.CS.com.tencent.pandora.CSharpInterface.PPlayVideo(_this.videoPlayerInstance, url, loop);
             }
             else {
                 console.error('video not init!');
@@ -116,7 +136,7 @@ var PVideo = /** @class */ (function (_super) {
         //跳转进度，单位是秒
         _this.seek = function (seekTime) {
             if (_this.videoPlayerInstance) {
-                CS.com.tencent.pandora.CSharpInterface.PSeek(_this.videoPlayerInstance, seekTime);
+                _this.CS.com.tencent.pandora.CSharpInterface.PSeek(_this.videoPlayerInstance, seekTime);
             }
             else {
                 console.error('video not init!');
@@ -124,7 +144,7 @@ var PVideo = /** @class */ (function (_super) {
         };
         _this.pause = function () {
             if (_this.videoPlayerInstance) {
-                CS.com.tencent.pandora.CSharpInterface.PPauseVideo(_this.videoPlayerInstance);
+                _this.CS.com.tencent.pandora.CSharpInterface.PPauseVideo(_this.videoPlayerInstance);
             }
             else {
                 console.error('video not init!');
@@ -132,7 +152,7 @@ var PVideo = /** @class */ (function (_super) {
         };
         _this.resume = function () {
             if (_this.videoPlayerInstance) {
-                CS.com.tencent.pandora.CSharpInterface.PResumeVideo(_this.videoPlayerInstance);
+                _this.CS.com.tencent.pandora.CSharpInterface.PResumeVideo(_this.videoPlayerInstance);
             }
             else {
                 console.error('video not init!');
@@ -140,7 +160,7 @@ var PVideo = /** @class */ (function (_super) {
         };
         _this.close = function () {
             if (_this.videoPlayerInstance) {
-                CS.com.tencent.pandora.CSharpInterface.PCloseVideo(_this.videoPlayerInstance);
+                _this.CS.com.tencent.pandora.CSharpInterface.PCloseVideo(_this.videoPlayerInstance);
             }
             else {
                 console.error('video not init!');
@@ -149,7 +169,7 @@ var PVideo = /** @class */ (function (_super) {
         _this.setNextVideo = function (nextUrl, loopPlay) {
             if (loopPlay === void 0) { loopPlay = false; }
             if (_this.videoPlayerInstance) {
-                CS.com.tencent.pandora.CSharpInterface.PSetNextVideo(_this.videoPlayerInstance, nextUrl, loopPlay);
+                _this.CS.com.tencent.pandora.CSharpInterface.PSetNextVideo(_this.videoPlayerInstance, nextUrl, loopPlay);
             }
             else {
                 console.error('video not init!');
@@ -157,7 +177,7 @@ var PVideo = /** @class */ (function (_super) {
         };
         _this.setRate = function (rate) {
             if (_this.videoPlayerInstance) {
-                CS.com.tencent.pandora.CSharpInterface.PSetRate(_this.videoPlayerInstance, rate);
+                _this.CS.com.tencent.pandora.CSharpInterface.PSetRate(_this.videoPlayerInstance, rate);
             }
             else {
                 console.error('video not init!');
@@ -165,7 +185,7 @@ var PVideo = /** @class */ (function (_super) {
         };
         _this.setVolume = function (volume) {
             if (_this.videoPlayerInstance) {
-                CS.com.tencent.pandora.CSharpInterface.PSetVolume(_this.videoPlayerInstance, volume);
+                _this.CS.com.tencent.pandora.CSharpInterface.PSetVolume(_this.videoPlayerInstance, volume);
             }
             else {
                 console.error('video not init!');

package/src/sample/button/ButtonDemo.d.ts

@@ -1,6 +1,4 @@
 import { Component } from 'preact';
 export declare class ButtonDemo extends Component<any, any> {
-    clickArr: number[];
-    private clickEvent;
     render(): any;
 }

package/src/sample/button/ButtonDemo.jsx

@@ -14,45 +14,16 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 import { Component } from 'preact';
-import { Images } from '../Images';
 import { Button } from 'src/components/react/app/button/Button';
-var picNormal = {
-    buttonPic: Images.checkbox0,
-    buttonText: '常态',
-    width: 100,
-    height: 100,
-    fontSize: 20,
-};
-var picPress = {
-    buttonPic: Images.checkbox0,
-    buttonText: '押下',
-    width: 200,
-    height: 200,
-    fontSize: 30,
-};
-var picHover = {
-    buttonPic: Images.checkbox0,
-    buttonText: '悬浮',
-    width: 150,
-    height: 150,
-    fontSize: 35,
-};
 var ButtonDemo = /** @class */ (function (_super) {
     __extends(ButtonDemo, _super);
     function ButtonDemo() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.clickArr = [1, 2, 3];
-        _this.clickEvent = function (arr1, arr2, arr3) {
-            console.log('1', arr1);
-            console.log('2', arr2);
-            console.log('3', arr3);
-        };
-        return _this;
+        return _super !== null && _super.apply(this, arguments) || this;
     }
     ButtonDemo.prototype.render = function () {
-        return (<div>
-        <Button picNormal={picNormal} picPress={picPress} picHover={picHover} clickEvent={this.clickEvent} clickArr={this.clickArr}/>
-      </div>);
+        return (<Button normalStyle={{ width: '100px', height: '50px', backgroundColor: 'rgba(0,255,0,0.5)', border: '1px solid black' }} hoverStyle={{ width: '100px', height: '50px', backgroundColor: 'rgba(255,0,0,0.5)', border: '1px solid black' }} pressStyle={{ width: '100px', height: '50px', backgroundColor: 'rgba(0,0,255,0.5)', border: '1px solid black' }} clickEvent={function () {
+                console.log('clicked');
+            }} text={'按钮'}/>);
     };
     return ButtonDemo;
 }(Component));

package/src/sample/carousel/carouselDemo.jsx

@@ -5,12 +5,12 @@ import { Carousel } from 'src/components/react/app/carousel/Carousel';
 var CarouselComp = memo(Carousel, function (prev, next) {
     var isSame = true;
     Object.keys(prev).forEach(function (key) {
-        if (key === 'children') {
+        if (key === 'children' && prev.children && next.children) {
             if (prev.children.length !== next.children.length) {
                 isSame = false;
             }
             for (var i = 0; i < prev.children.length; i++) {
-                if (prev.children[i].key !== next.children[i].key) {
+                if (prev.children[i][key] !== next.children[i][key]) {
                     isSame = false;
                 }
             }

package/src/sample/checkBox/checkBoxDemo.jsx

@@ -13,11 +13,11 @@ var boxCheckedStyle = {
     backgroundSize: '100% 100%',
 };
 export function CheckboxDemo() {
-    var _a = useState('未选中'), shoeText = _a[0], setShoeText = _a[1];
+    var _a = useState('未选中'), showText = _a[0], setShowText = _a[1];
     return (<div>
             <Checkbox defauleSelected={false} selectedChanged={function (b) {
-            setShoeText(b ? '  选中了' : '  未选中');
+            setShowText(b ? '  选中了' : '  未选中');
         }} selectedNode={<div style={boxCheckedStyle}></div>} notSelectedNode={<div style={boxNormalStyle}></div>}/>
-            <div style={{ marginLeft: '10px' }}>{shoeText}</div>
+            <div style={{ marginLeft: '10px' }}>{showText}</div>
         </div>);
 }

package/src/sample/slider/SliderDemo.d.ts

@@ -1,4 +1,4 @@
-import { Component } from 'preact';
+import { Component, h } from 'preact';
 export declare class SliderDemo extends Component<any, {
     percent: number;
 }> {
@@ -6,5 +6,5 @@ export declare class SliderDemo extends Component<any, {
     onDrag: (value: number) => void;
     onDecClick: (value: number) => void;
     onIncClick: (value: number) => void;
-    render(): any;
+    render(): h.JSX.Element;
 }

package/src/sample/slider/SliderDemo.jsx

@@ -13,9 +13,13 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-import { Component } from 'preact';
-import { Images } from '../Images';
+import { Component, h } from 'preact';
 import { Slider } from 'src/components/react/app/slider/Slider';
+var Images = {
+    inner: 'https://game.gtimg.cn/images/gamelet/cp/pxidePreView-slider/inner.png',
+    outer: 'https://game.gtimg.cn/images/gamelet/cp/pxidePreView-slider/outer.png',
+    dot: 'https://game.gtimg.cn/images/gamelet/cp/pxidePreView-slider/dot.png',
+};
 var SliderWrapperStyle = {
     position: 'absolute',
     width: '376px',