pixuireactcomponents 1.2.2 → 1.2.31

package/ui/components/slider/Slider.tsx

@@ -1,366 +0,0 @@
-import { Component, createRef, CSSProperties, h } from 'preact';
-
-const row_center_center: CSSProperties = {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center'
-};
-
-const row_between_center: CSSProperties = {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center'
-};
-
-export interface SliderProps {
-    percent: number;      // 0-100,表示0%-100%
-    wrapperWidth: number;
-    wrapperHeight: number;
-    height: number;
-    innerHeight?: number;
-    dotWidth: number;
-    dotHeight: number;
-    dotWrapperWidth: number;
-    dotWrapperHeight: number;
-
-    outerBg: string;
-    innerBg: string;
-    dotBg: string;
-    onDragStart: Function | null;
-    onDrag: Function | null;
-    onDragEnd: Function | null;   // 拖动结束的事件
-
-
-
-    isDiscrete: boolean | null;     //slider是否是离散的
-    discrete?: number;        //当slider为离散时用于表示离散值
-    maxDiscrete?: number;     //传入的离散数量
-
-    hasIncDecButton: boolean | null;    //是否具有增减按钮
-    incButtonWidth?: number;
-    incButtonHeight?: number;
-    decButtonWidth?: number;
-    decButtonHeight?: number;
-    incButtonBg?: string;
-    decButtonBg?: string;
-    //decButtonRight?: number,
-    //incButtonLeft?: number,
-    overallWidth?: number;
-    onIncClick?: Function | null;
-    onDecClick?: Function | null;
-
-    rangeControl?: boolean;
-    startRange?: number;
-    endRange?: number;
-}
-
-let wrapperStyle: CSSProperties;
-let outerStyle: CSSProperties;
-let innerStyle: CSSProperties;
-let dotStyle: CSSProperties;
-let dotWrapperStyle: CSSProperties;
-let incButtonStyle: CSSProperties;
-let decButtonStyle: CSSProperties;
-let withButtonStyle: CSSProperties;
-
-let lastX = undefined;// 上一次位置的横坐标
-let count = 0; // 拖动条距离最左端的位置 [0, this.props.wrapperWidth]
-let rect: any = undefined; // 滑动区域
-
-export class Slider extends Component<
-    SliderProps,
-    {
-        percent: number;
-        //discrete: number,   
-    }>{
-
-    discrete = Math.round(this.props.discrete == null ? 0 : this.props.discrete)
-    private refWrapper: any = createRef()
-
-
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            percent: (props.discrete != null && this.props.maxDiscrete != null && this.props.discrete != null) ? this.props.discrete * (10000 / this.props.maxDiscrete) : Math.floor(this.props.percent),
-            //discrete: Math.round(this.props.discrete==null?0:this.props.discrete)
-        };
-
-
-        this.computeWrapperStyle();
-        this.computeOuterStyle();
-
-    }
-
-
-
-    componentDidMount() {
-        rect = this.refWrapper.current.getBoundingClientRect();
-    }
-
-    componentWillReceiveProps(nextProps) {
-        if (nextProps.percent == this.props.percent && nextProps.discrete == this.props.discrete) return;
-        if (this.props.isDiscrete == true && this.props.maxDiscrete != null) {
-            this.discrete = nextProps.discrete;
-            this.setState({
-                //discrete:nextProps.discrete,
-                percent: this.discrete * (10000 / this.props.maxDiscrete)
-            });
-        }
-        else {
-            this.setState({
-                percent: nextProps.percent,
-            });
-        }
-
-    }
-
-    onDragStart = (event) => {
-        console.log('【Slider】DragStart event.clientX--' + event.clientX + '-----percent----' + this.state.percent + '-----currentX----' + (this.state.percent / 10000 * this.props.wrapperWidth));
-        lastX = event.clentX;
-
-        count = this.state.percent / 10000 * this.props.wrapperWidth;
-
-        if (this.props.onDragStart) {
-            this.props.onDragStart();
-        }
-    }
-
-    onDrag = (event) => {
-        if (event.clientX < rect.left - 50 || event.clientX > rect.right + 50) 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 * 10000;
-
-        if (this.props.isDiscrete == true && this.props.maxDiscrete != null) {
-            newPercent = count / this.props.wrapperWidth * this.props.maxDiscrete;
-            this.discrete = Math.round(newPercent);
-            // this.setState({
-            //     discrete: Math.round(newPercent),
-            // })
-
-            if (this.props.rangeControl) {
-                if (this.props.endRange != null)
-                    this.discrete = Math.min(this.discrete, this.props.endRange);
-                if (this.props.startRange != null)
-                    this.discrete = Math.max(this.discrete, this.props.startRange);
-            }
-
-            newPercent = this.discrete * (10000 / this.props.maxDiscrete);
-        }
-
-        this.setState({
-            percent: newPercent
-        }, () => {
-            console.log('【Slider】OnDrag event.clientX--' + event.clientX + '-----percent----' + this.state.percent + '-----discrete----' + this.discrete + '-----currentX----' + (this.state.percent / 10000 * this.props.wrapperWidth));
-            if (this.props.onDrag) this.props.onDrag(this.props.isDiscrete ? this.discrete : newPercent);
-        });
-        lastX = event.clientX;
-    }
-
-    onDragEnd = (event) => {
-        lastX = undefined;
-        if (this.props.isDiscrete == true && this.props.maxDiscrete != null) {
-            //console.log("OnDragEnd -----discrete----"+this.state.discrete)
-            this.setState({
-                percent: this.discrete * (10000 / this.props.maxDiscrete),
-            }, () => {
-                console.log('【Slider】DragEnd event.clientX--' + event.clientX + '-----percent----' + this.state.percent + '-----discrete----' + this.discrete + '-----currentX----' + (this.state.percent / 10000 * this.props.wrapperWidth));
-                if (this.props.onDragEnd) {
-                    this.props.onDragEnd(this.props.isDiscrete ? this.discrete : this.state.percent);
-                }
-            });
-        }
-        else {
-            console.log('【Slider】DragEnd event.clientX--' + event.clientX + '-----percent----' + this.state.percent + '-----currentX----' + (this.state.percent / 10000 * this.props.wrapperWidth));
-            if (this.props.onDragEnd) {
-                this.props.onDragEnd(this.props.isDiscrete ? this.discrete : this.state.percent);
-            }
-        }
-    }
-
-    onDecClick = () => {
-        //离散的情况
-        if (this.props.isDiscrete && this.props.maxDiscrete) {
-            if (this.discrete >= 1) {
-                this.discrete -= 1;
-                if (this.props.rangeControl && this.props.startRange != null) {
-                    this.discrete = Math.max(this.discrete, this.props.startRange);
-                }
-                let newPercent = this.discrete * (10000 / this.props.maxDiscrete);
-                this.setState({
-                    //discrete: this.state.discrete - 1,
-                    percent: newPercent
-                }, () => {
-                    if (this.props.onDecClick) {
-                        this.props.onDecClick(this.discrete);
-                    }
-                });
-            }
-        }
-        //连续的情况
-        else {
-            if (this.state.percent > 0) {
-                this.setState({
-                    percent: this.state.percent - 1
-                }, () => {
-                    if (this.props.onIncClick) {
-                        this.props.onIncClick(this.state.percent);
-                    }
-                });
-            }
-        }
-
-    }
-
-    onIncClick = () => {
-        //离散的情况
-        if (this.props.isDiscrete && this.props.maxDiscrete) {
-            if (this.discrete < this.props.maxDiscrete) {
-                this.discrete += 1;
-                if (this.props.rangeControl && this.props.startRange != null) {
-                    this.discrete = Math.max(this.discrete, this.props.startRange);
-                }
-                let newPercent = this.discrete * (10000 / this.props.maxDiscrete);
-                this.setState({
-                    // discrete: this.state.discrete + 1,
-                    percent: newPercent
-                }, () => {
-                    if (this.props.onIncClick) {
-                        this.props.onIncClick(this.discrete);
-                    }
-                });
-            }
-        }
-        //连续的情况
-        else {
-            if (this.state.percent < 10000) {
-                this.setState({
-                    percent: this.state.percent + 1
-                }, () => {
-                    if (this.props.onIncClick) {
-                        this.props.onIncClick(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%',
-
-            display: 'flex',
-            flexDirection: 'row',
-            justifyContent: 'start',
-            alignItems: 'center'
-        };
-    }
-
-    computeInnerStyle = () => {
-        let _width = Math.floor(this.state.percent / 100) + '%';
-        innerStyle = {
-            width: _width,
-            height: (this.props.innerHeight != null) ? this.props.innerHeight + 'px' : '100%',
-            backgroundImage: `url(${this.props.innerBg})`,
-            backgroundSize: '100% 100%',
-
-            display: 'flex',
-            flexDirection: 'row',
-            justifyContent: 'start',
-            alignItems: 'center'
-        };
-    }
-
-    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 / 10000 - this.props.dotWrapperWidth / 2) + 'px',
-            ...row_center_center
-            // backgroundColor: '#FF000066'
-        };
-    }
-
-    computeDotStyle = () => {
-        dotStyle = {
-            width: this.props.dotWidth + 'px',
-            height: this.props.dotHeight + 'px',
-        };
-    }
-
-    computeIncButtonStyle = () => {
-        incButtonStyle = {
-            width: this.props.incButtonWidth + 'px',
-            height: this.props.incButtonHeight + 'px',
-            //marginLeft:this.props.incButtonLeft+"px",
-            //backgroundImage: `url(${this.props.incButtonBg})`,
-        };
-    }
-
-    computeDecButtonStyle = () => {
-        decButtonStyle = {
-            width: this.props.decButtonWidth + 'px',
-            height: this.props.decButtonHeight + 'px',
-            //marginRight:this.props.decButtonRight+"px",
-            //backgroundImage: `url(${this.props.decButtonBg})`,
-        };
-    }
-
-    computeWithButtonStyle = () => {
-        withButtonStyle = {
-            minWidth: this.props.overallWidth + 'px',
-            ...row_between_center
-        };
-    }
-
-    render() {
-        this.computeInnerStyle();
-        this.computeDotWrapperStyle();
-        this.computeDotStyle();
-        this.computeIncButtonStyle();
-        this.computeDecButtonStyle();
-        this.computeWithButtonStyle();
-        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}>
-                                <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>
-
-        );
-    }
-}

