pixuireactcomponents 1.2.2 → 1.2.31

package/ui/sample/less/video.less

@@ -1,144 +0,0 @@
-.row_start_center{
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-}
-.row_start_end{
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: flex-end;
-}
-.row_center_center{
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-}
-
-.row_end_end{
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    align-items: flex-end;
-}
-
-.row_end_center{
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    align-items: center;
-}
-
-.row_end_start{
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    align-items: flex-start;
-}
-
-.row_center_end{
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: flex-end;
-}
-.row_between_center{
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.row_around_center{
-    display: flex;
-    flex-direction: row;
-    justify-content: space-around;
-    align-items: center;
-}
-
-.column_start_center{
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: center;
-}
-.column_center_center{
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-}
-.column_between_center{
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: center;
-}
-.column_end_center{
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-    align-items: center;
-}
-.column_around_start{
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-    align-items: flex-start;
-}
-.column_start_start{
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: flex-start;
-}
-
-@keyframes rotate_by_myself{
-    from {
-        transform: rotate(0deg);
-    }
-
-    50% {
-        transform: rotate(180deg);
-    }
-
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-.loading_anim{
-    animation-name: rotate_by_myself;
-    animation-duration: 1.5s;
-    animation-timing-function: linear;
-    animation-iteration-count: infinite
-}
-
-.row_start_center{
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-}
-
-.row_end_center{
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    align-items: center;
-}
-
-.hidden_scrollbar{
-    -ms-overflow-style: none;
-}
-
-
-// 单行多文本出现省略号
-.ellipsis {
-    overflow: hidden;
-    text-overflow:ellipsis;
-    white-space: nowrap;
-}
-

package/ui/sample/progress/ProgressDemo.tsx

@@ -1,74 +0,0 @@
-import { Component, CSSProperties } from 'preact';
-import { Progress, ProgressProps } from '../../components/progress/Progress';
-import { Images } from '../Images';
-
-const progressWrapperStyle: CSSProperties = {
-    width: '376px',
-    height: '34px',
-    marginLeft: '32px',
-    marginTop: '14px',
-};
-
-const progressData: ProgressProps = {
-    percent: 0,
-    wrapperHeight: 34,
-    wrapperWidth: 376,
-    height: 5,
-    dotWidth: 26,
-    dotHeight: 27,
-    dotWrapperWidth: 56,
-    dotWrapperHeight: 57,
-
-    outerBg: Images.outer,
-    innerBg: Images.inner,
-    dotBg: Images.dot,
-    onDragStart: null,
-    onDrag: null,
-    onDragEnd: null
-};
-
-const percentTextStyle: CSSProperties = {
-    position: 'absolute',
-    width: '60px',
-    height: '34px',
-    marginLeft: '386px',  // 100% + 10px
-    color: '#000000',
-    fontSize: '20px',
-    // backgroundColor: '#FF000055'
-};
-
-export class ProgressDemo extends Component<any,
-    {
-        percent: number;
-    }>{
-    constructor(props) {
-        super(props);
-
-
-        this.state = {
-            percent: 10
-        };
-
-        progressData.percent = this.state.percent;
-        progressData.onDrag = this.onDrag;
-    }
-
-    onDrag = (value: number) => {
-        let formatPercent = Math.floor(value + 0.5);
-        formatPercent = Math.max(0, formatPercent);
-        formatPercent = Math.min(100, formatPercent);
-
-        this.setState({
-            percent: formatPercent
-        });
-    }
-
-    render() {
-        return (
-            <div style={progressWrapperStyle}>
-                <Progress {...progressData} />
-                <text style={percentTextStyle}>{this.state.percent + '%'}</text>
-            </div>
-        );
-    }
-}

package/ui/sample/slider/SliderDemo.tsx

@@ -1,116 +0,0 @@
-import { Component, CSSProperties } from 'preact';
-import { Slider, SliderProps } from '../../components/slider/Slider';
-import { Images } from '../Images';
-
-const SliderWrapperStyle: CSSProperties = {
-    position: 'absolute',
-    width: '376px',
-    height: '34px',
-    marginLeft: '32px',
-    marginTop: '14px',
-};
-
-const SliderData: SliderProps = {
-    percent: 0,
-    wrapperHeight: 34,
-    wrapperWidth: 376,
-    height: 5,
-    innerHeight: 15,
-    dotWidth: 26,
-    dotHeight: 27,
-    dotWrapperWidth: 56,
-    dotWrapperHeight: 57,
-
-    outerBg: Images.outer,
-    innerBg: Images.inner,
-    dotBg: Images.dot,
-    onDragStart: null,
-    onDrag: null,
-    onDragEnd: null,
-
-    isDiscrete: true,   //是否具有离散值
-    discrete: 0,
-    maxDiscrete: 300,
-
-    hasIncDecButton: true,    //是否具有增减按钮
-    incButtonWidth: 30,
-    incButtonHeight: 30,
-    decButtonWidth: 30,
-    decButtonHeight: 30,
-    incButtonBg: Images.dot,
-    decButtonBg: Images.dot,
-    overallWidth: 500,
-
-    //控制可拖拽范围
-    rangeControl: false,
-    startRange: 0,
-    endRange: 10
-};
-
-const percentTextStyle: CSSProperties = {
-    position: 'absolute',
-    width: '60px',
-    height: '34px',
-    marginLeft: '600px',  // 100% + 10px
-    color: '#ffffff',
-    fontSize: '20px',
-    // backgroundColor: '#FF000055'
-};
-
-export class SliderDemo extends Component<any,
-    {
-        percent: number;
-    }>{
-    constructor(props) {
-        super(props);
-
-
-        this.state = {
-            percent: (SliderData.isDiscrete && SliderData.discrete) ? SliderData.discrete : SliderData.percent
-        };
-
-        SliderData.percent = this.state.percent;
-        SliderData.onDrag = this.onDrag;
-        SliderData.onDecClick = this.onDecClick;
-        SliderData.onIncClick = this.onIncClick;
-    }
-
-    onDrag = (value: number) => {
-        let formatPercent = Math.floor(value + 0.5);
-        formatPercent = Math.max(0, formatPercent);
-        formatPercent = Math.min(10000, formatPercent);
-
-        this.setState({
-            percent: formatPercent
-        });
-    }
-
-    onDecClick = (value: number) => {
-        let formatPercent = Math.floor(value + 0.5);
-        formatPercent = Math.max(0, formatPercent);
-        formatPercent = Math.min(10000, formatPercent);
-
-        this.setState({
-            percent: formatPercent
-        });
-    }
-
-    onIncClick = (value: number) => {
-        let formatPercent = Math.floor(value + 0.5);
-        formatPercent = Math.max(0, formatPercent);
-        formatPercent = Math.min(10000, formatPercent);
-
-        this.setState({
-            percent: formatPercent
-        });
-    }
-
-    render() {
-        return (
-            <div style={SliderWrapperStyle}>
-                <Slider {...SliderData} />
-                <text style={percentTextStyle}>{this.state.percent + '%'}</text>
-            </div>
-        );
-    }
-}

package/ui/sample/tab/TabDemo.tsx

@@ -1,67 +0,0 @@
-import { Component, CSSProperties } from 'preact';
-import { Tab } from '../../components/tab/Tab';
-import { Tabs } from '../../components/tab/Tabs';
-import { Images } from '../Images';
-import { TopTab } from './TopTab';
-
-import videoLess from './../less/video.less';
-
-
-const rootStyle: CSSProperties = {
-    width: '448px',
-    height: '100%',
-    backgroundColor: '#081013'
-};
-
-const tabBarStyle: CSSProperties = {
-    width: '100%',
-    height: '48px',
-
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'flex-start',
-    alignItems: 'center',
-
-
-    // backgroundColor: '#00FF3333',
-    backgroundRepeat: 'no-repeat',
-    backgroundPosition: 'bottom center',
-    backgroundImage: `url(${Images.tabs_bg})`
-};
-
-
-const tabsData = ['赛程', '福利'];  // tabs列表
-
-export class TabDemo extends Component<any,
-    {
-        choosedTabIndex: number;
-    }>{
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            choosedTabIndex: 0
-        };
-    }
-
-    componentWillUnmount() {
-    }
-
-    onChoose = (index: number) => {
-        this.setState({
-            choosedTabIndex: index
-        });
-    }
-
-    render() {
-        return (
-            <div style={rootStyle} className={videoLess.column_start_center}>
-                <Tabs tabBarStyle={tabBarStyle} onChoose={this.onChoose}>
-                    {tabsData.map((v, index) => {
-                        return <Tab realTab={<TopTab title={v} isChoosed={index == this.state.choosedTabIndex} />} />;
-                    })}
-                </Tabs>
-            </div>
-        );
-    }
-}

