pixuireactcomponents 1.0.0

package/ui/sample/dropdown/MoneyDropdownOption.tsx

@@ -0,0 +1,49 @@
+import { CSSProperties } from "preact"
+import { DropdownOptionUI } from "../../components/dropdown/DropdownOptionUI"
+import videoLess from "./../less/video.less"
+
+
+
+const rootStyle: CSSProperties = {
+    width: '98px',
+    height: '29px',
+    // backgroundColor: "#FF000044"
+}
+
+const textStyle: CSSProperties = {
+    color: "#CDBE91",
+    fontSize: 14,
+    marginLeft: '17px',   // 13 + 4
+
+    marginTop: '7px'
+}
+
+const lineStyle:CSSProperties = {
+    height: '1px',
+    width: '65px',
+    marginLeft: '17px',
+    backgroundColor: '#C4C4C4',
+}
+
+
+export class MoneyDropdownOption extends DropdownOptionUI<string>{
+    private isLast: boolean = false
+    constructor(props){
+        super(props)
+
+        if(props["isLast"])     this.isLast = true
+        // this.props.isLast : boolean
+        // 最后一个不要横线...
+    }
+
+    render(){
+        return (
+            <div style={rootStyle} className={videoLess.column_start_start} onClick={this.props.onChoose}>
+                <div style={{width: '100%', height: '28px'}} className={videoLess.row_start_center}>
+                    <text style={textStyle}>{this.props.info}</text>
+                </div>
+                {this.isLast ?  null : <div style={lineStyle}></div>}
+            </div>
+        )
+    }
+}

package/ui/sample/dropdown/MoneyDropdownSpreadMain.tsx

@@ -0,0 +1,42 @@
+import { CSSProperties } from "preact"
+import { DropdownSpreadMainUI } from "../../components/dropdown/DropdownSpreadMainUI"
+import { Images } from "../Images"
+import videoLess from "./../less/video.less"
+
+
+const rootStyle: CSSProperties = {
+    width: '98px',
+    height: '32px',
+    // backgroundColor: '#FF000F77'
+}
+
+const textStyle: CSSProperties = {
+    color: "#CDBE91",
+    fontSize: 16,
+    marginLeft: '13px',
+    top: '4px',
+}
+
+const arrowStyle:CSSProperties = {
+    width: '15px',
+    height: '18px',
+    marginRight: '20px',
+    top: '-2px',
+}
+
+
+export class MoneyDropdownSpreadMain extends DropdownSpreadMainUI<string>{
+    constructor(props){
+        super(props)
+        // console.warn("MoneyDropdownSpreadMain constructor ---")
+    }
+
+    render(){
+        return (
+            <div style={rootStyle} className={videoLess.row_between_center} onClick={this.props.closeList}>
+                <text style={textStyle}>{this.props.info}</text>
+                <img style={arrowStyle} src={Images.data_arrow_up}/>
+            </div>
+        )
+    }
+}

package/ui/sample/dropdown/MoneyDropdownUnspreadMain.tsx

@@ -0,0 +1,44 @@
+import { CSSProperties } from "preact"
+import { DropdownUnspreadMainUI } from "../../components/dropdown/DropdownUnspreadMainUI"
+import { Images } from "../Images"
+import videoLess from "./../less/video.less"
+
+
+
+const rootStyle: CSSProperties = {
+    width: '98px',
+    height: '40px',
+    top: '4px',
+    backgroundImage: `url(${Images.money_dropdown})`
+}
+
+const textStyle: CSSProperties = {
+    color: "#CDBE91",
+    fontSize: 16,
+    marginLeft: '13px',
+}
+
+const arrowStyle:CSSProperties = {
+    width: '15px',
+    height: '18px',
+    marginRight: '20px',
+    top: '-4px',
+}
+
+
+export class MoneyDropdownUnspreadMain extends DropdownUnspreadMainUI<string>{
+    constructor(props){
+        super(props)
+
+        // console.warn("UnspreadMain constructor----")
+    }
+
+    render(){
+        return (
+            <div style={rootStyle} className={videoLess.row_between_center} onClick={this.props.openList}>
+                <text style={textStyle}>{this.props.info}</text>
+                <img style={arrowStyle} src={Images.data_arrow_down}/>
+            </div>
+        )
+    }
+}

package/ui/sample/less/video.less

@@ -0,0 +1,143 @@
+.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

@@ -0,0 +1,74 @@
+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/tab/TabDemo.tsx

@@ -0,0 +1,67 @@
+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

@@ -0,0 +1,74 @@
+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: boolean = 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/videoplayer/VideoPlayerDemo.tsx

@@ -0,0 +1,57 @@
+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/utils/EventDispatcherJs.tsx

@@ -0,0 +1,74 @@
+class EventDispatcherCls {   //变量在对象实例上，方法在原型上
+	listeners = {};
+
+	AddEventListener(eventName:string, listener:any, ...args)
+	{
+		if (listener == undefined){
+			console.warn("listener为空, eventName: "+ eventName);
+			return;
+		}
+
+		let listeners = this.listeners;
+		if (listeners[eventName] == undefined) {
+			listeners[eventName] = [];
+		}
+		
+		let eventList:Array<Object> = listeners[eventName];
+		eventList.forEach(function (v:any) {
+			if (v.eventName == eventName && v.listener == listener){
+				console.warn("重复添加的事件监听, eventName: " + eventName);
+				return;
+			}
+		});
+
+		eventList.push({"eventName":eventName,"listener":listener,"args":args,});
+	}
+
+	HasEventListener(eventName:string){
+		if (this.listeners[eventName] == undefined || this.listeners[eventName].length == 0){
+			return false;
+		}
+		
+		return true;
+	}
+
+	RemoveEventListener(eventName:string, listener){
+		if (this.HasEventListener(eventName) == false){
+			return;
+		}
+
+		let eventList:Array<Object> = this.listeners[eventName];
+		for (let i = eventList.length - 1; i >=0; --i) {
+			let event:any = eventList[i];
+			if (event.eventName == eventName && event.listener == listener) {
+				eventList.splice(i, 1);
+			}
+		}
+
+		if (eventList.length == 0){
+			this.listeners[eventName] = null;
+		}
+	}
+
+	RemoveEventAllListener(eventName:string){
+		if (this.HasEventListener(eventName)){
+			this.listeners[eventName] = null;
+		}		
+	}
+
+	DispatchEvent(eventName:string, ...args){
+		if (eventName == undefined || this.HasEventListener(eventName) == false){
+			return;
+		}
+
+		let eventList:Array<Object> = this.listeners[eventName].slice(0);
+		for (let i = 0; i < eventList.length; ++i) {
+			let obj:any = eventList[i];
+			let listener:any = obj.listener;
+			// listener.apply(this, obj.args.concat(args));
+			listener(...obj.args.concat(args))
+		}
+	}
+}
+
+export let EventDispatcherJs = Object.freeze(new EventDispatcherCls());