pixuireactcomponents 0.0.0

package/ui/components/imageViewer/imageViewer.js

@@ -0,0 +1,149 @@
+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';
+{ /* {isViewerOpen && (
+        <ImageViewer
+          src={images}
+          currentIndex={currentImage}
+          onClose={closeImageViewer}
+          disableScroll={false}
+          backgroundStyle={{
+            backgroundColor: "rgba(0,0,0,0.9)"
+          }}
+          closeOnClickOutside={true}
+        />
+      )} */
+}
+var ImageViewer = /** @class */ (function (_super) {
+    __extends(ImageViewer, _super);
+    function ImageViewer(props) {
+        var _this = _super.call(this, props) || this;
+        _this.onClose = function () {
+            _this.props.onClose();
+        };
+        _this.onBlock = function (event) {
+            event.stopPropagation();
+        };
+        /* 这种方式无法获取到div宽高，获取到的值都是0 */
+        // componentDidMount(){
+        //     let imageArea = document.getElementById("imageArea");
+        //     let y = imageArea?.clientHeight;
+        //     let x = imageArea?.clientWidth;
+        //     console.log(x,y);
+        // }
+        _this.handleImageLoad = function (event) {
+            // console.log(`img`, event.target.width, event.target.height);
+            var imageX = event.target.width;
+            var imageY = event.target.height;
+            var imageArea = document.getElementById("imageArea");
+            var imageAreaY = imageArea === null || imageArea === void 0 ? void 0 : imageArea.clientHeight;
+            var imageAreaX = imageArea === null || imageArea === void 0 ? void 0 : imageArea.clientWidth;
+            if (typeof imageAreaY !== 'undefined' && typeof imageAreaX !== 'undefined')
+                if (imageAreaX < imageX || imageAreaY < imageY) {
+                    var scaleFactorX = imageAreaX / imageX;
+                    var scaleFactorY = imageAreaY / imageY;
+                    var scaleFactor = 1;
+                    if (scaleFactorX > scaleFactorY)
+                        scaleFactor = scaleFactorY;
+                    else
+                        scaleFactor = scaleFactorX;
+                    // console.log(`需要缩放，缩放系数为${scaleFactor}`);
+                    _this.setState({
+                        imageHeight: imageY * scaleFactor,
+                        imageWidth: imageX * scaleFactor,
+                        reCalSize: true,
+                    }, function () {
+                        // console.log(`状态改变后${this.state.imageHeight},${this.state.imageWidth},${this.state.reCalSize}`)
+                    });
+                }
+        };
+        _this.state = {
+            imageHeight: 0,
+            imageWidth: 0,
+            reCalSize: false,
+        };
+        return _this;
+    }
+    ImageViewer.prototype.render = function () {
+        //@ts-ignore
+        // this.props.imageAreaStyle.backgroundImage=`url(${this.props.src})`; //为backgroundimage选择src
+        // //@ts-ignore
+        // this.props.imageStyle.width=this.state.imageWidth;
+        // //@ts-ignore
+        // this.props.imageStyle.height=this.state.imageHeight;
+        // if (this.state.reCalSize == true && this.state.forceupdate == true) {
+        //     console.log('强制刷新')
+        //     this.setState({
+        //         forceupdate: false,
+        //     })
+        // }
+        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));
+export { ImageViewer };
+var backgroundStyleDefault = {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    backgroundColor: 'rgba(0,0,0,0.8)',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 99,
+    // top: 0,
+    // right: 0,
+    // bottom: 0,
+    // left: 0,
+};
+var imageBoxStyleDefault = {
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+};
+var imageAreaStyleDefault = {
+    width: '80%',
+    height: '80%',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    // backgroundSize: 'contain',
+    // backgroundRepeat:'no-repeat',
+    // backgroundPosition:'center'
+};
+var imageStyleDefault = {
+    maxWidth: '100%',
+    maxHeight: '100%',
+    // objectFit: 'contain', //pixui不支持object-fit属性
+};
+ImageViewer.defaultProps = {
+    backgroundStyle: backgroundStyleDefault,
+    imageBoxStyle: imageBoxStyleDefault,
+    imageAreaStyle: imageAreaStyleDefault,
+    imageStyle: imageStyleDefault,
+    closeOnClickOutside: true,
+};

package/ui/components/outlinetext/OutlineText.d.ts

@@ -0,0 +1,94 @@
+import { Component, CSSProperties, h } from 'preact';
+export declare enum FontStyle {
+    Normal = 0,
+    Bold = 1,
+    Italic = 2,
+    BoldAndItalic = 3
+}
+export declare enum TextAnchor {
+    UpperLeft = 0,
+    UpperCenter = 1,
+    UpperRight = 2,
+    MiddleLeft = 3,
+    MiddleCenter = 4,
+    MiddleRight = 5,
+    LowerLeft = 6,
+    LowerCenter = 7,
+    LowerRight = 8
+}
+export declare enum HorizontalWrapMode {
+    Wrap = 0,
+    Overflow = 1
+}
+export declare enum VerticalWrapMode {
+    Truncate = 0,
+    Overflow = 1
+}
+export interface OutlineTextProps {
+    style?: CSSProperties;
+    text?: string;
+    font?: string;
+    fontStyle?: FontStyle;
+    fontSize?: number;
+    lineSpacing?: number;
+    alignment?: TextAnchor;
+    alignByGeometry?: boolean;
+    horizontalOverflow?: HorizontalWrapMode;
+    verticalOverflow?: VerticalWrapMode;
+    color: {
+        r: number;
+        g: number;
+        b: number;
+        a: number;
+    };
+    outlineColor: {
+        r: number;
+        g: number;
+        b: number;
+        a: number;
+    };
+    outlineDistance: {
+        x: number;
+        y: number;
+    };
+}
+export declare class OutlineText extends Component<OutlineTextProps, OutlineTextProps> {
+    text: any;
+    outline: any;
+    textColor: any;
+    effectColor: any;
+    constructor(props: any);
+    static defaultProps: {
+        style: import("../../../../../lib/preact/src/jsx").JCSSProperties;
+        text: string;
+        font: string;
+        fontStyle: FontStyle;
+        fontSize: number;
+        lineSpacing: number;
+        alignment: TextAnchor;
+        alignByGeometry: boolean;
+        horizontalOverflow: HorizontalWrapMode;
+        verticalOverflow: VerticalWrapMode;
+        color: {
+            r: number;
+            g: number;
+            b: number;
+            a: number;
+        };
+        outlineColor: {
+            r: number;
+            g: number;
+            b: number;
+            a: number;
+        };
+        outlineDistance: {
+            x: number;
+            y: number;
+        };
+    };
+    componentDidUpdate(): void;
+    OnLoad: (e: any) => void;
+    colorRgb(colorStr: any): any;
+    updateOutlineText(): void;
+    render(): h.JSX.Element;
+}

package/ui/components/outlinetext/OutlineText.js

@@ -0,0 +1,167 @@
+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';
+export var FontStyle;
+(function (FontStyle) {
+    FontStyle[FontStyle["Normal"] = 0] = "Normal";
+    FontStyle[FontStyle["Bold"] = 1] = "Bold";
+    FontStyle[FontStyle["Italic"] = 2] = "Italic";
+    FontStyle[FontStyle["BoldAndItalic"] = 3] = "BoldAndItalic";
+})(FontStyle || (FontStyle = {}));
+export var TextAnchor;
+(function (TextAnchor) {
+    TextAnchor[TextAnchor["UpperLeft"] = 0] = "UpperLeft";
+    TextAnchor[TextAnchor["UpperCenter"] = 1] = "UpperCenter";
+    TextAnchor[TextAnchor["UpperRight"] = 2] = "UpperRight";
+    TextAnchor[TextAnchor["MiddleLeft"] = 3] = "MiddleLeft";
+    TextAnchor[TextAnchor["MiddleCenter"] = 4] = "MiddleCenter";
+    TextAnchor[TextAnchor["MiddleRight"] = 5] = "MiddleRight";
+    TextAnchor[TextAnchor["LowerLeft"] = 6] = "LowerLeft";
+    TextAnchor[TextAnchor["LowerCenter"] = 7] = "LowerCenter";
+    TextAnchor[TextAnchor["LowerRight"] = 8] = "LowerRight";
+})(TextAnchor || (TextAnchor = {}));
+export var HorizontalWrapMode;
+(function (HorizontalWrapMode) {
+    HorizontalWrapMode[HorizontalWrapMode["Wrap"] = 0] = "Wrap";
+    HorizontalWrapMode[HorizontalWrapMode["Overflow"] = 1] = "Overflow";
+})(HorizontalWrapMode || (HorizontalWrapMode = {}));
+export var VerticalWrapMode;
+(function (VerticalWrapMode) {
+    VerticalWrapMode[VerticalWrapMode["Truncate"] = 0] = "Truncate";
+    VerticalWrapMode[VerticalWrapMode["Overflow"] = 1] = "Overflow";
+})(VerticalWrapMode || (VerticalWrapMode = {}));
+var defaultStyle = {
+    width: 200,
+    height: 200
+};
+export var OutlineText = /** @class */ (function (_super) {
+    __extends(OutlineText, _super);
+    function OutlineText(props) {
+        var _this = _super.call(this, props) || this;
+        _this.OnLoad = function (e) {
+            console.log('!!!!!!!!!!!!!!');
+            if (!window.require) {
+                console.error('need puerts env');
+            }
+            var CS = window.require('csharp');
+            if (!CS) {
+                console.error('need puerts env');
+                return;
+            }
+            var puerts = window.require('puerts');
+            console.log('?????');
+            var windowId = window.external.id;
+            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;
+            }
+            console.log('windowId:' + windowId.toString() + '    handle:' + handle.toString());
+            var placeholder = attachment.GetMountingGameObject();
+            var text = placeholder.AddComponent(puerts.$typeof(CS.UnityEngine.UI.Text));
+            _this.text = text;
+            var outline = placeholder.AddComponent(puerts.$typeof(CS.UnityEngine.UI.Outline));
+            _this.outline = outline;
+            _this.updateOutlineText();
+        };
+        return _this;
+    }
+    OutlineText.prototype.componentDidUpdate = function () {
+        console.log('componentDidUpdate');
+        this.updateOutlineText();
+    };
+    OutlineText.prototype.colorRgb = function (colorStr) {
+        //十六进制颜色值的正则表达式
+        var reg = /^#([0-9a-fA-f]{0,}|)$/;
+        var matchRes = colorStr.toString().toLowerCase().match(reg);
+        var transColor = '';
+        if (matchRes.length > 0)
+            transColor = matchRes[matchRes.length - 1];
+        // eslint-disable-next-line @typescript-eslint/no-array-constructor
+        var colorList = new Array();
+        while (transColor != '') {
+            var hex = '0x' + transColor.substring(0, 2);
+            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++) {
+            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;
+            }
+        }
+        var CS = window.require('csharp');
+        return CS.UnityEngine.Color(r, g, b, a);
+    };
+    OutlineText.prototype.updateOutlineText = function () {
+        var CS = window.require('csharp');
+        this.text.text = this.props.text;
+        this.text.font = CS.com.tencent.pandora.TextPartner.GetFont.Invoke(this.props.font);
+        this.text.fontStyle = this.props.fontStyle;
+        this.text.fontSize = this.props.fontSize;
+        this.text.lineSpacing = this.props.lineSpacing;
+        this.text.alignment = this.props.alignment;
+        this.text.alignByGeometry = this.props.alignByGeometry;
+        this.text.horizontalOverflow = this.props.horizontalOverflow;
+        this.text.verticalOverflow = this.props.verticalOverflow;
+        this.text.color = CS.UnityEngine.Color(this.props.color.r, this.props.color.g, this.props.color.b, this.props.color.a);
+        this.outline.effectColor = CS.UnityEngine.Color(this.props.outlineColor.r, this.props.outlineColor.g, this.props.outlineColor.b, this.props.outlineColor.a);
+        this.outline.effectDistance = new CS.UnityEngine.Vector2(this.props.outlineDistance.x, this.props.outlineDistance.y);
+    };
+    OutlineText.prototype.render = function () {
+        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,
+        text: 'NEW TEXT',
+        font: 'gamefont',
+        fontStyle: FontStyle.Normal,
+        fontSize: 14,
+        lineSpacing: 1,
+        alignment: TextAnchor.UpperLeft,
+        alignByGeometry: false,
+        horizontalOverflow: HorizontalWrapMode.Wrap,
+        verticalOverflow: VerticalWrapMode.Truncate,
+        color: {
+            r: 1,
+            g: 1,
+            b: 1,
+            a: 1
+        },
+        outlineColor: {
+            r: 0,
+            g: 0,
+            b: 0,
+            a: 1
+        },
+        outlineDistance: {
+            x: 1,
+            y: -1
+        },
+    };
+    return OutlineText;
+}(Component));

