pixuireactcomponents 1.0.0

package/ui/components/progress/Progress.tsx

@@ -0,0 +1,166 @@
+import { Component, createRef, CSSProperties } from "preact";
+import videoLess from "./../../sample/less/video.less"
+
+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"
+        }
+    }
+
+    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",
+            // 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} className={videoLess.row_center_center}>
+                <div  style={outerStyle}>
+                    <div style={innerStyle}>
+                        <div style={dotWrapperStyle} className={videoLess.row_center_center} 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/tab/Tab.tsx

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

package/ui/components/tab/Tabs.tsx

@@ -0,0 +1,56 @@
+import { Component, CSSProperties } 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/videoplayer/VideoPlayer.tsx

@@ -0,0 +1,200 @@
+import { Component, createRef, CSSProperties } from "preact"
+import { Images } from "../../sample/Images"
+import videoLess from "./../../sample/less/video.less"
+
+const videoWrapperStyle: CSSProperties = {
+    width: '100%',
+    height: '100%',
+    // backgroundColor: '#FFF00066'
+}
+
+const screenClickerStyle: CSSProperties = {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+}
+
+const loadingContainerStyle: CSSProperties = {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    backgroundColor: 'rgba(0, 0, 0)',
+}
+
+const controllerBarStyle: CSSProperties = {
+    position: 'absolute',
+    bottom: '0px',
+    height: '80px',
+    width: '100%',
+    backgroundColor: 'rgba(0, 0, 0, 0.7)'
+}
+
+const playIconStyle: CSSProperties = {
+    width: '48px',
+    height: '48px',
+}
+
+const reloadIconStyle: CSSProperties = {
+    width: '34px',
+    height: '34px',
+    marginLeft: '40px',
+}
+
+export interface VideoPlayerProps{
+    playUrl: string,
+    onPlaying: Function | null,
+    onError: Function | null,
+    onNetworkFailed: Function | null,
+    onEnded: Function | null
+}
+
+// 4个视频播放态
+enum VideoStatus{ 
+    Loading, LoadError, Playing, Pause
+}
+
+export class VideoPlayer extends Component<
+    {
+        config: VideoPlayerProps
+    },
+    {
+        showLoadingBar: boolean,
+        showBottomBar: boolean,
+        videoStatus: VideoStatus
+    }>{
+    private refVideo:any = createRef()
+    private hideTopBottomBarTimer:any = null
+
+    constructor(props){
+        super(props)
+
+        this.state = {
+            showLoadingBar: true,
+            showBottomBar: false,
+            videoStatus: VideoStatus.Loading
+        }
+    }
+
+    componentWillUnmount(){
+    }
+
+    onplaying =()=>{
+        // 加载第一帧画面
+        console.warn("----------first frame")
+        this.setState({
+            showLoadingBar: false,
+            videoStatus: VideoStatus.Playing
+        })
+    }
+
+    onerror = ()=>{
+        console.warn("----------onerror")
+        // 播放错误，比如给一个无法播放的url
+    }
+
+    onnetworkfailed = ()=>{
+        console.warn("----------onnetworkfailed")
+
+    }
+
+    onended = ()=>{
+        // 视频播放结束
+        console.warn("-----------end")
+        this.refVideo.current.load()
+    }
+
+    onScreenClick = ()=>{
+        if(this.state.showBottomBar){   // 当前已显示bottomBar
+            this.clearHideBottomBarTimer()
+            this.setState({
+                showBottomBar: false
+            })
+        }
+        else{   // 当前未显示bottomBar
+            this.setState({
+                showBottomBar: true
+            }, this.setHideBottomBarTimer)
+        }
+    }
+
+    // 3秒钟自动隐藏TopBar BottomBar
+    setHideBottomBarTimer = ()=>{
+        this.clearHideBottomBarTimer()
+
+        let outThis = this
+        this.hideTopBottomBarTimer =  setTimeout(function() {
+            outThis.setState({
+                showBottomBar: false
+            })
+        }, 3000)
+    }
+
+    //  清理3秒隐藏TopBar BottomBar的计时器
+    clearHideBottomBarTimer = ()=>{
+        if(this.hideTopBottomBarTimer != null){    
+            clearTimeout(this.hideTopBottomBarTimer)
+            this.hideTopBottomBarTimer = null
+        }
+    }
+
+    switchPlayState = ()=>{
+        if(this.state.videoStatus == VideoStatus.Playing){
+            this.onPause()
+        }
+        else if(this.state.videoStatus == VideoStatus.Pause){
+            this.onPlay()
+        }
+    }
+
+    onPause = ()=>{
+        this.refVideo.current.pause()
+        this.setState({
+            videoStatus: VideoStatus.Pause
+        })
+    }
+
+    onPlay = ()=>{
+        this.refVideo.current.play()
+
+        this.setState({
+            videoStatus: VideoStatus.Playing
+        })
+    }
+
+    reloadVideo = ()=>{
+        this.refVideo.current.load()
+        this.setState({
+            videoStatus: VideoStatus.Loading,
+            showLoadingBar: true,
+            showBottomBar: false
+        })
+    }
+
+    render(){
+        let playIconUrl = this.state.videoStatus == VideoStatus.Playing ?  Images.video_pause : Images.video_play;
+
+
+        return (
+            <div style={videoWrapperStyle}>
+                <video ref={this.refVideo} src={this.props.config.playUrl} object-fit="no" autoPlay="autoplay" muted
+                    style={{width:'100%', height:'100%'}} 
+                        onplaying={this.onplaying} onerror={this.onerror}
+                        onnetworkfailed={this.onnetworkfailed} onended={this.onended}> 
+                </video>
+                <div style={screenClickerStyle} onClick={this.onScreenClick}></div>
+                { this.state.showLoadingBar ? 
+                    <div style={loadingContainerStyle} className ={videoLess.row_center_center}>
+                        <img src={Images.loading} style={{witdh: '42px', height: '42px'}} className={videoLess.loading_anim} />
+                    </div> : null
+                }
+                {this.state.showBottomBar ? 
+                <div style={controllerBarStyle}>
+                        <div style={{height: '100%', marginLeft: '40px', flexGrow: 2}} className={videoLess.row_start_center}>
+                            <img src={playIconUrl} style={playIconStyle} onClick={this.switchPlayState}/>
+                            <img src={Images.video_reload} style={reloadIconStyle} onClick={this.reloadVideo}/>
+                        </div>
+                </div> : null}
+            </div>
+        )
+    }
+}

