pixuireactcomponents 1.0.0

package/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "pixuireactcomponents",
+  "version": "1.0.0",
+  "description": "pixui react components",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "hardenzheng",
+  "license": "ISC"
+}

package/ui/components/bulletscreen/BulletItemAnimation.tsx

@@ -0,0 +1,117 @@
+import { createRef } from "lib/preact/src/create-element";
+import { Component, CSSProperties } from "preact";
+
+// 弹幕相关个性化信息
+export class BulletInfo{
+    key : number;
+    text : string;
+    channel : number;
+    color: string;
+    fontSize: number;
+
+    constructor(
+        key : number,
+        text : string,
+        channel :number,
+        color: string,
+        fontSize: number
+    ){
+        this.key = key;
+        this.text = text;
+        this.channel = channel;
+        this.color = color;
+        this.fontSize = fontSize;
+    }
+}
+
+// 同一行弹幕的间距
+const BULLET_DISTANCE = 50
+// 弹幕超出屏幕后滑行距离
+const BULLET_MAX_LEN = 400
+
+// 弹幕相关配置信息
+export class BulletConfig{
+    screenWidth : number;           //弹幕宽度
+    channelHeight : number;         //弹幕高度
+    totalTime : number;             //单条弹幕滑行时间
+
+    constructor(
+        screenWidth: number,
+        channelHeight: number,
+        totalTime :number
+    ){
+        this.screenWidth = screenWidth;
+        this.channelHeight = channelHeight;
+        this.totalTime = totalTime;
+    }
+}
+
+// 使用Animation
+export class BulletItemAnimation extends Component<
+    {
+        bulletInfo: BulletInfo,
+        bulletConfig: BulletConfig,
+        onItemFree : Function,
+        onChannelFree : Function
+    }, {}>{
+
+    private freeChannelTimer : any = undefined;
+    private refText = createRef()
+
+    constructor(props){
+        super(props);
+    }    
+
+    componentDidMount(){
+        this.refText.current.addEventListener("animationstart", this.onAnimationStart)
+        this.refText.current.addEventListener("animationend", this.onAnimationEnd)
+
+        window.requestAnimationFrame(this.setFreeChannelTimer);
+    }
+
+    onAnimationStart = ()=>{
+    }
+
+    onAnimationEnd = ()=>{
+        this.props.onItemFree();
+    }
+
+    setFreeChannelTimer = ()=>{
+        let realWidthStr = window.getComputedStyle(this.refText.current, null).getPropertyValue("width"); 
+        let widthNum = parseInt(realWidthStr.substring(0, realWidthStr.length - 2));
+        this.freeChannelTimer = setTimeout(this.freeChannel, (widthNum + BULLET_DISTANCE) / (this.props.bulletConfig.screenWidth + BULLET_MAX_LEN) * this.props.bulletConfig.totalTime);
+    }
+
+    freeChannel = ()=>{
+        this.props.onChannelFree(this.props.bulletInfo.channel);
+        clearTimeout(this.freeChannelTimer);
+    }
+
+    render(){
+
+        let isMe = false
+
+        const bulletStyle : CSSProperties = {
+            marginTop : (this.props.bulletInfo.channel * this.props.bulletConfig.channelHeight) + "px",
+            height: this.props.bulletConfig.channelHeight + 'px',
+            left: this.props.bulletConfig.screenWidth + "px",
+            animation: 'bulletKeyframe 10s linear 1',
+
+            position: 'absolute',
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'flex-start',
+            alignItems: 'center',
+            border: isMe ?  '1px solid ' + this.props.bulletInfo.color : '',
+
+            fontSize: this.props.bulletInfo.fontSize + "px", //'16px',
+            color: this.props.bulletInfo.color,
+        }
+
+        return(
+            <div ref={this.refText} style={bulletStyle}>
+                <text>{this.props.bulletInfo.text}</text>
+            </div>
+        );
+    }
+}

package/ui/components/bulletscreen/BulletScreenAnimation.tsx

