pixuireactcomponents 1.2.2 → 1.2.31

package/ui/components/progress/Progress.tsx

@@ -1,174 +0,0 @@
-import { Component, createRef, CSSProperties, h } from 'preact';
-
-const row_center_center: CSSProperties = {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center'
-};
-
-export interface ProgressProps {
-    percent: number;      // 0-100,表示0%-100%
-    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;   // 拖动结束的事件
-}
-
-let wrapperStyle: CSSProperties;
-let outerStyle: CSSProperties;
-let innerStyle: CSSProperties;
-let dotStyle: CSSProperties;
-let dotWrapperStyle: CSSProperties;
-
-let lastX = undefined;// 上一次位置的横坐标
-let count = 0; // 拖动条距离最左端的位置 [0, this.props.wrapperWidth]
-let rect: any = undefined; // 滑动区域
-
-export class Progress extends Component<
-    ProgressProps,
-    {
-        percent: number;
-    }>{
-
-    private refWrapper: any = createRef()
-
-
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            percent: Math.floor(this.props.percent)
-        };
-
-        this.computeWrapperStyle();
-        this.computeOuterStyle();
-    }
-
-    componentDidMount() {
-        rect = this.refWrapper.current.getBoundingClientRect();
-    }
-
-    componentWillReceiveProps(nextProps) {
-        if (nextProps.percent == this.props.percent) return;
-        this.setState({
-            percent: nextProps.percent
-        });
-    }
-
-    onDragStart = (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();
-        }
-    }
-
-    onDrag = (event) => {
-        if (event.clientX < rect.left || event.clientX > rect.right) return;
-
-        if (lastX == undefined) {
-            lastX = event.clientX;
-            return;
-        }
-
-        let move = Number(event.clientX) - Number(lastX);
-        count += move;
-        count = Math.min(this.props.wrapperWidth, count);
-        count = Math.max(0, count);
-
-        let newPercent = count / this.props.wrapperWidth * 100;
-        this.setState({
-            percent: newPercent
-        }, () => {
-            if (this.props.onDrag) this.props.onDrag(newPercent);
-        });
-        lastX = event.clientX;
-    }
-
-    onDragEnd = (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);
-        }
-    }
-
-    computeWrapperStyle = () => {
-        wrapperStyle = {
-            width: this.props.wrapperWidth + 'px',
-            height: this.props.wrapperHeight + 'px',
-            ...row_center_center
-        };
-    }
-
-    computeOuterStyle = () => {
-        outerStyle = {
-            width: '100%',
-            height: this.props.height + 'px',
-            backgroundImage: `url(${this.props.outerBg})`,
-            backgroundSize: '100% 100%'
-        };
-    }
-
-    computeInnerStyle = () => {
-        let _width = Math.floor(this.state.percent) + '%';
-        innerStyle = {
-            width: _width,
-            height: '100%',
-            backgroundImage: `url(${this.props.innerBg})`,
-            backgroundSize: '100% 100%'
-        };
-    }
-
-    computeDotWrapperStyle = () => {
-        dotWrapperStyle = {
-            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'
-        };
-    }
-
-    computeDotStyle = () => {
-        dotStyle = {
-            width: this.props.dotWidth + 'px',
-            height: this.props.dotHeight + 'px',
-        };
-    }
-
-    render() {
-        this.computeInnerStyle();
-        this.computeDotWrapperStyle();
-        this.computeDotStyle();
-
-        return (
-            <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}>
-                            <img src={this.props.dotBg} style={dotStyle} />
-                        </div>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-}

package/ui/components/slapface/Slapface.tsx

