pixuireactcomponents 1.1.23 → 1.2.1

package/README.md

@@ -3,3 +3,6 @@
 本组件库目前分为2大类：ui组件和工具组件。分别参见目录ui/和目录tools。
 具体组件说明，参见对应类别目录下的md文档
 
+## 使用说明
+
+https://gamelet.qq.com/docv2/public/d/Client-Development-Guide/PixUI-React-Components

package/cmdAfterTsBuild.js

@@ -0,0 +1,8 @@
+const { copyFile, copyFileSync } = require("fs");
+
+const PUBLISH_PATH = "publish_components"
+
+copyFileSync("./ui/ui.md", `./../${PUBLISH_PATH}/ui/ui.md`, )
+copyFileSync("./tools/tools.md", `./../${PUBLISH_PATH}/tools/tools.md`)
+copyFileSync("./README.md", `./../${PUBLISH_PATH}/README.md`)
+

package/index.js

@@ -1,16 +1,20 @@
-export { Tabs } from "./ui/components/tab/Tabs";
-export { Tab } from "./ui/components/tab/Tab";
-export { Slider } from "./ui/components/slider/Slider";
-export { Progress } from "./ui/components/progress/Progress";
-export { Dropdown } from "./ui/components/dropdown/Dropdown";
-export { DropdownOptionUI } from "./ui/components/dropdown/DropdownOptionUI";
-export { DropdownSpreadMainUI } from "./ui/components/dropdown/DropdownSpreadMainUI";
-export { DropdownUnspreadMainUI } from "./ui/components/dropdown/DropdownUnspreadMainUI";
-export { GradientText } from "./ui/components/gradient/GradientText";
-export { OutlineText } from "./ui/components/outlinetext/OutlineText";
-export { Logger } from "./tools/Logger";
-export { EventDispatcherJs } from "./tools/EventDispatcherJs";
-export { Carousel } from "./ui/components/carousel/Carousel";
-export { Slapface } from "./ui/components/slapface/Slapface";
-export { Button } from "./ui/components/button/Button";
-console.log("Hello, 欢迎使用PixUI React Components");
+export {Tabs} from "./ui/components/tab/Tabs"
+export {Tab} from "./ui/components/tab/Tab"
+export {Slider} from "./ui/components/slider/Slider"
+export {Progress} from "./ui/components/progress/Progress"
+export{ Dropdown, DropdownConfig} from "./ui/components/dropdown/Dropdown" 
+export{DropdownOptionUI} from "./ui/components/dropdown/DropdownOptionUI"
+export{DropdownSpreadMainUI} from "./ui/components/dropdown/DropdownSpreadMainUI"
+export{DropdownUnspreadMainUI} from "./ui/components/dropdown/DropdownUnspreadMainUI"
+export{GradientText} from "./ui/components/gradient/GradientText"
+export{OutlineText} from "./ui/components/outlinetext/OutlineText"
+export{Logger} from "./tools/Logger"
+export{EventDispatcherJs} from "./tools/EventDispatcherJs"
+export {Carousel} from "./ui/components/carousel/Carousel"
+export {Slapface} from "./ui/components/slapface/Slapface"
+export {Button} from "./ui/components/button/Button"
+
+
+
+
+console.log("Hello, 欢迎使用PixUI React Components")

package/package.json

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

package/tools/EventDispatcherJs.tsx

@@ -0,0 +1,74 @@
+class EventDispatcherCls {   //变量在对象实例上，方法在原型上
+	private 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());

package/tools/Logger.tsx