package/ui/sample/tab/TopTab.tsx

@@ -1,74 +0,0 @@
-import { Component, createRef, CSSProperties } from 'preact';
-import { Images } from '../Images';
-
-import videoLess from './../less/video.less';
-
-const rootStyle: CSSProperties = {
-    height: '48px',  // 100%
-    width: '100%',
-    fontSize: '20px',
-    color: '#F0E6D2',
-    // backgroundColor: '#FF000066'
-};
-
-const imgShowStyle: CSSProperties = {
-    width: '20px',
-    height: '10px',
-    marginBottom: '2px',
-    visibility: 'visible'
-};
-
-const imgHideStyle: CSSProperties = {
-    width: '20px',
-    height: '10px',
-    marginBottom: '2px',
-    visibility: 'hidden'
-};
-
-const reddotStyle: CSSProperties = {
-    width: '32px',
-    height: '32px',
-    position: 'absolute',
-    top: '-20px',
-    right: '-20px'
-};
-
-export class TopTab extends Component<
-    {
-        title: string;
-        isChoosed: boolean;
-    },
-    any> {
-    private refRoot = createRef()
-    private hasYelloDot = false   //是否可能有黄点
-
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            showYelloDot: false
-        };
-
-        this.checkYellowDot();
-    }
-
-    componentDidMount() {
-        this.refRoot.current.parentNode.style.flexGrow = 1;  //处理掉react自动生成的空div
-    }
-
-    checkYellowDot = () => {
-        if (this.props.title == '福利') this.hasYelloDot = true;
-    }
-
-    render() {
-        return (
-            <div ref={this.refRoot} style={rootStyle} className={videoLess.column_end_center}>
-                <div>
-                    {this.hasYelloDot ? <img src={Images.item_reddot} style={reddotStyle} /> : null}
-                    <text>{this.props.title}</text>
-                </div>
-                <img src={Images.tab_choosed} style={this.props.isChoosed ? imgShowStyle : imgHideStyle} />
-            </div>
-        );
-    }
-}

