pixuireactcomponents 1.3.24 → 1.3.25

package/lib/check/{util.jsx → util.js}

@@ -69,16 +69,16 @@ var Counter = /** @class */ (function (_super) {
         return _this;
     }
     Counter.prototype.render = function (props, state) {
-        return (<div style={{
+        return (h("div", { style: {
                 display: 'flex',
                 flexDirection: 'row',
                 // color: '#f93f00',
                 backgroundColor: state.value % 2 ? '#992288' : '#33ff54',
-            }}>
-				Counter: {state.value}
-				<div style={{ width: '20px' }}/>
-				<div onClick={this.increment}>Increment</div>
-			</div>);
+            } },
+            "Counter: ",
+            state.value,
+            h("div", { style: { width: '20px' } }),
+            h("div", { onClick: this.increment }, "Increment")));
     };
     return Counter;
 }(Component));
@@ -93,14 +93,14 @@ var Title = /** @class */ (function (_super) {
         return _this;
     }
     Title.prototype.render = function (props, state) {
-        return (<div style={{
+        return (h("div", { style: {
                 display: 'flex',
                 flexDirection: 'column',
                 backgroundColor: '#f98833',
-            }}>
-				title: {state.title}
-				<Link href={wp('')}>back home</Link>
-			</div>);
+            } },
+            "title: ",
+            state.title,
+            h(Link, { href: wp('') }, "back home")));
     };
     return Title;
 }(Component));
@@ -116,32 +116,26 @@ var makeError3 = function () { return __awaiter(void 0, void 0, void 0, function
     });
 }); };
 export var getView = function () {
-    return (<div style={{ width: '99%' }}>
-			{/* <Counter /> */}
-			<Router>
-				<Counter loggedIn={true} path={wp('')}/>
-				<Title path={wp('hi')}/>
-			</Router>
-			<Link href={wp('hi')}>Profile</Link>
-			<div className={css.flexrow}>
-				<img src={preact} onClick={function () {
-            console.log('click preact...');
-            makeError2();
-        }}></img>
-				<img src={pix}></img>
-				<div style={{ width: '200px', height: '100px', borderImage: "url(".concat(border, ") 2 2 2 2 fill stretch") }}/>
-			</div>
-			<div style={{ border: '1px solid black', width: 200, height: 200 }}>
-				<video autoPlay src={'https://www.runoob.com/try/demo_source/mov_bbb.mp4'} style={{ loop: 'loop', width: 200, height: 200 }}/>
-			</div>
-			<div onClick={function (e) { return console.log('click', e); }}>Pixui is a embeddable browser engine</div>
-			<div>Preact is a react-like framework</div>
-			<div>with webpack and typescript workflow</div>
-			<div className={css.flexrow}>
-				<div>easy! </div>
-				<div>beautiful!</div>
-				<div>crossplatform!</div>
-			</div>
-			<div>let's start and go further!</div>
-		</div>);
+    return (h("div", { style: { width: '99%' } },
+        h(Router, null,
+            h(Counter, { loggedIn: true, path: wp('') }),
+            h(Title, { path: wp('hi') })),
+        h(Link, { href: wp('hi') }, "Profile"),
+        h("div", { className: css.flexrow },
+            h("img", { src: preact, onClick: function () {
+                    console.log('click preact...');
+                    makeError2();
+                } }),
+            h("img", { src: pix }),
+            h("div", { style: { width: '200px', height: '100px', borderImage: "url(".concat(border, ") 2 2 2 2 fill stretch") } })),
+        h("div", { style: { border: '1px solid black', width: 200, height: 200 } },
+            h("video", { autoPlay: true, src: 'https://www.runoob.com/try/demo_source/mov_bbb.mp4', style: { loop: 'loop', width: 200, height: 200 } })),
+        h("div", { onClick: function (e) { return console.log('click', e); } }, "Pixui is a embeddable browser engine"),
+        h("div", null, "Preact is a react-like framework"),
+        h("div", null, "with webpack and typescript workflow"),
+        h("div", { className: css.flexrow },
+            h("div", null, "easy! "),
+            h("div", null, "beautiful!"),
+            h("div", null, "crossplatform!")),
+        h("div", null, "let's start and go further!")));
 };