@@ -0,0 +1,161 @@
+export function Logger(){
+}
+
+// 移除最后一个(key, value)后面的 ','
+let regex = new RegExp("(,)(\n$)");
+/**
+ * printer1: 完整打印，用4个空格缩进
+ * @param object Object
+ * @param name string
+ */
+Logger.ObjectPrinter = function(object, name){
+    let strResult = "";
+    strResult += name + " = ";
+    strResult += getTreeStyleStr(object, 1);
+
+    strResult = strResult.replace(regex, "$2");
+    console.warn(strResult);
+}
+
+function getTreeStyleStr(object, level){
+    const isArray = object instanceof Array
+    let str = isArray ? "[\n" : "{\n";
+    for (const key in object) {
+        let value = object[key];
+        let curSeparation = getSeparation1(level);
+        
+        if(typeof(value) != 'object'){
+            str += curSeparation + key + " : " + value + ",\n"; 
+        }
+        else{
+            str += curSeparation + key + " : " +  getTreeStyleStr(value, level + 1);
+        }
+    }
+
+    str = str.replace(regex, "$2");
+    str += getSeparation1(level - 1) + (isArray ? "],\n" : "},\n");
+    return str;
+}
+
+const SEPARARION1 = "    ";
+function getSeparation1(level){
+    let totalSeparation = "";
+    while(level > 0){
+        totalSeparation += SEPARARION1;
+        level--;
+    }
+
+    return totalSeparation;
+}
+
+
+let regexForLine = new RegExp(",$")
+/**
+ * printer2: 完整打印，用\t
+ * @param object Object
+ * @param name sring
+ */
+Logger.ObjectPrinter2 = function(object, name){
+    let lines: string[] = []
+    lines.push(`${name} = `)
+    getTreeStyleLines(object, 1, lines)
+
+    console.warn(lines.join("\n"))
+}
+
+function getTreeStyleLines(object: Object, level: number, lines: string[]){
+    const isArray = object instanceof Array
+    let linePostFix = isArray ? "[" : "{"
+
+    let lastLine = lines.pop()
+    lines.push(lastLine + linePostFix)
+
+    for (const key in object) {
+        const value = object[key];
+        const curSeparation = getSeparation2(level);
+        
+        if(typeof(value) != 'object'){
+            let curLine = curSeparation + key + " : " + value + ",";
+            lines.push(curLine)
+        }
+        else{
+            let curLinePreFix = curSeparation + key + " : "
+            lines.push(curLinePreFix)
+            getTreeStyleLines(value, level + 1, lines);
+        }
+    }
+
+    lastLine = lines.pop()
+    if(lastLine)    lines.push(lastLine.replace(regexForLine, ""))  // 一定执行
+
+    lines.push(getSeparation2(level - 1) + (isArray ? "]" : "}"))
+}
+
+const SEPARARION2 = "\t";
+function getSeparation2(level){
+    let totalSeparation = "";
+    while(level > 0){
+        totalSeparation += SEPARARION2;
+        level--;
+    }
+
+    return totalSeparation;
+}
+
+/**
+ * 
+    printer3: 打印关键层级信息，如果是数组，只打印第一个，后续用 ...len 代替（PS: 假定数组中每个元素都是一样的格式）
+ * @param object Object
+ * @param name string
+ */
+Logger.HierarchyPrinter = function(object, name){
+    let lines: string[] = []
+    lines.push(`${name} = `)
+    getTreeStyleHierarchyLines(object, 1, lines)
+
+    console.warn(lines.join("\n"))
+}
+
+function getTreeStyleHierarchyLines(object, level: number, lines: string[]){
+    const isArray = object instanceof Array
+    let linePostFix = isArray ? "[" : "{"
+    let lastLine = lines.pop()
+    lines.push(lastLine + linePostFix)
+
+    if(isArray){
+        const key = 0
+        const value = object[key];
+        const curSeparation = getSeparation2(level);
+        
+        if(typeof(value) != 'object'){
+            let curLine = curSeparation + key + " : " + value + ",";
+            lines.push(curLine)
+        }
+        else{
+            let curLinePreFix = curSeparation + key + " : "
+            lines.push(curLinePreFix)
+            getTreeStyleHierarchyLines(value, level + 1, lines);
+        }
+        lines.push(curSeparation + "...len=" + object.length)
+    }
+    else{
+        for (const key in object) {
+            const value = object[key];
+            const curSeparation = getSeparation2(level);
+            
+            if(typeof(value) != 'object'){
+                let curLine = curSeparation + key + " : " + value + ",";
+                lines.push(curLine)
+            }
+            else{
+                let curLinePreFix = curSeparation + key + " : "
+                lines.push(curLinePreFix)
+                getTreeStyleHierarchyLines(value, level + 1, lines);
+            }
+        }
+        lastLine = lines.pop()
+        if(lastLine)    lines.push(lastLine.replace(regexForLine, ""))  // 一定执行
+    }
+
+    lines.push(getSeparation2(level - 1) + (isArray ? "]" : "}"))
+}

package/tsconfig.json

@@ -0,0 +1,45 @@
+{
+	"compilerOptions": {
+		"target": "es5",
+		"module": "ES6",
+		"baseUrl": ".",
+		"paths": {
+			"preact": ["../../lib/preact/src"],
+		},
+		"outDir": "../publish_components",
+		"allowJs": true,
+		"skipLibCheck": true,
+		"esModuleInterop": true,
+		"allowSyntheticDefaultImports": true,
+		"strict": true,
+		"forceConsistentCasingInFileNames": true,
+		"moduleResolution":"node",
+		"resolveJsonModule": true,
+		"noImplicitAny": false,
+		"jsx":"react",
+		"jsxFactory": "h",
+    	// "sourceMap": false,
+		"declaration": true,
+		"declarationDir": "../publish_components"
+		// "noEmit": true
+	},
+	"files":[
+		"index.js", 
+		"package.json",
+	],
+	"include": [
+		"ui/components/tab/*",
+		"ui/components/slider/*",
+		"ui/components/progress/*",
+		"ui/components/dropdown/*",
+		"ui/components/gradient/*",
+		"ui/components/outlinetext",
+		"tools/*",
+		"ui/components/carousel/*",
+		"ui/components/slapface/*",
+		"ui/components/slapface/less/*",
+		"ui/components/button/*",
+	
+	],
+
+}

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>
+        );
+    }
+}