package/ui/components/tab/Tab.tsx

@@ -1,12 +0,0 @@
-import { Component, JSX } from "preact";
-
-export class Tab extends Component<{
-    realTab: JSX.Element,
-}, any> {
-
-    render() {
-        return (
-            this.props.realTab
-        )
-    }
-}

package/ui/components/tab/Tabs.tsx

@@ -1,56 +0,0 @@
-import { Component, CSSProperties, h } from "preact";
-import { Tab } from "./Tab";
-
- export class Tabs extends Component<
-    {
-        tabBarStyle: CSSProperties,
-        onChoose: Function,
-        defaultIndex: number | null
-    },
-    {
-        selectedIndex: number
-    }>{
-    constructor(props) {
-        super(props);
-
-        let initIndex: number = this.props.defaultIndex == null ? 0 : this.props.defaultIndex 
-
-        this.state = {
-            selectedIndex: initIndex
-        }
-    }
-
-    SetCurrentIndex = (index: number)=>{
-        if(index < 0 || index >= (this.props.children as any).length)   return
-        this.setState({
-            selectedIndex: index
-        })
-    }
-
-    render(){
-        return(
-            <div style={this.props.tabBarStyle}>
-                {(this.props.children as any).map((v, index)=>{
-                    if(v.type != Tab)   return v;    // 留的口子，方便往Tabs里插入一些东西
-                    return(
-                        <div onClick={()=>{
-                            if (this.state.selectedIndex == index) {
-                                return;
-                            }
-                            this.setState(
-                                {
-                                    selectedIndex: index
-                                },
-                                ()=>{
-                                    this.props.onChoose(this.state.selectedIndex)
-                                }
-                            )
-                        }}>
-                            {v}
-                        </div>
-                    );
-                })}
-            </div>
-        );
-    }
-}

