pixuireactcomponents 0.0.0

package/ui/components/dropdown/Dropdown.js

@@ -0,0 +1,92 @@
+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 { Component, h } from 'preact';
+var optionsDivStyle = {
+    marginTop: 3,
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    height: 'auto',
+    overflow: 'scroll',
+    overflowStyle: 'none',
+};
+var Dropdown = /** @class */ (function (_super) {
+    __extends(Dropdown, _super);
+    function Dropdown(props) {
+        var _this = _super.call(this, props) || this;
+        _this.addNetEvents = function () {
+        };
+        _this.removeNetEvents = function () {
+        };
+        _this.addLogicEvents = function () {
+        };
+        _this.removeLogicEvents = function () {
+        };
+        _this.openList = function () {
+            // console.warn("open dropdown====")
+            _this.setState({
+                isSpread: true
+            });
+        };
+        _this.closeList = function () {
+            // console.warn("close dropdown====")
+            _this.setState({
+                isSpread: false
+            });
+        };
+        _this.onChoose = function (index) {
+            _this.props.onChoose(index);
+            // console.warn('dropdown-=----', index)
+            _this.setState({
+                selectedIndex: index,
+                isSpread: false
+            });
+        };
+        _this.addNetEvents();
+        _this.addLogicEvents();
+        var initIndex = _this.props.defaultIndex == null ? 0 : _this.props.defaultIndex;
+        _this.state = {
+            selectedIndex: initIndex,
+            isSpread: false
+        };
+        return _this;
+    }
+    Dropdown.prototype.componentWillUnmount = function () {
+        this.removeLogicEvents();
+        this.removeNetEvents();
+    };
+    Dropdown.prototype.render = function () {
+        var _this = this;
+        if (!this.state.isSpread) {
+            this.props.unspreadMainUI.props.info = this.props.config.datas[this.state.selectedIndex];
+            this.props.unspreadMainUI.props.openList = this.openList;
+            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;
+        this.props.optionsUI.forEach(function (v, index) { v.props.onChoose = function () { _this.onChoose(index); }; });
+        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 (h("div", null,
+            h("div", { style: this.props.config.spreadStyle },
+                this.props.spreadMainUI,
+                h("div", { style: optionsDivStyle }, _optionsUI))));
+    };
+    return Dropdown;
+}(Component));
+export { Dropdown };

package/ui/components/dropdown/DropdownOptionUI.d.ts

@@ -0,0 +1,11 @@
+import { Component } from 'preact';
+/**
+ * dropdown 打开时options列表的单个Item UI
+ * 如果要使用滚动条,在创建改该组件时最外层div样式里面需添加flex-shrink : 0
+ */
+export declare abstract class DropdownOptionUI<T> extends Component<{
+    info: T;
+    onChoose: Function;
+    index: number;
+}, any> {
+}

package/ui/components/dropdown/DropdownOptionUI.js

@@ -0,0 +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 { Component } from 'preact';
+/**
+ * dropdown 打开时options列表的单个Item UI
+ * 如果要使用滚动条,在创建改该组件时最外层div样式里面需添加flex-shrink : 0
+ */
+var DropdownOptionUI = /** @class */ (function (_super) {
+    __extends(DropdownOptionUI, _super);
+    function DropdownOptionUI() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return DropdownOptionUI;
+}(Component));
+export { DropdownOptionUI };

package/ui/components/dropdown/DropdownSpreadMainUI.d.ts

@@ -0,0 +1,9 @@
+import { Component } from 'preact';
+/**
+ * dropdown 打开时选中框的UI
+ */
+export declare abstract class DropdownSpreadMainUI<T> extends Component<{
+    info: T;
+    closeList: Function;
+}, any> {
+}

package/ui/components/dropdown/DropdownSpreadMainUI.js

@@ -0,0 +1,27 @@
+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 { Component } from 'preact';
+/**
+ * dropdown 打开时选中框的UI
+ */
+var DropdownSpreadMainUI = /** @class */ (function (_super) {
+    __extends(DropdownSpreadMainUI, _super);
+    function DropdownSpreadMainUI() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return DropdownSpreadMainUI;
+}(Component));
+export { DropdownSpreadMainUI };

package/ui/components/dropdown/DropdownUnspreadMainUI.d.ts

@@ -0,0 +1,9 @@
+import { Component } from 'preact';
+/**
+ * dropdown 未打开时选中框的UI
+ */
+export declare abstract class DropdownUnspreadMainUI<T> extends Component<{
+    info: T;
+    openList: Function;
+}, any> {
+}

package/ui/components/dropdown/DropdownUnspreadMainUI.js

@@ -0,0 +1,27 @@
+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 { Component } from 'preact';
+/**
+ * dropdown 未打开时选中框的UI
+ */
+var DropdownUnspreadMainUI = /** @class */ (function (_super) {
+    __extends(DropdownUnspreadMainUI, _super);
+    function DropdownUnspreadMainUI() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return DropdownUnspreadMainUI;
+}(Component));
+export { DropdownUnspreadMainUI };

package/ui/components/gradient/GradientText.d.ts

@@ -0,0 +1,63 @@
+import { Component, CSSProperties, h } from 'preact';
+export interface GradientTextProps {
+    style?: CSSProperties;
+    text?: string;
+    color?: string;
+    fontSize?: number;
+    font?: string;
+    alignment?: string;
+    direction?: string;
+    colorTop?: string;
+    colorBottom?: string;
+    colorLeft?: string;
+    colorRight?: string;
+    fitRectTransform?: boolean;
+    richText?: boolean;
+    alignByGeometry?: boolean;
+    horizontalOverflow?: string;
+    verticalOverflow?: string;
+    bestFit?: boolean;
+    raycastTarget?: boolean;
+    fontStyle?: string;
+    lineSpacing?: number;
+}
+export declare class GradientText extends Component<GradientTextProps, GradientTextProps> {
+    isPrintLog: boolean;
+    textObj: null;
+    gradientObj: null;
+    constructor(props: any);
+    componentDidUpdate(): void;
+    static getDerivedStateFromProps(props: any, state: any): {
+        text: any;
+        color: any;
+        fontSize: any;
+        font: any;
+        alignment: any;
+        direction: any;
+        colorTop: any;
+        colorBottom: any;
+        colorLeft: any;
+        colorRight: any;
+        fitRectTransform: any;
+        richText: any;
+        alignByGeometry: any;
+        horizontalOverflow: any;
+        verticalOverflow: any;
+        bestFit: any;
+        raycastTarget: any;
+        fontStyle: any;
+        lineSpacing: any;
+    } | null;
+    getCSharp(): any;
+    onLoad(e: any): void;
+    updateGradientText(): void;
+    transFont(fontName: any): any;
+    transHorizontalOverflow(str: any): any;
+    transVerticalOverflow(str: any): any;
+    transFontStyle(str: any): any;
+    colorRgb(colorStr: any): any;
+    printLog(text: any): void;
+    transDirection(direction: any): any;
+    transAlignment(alignment: any): any;
+    render(props: any): h.JSX.Element;
+}

package/ui/components/gradient/GradientText.js

@@ -0,0 +1,329 @@
+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 { Component, h } from 'preact';
+var GradientText = /** @class */ (function (_super) {
+    __extends(GradientText, _super);
+    function GradientText(props) {
+        var _this = _super.call(this, props) || this;
+        _this.isPrintLog = false;
+        _this.textObj = null;
+        _this.gradientObj = null;
+        _this.state = {
+            style: props.style,
+            text: props.text,
+            color: props.color,
+            fontSize: props.fontSize,
+            font: props.font,
+            alignment: props.alignment,
+            direction: props.direction,
+            colorTop: props.colorTop,
+            colorBottom: props.colorBottom,
+            colorLeft: props.colorLeft,
+            colorRight: props.colorLeft,
+            fitRectTransform: props.fitRectTransform,
+            richText: props.richText,
+            alignByGeometry: props.alignByGeometry,
+            horizontalOverflow: props.horizontalOverflow,
+            verticalOverflow: props.verticalOverflow,
+            bestFit: props.bestFit,
+            raycastTarget: props.raycastTarget,
+            fontStyle: props.fontStyle,
+            lineSpacing: props.lineSpacing,
+        };
+        return _this;
+    }
+    GradientText.prototype.componentDidUpdate = function () {
+        console.log('componentDidUpdate');
+        this.updateGradientText();
+    };
+    GradientText.getDerivedStateFromProps = function (props, state) {
+        console.log('getDerivedStateFromProps props:' + JSON.stringify(props));
+        console.log('getDerivedStateFromProps old state:' + JSON.stringify(state));
+        if (props.text !== state.text ||
+            props.color !== state.color ||
+            props.fontSize !== state.fontSize ||
+            props.alignment !== state.alignment ||
+            props.direction !== state.direction ||
+            props.colorTop !== state.colorTop ||
+            props.colorBottom !== state.colorBottom ||
+            props.colorLeft !== state.colorLeft ||
+            props.colorRight !== state.colorRight ||
+            props.fitRectTransform !== state.fitRectTransform ||
+            props.richText !== state.richText ||
+            props.alignByGeometry !== state.alignByGeometry ||
+            props.horizontalOverflow !== state.horizontalOverflow ||
+            props.verticalOverflow !== state.verticalOverflow ||
+            props.bestFit !== state.bestFit ||
+            props.raycastTarget !== state.raycastTarget ||
+            props.fontStyle !== state.fontStyle ||
+            props.lineSpacing !== state.lineSpacing) {
+            return {
+                text: props.text && props.text !== state.text ? props.text : state.text,
+                color: props.color && props.color !== state.color ? props.color : state.color,
+                fontSize: props.fontSize && props.fontSize !== state.fontSize ? props.fontSize : state.fontSize,
+                font: props.font && props.font !== state.font ? props.font : state.font,
+                alignment: props.alignment && props.alignment !== state.alignment ? props.alignment : state.alignment,
+                direction: props.direction && props.direction !== state.direction ? props.direction : state.direction,
+                colorTop: props.colorTop && props.colorTop !== state.colorTop ? props.colorTop : state.colorTop,
+                colorBottom: props.colorBottom && props.colorBottom !== state.colorBottom ? props.colorBottom : state.colorBottom,
+                colorLeft: props.colorLeft && props.colorLeft !== state.colorLeft ? props.colorLeft : state.colorLeft,
+                colorRight: props.colorRight && props.colorRight !== state.colorRight ? props.colorRight : state.colorRight,
+                fitRectTransform: props.fitRectTransform && props.fitRectTransform !== state.fitRectTransform ? props.fitRectTransform : state.fitRectTransform,
+                richText: props.richText && props.richText !== state.richText ? props.richText : state.richText,
+                alignByGeometry: props.alignByGeometry && props.alignByGeometry !== state.alignByGeometry ? props.alignByGeometry : state.alignByGeometry,
+                horizontalOverflow: props.horizontalOverflow && props.horizontalOverflow !== state.horizontalOverflow ? props.horizontalOverflow : state.horizontalOverflow,
+                verticalOverflow: props.verticalOverflow && props.verticalOverflow !== state.verticalOverflow ? props.verticalOverflow : state.verticalOverflow,
+                bestFit: props.bestFit && props.bestFit !== state.bestFit ? props.bestFit : state.bestFit,
+                raycastTarget: props.raycastTarget && props.raycastTarget !== state.raycastTarget ? props.raycastTarget : state.raycastTarget,
+                fontStyle: props.fontStyle && props.fontStyle !== state.fontStyle ? props.fontStyle : state.fontStyle,
+                lineSpacing: props.lineSpacing && props.lineSpacing !== state.lineSpacing ? props.lineSpacing : state.lineSpacing,
+            };
+        }
+        else {
+            return null;
+        }
+    };
+    GradientText.prototype.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;
+    };
+    GradientText.prototype.onLoad = function (e) {
+        this.printLog('OnLoad');
+        var CS = this.getCSharp();
+        if (CS == null) {
+            console.error('Get CS error');
+            return;
+        }
+        var windowId = window.external.id;
+        var puerts = window.require('puerts');
+        var handle = e.target.attachment.handle;
+        var attachment = CS.com.tencent.pandora.CSharpInterface.GetSlotAttachmentByHandle(windowId, handle);
+        if (!attachment) {
+            console.error("can't get relected attachment, handle:".concat(handle));
+            return;
+        }
+        var placeholder = attachment.GetMountingGameObject();
+        this.textObj = placeholder.AddComponent(puerts.$typeof(CS.UnityEngine.UI.Text));
+        this.gradientObj = placeholder.AddComponent(puerts.$typeof(CS.UiEffect.GradientColor));
+        this.updateGradientText();
+    };
+    GradientText.prototype.updateGradientText = function () {
+        var textStr = !this.state.text || typeof (this.state.text) != 'string' ? '' : this.state.text;
+        var color = !this.state.color || typeof (this.state.color) != 'string' ? '#FFFFFFFF' : this.state.color;
+        var fontSize = !this.state.fontSize || typeof (this.state.fontSize) != 'number' ? 18 : this.state.fontSize;
+        var font = !this.state.font || typeof (this.state.font) != 'string' ? 'gamefont' : this.state.font;
+        var alignment = !this.state.alignment || typeof (this.state.alignment) != 'string' ? 'UpperLeft' : this.state.alignment;
+        var direction = !this.state.direction || typeof (this.state.direction) != 'string' ? 'Both' : this.state.direction;
+        var colorTop = !this.state.colorTop || typeof (this.state.colorTop) != 'string' ? '#FFFFFFFF' : this.state.colorTop;
+        var colorBottom = !this.state.colorBottom || typeof (this.state.colorBottom) != 'string' ? '#000000FF' : this.state.colorBottom;
+        var colorLeft = !this.state.colorLeft || typeof (this.state.colorLeft) != 'string' ? '#FF0000FF' : this.state.colorLeft;
+        var colorRight = !this.state.colorRight || typeof (this.state.colorRight) != 'string' ? '#0000FFFF' : this.state.colorLeft;
+        var fitRectTransform = !this.state.fitRectTransform || typeof (this.state.fitRectTransform) != 'boolean' ? false : this.state.fitRectTransform;
+        var richText = !this.state.richText || typeof (this.state.richText) != 'boolean' ? true : this.state.richText;
+        var alignByGeometry = !this.state.alignByGeometry || typeof (this.state.alignByGeometry) != 'boolean' ? false : this.state.alignByGeometry;
+        var horizontalOverflow = !this.state.horizontalOverflow || typeof (this.state.horizontalOverflow) != 'string' ? 'Warp' : this.state.horizontalOverflow;
+        var verticalOverflow = !this.state.verticalOverflow || typeof (this.state.verticalOverflow) != 'string' ? 'Truncate' : this.state.verticalOverflow;
+        var bestFit = !this.state.bestFit || typeof (this.state.bestFit) != 'boolean' ? false : this.state.bestFit;
+        var raycastTarget = !this.state.raycastTarget || typeof (this.state.raycastTarget) != 'boolean' ? true : this.state.raycastTarget;
+        var fontStyle = !this.state.fontStyle || typeof (this.state.fontStyle) != 'string' ? 'Normal' : this.state.fontStyle;
+        var lineSpacing = !this.state.lineSpacing || typeof (this.state.lineSpacing) != 'number' ? 1 : this.state.lineSpacing;
+        if (this.textObj) {
+            this.textObj.text = textStr;
+            this.textObj.fontSize = fontSize;
+            this.textObj.font = this.transFont(font);
+            this.textObj.alignment = this.transAlignment(alignment);
+            this.textObj.color = this.colorRgb(color);
+            this.textObj.richText = richText;
+            this.textObj.alignByGeometry = alignByGeometry;
+            this.textObj.horizontalOverflow = this.transHorizontalOverflow(horizontalOverflow);
+            this.textObj.verticalOverflow = this.transVerticalOverflow(verticalOverflow);
+            this.textObj.bestFit = bestFit;
+            this.textObj.raycastTarget = raycastTarget;
+            this.textObj.fontStyle = this.transFontStyle(fontStyle);
+            this.textObj.lineSpacing = lineSpacing;
+        }
+        else {
+            this.printLog('empty CS.UnityEngine.UI.Text');
+        }
+        if (this.gradientObj) {
+            this.gradientObj.direction = this.transDirection(direction);
+            this.gradientObj.colorTop = this.colorRgb(colorTop);
+            this.gradientObj.colorBottom = this.colorRgb(colorBottom);
+            this.gradientObj.colorRight = this.colorRgb(colorRight);
+            this.gradientObj.colorLeft = this.colorRgb(colorLeft);
+            this.gradientObj.m_fitRectTransform = fitRectTransform;
+        }
+        else {
+            this.printLog('empty CS.UiEffect.GradientColor');
+        }
+    };
+    GradientText.prototype.transFont = function (fontName) {
+        var CS = this.getCSharp();
+        return CS.com.tencent.pandora.TextPartner.GetFont.Invoke(fontName);
+    };
+    GradientText.prototype.transHorizontalOverflow = function (str) {
+        var CS = this.getCSharp();
+        if (str == 'Warp') {
+            return CS.UnityEngine.HorizontalWrapMode.Wrap;
+        }
+        else if (str == 'Overflow') {
+            return CS.UnityEngine.HorizontalWrapMode.Overflow;
+        }
+        else {
+            console.error('invaild HorizontalOverflow');
+            return CS.UnityEngine.HorizontalWrapMode.Wrap;
+        }
+    };
+    GradientText.prototype.transVerticalOverflow = function (str) {
+        var CS = this.getCSharp();
+        if (str == 'Truncate') {
+            return CS.UnityEngine.VerticalWrapMode.Truncate;
+        }
+        else if (str == 'Overflow') {
+            return CS.UnityEngine.VerticalWrapMode.Overflow;
+        }
+        else {
+            console.error('invaild VerticalOverflow');
+            return CS.UnityEngine.VerticalWrapMode.Truncate;
+        }
+    };
+    GradientText.prototype.transFontStyle = function (str) {
+        var CS = this.getCSharp();
+        if (str == 'Normal') {
+            return CS.UnityEngine.FontStyle.Normal;
+        }
+        else if (str == 'Bold') {
+            return CS.UnityEngine.FontStyle.Bold;
+        }
+        else if (str == 'Italic') {
+            return CS.UnityEngine.FontStyle.Italic;
+        }
+        else if (str == 'BoldAndItalic') {
+            return CS.UnityEngine.FontStyle.BoldAndItalic;
+        }
+        else {
+            console.error('invaild FontStyle');
+            return CS.UnityEngine.FontStyle.Normal;
+        }
+    };
+    GradientText.prototype.colorRgb = function (colorStr) {
+        this.printLog("colorList[i]/255[".concat(0 / 255, "]"));
+        this.printLog("colorStr[".concat(colorStr, "]"));
+        //十六进制颜色值的正则表达式
+        var reg = /^#([0-9a-fA-f]{0,}|)$/;
+        var matchRes = colorStr.toString().toLowerCase().match(reg);
+        var transColor = '';
+        this.printLog("matchRes".concat(JSON.stringify(matchRes)));
+        if (matchRes.length > 0)
+            transColor = matchRes[matchRes.length - 1];
+        var colorList = [];
+        while (transColor != '') {
+            var hex = '0x' + transColor.substring(0, 2);
+            this.printLog("hex[".concat(hex, "]"));
+            colorList.push(parseInt(hex, 16));
+            transColor = transColor.substring(2, transColor.length);
+        }
+        var r, g, b, a = 1;
+        for (var i = 0; i < colorList.length; i++) {
+            this.printLog("colorList i[".concat(i, "]item[").concat(colorList[i], "]"));
+            if (i == 0 && colorList[i] != null && colorList[i] != undefined) {
+                r = colorList[i] / 255;
+            }
+            if (i == 1 && colorList[i] != null && colorList[i] != undefined) {
+                g = colorList[i] / 255;
+            }
+            if (i == 2 && colorList[i] != null && colorList[i] != undefined) {
+                b = colorList[i] / 255;
+            }
+            if (i == 3 && colorList[i] != null && colorList[i] != undefined) {
+                a = colorList[i] / 255;
+            }
+        }
+        this.printLog("New Color r[".concat(r, "]g[").concat(g, "]b[").concat(b, "]a[").concat(a, "]"));
+        var CS = this.getCSharp();
+        return CS.UnityEngine.Color(r, g, b, a);
+    };
+    GradientText.prototype.printLog = function (text) {
+        if (this.isPrintLog) {
+            console.log(text);
+        }
+    };
+    GradientText.prototype.transDirection = function (direction) {
+        var CS = this.getCSharp();
+        if (direction == 'Both') {
+            return CS.UiEffect.GradientColor.DIRECTION.Both;
+        }
+        else if (direction == 'Vertical') {
+            return CS.UiEffect.GradientColor.DIRECTION.Vertical;
+        }
+        else if (direction == 'Horizontal') {
+            return CS.UiEffect.GradientColor.DIRECTION.Horizontal;
+        }
+        else {
+            console.error('invaild direction');
+            return CS.UiEffect.GradientColor.DIRECTION.Both;
+        }
+    };
+    GradientText.prototype.transAlignment = function (alignment) {
+        var CS = this.getCSharp();
+        if (alignment == 'UpperLeft') {
+            return CS.UnityEngine.TextAnchor.UpperLeft;
+        }
+        else if (alignment == 'UpperCenter') {
+            return CS.UnityEngine.TextAnchor.UpperCenter;
+        }
+        else if (alignment == 'UpperRight') {
+            return CS.UnityEngine.TextAnchor.UpperRight;
+        }
+        else if (alignment == 'MiddleCenter') {
+            return CS.UnityEngine.TextAnchor.MiddleCenter;
+        }
+        else if (alignment == 'MiddleLeft') {
+            return CS.UnityEngine.TextAnchor.MiddleLeft;
+        }
+        else if (alignment == 'MiddleRight') {
+            return CS.UnityEngine.TextAnchor.MiddleRight;
+        }
+        else if (alignment == 'LowerLeft') {
+            return CS.UnityEngine.TextAnchor.LowerLeft;
+        }
+        else if (alignment == 'LowerCenter') {
+            return CS.UnityEngine.TextAnchor.LowerCenter;
+        }
+        else if (alignment == 'LowerRight') {
+            return CS.UnityEngine.TextAnchor.LowerRight;
+        }
+        else {
+            console.error('invaild alignment');
+            return CS.UnityEngine.TextAnchor.UpperLeft;
+        }
+    };
+    GradientText.prototype.render = function (props) {
+        var style = !props.style ? { width: '200px', height: '200px', backgroundColor: '#FF00FFFF' } : props.style;
+        this.printLog('OnRender');
+        return (h("pixslot", { style: style, src: 'pixui://method:placeholder', onLoad: this.onLoad.bind(this) }));
+    };
+    return GradientText;
+}(Component));
+export { GradientText };

package/ui/components/imageViewer/imageViewer.d.ts

@@ -0,0 +1,23 @@
+import { Component, CSSProperties, h } from 'preact';
+interface ImageViewerProps {
+    src: string;
+    onClose: Function;
+    backgroundStyle?: CSSProperties;
+    imageBoxStyle?: CSSProperties;
+    imageAreaStyle?: CSSProperties;
+    imageStyle?: CSSProperties;
+    closeOnClickOutside?: boolean;
+}
+interface ImageViewerStates {
+    imageHeight: number;
+    imageWidth: number;
+    reCalSize: boolean;
+}
+export declare class ImageViewer extends Component<ImageViewerProps, ImageViewerStates> {
+    constructor(props: ImageViewerProps);
+    onClose: () => void;
+    onBlock: (event: any) => void;
+    handleImageLoad: (event: any) => void;
+    render(): h.JSX.Element;
+}
+export {};