package/ui/components/progress/Progress.d.ts

@@ -0,0 +1,34 @@
+import { Component, h } from 'preact';
+export interface ProgressProps {
+    percent: number;
+    wrapperWidth: number;
+    wrapperHeight: number;
+    height: number;
+    dotWidth: number;
+    dotHeight: number;
+    dotWrapperWidth: number;
+    dotWrapperHeight: number;
+    outerBg: string;
+    innerBg: string;
+    dotBg: string;
+    onDragStart: Function | null;
+    onDrag: Function | null;
+    onDragEnd: Function | null;
+}
+export declare class Progress extends Component<ProgressProps, {
+    percent: number;
+}> {
+    private refWrapper;
+    constructor(props: any);
+    componentDidMount(): void;
+    componentWillReceiveProps(nextProps: any): void;
+    onDragStart: (event: any) => void;
+    onDrag: (event: any) => void;
+    onDragEnd: (event: any) => void;
+    computeWrapperStyle: () => void;
+    computeOuterStyle: () => void;
+    computeInnerStyle: () => void;
+    computeDotWrapperStyle: () => void;
+    computeDotStyle: () => void;
+    render(): h.JSX.Element;
+}

package/ui/components/progress/Progress.js

@@ -0,0 +1,142 @@
+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 __());
+    };
+})();
+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 { Component, createRef, h } from 'preact';
+var row_center_center = {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center'
+};
+var wrapperStyle;
+var outerStyle;
+var innerStyle;
+var dotStyle;
+var dotWrapperStyle;
+var lastX = undefined; // 上一次位置的横坐标
+var count = 0; // 拖动条距离最左端的位置 [0, this.props.wrapperWidth]
+var rect = undefined; // 滑动区域
+var Progress = /** @class */ (function (_super) {
+    __extends(Progress, _super);
+    function Progress(props) {
+        var _this = _super.call(this, props) || this;
+        _this.refWrapper = createRef();
+        _this.onDragStart = function (event) {
+            console.log('【Progress】DragStart event.clientX--' + event.clientX + '-----percent----' + _this.state.percent + '-----currentX----' + (_this.state.percent / 100 * _this.props.wrapperWidth));
+            lastX = event.clentX;
+            count = _this.state.percent / 100 * _this.props.wrapperWidth;
+            if (_this.props.onDragStart) {
+                _this.props.onDragStart();
+            }
+        };
+        _this.onDrag = function (event) {
+            if (event.clientX < rect.left || event.clientX > rect.right)
+                return;
+            if (lastX == undefined) {
+                lastX = event.clientX;
+                return;
+            }
+            var move = Number(event.clientX) - Number(lastX);
+            count += move;
+            count = Math.min(_this.props.wrapperWidth, count);
+            count = Math.max(0, count);
+            var newPercent = count / _this.props.wrapperWidth * 100;
+            _this.setState({
+                percent: newPercent
+            }, function () {
+                if (_this.props.onDrag)
+                    _this.props.onDrag(newPercent);
+            });
+            lastX = event.clientX;
+        };
+        _this.onDragEnd = function (event) {
+            lastX = undefined;
+            console.log('【Progress】DragEnd event.clientX--' + event.clientX + '-----percent----' + _this.state.percent + '-----currentX----' + (_this.state.percent / 100 * _this.props.wrapperWidth));
+            if (_this.props.onDragEnd) {
+                _this.props.onDragEnd(_this.state.percent);
+            }
+        };
+        _this.computeWrapperStyle = function () {
+            wrapperStyle = __assign({ width: _this.props.wrapperWidth + 'px', height: _this.props.wrapperHeight + 'px' }, row_center_center);
+        };
+        _this.computeOuterStyle = function () {
+            outerStyle = {
+                width: '100%',
+                height: _this.props.height + 'px',
+                backgroundImage: "url(".concat(_this.props.outerBg, ")"),
+                backgroundSize: '100% 100%'
+            };
+        };
+        _this.computeInnerStyle = function () {
+            var _width = Math.floor(_this.state.percent) + '%';
+            innerStyle = {
+                width: _width,
+                height: '100%',
+                backgroundImage: "url(".concat(_this.props.innerBg, ")"),
+                backgroundSize: '100% 100%'
+            };
+        };
+        _this.computeDotWrapperStyle = function () {
+            dotWrapperStyle = __assign({ position: 'absolute', width: _this.props.dotWrapperWidth + 'px', height: _this.props.dotWrapperHeight + 'px', marginTop: (_this.props.height - _this.props.dotWrapperHeight) / 2 + 'px', marginLeft: (_this.props.wrapperWidth * _this.state.percent / 100 - _this.props.dotWrapperWidth / 2) + 'px' }, row_center_center
+            // backgroundColor: '#FF000066'
+            );
+        };
+        _this.computeDotStyle = function () {
+            dotStyle = {
+                width: _this.props.dotWidth + 'px',
+                height: _this.props.dotHeight + 'px',
+            };
+        };
+        _this.state = {
+            percent: Math.floor(_this.props.percent)
+        };
+        _this.computeWrapperStyle();
+        _this.computeOuterStyle();
+        return _this;
+    }
+    Progress.prototype.componentDidMount = function () {
+        rect = this.refWrapper.current.getBoundingClientRect();
+    };
+    Progress.prototype.componentWillReceiveProps = function (nextProps) {
+        if (nextProps.percent == this.props.percent)
+            return;
+        this.setState({
+            percent: nextProps.percent
+        });
+    };
+    Progress.prototype.render = function () {
+        this.computeInnerStyle();
+        this.computeDotWrapperStyle();
+        this.computeDotStyle();
+        return (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 },
+                        h("img", { src: this.props.dotBg, style: dotStyle }))))));
+    };
+    return Progress;
+}(Component));
+export { Progress };

package/ui/components/slapface/Slapface.d.ts

@@ -0,0 +1,18 @@
+import { h, Component } from '../../../../../lib/preact/src';
+export declare class Slapface extends Component<any, any> {
+    componentWillMount(): Promise<void>;
+    private loadGroup;
+    private switchItems;
+    private btn_closeButton;
+    private pic_loading;
+    private actDisplay;
+    private JumpFun;
+    private isNewDay;
+    private controlShowToday;
+    private nextDayTime;
+    private cstRightPos;
+    private cstBottomPos;
+    closeAct: () => void;
+    constructor(props: any);
+    render(): h.JSX.Element;
+}