package/ui/components/togglegroup/ToggleGroup.tsx

@@ -1,105 +0,0 @@
-import { h, Component, CSSProperties, toChildArray } from "preact";
-
-interface togglePicInfo {
-    selected_pic: string,
-    not_selected_pic: string,
-}
-interface toggleInfo {
-    toggleText: string,
-    isSelected:boolean,
-    selectedFun: Function,
-    notSelectedFun: Function,
-}
-export class ToggleGroup extends Component<any, any>{
-    private isMultiOption: boolean;
-    private toggleArray:toggleInfo[];
-    private togglePic: togglePicInfo;
-    private currentIndex: number;
-    private items;
-    private refreshAll;
-    private GenerateToggleItem = (toggleItem:toggleInfo,togglePic:togglePicInfo,index:number,refreshAll:boolean)=>{
-        return <Toggle toggleText = {toggleItem.toggleText} selectedFun = {toggleItem.selectedFun} notSelectedFun = {toggleItem.notSelectedFun} 
-                        isSelected = {toggleItem.isSelected} selected_pic = {togglePic.selected_pic} not_selected_pic = {togglePic.not_selected_pic} 
-                        index = {index} checkSelected = {this.checkSelected} refreshAll = {this.refreshAll}/>
-    }
-    private checkSelected = (index) => {
-        if(this.isMultiOption) return;
-        else{
-            if(index == this.currentIndex) {this.toggleArray[index].isSelected = false; this.currentIndex = -1;}
-            else{
-                if(this.currentIndex == -1) {
-                    this.currentIndex = index;
-                    this.toggleArray[index].isSelected = true;
-                    return;
-                }
-                this.refreshAll = !this.refreshAll;
-                this.toggleArray[this.currentIndex].isSelected = false;
-                this.toggleArray[this.currentIndex].notSelectedFun();
-                this.toggleArray[index].isSelected = true;
-                this.currentIndex = index;
-                this.items = [];
-                this.forceUpdate();
-            }
-        }
-    };
-    constructor(props) {
-        super(props)
-        this.toggleArray = props.toggleArray;
-        for(let i = 0;i<this.toggleArray.length;i++){
-            this.toggleArray[i].isSelected = false;
-        }
-        this.togglePic = props.togglePic;
-        this.isMultiOption = props.isMultiOption!=undefined? props.isMultiOption:true;
-        this.currentIndex = -1;
-        this.refreshAll = true;
-        this.items = [];
-    }
-    render(props) {
-        for(let 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>
-        )
-    }
-}
-class Toggle extends Component<any, any>{
-    private selected_pic;
-    private not_selected_pic;
-    private toggleText;
-    private selectedFun;
-    private notSelectedFun;
-    private index;
-    private checkSelected;
-    private refreshAll;
-
-    constructor(props) {
-        super(props)
-        this.selected_pic = props.selected_pic;
-        this.not_selected_pic = props.not_selected_pic;
-        this.toggleText = props.toggleText;
-        this.selectedFun = props.selectedFun;
-        this.notSelectedFun = props.notSelectedFun;
-        this.index = props.index;
-        this.checkSelected = props.checkSelected;
-        this.refreshAll = props.refreshAll;
-        this.state = {
-            isSelected: props.isSelected
-        }
-    }
-    render(props) {
-        if(props.refreshAll!=this.refreshAll && props.isSelected != this.state.isSelected) {
-            this.setState({isSelected:!this.state.isSelected})
-            return;
-        }
-        this.refreshAll = props.refreshAll;
-        return (
-            <div style={{flexDirection:"row"}}>
-                <div style={{ width: "36px", height: "36px", backgroundSize:"contain",backgroundImage: `url(${this.state.isSelected ? this.selected_pic : this.not_selected_pic})` }}
-                    onClick={() => { this.state.isSelected ? this.notSelectedFun() : this.selectedFun();this.setState({isSelected:!this.state.isSelected});this.checkSelected(this.index) }}></div>
-                <div style={{alignItems:"end"}}><text>{`${this.toggleText}`}</text></div>
-                <div style={{width:"50px"}}></div>
-            </div>
-        )
-    }
-}