package/ui/sample/togglegroup/ToggleGroupDemo.tsx

@@ -1,35 +0,0 @@
-import { Component } from 'preact';
-import { ToggleGroup } from 'src/pixUIReactComponents/ui/components/togglegroup/ToggleGroup';
-import { Images } from 'src/pixUIReactComponents/ui/sample/Images'
-
-let togglePic = {
-    selected_pic: Images.checkbox1,
-    not_selected_pic: Images.checkbox0
-}
-
-let toggleArray = [
-    {
-        toggleText : "111",
-        selectedFun : ()=>{console.log("111")},
-        notSelectedFun : ()=>{console.log("-111")}
-    },
-    {
-        toggleText : "222",
-        selectedFun : ()=>{console.log("222")},
-        notSelectedFun : ()=>{console.log("-222")}
-    },
-    {
-        toggleText : "333",
-        selectedFun : ()=>{console.log("333")},
-        notSelectedFun : ()=>{console.log("-333")}
-    }
-]
-export class ToggleGroupDemo extends Component<any, any>{
-    render() {
-        return (
-            <div>
-                <ToggleGroup togglePic = {togglePic} toggleArray = {toggleArray} isMultiOption = {false}/>
-            </div>
-        )
-    }
-}

package/ui/sample/videoplayer/VideoPlayerDemo.tsx

@@ -1,57 +0,0 @@
-import { Component, CSSProperties } from 'preact';
-import { VideoPlayer, VideoPlayerProps } from '../../components/videoplayer/VideoPlayer';
-
-const rootStyle: CSSProperties = {
-    position: 'absolute',
-    width: '100%',
-    height: '100%',
-
-    // backgroundColor: '#000000'
-};
-
-export class VideoPlayerDemo extends Component<any, any>{
-    constructor(props) {
-        super(props);
-
-        this.addNetEvents();
-        this.addLogicEvents();
-    }
-
-    componentWillUnmount() {
-        this.removeLogicEvents();
-        this.removeNetEvents();
-    }
-
-    addNetEvents = () => {
-
-    }
-
-    removeNetEvents = () => {
-
-    }
-
-    addLogicEvents = () => {
-
-    }
-
-    removeLogicEvents = () => {
-
-    }
-
-
-    render() {
-        const videoProps: VideoPlayerProps = {
-            playUrl: 'http://image.smoba.qq.com/Video/playonline/Nobe_Video.mp4',
-            onPlaying: null,
-            onEnded: null,
-            onError: null,
-            onNetworkFailed: null
-        };
-
-        return (
-            <div style={rootStyle}>
-                <VideoPlayer config={videoProps} />
-            </div>
-        );
-    }
-}