package/ui/sample/Images.tsx

@@ -0,0 +1,34 @@
+import data_arrow_down from "./asset/data_arrow_down.png";
+import data_arrow_up from "./asset/data_arrow_up.png";
+import dot from "./asset/dot.png";
+import inner from "./asset/inner.png";
+import item_reddot from "./asset/item_reddot.png";
+import loading from "./asset/loading.png";
+import money_dropdown from "./asset/money_dropdown.png";
+import money_dropdownall from "./asset/money_dropdownall.png";
+import outer from "./asset/outer.png";
+import tab_choosed from "./asset/tab_choosed.png";
+import tabs_bg from "./asset/tabs_bg.png";
+import video_pause from "./asset/video_pause.png";
+import video_play from "./asset/video_play.png";
+import video_reload from "./asset/video_reload.png";
+
+
+
+export const Images = {
+  data_arrow_down: data_arrow_down,
+  data_arrow_up: data_arrow_up,
+  dot: dot,
+  inner: inner,
+  item_reddot: item_reddot,
+  loading: loading,
+  money_dropdown: money_dropdown,
+  money_dropdownall: money_dropdownall,
+  outer: outer,
+  tab_choosed: tab_choosed,
+  tabs_bg: tabs_bg,
+  video_pause: video_pause,
+  video_play: video_play,
+  video_reload: video_reload,
+}
+

package/ui/sample/bulletscreen/BulletDemo.tsx

