pixuireactcomponents 1.2.2 → 1.2.31

package/ui/components/carousel/Carousel.tsx

@@ -1,279 +0,0 @@
-import { Component, CSSProperties, h } from 'preact';
-import React, { useState, useEffect, useRef, useMemo, useImperativeHandle } from '../../../../../lib/preact/hooks/src';
-// import React, { useState, useEffect, useRef, useMemo } from 'preact/hooks';
-
-const indicatorStyle: CSSProperties = { width: '20px', height: '8px', margin: '5px', backgroundColor: '#cecfda', borderRadius: '3px' };
-const indicatorSelectedStyle = { ...indicatorStyle, backgroundColor: '#fafbfc' };
-
-export function Carousel(props) {
-    const {
-        children = [],
-        defaultIndex = 1,
-        compWidth = 100,
-        compHeight = 100,
-        autoplay = true,
-        switchDuration = 3000,
-        loop = true,
-        isVertical = false,
-        touchable = true,
-        onSlideChange = null,
-        onclickEvent = null,
-    }: {
-        children: HTMLElement[];
-        defaultIndex: number;
-        compWidth: number;
-        compHeight: number;
-        autoplay: boolean;
-        switchDuration: number;
-        loop: boolean;
-        isVertical: boolean;
-        touchable: boolean;
-        onSlideChange: Function | null;
-        onclickEvent: Function | null;
-    } = props;
-
-
-    useImperativeHandle(props.cRef, () => ({
-        handleNext: handleNext,
-        handlePrev: handlePrev
-    }));
-
-    const duration = switchDuration < 1000 ? 1000 : switchDuration;
-    const [showIndex, setShowIndex] = useState(defaultIndex);
-    //轮播元素正在滚动
-    let isMoving = useRef(false);
-    //鼠标手势信息
-    let isMouseDown = useRef(false);
-    let mouseDownX = useRef(0);
-    let mouseDownY = useRef(0);
-
-    const handleNextRef = useRef(() => { });
-    const nextInterval = useRef();
-    const [showTransition, setShowTransition] = useState(true);
-    const [gesteroffset, setGesteroffset] = useState([0, 0]);
-
-    const [logTex, setLogTex] = useState('');
-
-    const offset = useMemo(() => -(isVertical ? compHeight : compWidth) * showIndex, [showIndex]);
-
-    const itemBoxStyle = { minWidth: compWidth + 'px', minHeight: compHeight + 'px', maxWidth: compWidth + 'px', maxHeight: compHeight + 'px', };
-
-    const carouselItems = useMemo(() => {
-        const firstChild = children[0];
-        const lastChild = children[children.length - 1];
-        return [lastChild, ...children, firstChild];
-    }, [children]);
-
-    const isLastCarouseItem = () => showIndex === carouselItems.length - 1;
-    const isFirstCarouseLastItem = () => showIndex === 0;
-
-    useEffect(()=>{
-        setNextInterval();
-    },[autoplay])
-
-    useEffect(() => {
-        //每次跳转前判断打开动画，否则动画关闭以后不会调用handleTransitionEnd
-        if (!isLastCarouseItem() && !isFirstCarouseLastItem()) {
-            setShowTransition(true);
-        }
-    }, [showIndex]);
-
-    //更新handleNext的环境
-    useEffect(() => {
-        handleNextRef.current = handleNext;
-    });
-    const setNextInterval = () => {
-        clearInterval(nextInterval.current as NodeJS.Timeout);
-        if (autoplay) {
-            nextInterval.current = setInterval(() => {
-                handleNextRef.current();
-            }, duration);
-        }
-    };
-    useEffect(() => {
-        setNextInterval();
-    }, []);
-
-    const handlePrev = () => {
-        if (isMoving.current) return;
-        isMoving.current = true;
-
-        if (showIndex === 0) {
-            setShowIndex(carouselItems.length - 1);
-        } else {
-            setShowIndex(showIndex - 1);
-        }
-    };
-
-    const handleNext = () => {
-        // console.log('nex', isMoving.current, showIndex, isVertical ? `translate(0px, ${offset}px)` : `translate(${offset}px, 0px)`)
-        if (!loop && showIndex == carouselItems.length - 2) return;
-        if (isMoving.current) return;
-        isMoving.current = true;
-        setShowIndex(showIndex + 1);
-    };
-
-    const handleTransitionEnd = () => {
-
-        //判断前后补位元素准备跳转
-        //在动画结束以后关掉，否则用鼠标拖动的时候不能补充剩下的offset
-        if (isLastCarouseItem() || isFirstCarouseLastItem()) {
-            setShowTransition(false);
-        }
-
-        // console.log('showIndex' + showIndex)
-        isMoving.current = false;
-        //触发onSlideChange
-        if (!isLastCarouseItem() && !isFirstCarouseLastItem() && onSlideChange) onSlideChange(showIndex - 1);
-
-        // 处理首尾特殊case
-        if (isLastCarouseItem()) {
-            setShowIndex(1);
-        }
-        if (isFirstCarouseLastItem()) {
-            setShowIndex(carouselItems.length - 2);
-        }
-    };
-
-    const gestureUp = () => {
-        // setLogTex(logTex + 'UP ');
-        if (!touchable) return;
-        if (isMoving.current) return;
-        //打开动画
-        setShowTransition(true);
-        isMouseDown.current = false;
-
-        //拖动大于1/3的时候跳转
-        if (isVertical) {
-            if (gesteroffset[1] > compHeight / 3) {
-                handlePrev();
-            } else if (gesteroffset[1] < -compHeight / 3) {
-                handleNext();
-            }
-        } else {
-            if (gesteroffset[0] > compWidth / 3) {
-                handlePrev();
-            } else if (gesteroffset[0] < -compWidth / 3) {
-                handleNext();
-            }
-        }
-        setGesteroffset([0, 0]);
-        setNextInterval();
-    };
-
-    const gestureMove = (e) => {
-        if (!touchable) return;
-        if (!isMouseDown.current) return;
-
-        let l = e.target.getBoundingClientRect().left;
-        let r = e.target.getBoundingClientRect().right;
-        let t = e.target.getBoundingClientRect().top;
-        let b = e.target.getBoundingClientRect().bottom;
-        let x = e.clientX;
-        let y = e.clientY;
-        setGesteroffset([e.clientX - mouseDownX.current, e.clientY - mouseDownY.current]);
-        //计算滑动超出元素范围
-        if (x < l || x > r || y > b || y < t) {
-            gestureUp();
-        }
-    };
-
-    const gestureDown = (e) => {
-        if (!touchable) return;
-        if (isMoving.current) return;
-        if (nextInterval.current) {
-            clearInterval(nextInterval.current as NodeJS.Timeout);
-            nextInterval.current = null;
-        }
-        mouseDownX.current = e.clientX;
-        mouseDownY.current = e.clientY;
-        isMouseDown.current = true;
-        //拖动时关闭动画
-        setShowTransition(false);
-
-    };
-
-    const gestureClick = (props) => {
-        if (isMoving.current) return;
-        if (onclickEvent) {
-            onclickEvent(showIndex - 1);
-        }
-    };
-
-    return (
-        <div style={{ flexDirection: 'column'}}>
-
-            <div
-                style={{
-                    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 ${showTransition ? '0.5s' : '0s'} ease 0s`,
-                        transform: isVertical ? `translate(0px, ${offset + gesteroffset[1]}px)` : `translate(${offset + gesteroffset[0]}px, 0px)`,
-                        flexDirection: isVertical ? 'column' : 'row',
-                        flexShrink: 0,
-                    }}
-                    class='wrapper'
-                    onTransitionEnd={handleTransitionEnd}
-                >
-                    {carouselItems.map((child) => child)}
-                </div>
-            </div>
-
-            {/* 手势 */}
-            <div draggable={true} style={{
-                ...itemBoxStyle, position: 'absolute',
-                // backgroundColor: 'rgba(255,0,0,0.5)', 
-            }}
-                onClick={() => { gestureClick(props); }}
-                class={'GestureComp'}
-                // onMouseUp={() => { gestureUp(); }}
-                // onMouseMove={(e) => { gestureMove(e); }}
-                // onMouseDown={gestureDown}
-                onDragStart={gestureDown}
-                // onMouseOut={() => { gestureUp(); }}
-                // onTouchEnd={() => { gestureUp(); }}
-                onDrag={(e) => {
-                    gestureMove(e);
-                    // setLogTex(logTex + ((e.target as any).className == 'GestureComp' ? '' : '111'));
-                }}
-                onDragEnd={() => { gestureUp(); }}
-            // onTouchStart={() => { setLogTex(logTex + 'st') }}
-            />
-
-            {/* 调试信息 */}
-            {/* {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 >
-    );
-}
-
-Carousel.Item = (props) => {
-
-    return <div style={{
-        // width: '100%',
-        // height: '100%',
-        // flexShrink: 0,
-    }}
-    > {props.children}</div >;
-};

package/ui/components/checkBox/CheckBox.tsx

@@ -1,40 +0,0 @@
-import { Component, CSSProperties, h } from 'preact';
-import React, { useState, useEffect, useRef, useMemo, useImperativeHandle } from '../../../../../lib/preact/hooks/src';
-import { Images } from '../../sample/Images';
-// import React, { useState, useEffect, useRef, useMemo } from 'preact/hooks';
-
-const rootStyle: CSSProperties = { width: '20px', height: '20px' };
-const boxNormalStyle: CSSProperties = {
-    width: '100%',
-    height: '100%',
-    backgroundImage: `url(${Images.checkbox0})`,
-    backgroundSize: '100% 100%',
-};
-const boxCheckedStyle: CSSProperties = {
-    width: '100%',
-    height: '100%',
-    backgroundImage: `url(${Images.checkbox1})`,
-    backgroundSize: '100% 100%',
-};
-export function Checkbox(props) {
-    const {
-        selectedChanged = null,
-        defauleSelected = false,
-    }: {
-        selectedChanged: Function | null;
-        defauleSelected: boolean;
-    } = props;
-    const [selected, setSelected] = useState(defauleSelected);
-    const cli = () => {
-        if (selectedChanged) {
-            selectedChanged(!selected);
-        }
-        setSelected(!selected);
-    };
-    return (
-        <div style={rootStyle} onClick={cli}>
-            {selected ? <div style={boxCheckedStyle} /> : <div style={boxNormalStyle} />}
-        </div>
-
-    );
-}

package/ui/components/dropdown/Dropdown.tsx

@@ -1,126 +0,0 @@
-import { Component, CSSProperties, h } from 'preact';
-import { DropdownOptionUI } from './DropdownOptionUI';
-import { DropdownSpreadMainUI } from './DropdownSpreadMainUI';
-import { DropdownUnspreadMainUI } from './DropdownUnspreadMainUI';
-
-export interface DropdownConfig<T> {
-    spreadStyle: CSSProperties;
-    datas: T[];
-}
-const optionsDivStyle: CSSProperties = {
-    marginTop: 3,
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'flex-start',
-    alignItems: 'center',
-    height: 'auto',
-    overflow: 'scroll',
-    overflowStyle: 'none',
-};
-
-
-export class Dropdown<
-    T,
-    DDUnspreadMainUI extends DropdownUnspreadMainUI<T>,
-    DDSpreadMainUI extends DropdownSpreadMainUI<T>,
-    DDOptionUI extends DropdownOptionUI<T>>
-    extends Component<
-        {
-            config: DropdownConfig<T>;
-            onChoose: Function;
-            defaultIndex: number | null;
-            unspreadMainUI: DDUnspreadMainUI;
-            spreadMainUI: DDSpreadMainUI;
-            optionsUI: DDOptionUI[];
-        },
-        {
-            selectedIndex: number;
-            isSpread: boolean;    // dropdown 列表是否展开
-        }>{
-
-    constructor(props) {
-        super(props);
-
-        this.addNetEvents();
-        this.addLogicEvents();
-
-        let initIndex: number = this.props.defaultIndex == null ? 0 : this.props.defaultIndex;
-
-        this.state = {
-            selectedIndex: initIndex,
-            isSpread: false
-        };
-    }
-
-    componentWillUnmount() {
-        this.removeLogicEvents();
-        this.removeNetEvents();
-    }
-
-    addNetEvents = () => {
-
-    }
-
-    removeNetEvents = () => {
-
-    }
-
-    addLogicEvents = () => {
-
-    }
-
-    removeLogicEvents = () => {
-
-    }
-
-    openList = () => {
-        // console.warn("open dropdown====")
-        this.setState({
-            isSpread: true
-        });
-    }
-
-    closeList = () => {
-        // console.warn("close dropdown====")
-        this.setState({
-            isSpread: false
-        });
-    }
-
-    onChoose = (index: number) => {
-        this.props.onChoose(index);
-        // console.warn('dropdown-=----', index)
-        this.setState({
-            selectedIndex: index,
-            isSpread: false
-        });
-    }
-
-    render() {
-        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>);
-        }
-
-        this.props.spreadMainUI.props.info = this.props.config.datas[this.state.selectedIndex];
-        this.props.spreadMainUI.props.closeList = this.closeList;
-
-        this.props.optionsUI.forEach((v, index) => { v.props.onChoose = () => { this.onChoose(index); }; });
-        let _optionsUI = this.props.optionsUI.filter(v => 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>
-        );
-    }
-}

package/ui/components/dropdown/DropdownOptionUI.tsx

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

package/ui/components/dropdown/DropdownSpreadMainUI.tsx

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

package/ui/components/dropdown/DropdownUnspreadMainUI.tsx

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

package/ui/components/outlinetext/OutlineText.tsx

@@ -1,184 +0,0 @@
-import { Component, CSSProperties, h} from 'preact';
-export enum FontStyle{
-    Normal,
-    Bold,
-    Italic,
-    BoldAndItalic
-}
-export enum TextAnchor{
-    UpperLeft,
-    UpperCenter,
-    UpperRight,
-    MiddleLeft,
-    MiddleCenter,
-    MiddleRight,
-    LowerLeft,
-    LowerCenter,
-    LowerRight,
-}
-export enum HorizontalWrapMode{
-    Wrap,
-    Overflow
-}
-export enum VerticalWrapMode{
-    Truncate,
-    Overflow
-}
-const defaultStyle: CSSProperties = {
-    width : 200,
-    height : 200
-};
-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 class OutlineText extends Component<
-    OutlineTextProps,
-    OutlineTextProps>{
-        text: any;
-        outline: any;
-        textColor: any;
-        effectColor: any;
-        constructor(props){
-            super(props);
-        }
-        static 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
-            },
-        };
-        componentDidUpdate () {
-            console.log('componentDidUpdate');
-            this.updateOutlineText();
-        }
-        OnLoad = (e) => {
-            console.log('!!!!!!!!!!!!!!');
-            if (!require) {
-                console.error('need puerts env');
-            }
-            const CS = require('csharp');
-            if (!CS) {
-                console.error('need puerts env');
-                return;
-            }
-            const puerts = require('puerts');
-            console.log('?????');
-            const windowId = (window as any).external.id;
-            
-            const handle = e.target.attachment.handle;
-            const attachment = CS.com.tencent.pandora.CSharpInterface.GetSlotAttachmentByHandle(windowId, handle);
-            if (!attachment) {
-                console.error(`can't get relected attachment, handle:${handle}`);
-                return;
-            }
-            console.log('windowId:' + windowId.toString() + '    handle:' + handle.toString());
-            const placeholder = attachment.GetMountingGameObject();
-            const text = placeholder.AddComponent(puerts.$typeof(CS.UnityEngine.UI.Text));
-            this.text = text;
-            const outline = placeholder.AddComponent(puerts.$typeof(CS.UnityEngine.UI.Outline));
-            this.outline = outline;
-            this.updateOutlineText();
-        }
-        colorRgb (colorStr) {
-            //十六进制颜色值的正则表达式
-            let reg = /^#([0-9a-fA-f]{0,}|)$/;
-            let matchRes = colorStr.toString().toLowerCase().match(reg);
-            let transColor = '';
-            if (matchRes.length > 0) transColor = matchRes[matchRes.length - 1];
-            // eslint-disable-next-line @typescript-eslint/no-array-constructor
-            let colorList = new Array();
-            while(transColor != '') {
-                let hex = '0x' + transColor.substring(0, 2);
-                colorList.push(parseInt(hex, 16));
-                transColor = transColor.substring(2, transColor.length);
-            }
-            let r,g,b,a = 1;
-            for(let 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;
-                }
-            }
-            const CS = (window as any).require('csharp');
-            return CS.UnityEngine.Color(r, g, b, a);
-        }
-        updateOutlineText(){
-            const CS = (window as any).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);
-        }
-        render(){
-            return (
-                <div style={this.props.style}>
-                <pixslot style={{width:'100%', height:'100%'}} src={'pixui://method:placeholder'} onLoad= {this.OnLoad.bind(this)} />
-                </div>
-            );
-        }
-        
-    }