@@ -1,284 +0,0 @@
-import { h, Component, CSSProperties } from "preact";
-
-//@ts-ignore
-import SlapfaceLess from "./less/Slapface.less";
-// import { Images } from 'src/pixUIReactComponents/ui/sample/Images';
-
-interface SettingsItems {
-    readonly ani_switch_type: number,
-    readonly is_mask: boolean
-}
-
-//默认配置项
-const settingsitems: SettingsItems = {
-    ani_switch_type: 1,
-    is_mask: false
-}
-
-//默认无跳转按钮
-let jumpButton = {
-	pic_changtai : '',
-	pic_yaxia : '',
-	pic_xuanfu : ''
-}
-
-interface SlapfaceNodeInfo {
-    index: number,
-    next: SlapfaceNodeInfo
-}
-
-class slapfaceNode implements SlapfaceNodeInfo {
-    public index;
-    public next;
-    constructor(par_index?) {
-        if (par_index == undefined) this.index = -1;
-        else this.index = par_index;
-        this.next = null;
-    }
-}
-
-interface SlapfaceNodeListInfo {
-    head: slapfaceNode,
-    tail: slapfaceNode,
-    groupArr: groupInfo[],
-    size: number,
-    Add(index: number, next: slapfaceNode): slapfaceNode,
-    DeleteNext(curParam: slapfaceNode): void,
-    CheckReady(): number
-}
-
-class slapfaceNodeList implements SlapfaceNodeListInfo {
-    public head;
-    public tail;
-    public groupArr;
-    public size;
-
-    constructor(groupArr?: groupInfo[]) {
-        this.head = new slapfaceNode();
-        let cur = this.head;
-        this.size = 0;
-
-        if (groupArr) {
-            for (let i = 0; i < groupArr.length; i++) {
-                cur.next = new slapfaceNode(i);
-                cur = cur.next;
-            }
-            this.groupArr = groupArr;
-            this.size += groupArr.length;
-        }
-        this.tail = cur;
-    }
-
-    public Add(index: number, next: slapfaceNode): slapfaceNode {
-        this.tail.next = new slapfaceNode(index);
-        this.tail = this.tail.next;
-        ++this.size;
-        return this.tail;
-    }
-    
-    public DeleteNext(curParam: slapfaceNode): void {
-        if (curParam.next == null) return;
-        else {
-            curParam.next = curParam.next.next;
-        }
-        --this.size;
-    }
-
-    public CheckReady(): number {
-        let cur: slapfaceNode = this.head;
-        while (cur.next != null) {
-            if (this.groupArr[cur.next.index].isLoadDone) {
-                cur = cur.next;
-            }
-            else {
-                let retIndex = cur.next.index;
-                this.DeleteNext(cur);
-                return retIndex;
-            }
-        }
-        return -1;
-    }
-}
-
-interface groupInfo {
-    //用于判断是否拍脸图是否已经加载
-    isLoadDone: boolean,
-    picture: string,
-    width: number,
-    height: number
-}
-
-interface SlapfaceInfo {
-    LoadGroup: groupInfo[];
-    jumpButton : object;
-    settingsitems : SettingsItems;
-    btn_closeButton : string;
-    pic_loading : string
-}
-
-export class Slapface extends Component<any, any>
-{
-    private LoadGroup;
-    private jumpButton;
-    private settingsitems;
-    private btn_closeButton;
-    private pic_loading;
-    private actDisplay;
-
-    public closeAct = ()=>{
-        this.actDisplay = "none"
-        this.forceUpdate()
-    }
-
-    constructor(props) {
-        super(props)
-        this.LoadGroup = this.props.LoadGroup;
-        for(let i = 0;i<this.LoadGroup.length;i++)
-        {
-            this.LoadGroup[i].isLoadDone = false;
-        }
-        this.jumpButton = this.props.jumpButton? this.props.jumpButton : jumpButton
-        this.settingsitems = this.props.settingsitems? this.props.settingsitems : settingsitems
-        this.btn_closeButton = this.props.btn_closeButton? this.props.btn_closeButton : ''
-        this.pic_loading = this.props.pic_loading
-        this.actDisplay = "flex"
-    }
-
-    render() {
-        let slapfaceinfo: SlapfaceInfo = {
-            LoadGroup: this.LoadGroup,
-            jumpButton: this.jumpButton,
-            settingsitems : this.settingsitems,
-            btn_closeButton : this.btn_closeButton,
-            pic_loading : this.pic_loading
-        }
-
-        return (
-            <div style ={{display:this.actDisplay,width:"100%",height:"100%"}}>
-                <div style={{ width: '100%', height: '100%', backgroundColor: "rgba(0,0,0,0.5)" }}>
-                    {<Group  {...slapfaceinfo} closeAct = {this.closeAct}/>}
-                </div>
-            </div>
-        )
-
-    }
-}
-
-class Group extends Component<any, any>
-{
-    constructor(props) {
-        super(props);
-        let emptyGroup: groupInfo[] = [
-            {
-                isLoadDone: false,
-                picture: "",
-                width: 0,
-                height: 0
-            }
-        ]
-        this.groupArr = emptyGroup.concat(this.props.LoadGroup);
-        this.groupIndexList = new slapfaceNodeList(this.groupArr);
-        this.loadDisplay = "hidden";
-        this.elseDisplay = "visible";
-        this.firstFrameDisplay = "none";
-
-        this.state = {
-            curIndex: this.groupIndexList.CheckReady()
-        }
-    }
-
-    private groupIndexList: slapfaceNodeList;
-    private groupArr: groupInfo[];
-    private picBack;
-    private loadDisplay;
-    private elseDisplay;
-    private firstFrameDisplay;
-    private loadPic;
-
-    componentDidMount(){
-        // if(this.picBack.style.display == 'none'){
-        //     setTimeout(()=>{this.picBack.style.display = 'flex';
-        //     this.closeClick()},300)
-        // }
-        this.loadDisplay = "hidden"
-        if(this.firstFrameDisplay == "none"){
-            setTimeout(()=>{this.firstFrameDisplay = 'flex';
-            this.closeClick()},300)
-        }
-    }
-
-    componentDidUpdate(){
-        let curIndex = this.state.curIndex;
-        setTimeout(() => {
-           if(!this.groupArr[curIndex].isLoadDone){
-            this.groupArr[curIndex].isLoadDone = true;
-            this.closeClick()
-           }
-        }, 1000);
-    }
-
-    closeClick(e?: Event) {
-        e?.stopPropagation()
-        let nextIndex = this.groupIndexList.CheckReady();
-        // setTimeout(() => {
-        //     this.loadDisplay = "visible"
-        // }, 50);
-        this.loadDisplay = "visible"
-        this.elseDisplay = "hidden"
-        if (nextIndex != -1) {
-            if (this.props.settingsitems.ani_switch_type == 2) {
-                this.picBack.className = SlapfaceLess.groupBack
-            }
-            this.setState(
-                { curIndex: nextIndex }
-            )
-        }
-        else {
-            this.props.closeAct()
-        }
-    }
-    render() {
-
-        if (this.state.curIndex == -1) {
-            this.setState(
-                { curIndex: this.groupIndexList.CheckReady() }
-            )
-        }
-
-        return (<div style={{ width: '100%', height: '100%', alignItems: 'center', justifyContent: 'center', position: 'absolute'}}>
-            <div onClick={() => { if (this.props.settingsitems.is_mask == false) return; this.closeClick() }} style={{ position: "absolute", width: "100%", height: "100%" }}></div>
-            <div ref={(div)=>{this.picBack = div}} onAnimationEnd={() => {setTimeout(()=>{this.picBack.className = SlapfaceLess.groupBackReverse},0)}}>
-                <img src = {this.groupArr[this.state.curIndex].picture} style ={{visibility:this.elseDisplay,width: this.groupArr[this.state.curIndex].width, height: this.groupArr[this.state.curIndex].height}} onLoad = {()=>{let curIndex = this.state.curIndex;if(!this.groupArr[curIndex].isLoadDone) {this.groupArr[curIndex].isLoadDone = true;this.loadDisplay = "hidden";this.elseDisplay = "visible";this.forceUpdate()}}}></img>
-                <CloseButton firstFrameDisplay = {this.firstFrameDisplay} btn_closeButton = {this.props.btn_closeButton} elseDisplay = {this.elseDisplay} onClick={(e: Event) => { this.closeClick(e);}} />
-                <JumpButton firstFrameDisplay = {this.firstFrameDisplay} elseDisplay = {this.elseDisplay} jumpButton = {this.props.jumpButton}/>
-            </div>
-            <div ref={(div)=>{this.loadPic = div}} className={SlapfaceLess.loading_anim}  style ={{backgroundImage: `url(${this.props.pic_loading})`,width:"300px", height: "300px",position:"absolute",visibility : this.loadDisplay}}> </div>
-        </div>);
-    }
-
-}
-
-class CloseButton extends Component<any, any>
-{
-    render() {
-        return (
-            <button className={SlapfaceLess.closeButton} style={{display:this.props.firstFrameDisplay,visibility : this.props.elseDisplay,backgroundSize:"contain",backgroundImage: `url(${this.props.btn_closeButton})` }} onClick={this.props.onClick}></button>
-        )
-    }
-}
-
-class JumpButton extends Component<any, any>
-{
-    private jumpbtnImg
-    render() {
-        return (
-            <div className= {SlapfaceLess.jumpButton} style ={{display:this.props.firstFrameDisplay,visibility : this.props.elseDisplay}}
-                onMouseDown={() => {(this.jumpbtnImg as HTMLImageElement).src = this.props.jumpButton.pic_yaxia;}}
-                onMouseUp={() => { (this.jumpbtnImg as HTMLImageElement).src = this.props.jumpButton.pic_xuanfu }}
-                onMouseOver={() => { (this.jumpbtnImg as HTMLImageElement).src = this.props.jumpButton.pic_xuanfu; }}
-                onMouseOut={() => { (this.jumpbtnImg as HTMLImageElement).src = this.props.jumpButton.pic_changtai; }}>
-                <img ref = {(img)=>{this.jumpbtnImg = img}} src={this.props.jumpButton.pic_changtai}></img>
-            </div>
-        )
-    }
-}