package/lib/preact-router/match/src/index.js

@@ -13,6 +13,17 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+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);
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -56,12 +67,10 @@ var Match = /** @class */ (function (_super) {
 export { Match };
 export var Link = function (_a) {
     var activeClassName = _a.activeClassName, path = _a.path, props = __rest(_a, ["activeClassName", "path"]);
-    return (<Match path={path || props.href}>
-		{function (_a) {
-            var matches = _a.matches;
-            var cls = [props.class || props.className, matches && activeClassName].filter(Boolean).join(' ');
-            return <StaticLink {...props} className={cls}/>;
-        }}
-	</Match>);
+    return (h(Match, { path: path || props.href }, function (_a) {
+        var matches = _a.matches;
+        var cls = [props.class || props.className, matches && activeClassName].filter(Boolean).join(' ');
+        return h(StaticLink, __assign({}, props, { className: cls }));
+    }));
 };
 export default Match;

package/package.json

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

package/src/components/react/app/bulletscreen/BulletItemAnimation.d.ts

@@ -1,4 +1,4 @@
-import { Component } from 'preact';
+import { Component, h } from 'preact';
 export declare class BulletInfo {
     key: number;
     text: string;
@@ -27,5 +27,5 @@ export declare class BulletItemAnimation extends Component<{
     onAnimationEnd: () => void;
     setFreeChannelTimer: () => void;
     freeChannel: () => void;
-    render(): any;
+    render(): h.JSX.Element;
 }

package/src/components/react/app/bulletscreen/{BulletItemAnimation.jsx → BulletItemAnimation.js}

@@ -14,7 +14,7 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 import { createRef } from 'lib/preact/src/create-element';
-import { Component } from 'preact';
+import { Component, h } from 'preact';
 // 弹幕相关个性化信息
 var BulletInfo = /** @class */ (function () {
     function BulletInfo(key, text, channel, color, fontSize) {
@@ -48,15 +48,15 @@ var BulletItemAnimation = /** @class */ (function (_super) {
         var _this = _super.call(this, props) || this;
         _this.freeChannelTimer = undefined;
         _this.refText = createRef();
-        _this.onAnimationStart = function () {
-        };
+        _this.onAnimationStart = function () { };
         _this.onAnimationEnd = function () {
             _this.props.onItemFree();
         };
         _this.setFreeChannelTimer = function () {
             var realWidthStr = window.getComputedStyle(_this.refText.current, null).getPropertyValue('width');
             var widthNum = parseInt(realWidthStr.substring(0, realWidthStr.length - 2));
-            _this.freeChannelTimer = setTimeout(_this.freeChannel, (widthNum + BULLET_DISTANCE) / (_this.props.bulletConfig.screenWidth + BULLET_MAX_LEN) * _this.props.bulletConfig.totalTime);
+            _this.freeChannelTimer = setTimeout(_this.freeChannel, ((widthNum + BULLET_DISTANCE) / (_this.props.bulletConfig.screenWidth + BULLET_MAX_LEN)) *
+                _this.props.bulletConfig.totalTime);
         };
         _this.freeChannel = function () {
             _this.props.onChannelFree(_this.props.bulletInfo.channel);
@@ -72,7 +72,7 @@ var BulletItemAnimation = /** @class */ (function (_super) {
     BulletItemAnimation.prototype.render = function () {
         var isMe = false;
         var bulletStyle = {
-            marginTop: (this.props.bulletInfo.channel * this.props.bulletConfig.channelHeight) + 'px',
+            marginTop: this.props.bulletInfo.channel * this.props.bulletConfig.channelHeight + 'px',
             height: this.props.bulletConfig.channelHeight + 'px',
             left: this.props.bulletConfig.screenWidth + 'px',
             animation: 'bulletKeyframe 10s linear 1',
@@ -85,9 +85,8 @@ var BulletItemAnimation = /** @class */ (function (_super) {
             fontSize: this.props.bulletInfo.fontSize + 'px',
             color: this.props.bulletInfo.color,
         };
-        return (<div ref={this.refText} style={bulletStyle}>
-                <text>{this.props.bulletInfo.text}</text>
-            </div>);
+        return (h("div", { ref: this.refText, style: bulletStyle },
+            h("text", null, this.props.bulletInfo.text)));
     };
     return BulletItemAnimation;
 }(Component));

package/src/components/react/app/bulletscreen/BulletScreenAnimation.d.ts

@@ -1,4 +1,4 @@
-import { Component } from 'preact';
+import { Component, h } from 'preact';
 import { BulletInfo } from './BulletItemAnimation';
 export declare class BulletScreenAnimationData {
     generateCycle: number;
@@ -47,5 +47,5 @@ export declare class BulletScreenAnimation extends Component<{
     getAvailableChannelByPosition: () => any;
     onItemFree: () => void;
     onChannelFree: (channel: any) => void;
-    render(): any;
+    render(): h.JSX.Element;
 }

package/src/components/react/app/bulletscreen/{BulletScreenAnimation.jsx → BulletScreenAnimation.js}

@@ -14,7 +14,7 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 /* eslint-disable linebreak-style */
-import { Component } from 'preact';
+import { Component, h } from 'preact';
 import { BulletInfo, BulletConfig, BulletItemAnimation } from './BulletItemAnimation';
 import { Logger } from '../../../tools/Logger';
 // item数据类型
@@ -69,7 +69,7 @@ var BulletScreenAnimation = /** @class */ (function (_super) {
             _this.initChannels();
             var newIndex = _this.state.refreshIndex + 1;
             _this.setState({
-                refreshIndex: newIndex
+                refreshIndex: newIndex,
             });
         };
         _this.SetScreenSizeChanging = function () {
@@ -82,8 +82,7 @@ var BulletScreenAnimation = /** @class */ (function (_super) {
             _this.generateDynamicAnimation('bulletKeyframe', "from{\n                left: ".concat(currentProps.screenWidth, "px\n            }\n            to{\n                left: -400px;\n            }"));
         };
         _this.isScreenSizeSame = function (oldProps, newProps) {
-            if (oldProps.screenWidth == newProps.screenWidth &&
-                oldProps.screenHeight == newProps.screenHeight) {
+            if (oldProps.screenWidth == newProps.screenWidth && oldProps.screenHeight == newProps.screenHeight) {
                 return true;
             }
             return false;
@@ -160,7 +159,7 @@ var BulletScreenAnimation = /** @class */ (function (_super) {
             _this.hasPosition[channel] = true;
         };
         _this.setState({
-            refreshIndex: 0
+            refreshIndex: 0,
         });
         _this.initChannels();
         _this.consumeBulletTimer = setInterval(function () {
@@ -179,7 +178,7 @@ var BulletScreenAnimation = /** @class */ (function (_super) {
                 _this.hasPosition[curChannel] = false;
                 var newIndex = _this.state.refreshIndex + 1;
                 _this.setState({
-                    refreshIndex: newIndex
+                    refreshIndex: newIndex,
                 });
             }
         }, _this.props.screenData.generateCycle);
@@ -222,11 +221,9 @@ var BulletScreenAnimation = /** @class */ (function (_super) {
         };
         var screenData = this.props.screenData;
         var commonInfo = new BulletConfig(this.props.screenWidth, screenData.channelHeight, screenData.totalTime);
-        return (<div style={container}>
-                {bulletDataList.map(function (value, index) {
-                return (<BulletItemAnimation key={value.key} bulletInfo={value} bulletConfig={commonInfo} onItemFree={_this.onItemFree} onChannelFree={_this.onChannelFree}/>);
-            })}
-            </div>);
+        return (h("div", { style: container }, bulletDataList.map(function (value, index) {
+            return (h(BulletItemAnimation, { key: value.key, bulletInfo: value, bulletConfig: commonInfo, onItemFree: _this.onItemFree, onChannelFree: _this.onChannelFree }));
+        })));
     };
     return BulletScreenAnimation;
 }(Component));

package/src/components/react/app/button/{Button.jsx → Button.js}

@@ -9,20 +9,18 @@ var 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
+    return (h("div", { style: buttonState == ButtonState.normal
             ? props.normalStyle
             : buttonState == ButtonState.hover
                 ? props.hoverStyle
-                : props.pressStyle} onMouseDown={function () {
+                : props.pressStyle, onMouseDown: function () {
             setButtonState(ButtonState.press);
-        }} onMouseUp={function () {
+        }, onMouseUp: function () {
             setButtonState(ButtonState.hover);
             props.clickEvent();
-        }} onMouseOver={function () {
+        }, onMouseOver: function () {
             setButtonState(ButtonState.hover);
-        }} onMouseOut={function () {
+        }, onMouseOut: function () {
             setButtonState(ButtonState.normal);
-        }}>
-            {props.text}
-        </div>);
+        } }, props.text));
 };

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

@@ -16,7 +16,7 @@ import { h } from 'preact';
  */
 export declare function Carousel(props: {
     cRef?: any;
-    children?: HTMLElement[];
+    children?: preact.JSX.Element[] | HTMLElement[];
     defaultIndex?: number;
     compWidth?: number;
     compHeight?: number;

package/src/components/react/app/carousel/{Carousel.jsx → Carousel.js}

@@ -232,59 +232,34 @@ export function Carousel(props) {
             onclickEvent(showIndex - 1);
         }
     };
-    return (<div style={{ flexDirection: 'column' }}>
-            <div style={__assign(__assign({ position: 'relative' }, itemBoxStyle), { overflow: 'hidden', flexShrink: 0 })}>
-                <div style={{
-            display: 'flex',
-            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)"),
-            flexDirection: isVertical ? 'column' : 'row',
-            flexShrink: 0,
-        }} class="wrapper" onTransitionEnd={handleTransitionEnd}>
-                    {carouselItems.map(function (child) { return child; })}
-                </div>
-            </div>
-
-            {/* 手势 */}
-            <div draggable={true} style={__assign(__assign({}, itemBoxStyle), { position: 'absolute' })} onClick={function () {
-            gestureClick(props);
-        }} class={'GestureComp'} onDragStart={function (e) {
-            if (children.length > 1) {
-                gestureDown(e);
-            }
-        }} onDrag={function (e) {
-            if (children.length > 1) {
-                gestureMove(e);
-            }
-        }} onDragEnd={function () {
-            if (children.length > 1) {
-                gestureUp();
-            }
-        }}/>
-
-            {/* 调试信息 */}
-            {/* {logTex}
-        {gesteroffset[0]}
-        {gesteroffset[1]} */}
-
-            {/* 页码图标 */}
-            {/* <div style={{ flexDirection: isVertical ? 'column' : 'row' }}>
-            {children.map((v, i) => {
-                return (
-                    <div
-                        style={showIndex == i + 1 ? indicatorSelectedStyle : indicatorStyle}
-                        onClick={() => {
-                            setShowIndex(i + 1);
-                        }}
-                    />
-                );
-            })}
-        </div> */}
-        </div>);
+    return (h("div", { style: { flexDirection: 'column' } },
+        h("div", { style: __assign(__assign({ position: 'relative' }, itemBoxStyle), { overflow: 'hidden', flexShrink: 0 }) },
+            h("div", { style: {
+                    display: 'flex',
+                    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)"),
+                    flexDirection: isVertical ? 'column' : 'row',
+                    flexShrink: 0,
+                }, class: "wrapper", onTransitionEnd: handleTransitionEnd }, carouselItems.map(function (child) { return child; }))),
+        h("div", { draggable: true, style: __assign(__assign({}, itemBoxStyle), { position: 'absolute' }), onClick: function () {
+                gestureClick(props);
+            }, class: 'GestureComp', onDragStart: function (e) {
+                if (children.length > 1) {
+                    gestureDown(e);
+                }
+            }, onDrag: function (e) {
+                if (children.length > 1) {
+                    gestureMove(e);
+                }
+            }, onDragEnd: function () {
+                if (children.length > 1) {
+                    gestureUp();
+                }
+            } })));
 }
 // Carousel.Item = (props) => {
 //     return (

package/src/components/react/app/checkBox/{CheckBox.jsx → CheckBox.js}

@@ -9,5 +9,5 @@ export function Checkbox(props) {
         }
         setSelected(!selected);
     };
-    return <div onClick={cli}>{selected ? selectedNode : notSelectedNode}</div>;
+    return h("div", { onClick: cli }, selected ? selectedNode : notSelectedNode);
 }

package/src/components/react/app/dropdown/{Dropdown.jsx → Dropdown.js}

@@ -74,9 +74,7 @@ var Dropdown = /** @class */ (function (_super) {
         if (!this.state.isSpread) {
             this.props.unspreadMainUI.props.info = this.props.config.datas[this.state.selectedIndex];
             this.props.unspreadMainUI.props.openList = this.openList;
-            return (<div>
-                    {this.props.unspreadMainUI}
-                </div>);
+            return (h("div", null, this.props.unspreadMainUI));
         }
         this.props.spreadMainUI.props.info = this.props.config.datas[this.state.selectedIndex];
         this.props.spreadMainUI.props.closeList = this.closeList;
@@ -84,12 +82,10 @@ var Dropdown = /** @class */ (function (_super) {
         var _optionsUI = this.props.optionsUI.filter(function (v) { return v.props.index != _this.state.selectedIndex; });
         if (_optionsUI.length > 0)
             _optionsUI[_optionsUI.length - 1].props['isLast'] = true;
-        return (<div>
-                <div style={this.props.config.spreadStyle}>
-                    {this.props.spreadMainUI}
-                    <div style={optionsDivStyle}>{_optionsUI}</div>
-                </div>
-            </div>);
+        return (h("div", null,
+            h("div", { style: this.props.config.spreadStyle },
+                this.props.spreadMainUI,
+                h("div", { style: optionsDivStyle }, _optionsUI))));
     };
     return Dropdown;
 }(Component));

package/src/components/react/app/imageViewer/{imageViewer.jsx → imageViewer.js}

@@ -90,17 +90,13 @@ var ImageViewer = /** @class */ (function (_super) {
         //         forceupdate: false,
         //     })
         // }
-        return (<div style={this.props.backgroundStyle} onClick={this.onClose}>
-                <div style={this.props.imageBoxStyle}>
-                    <div id="imageArea" style={this.props.imageAreaStyle}>
-                        {this.state.reCalSize &&
-                <img style={this.props.imageStyle} src={this.props.src} width={this.state.imageWidth} height={this.state.imageHeight} onClick={this.onBlock}/>}
-                        
-                        {/* 用于获取原图片大小 */!this.state.reCalSize &&
-                <img onLoad={this.handleImageLoad} style={{ display: 'hidden' }} src={this.props.src}/>}
-                    </div>
-                </div>
-            </div>);
+        return (h("div", { style: this.props.backgroundStyle, onClick: this.onClose },
+            h("div", { style: this.props.imageBoxStyle },
+                h("div", { id: "imageArea", style: this.props.imageAreaStyle },
+                    this.state.reCalSize &&
+                        h("img", { style: this.props.imageStyle, src: this.props.src, width: this.state.imageWidth, height: this.state.imageHeight, onClick: this.onBlock }),
+                    !this.state.reCalSize &&
+                        h("img", { onLoad: this.handleImageLoad, style: { display: 'hidden' }, src: this.props.src })))));
     };
     return ImageViewer;
 }(Component));

package/src/components/react/app/slider/{Slider.jsx → Slider.js}

@@ -276,19 +276,13 @@ var Slider = /** @class */ (function (_super) {
         this.computeDecButtonStyle();
         this.computeWithButtonStyle();
         var hasDot = this.props.hasDot === undefined || this.props.hasDot === true;
-        return (<div style={this.props.hasIncDecButton ? withButtonStyle : {}}>
-                {this.props.hasIncDecButton && <img src={this.props.decButtonBg} style={decButtonStyle} onClick={this.onDecClick}/>}
-                <div ref={this.refWrapper} style={wrapperStyle}>
-                    <div style={outerStyle}>
-                        <div style={innerStyle}>
-                            <div style={dotWrapperStyle} draggable={true} onDragStart={this.onDragStart} onDrag={this.onDrag} onDragEnd={this.onDragEnd}>
-                                {hasDot && <img src={this.props.dotBg} style={dotStyle}/>}
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                {this.props.hasIncDecButton && <img src={this.props.incButtonBg} style={incButtonStyle} onClick={this.onIncClick}/>}
-            </div>);
+        return (h("div", { style: this.props.hasIncDecButton ? withButtonStyle : {} },
+            this.props.hasIncDecButton && h("img", { src: this.props.decButtonBg, style: decButtonStyle, onClick: this.onDecClick }),
+            h("div", { ref: this.refWrapper, style: wrapperStyle },
+                h("div", { style: outerStyle },
+                    h("div", { style: innerStyle },
+                        h("div", { style: dotWrapperStyle, draggable: true, onDragStart: this.onDragStart, onDrag: this.onDrag, onDragEnd: this.onDragEnd }, hasDot && h("img", { src: this.props.dotBg, style: dotStyle }))))),
+            this.props.hasIncDecButton && h("img", { src: this.props.incButtonBg, style: incButtonStyle, onClick: this.onIncClick })));
     };
     return Slider;
 }(Component));

package/src/components/react/app/togglegroup/{ToggleGroup.jsx → ToggleGroup.js}

@@ -25,7 +25,7 @@ var ToggleGroup = /** @class */ (function (_super) {
         _this.items = [];
         _this.refreshAll = true;
         _this.GenerateToggleItem = function (toggleItem, togglePic, index, refreshAll) {
-            return (<Toggle toggleItem={toggleItem} togglePic={togglePic} index={index} checkSelected={_this.checkSelected} refreshAll={refreshAll}/>);
+            return (h(Toggle, { toggleItem: toggleItem, togglePic: togglePic, index: index, checkSelected: _this.checkSelected, refreshAll: refreshAll }));
         };
         _this.checkSelected = function (index) {
             if (_this.isMultiOption)
@@ -65,7 +65,7 @@ var ToggleGroup = /** @class */ (function (_super) {
         for (var i = 0; i < this.toggleArray.length; i++) {
             this.items.push(this.GenerateToggleItem(this.toggleArray[i], this.togglePic, i, this.refreshAll));
         }
-        return <div style={{ flexDirection: 'row' }}>{this.items}</div>;
+        return h("div", { style: { flexDirection: 'row' } }, this.items);
     };
     return ToggleGroup;
 }(Component));
@@ -94,22 +94,20 @@ var Toggle = /** @class */ (function (_super) {
             return;
         }
         this.refreshAll = props.refreshAll;
-        return (<div style={{ alignItems: 'flex-end', flexDirection: 'row' }}>
-        <div style={{
-                width: '36px',
-                height: '36px',
-                backgroundSize: 'contain',
-                backgroundImage: "url(".concat(this.state.isSelected ? this.selectedPic : this.notSelectedPic, ")"),
-            }} onClick={function () {
-                _this.state.isSelected ? _this.notSelectedFun() : _this.selectedFun();
-                _this.setState({ isSelected: !_this.state.isSelected });
-                _this.checkSelected(_this.index);
-            }}></div>
-        <div>
-          <text>{"".concat(this.toggleText)}</text>
-        </div>
-        <div style={{ width: '50px' }}></div>
-      </div>);
+        return (h("div", { style: { alignItems: 'flex-end', flexDirection: 'row' } },
+            h("div", { style: {
+                    width: '36px',
+                    height: '36px',
+                    backgroundSize: 'contain',
+                    backgroundImage: "url(".concat(this.state.isSelected ? this.selectedPic : this.notSelectedPic, ")"),
+                }, onClick: function () {
+                    _this.state.isSelected ? _this.notSelectedFun() : _this.selectedFun();
+                    _this.setState({ isSelected: !_this.state.isSelected });
+                    _this.checkSelected(_this.index);
+                } }),
+            h("div", null,
+                h("text", null, "".concat(this.toggleText))),
+            h("div", { style: { width: '50px' } })));
     };
     return Toggle;
 }(Component));

package/src/components/react/base/gradient/{GradientText.jsx → GradientText.js}

@@ -293,7 +293,7 @@ var GradientText = /** @class */ (function (_super) {
     GradientText.prototype.render = function (props) {
         var style = !props.style ? { width: '200px', height: '200px', backgroundColor: '#FF00FFFF' } : props.style;
         this.printLog('OnRender');
-        return (<pixslot style={style} src='pixui://method:placeholder' onLoad={this.onLoad.bind(this)}/>);
+        return (h("pixslot", { style: style, src: 'pixui://method:placeholder', onLoad: this.onLoad.bind(this) }));
     };
     return GradientText;
 }(Component));

package/src/components/react/base/outlinetext/{OutlineText.jsx → OutlineText.js}

@@ -130,9 +130,8 @@ export var OutlineText = /** @class */ (function (_super) {
         this.outline.effectDistance = new CS.UnityEngine.Vector2(this.props.outlineDistance.x, this.props.outlineDistance.y);
     };
     OutlineText.prototype.render = function () {
-        return (<div style={this.props.style}>
-                <pixslot style={{ width: '100%', height: '100%' }} src={'pixui://method:placeholder'} onLoad={this.OnLoad.bind(this)}/>
-                </div>);
+        return (h("div", { style: this.props.style },
+            h("pixslot", { style: { width: '100%', height: '100%' }, src: 'pixui://method:placeholder', onLoad: this.OnLoad.bind(this) })));
     };
     OutlineText.defaultProps = {
         style: defaultStyle,

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

@@ -1,4 +1,4 @@
-import { Component } from 'preact';
+import { Component, h } from 'preact';
 export interface PixPlaceHolderProps {
     /** 每次 src 属性被修改时会派发onload事件 */
     onload?: (e: any) => any;
@@ -27,5 +27,5 @@ export declare class PixPlaceHolder<T extends PixPlaceHolderProps> extends Compo
     onAttach(attachment: any, windowId: any, handle: any): void;
     onLoad(e: PixPlaceHolderLoadEvent, ...rest: any[]): void;
     onError(...args: any[]): void;
-    render(): any;
+    render(): h.JSX.Element;
 }

package/src/components/react/base/pixVideo/{PixPlaceHolder.jsx → PixPlaceHolder.js}

@@ -22,7 +22,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { Component } from 'preact';
+import { Component, h } from 'preact';
 var PixPlaceHolder = /** @class */ (function (_super) {
     __extends(PixPlaceHolder, _super);
     function PixPlaceHolder() {
@@ -90,11 +90,9 @@ var PixPlaceHolder = /** @class */ (function (_super) {
         var _this = this;
         var className = ['pixui-placeholder', this.props.className].filter(function (c) { return !!c; }).join(' ');
         var style = this.props.style ? this.props.style : {};
-        return (<pixslot className={className} onLoad={this.onLoad.bind(this)} src="pixui://method:placeholder" ref={function (ref) {
+        return (h("pixslot", { className: className, onLoad: this.onLoad.bind(this), src: "pixui://method:placeholder", ref: function (ref) {
                 _this.dom = ref;
-            }} onerror={this.onError} style={style}>
-                {this.props.children}
-            </pixslot>);
+            }, onerror: this.onError, style: style }, this.props.children));
     };
     return PixPlaceHolder;
 }(Component));