@@ -0,0 +1,278 @@
+import { Component, CSSProperties } from "preact";
+import { Logger } from "src/pixUIReactComponents/utils/Logger";
+import { BulletInfo, BulletConfig, BulletItemAnimation } from "./BulletItemAnimation";
+
+// item数据类型
+// {
+//     key : number,
+//     value : '人闲桂花落', string
+//     channel : number
+// }
+let bulletDataList: Array<BulletInfo> = [];
+
+// 弹幕组件相关初始化信息
+export class BulletScreenAnimationData{
+    generateCycle : number;             //弹幕生成的周期
+    channelHeight : number;             //每行弹幕的高度
+    screenWidth : number;               //弹幕区域宽度
+    screenHeight : number;              //弹幕区域高度
+    totalTime : number;                 //单条弹幕的滑行时间 单位ms
+
+    constructor(
+        generateCycle:number,
+        channelHeight : number,
+        screenWidth : number,
+        screenHeight: number,
+        totalTime : number
+    ){
+        this.generateCycle = generateCycle;
+        this.channelHeight = channelHeight;
+        this.screenWidth = screenWidth;
+        this.screenHeight = screenHeight;
+        this.totalTime = totalTime;
+    }
+}
+
+
+// 使用Animaiton
+export class BulletScreenAnimation extends Component<
+    {
+        screenData : BulletScreenAnimationData,
+        getBulletText : Function,
+        isRun: boolean,    //暂停生产弹幕,
+        screenWidth: number,
+        screenHeight: number,
+    },
+    {
+        refreshIndex : number,
+    }>{
+
+    private positionSize: number = 0;
+    private hasPosition : Array<boolean> = [];
+
+    private bulletIndex : number = 0;
+    private consumeBulletTimer : any = undefined;
+    private isStart: boolean = false;  //弹幕是否开始播放
+    private isScreenSizeChanging = false; // 弹幕屏幕尺寸是否在改变中
+
+    constructor(props){
+        super(props);
+        this.setState({
+            refreshIndex: 0
+        })
+
+        this.initChannels();
+
+        this.consumeBulletTimer = setInterval(()=>{
+            let curChannel = -1;
+            if((curChannel = this.getChannel()) != -1){
+                if(!this.isStart)   return
+                if(this.isScreenSizeChanging)   return
+
+                let bulletText = this.props.getBulletText();
+                if(bulletText == undefined) return;     //没有弹幕
+
+                if(!this.props.isRun)   return;     //弹幕开关关闭
+
+                bulletDataList.push(this.generateNewBulletInfo(bulletText, curChannel));
+                this.hasPosition[curChannel] = false;
+
+                let newIndex = this.state.refreshIndex + 1;
+                this.setState({
+                    refreshIndex : newIndex
+                })
+            
+            }
+        }, this.props.screenData.generateCycle);
+    }
+
+    generateNewBulletInfo = (text, channel)=>{
+        let _fontSize = 20
+        let _transparencyPercent = 0
+        // console.warn("_________________fontSize:", _fontSize)
+        let _color = `rgba(255,255,255,${1 - _transparencyPercent / 100})`
+        return new BulletInfo(this.bulletIndex++, text, channel, _color, _fontSize)
+    }
+
+    componentWillUnmount(){
+        if(this.consumeBulletTimer != undefined){
+            clearInterval(this.consumeBulletTimer);
+            this.consumeBulletTimer = undefined;
+        }
+    }
+
+    // 首字母大写表示可供外部调用
+    // 开始播放弹幕
+    StartRunBullets = ()=>{
+        this.isStart = true
+    }
+
+    // 停止播放弹幕
+    StopRunBullets = ()=>{
+        this.isStart = false
+    }
+
+    // 清空屏幕上的弹幕
+    ClearScreenBullets = ()=>{
+        bulletDataList = []
+        this.initChannels()
+
+        let newIndex = this.state.refreshIndex + 1;
+        this.setState({
+            refreshIndex : newIndex
+        })
+    }
+
+    SetScreenSizeChanging = ()=>{
+        this.isScreenSizeChanging = true
+    }
+
+    setScreenSizeChanged = ()=>{
+        this.isScreenSizeChanging = false
+    }
+
+    componentWillReceiveProps(nextProps){
+        // Logger.ObjectPrinter(nextProps, "# nextProps #")
+        if(this.isScreenSizeSame(this.props, nextProps))    return
+        
+        console.log("ScreenSizeChanged, generate new Animation!!!============")
+        Logger.ObjectPrinter(nextProps, "# nextProps #")
+
+        this.generateTargetAnimation(nextProps)
+        this.initChannels(nextProps)
+        this.setScreenSizeChanged()
+    }
+
+    generateTargetAnimation = (currentProps)=>{
+        this.generateDynamicAnimation("bulletKeyframe", 
+            `from{
+                left: ${currentProps.screenWidth}px
+            }
+            to{
+                left: -400px;
+            }`
+        )
+    }
+
+    isScreenSizeSame = (oldProps, newProps)=>{
+        if(oldProps.screenWidth == newProps.screenWidth &&
+            oldProps.screenHeight == newProps.screenHeight){
+                return true
+        }
+        return false
+    }
+
+    generateDynamicAnimation = (name, styles)=>{
+        console.log("&&&&&&&&&&&&&&&&&&&&&&=====================================")
+
+        var css = `@keyframes ${name}{${styles}}`
+        let head = document.getElementsByTagName('head')[0]
+        let style: any = document.createElement('style');
+        style.type = 'text/css';
+        if(style.styleSheet){
+            style.styleSheet.cssText = css;
+        }else{
+            style.appendChild(document.createTextNode(css));
+        }
+        head.appendChild(style);
+    }
+
+    initChannels(currentProps = this.props){
+        this.positionSize = Math.floor(currentProps.screenHeight / currentProps.screenData.channelHeight)
+        this.hasPosition = [];
+
+         //初始化 所有信道当前可用;每个信道都有一个缓存池;
+         for (let index = 0; index < this.positionSize; index++) {
+            this.hasPosition[index] = true;
+        }
+        console.warn("position:", this.hasPosition.length)
+    }
+
+    //先尝试随机取3次位置，取不到可用位置就从头开始遍历位置
+    getChannel = ()=>{
+        let tryCount = 3;
+
+        while(tryCount > 0){
+            let channel = this.getRandomChannelByPosition();
+            if(this.hasPosition[channel]){
+                return channel;
+            }
+            tryCount--;
+        }
+
+        return this.getAvailableChannelByPosition()
+    }
+
+    getRandomChannelByPosition = ()=>{
+        // 根据position 配置，决定随机的位置
+        let _random
+        // if(Settings.bulletSettings.position == BulletPositon.TopHalf){
+        //     let _topHalfsize = Math.floor(this.positionSize / 2)
+        //     _random = Math.random() * _topHalfsize
+        // }
+        // else if(Settings.bulletSettings.position == BulletPositon.BottomHalf){
+        //     let _topHalfsize = Math.floor(this.positionSize / 2)
+        //     _random = Math.random() * (this.positionSize - _topHalfsize) + _topHalfsize
+        // }
+        // else{ //Settings.bulletSettings.position == BulletPositon.Full
+            _random = Math.random() * this.positionSize
+        // }
+
+        return Math.floor(_random)
+    }
+
+    getAvailableChannelByPosition = ()=>{
+        let start, end //闭区间
+        // if(Settings.bulletSettings.position == BulletPositon.TopHalf){
+        //     let _topHalfsize = Math.floor(this.positionSize / 2)
+        //     start = 0
+        //     end = _topHalfsize - 1
+        // }
+        // else if(Settings.bulletSettings.position == BulletPositon.BottomHalf){
+        //     let _topHalfsize = Math.floor(this.positionSize / 2)
+        //     start = _topHalfsize
+        //     end = this.positionSize - 1
+        // }
+        // else{ //Settings.bulletSettings.position == BulletPositon.Full
+            start = 0
+            end = this.positionSize - 1
+        // }
+
+        for(let index = start; index <= end; index++){
+            if(this.hasPosition[index]){
+                return index;
+            }
+        }
+
+        return -1
+    }
+
+    onItemFree = ()=>{
+        bulletDataList.shift();
+    }
+
+    onChannelFree = (channel)=>{
+        this.hasPosition[channel] = true;
+    }
+
+    render(){
+        let container : CSSProperties = {
+            width : this.props.screenWidth + "px",
+            height : this.props.screenHeight + "px",
+            position : 'absolute',
+            overflow : 'hidden',
+            // backgroundColor: '#00FFFF66'
+        }
+
+        let screenData = this.props.screenData;
+        let commonInfo = new BulletConfig(this.props.screenWidth, screenData.channelHeight, screenData.totalTime);
+
+        return(
+        <div style={container}>
+            {bulletDataList.map((value, index)=>{
+                return (<BulletItemAnimation key={value.key} bulletInfo={value} bulletConfig={commonInfo} 
+                    onItemFree = {this.onItemFree} onChannelFree = {this.onChannelFree}/>);
+            })}
+        </div>);
+    }
+}