@@ -0,0 +1,86 @@
+import { createRef } from "lib/preact/src/create-element";
+import { h } from "preact";
+import { Component, CSSProperties} from "preact";
+import { BulletScreenAnimation, BulletScreenAnimationData } from "../../components/bulletscreen/BulletScreenAnimation";
+
+let rootStyle: CSSProperties = {
+    width: '100%',
+    height: '750px',
+
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+
+    backgroundColor: '#FF000055'
+}
+
+let bulletScreenConfigData: BulletScreenAnimationData = {
+    generateCycle: 200,
+    channelHeight: 50,
+    screenWidth: 0,
+    screenHeight: 0,
+    totalTime: 8000
+}
+
+let GetBulletData = (function(){
+    let _NUM = 1
+    return function(){ 
+        console.log("测试弹幕1")
+        return "测试弹幕" + _NUM++
+    }
+}())
+
+export class BulletDemo extends Component<
+    any, 
+    {
+        screenWidth: number,
+        screenHeight: number
+    }>{
+    constructor(props){
+        super(props)
+
+        this.state = {
+            screenWidth: 0,
+            screenHeight: 0
+        }
+    }
+    
+    private refRoot = createRef()
+    private refBulletScreen = createRef()
+
+    componentDidMount(){
+        let _width = this.getRootComputedSize("width")
+        let _height = this.getRootComputedSize("height")
+        console.warn(_width, "___", _height)
+
+        this.setState({
+            screenWidth: _width,
+            screenHeight: _height
+        }, ()=>{
+            this.refBulletScreen.current.StartRunBullets()
+        })
+    }
+
+    getRootComputedSize = (key: string)=>{
+        if(key == "" || key == undefined) return undefined  
+
+        let realWidthStr = window.getComputedStyle(this.refRoot.current, null).getPropertyValue(key); 
+        let widthNum = parseInt(realWidthStr.substring(0, realWidthStr.length - 2));
+
+        return widthNum
+    }
+
+    render(){
+        console.warn("[[render]]---)))")
+        bulletScreenConfigData.screenWidth = this.state.screenWidth
+        bulletScreenConfigData.screenHeight = this.state.screenHeight
+    
+        return (
+            <div ref={this.refRoot} style = {rootStyle}>
+                <BulletScreenAnimation screenWidth={this.state.screenWidth} screenHeight={this.state.screenHeight} ref={this.refBulletScreen} isRun={true} screenData={bulletScreenConfigData} getBulletText={GetBulletData}/>
+            </div>
+        );
+    }
+        
+}

package/ui/sample/dropdown/DropdownDemo.tsx

@@ -0,0 +1,65 @@
+import { Component, CSSProperties } from "preact"
+import { Dropdown, DropdownConfig } from "../../components/dropdown/Dropdown"
+import { Images } from "../Images"
+import { MoneyDropdownOption } from "./MoneyDropdownOption"
+import { MoneyDropdownSpreadMain } from "./MoneyDropdownSpreadMain"
+import { MoneyDropdownUnspreadMain } from "./MoneyDropdownUnspreadMain"
+
+const dropdownAreaStyle:CSSProperties = {
+    position: 'absolute',
+    top: '0px',
+    right: '17px',
+    width: '98px',
+    height: '40px',
+    // backgroundColor: '#FF00FF33',
+}
+
+const TYPES: string[] = ["团队", "单人路", "打野", "中路", "射手", "辅助"]
+
+export class DropdownDemo extends Component<any,any>{
+    constructor(props){
+        super(props)
+    }
+
+    onChoose = ()=>{
+
+    }
+
+    render(){
+
+
+        // dropdown展开的样式
+        const _spreadStyle:CSSProperties = {
+            position: 'absolute',
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'flex-start',
+            alignItems: 'center',
+            borderImage: `url(${Images.money_dropdownall}) 45 10 10 10`,
+            width:'98px',
+            height:'182px',
+            top:"4px",
+        }
+
+        let _config: DropdownConfig<string> = {
+            spreadStyle: _spreadStyle,
+            datas: TYPES,
+        }
+
+        let _options:MoneyDropdownOption[]  = Array(TYPES.length).fill("").map((value, index)=>{
+            return <MoneyDropdownOption index={index} info={TYPES[index]}/>
+        })
+
+        return (
+            <div style={dropdownAreaStyle}>
+            <Dropdown<string, MoneyDropdownUnspreadMain, MoneyDropdownSpreadMain, MoneyDropdownOption> 
+                config={_config} 
+                onChoose={this.onChoose}
+                unspreadMainUI={<MoneyDropdownUnspreadMain/>}
+                spreadMainUI={<MoneyDropdownSpreadMain/>}
+                optionsUI={_options}
+                defaultIndex={this.state.selectedType}/>
+        </div>
+        )
+    }
+}