package/ui/sample/waterfallcomponent/WaterfallComponentDemo.jsx

@@ -1,137 +0,0 @@
-//libs and frame
-import { Component } from 'preact';
-//components
-import {WaterfallComponent} from 'src/pixUIReactComponents/ui/components/waterfallcomponent/WaterfallComponent'
-export class WaterfallComponentDemo extends Component {
-	constructor(props){
-		super(props);
-		this.state = {
-            
-        }
-        this.data = [];
-        for(var i = 0; i < 100; i++){
-            this.data.push({
-                name : "name_" + i,
-                age : i,
-                id : "demo_id_" + i,
-            });
-        }
-        this.listRef = {};
-        this.listRefH = {};
-    }
-    
-	getItemCount(){
-		return this.data.length;
-	}
-
-	Item = (index) => {
-        console.log("Item index:" + index + ", itemCount:" + this.getItemCount());
-        const info = this.data[index];
-        
-        return(
-            //可加上key={index}, 但某些版本下可能遇到diff不正确的问题，导致数据没刷新，但用了效率能提高，酌情使用
-            <div style={{backgroundColor:`rgb(211,212,204)`, width:"130px", height:"100px",flexShrink:0}}  >
-                <div style={{marginTop:"10px", marginLeft:"4px"}} >{"name:" + info.name}</div>
-                {/* <div style={{marginTop:"10px", marginLeft:"4px"}} >{"age:" + info.age}</div> */}
-                {/* <div style={{marginTop:"10px", marginLeft:"4px"}} >{"id:" + info.id}</div> */}
-            </div>
-        );
-    };
-
-    getWaterfall(){
-        let result = <WaterfallComponent direction={'vertical'}
-            itemCount={this.getItemCount()}
-            onBottom={() =>{
-                console.log("demo on bottom")
-            }}
-
-            onTop={() =>{
-                console.log("demo on top")
-            }}
-
-            scroll_type = {1}
-            scroll_bar_display = {0}
-            scrollDir = {1}
-            bottomHeight = {10}
-            topHeight = {10}
-            initFillCount={7}
-            onFillItem={this.Item}
-            recycleBottomHeight = {100}
-            recycleTopHeight = {100}
-            generateBottomHeight = {100}
-            generateTopHeight = {100}
-            refObj={this.listRef}
-            enableLog={true}
-        >
-        </WaterfallComponent>
-
-        return result;
-        
-    }
-
-    getWaterfallH(){
-        
-        let result = <WaterfallComponent direction={'horizontal'}
-            itemCount={this.getItemCount()}
-            onBottom={() =>{
-                console.log("demo on bottom")
-            }}
-
-            onTop={() =>{
-                console.log("demo on top")
-            }}
-
-            scroll_type = {1}
-            scroll_bar_display = {0}
-            scrollDir = {1}
-            bottomHeight = {10}
-            topHeight = {10}
-            initFillCount={7}
-            onFillItem={this.Item}
-            recycleBottomHeight = {200}
-            recycleTopHeight = {200}
-            generateBottomHeight = {200}
-            generateTopHeight = {200}
-            refObj={this.listRefH}
-            enableLog={true}
-        >
-        </WaterfallComponent>
-
-        return result;
-        
-    }
-
-    refresh() {
-        //maybe need setTimeout
-
-        //refresh vertical
-        this.listRef.current.clear();
-        this.listRef.current.itemCount = this.getItemCount();
-        this.listRef.current.fill();
-
-        //refresh horizental
-        this.listRefH.current.clear();
-        this.listRefH.current.itemCount = this.getItemCount();
-        this.listRefH.current.fill();
-    }
-
-	render(props, state) {
-		return (
-            <div style={{width:"600px", height:"600px", backgroundColor:`rgb(238,229,248)`}} >
-                {/* <p style={{fontSize:"24px", margin:"40px"}}>滑动列表</p> */}
-                {/* horizontal */}
-                <div id="horizontal" style={{ left:"10px",width:"500px", height:"100px", overflow: 'hidden',}} 
-                    ref={div => {this.myDivH = div;}}>
-                    {this.getWaterfallH()}
-                </div>
-                <div style={{width:"50px", height:"50px"}} ></div>
-                {/* verticle */}
-                <div id="verticle" style={{ height:"400px", width:"155px", overflow: 'hidden',}} 
-                    ref={div => {this.myDiv = div;}}>
-                    {this.getWaterfall()}
-                </div>
-                
-            </div>
-		);	
-	}
-}