package/ui/components/bulletscreen/bullet.less

@@ -0,0 +1,17 @@
+.bullet_animation{
+    animation-name: barrage;
+    animation-duration: 10s;
+    animation-timing-function: linear;
+    animation-iteration-count: 1
+    // background-color: aqua;
+}
+
+@keyframes barrage{
+    from{
+        left: 1334px
+    }
+
+    to{
+        left: -400px;
+    }
+}

package/ui/components/dropdown/Dropdown.tsx

@@ -0,0 +1,115 @@
+import { Component, CSSProperties, JSX } from "preact"
+import { DropdownOptionUI } from "./DropdownOptionUI"
+import { DropdownSpreadMainUI } from "./DropdownSpreadMainUI"
+import { DropdownUnspreadMainUI } from "./DropdownUnspreadMainUI"
+
+export interface DropdownConfig<T>{
+    spreadStyle: CSSProperties
+    datas: T[],
+}
+
+export class Dropdown<
+                    T, 
+                    DDUnspreadMainUI extends DropdownUnspreadMainUI<T>,
+                    DDSpreadMainUI extends DropdownSpreadMainUI<T>,
+                    DDOptionUI extends DropdownOptionUI<T>>
+        extends Component<
+    {
+        config: DropdownConfig<T>,
+        onChoose: Function,
+        defaultIndex: number | null,
+        unspreadMainUI: DDUnspreadMainUI,
+        spreadMainUI: DDSpreadMainUI,
+        optionsUI: DDOptionUI[]
+    },
+    {
+        selectedIndex: number,
+        isSpread: boolean    // dropdown 列表是否展开
+    }>{
+
+    constructor(props){
+        super(props)
+
+        this.addNetEvents()
+        this.addLogicEvents()
+
+        let initIndex: number = this.props.defaultIndex == null ? 0 : this.props.defaultIndex 
+
+        this.state = {
+            selectedIndex: initIndex,
+            isSpread: false
+        }
+    }
+
+    componentWillUnmount(){
+        this.removeLogicEvents()
+        this.removeNetEvents()
+    }
+
+    addNetEvents = ()=>{
+
+    }
+
+    removeNetEvents = ()=>{
+
+    }
+
+    addLogicEvents = ()=>{
+
+    }
+
+    removeLogicEvents = ()=>{
+
+    }
+
+    openList = ()=>{
+        // console.warn("open dropdown====")
+        this.setState({
+            isSpread: true
+        })
+    }
+
+    closeList = ()=>{
+        // console.warn("close dropdown====")
+        this.setState({
+            isSpread: false
+        })
+    }
+
+    onChoose = (index: number)=>{
+        this.props.onChoose(index)
+        // console.warn('dropdown-=----', index)
+        this.setState({
+            selectedIndex: index,
+            isSpread: false
+        })
+    }
+
+    render(){
+        if(!this.state.isSpread){
+            this.props.unspreadMainUI.props.info = this.props.config.datas[this.state.selectedIndex]
+            this.props.unspreadMainUI.props.openList = this.openList
+
+            return  (
+                <div>
+                    {this.props.unspreadMainUI}
+                </div>)
+        }
+
+        this.props.spreadMainUI.props.info = this.props.config.datas[this.state.selectedIndex]
+        this.props.spreadMainUI.props.closeList = this.closeList
+
+        this.props.optionsUI.forEach((v, index)=>{v.props.onChoose = ()=>{this.onChoose(index)} })
+        let _optionsUI = this.props.optionsUI.filter(v => v.props.index != this.state.selectedIndex)
+        if(_optionsUI.length > 0)   _optionsUI[_optionsUI.length - 1].props["isLast"] = true
+
+        return (
+            <div>
+                <div style={this.props.config.spreadStyle}>
+                    {this.props.spreadMainUI}
+                    {_optionsUI}
+                </div>
+            </div>
+        )
+    }
+}

package/ui/components/dropdown/DropdownOptionUI.tsx

@@ -0,0 +1,13 @@
+import { Component, JSX } from "preact"
+
+/**
+ * dropdown 打开时options列表的单个Item UI
+ */
+export abstract class DropdownOptionUI<T> extends Component<
+    {
+        info: T,
+        onChoose: Function,
+        index: number // 数据下标
+    }, any> {
+
+}

package/ui/components/dropdown/DropdownSpreadMainUI.tsx

@@ -0,0 +1,11 @@
+import { Component, JSX } from "preact"
+
+/**
+ * dropdown 打开时选中框的UI
+ */
+export abstract class DropdownSpreadMainUI<T> extends Component<
+    {
+        info: T,
+        closeList: Function
+    }, any> {
+}

package/ui/components/dropdown/DropdownUnspreadMainUI.tsx

@@ -0,0 +1,11 @@
+import { Component, JSX } from "preact"
+
+/**
+ * dropdown 未打开时选中框的UI
+ */
+export abstract class DropdownUnspreadMainUI<T> extends Component<
+    {
+        info: T,
+        openList: Function
+    }, any> {
+}