pixuireactcomponents 1.2.0 → 1.2.2

package/README.md

@@ -1,9 +1,8 @@
-# 使用PixUI + React 开发应用时，可用的各种功能组件
-PixUI应用已经落地多款业务。面向应用层开发，已解决过很多问题，有一些积累和沉淀。
+# 组件库
 
-正在陆续抽象汇总各种功能组件（UI的、功能的等）和疑难问题场景，希望可以方便后续应用开发者，让他们可以站在前行者的肩膀上，少踩一些坑。
+本组件库目前分为2大类：ui组件和工具组件。分别参见目录ui/和目录tools。
+具体组件说明，参见对应类别目录下的md文档
 
-* 具体各种组件，参见src/pixUIReactComponents目录; 已打成npm包 pixuireactcomponents，直接安装即可使用。
-* 各种脚本工具，参见src/ pixUIReactUtils目录; 已打成npm包 pixuireactutils，直接安装即可使用。
+## 使用说明
 
-使用有疑问的话，请参考readme文档(npm包中和本git仓库中均有)![npms](./src/asset/npms.png)
+https://gamelet.qq.com/docv2/public/d/Client-Development-Guide/PixUI-React-Components

package/package.json

@@ -1,68 +1,11 @@
 {
-	"name": "pixuireactcomponents",
-	"version": "1.2.0",
-	"scripts": {
-		"b": "cross-env mode=production webpack --mode=development --config .pixiderc/webpack.js",
-		"postinstall": "node .pixiderc/postinstall.js",
-		"dev": "cross-env mode=development webpack-dev-server --config .pixiderc/webpack.js"
-	},
-	"dependencies": {
-		"@improbable-eng/grpc-web": "^0.12.0",
-		"@tencent/pandora-sdk-utils": "^1.0.0",
-		"animate.css": "^3.7.2",
-		"babel-plugin-transform-decorators-legacy": "^1.3.5",
-		"google-protobuf": "^3.8.0",
-		"grpc-promise": "^1.4.0",
-		"gsap": "^3.2.6",
-		"mobx": "^5.10.1",
-		"mobx-react": "^6.2.2",
-		"preact": "^10.4.0",
-		"react-virtualized": "^9.21.2",
-		"react-window": "^1.8.5",
-		"replace": "^1.1.0",
-		"rxjs": "^6.5.5",
-		"screenfull": "^5.0.2",
-		"typescript": "^3.9.7"
-	},
-	"devDependencies": {
-		"@babel/core": "^7.9.0",
-		"@babel/plugin-proposal-class-properties": "^7.8.3",
-		"@babel/plugin-proposal-decorators": "^7.8.3",
-		"@babel/plugin-syntax-jsx": "^7.8.3",
-		"@babel/plugin-transform-flow-strip-types": "^7.9.0",
-		"@babel/plugin-transform-react-jsx": "^7.9.4",
-		"@babel/preset-env": "^7.9.6",
-		"@babel/preset-typescript": "^7.9.0",
-		"@types/jest": "25.2.1",
-		"@types/node": "13.11.1",
-		"@typescript-eslint/eslint-plugin": "^2.28.0",
-		"@typescript-eslint/parser": "^2.28.0",
-		"babel-loader": "^8.1.0",
-		"babel-plugin-import": "^1.12.0",
-		"babel-plugin-jsx-pragmatic": "^1.0.2",
-		"babel-plugin-module-resolver": "^4.0.0",
-		"babel-plugin-transform-remove-console": "^6.9.4",
-		"clean-webpack-plugin": "^3.0.0",
-		"cross-env": "^7.0.3",
-		"css-loader": "^3.5.2",
-		"error-overlay-webpack-plugin": "^0.4.1",
-		"eslint": "^6.8.0",
-		"eslint-plugin-jest": "^23.8.2",
-		"extract-text-webpack-plugin": "^3.0.2",
-		"file-loader": "^6.0.0",
-		"fork-ts-checker-webpack-plugin": "^4.1.3",
-		"html-webpack-plugin": "^4.2.0",
-		"less": "^3.11.1",
-		"less-loader": "^5.0.0",
-		"prettier": "2.0.4",
-		"sass": "^1.26.5",
-		"sass-loader": "^8.0.2",
-		"source-map-explorer": "^2.0.1",
-		"style-loader": "^1.1.3",
-		"ts-protoc-gen": "^0.10.0",
-		"webpack": "^4.42.1",
-		"webpack-bundle-analyzer": "^3.7.0",
-		"webpack-cli": "^3.3.11",
-		"webpack-dev-server": "^3.10.3"
-	}
+  "name": "pixuireactcomponents",
+  "version": "1.2.2",
+  "description": "pixui react components",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "hardenzheng",
+  "license": "ISC"
 }

package/tsconfig.json

@@ -1,31 +1,45 @@
 {
 	"compilerOptions": {
 		"target": "es5",
-		"module": "commonjs",
-		"lib": ["dom", "dom.iterable", "esnext"],
+		"module": "ES6",
 		"baseUrl": ".",
 		"paths": {
-			"preact": ["lib/preact/src"],
-			"preact/hooks": ["lib/preact/hooks/src"],
-			"preact-router": ["lib/preact-router"],
-			"preact-router/match": ["lib/preact-router/match"]
+			"preact": ["../../lib/preact/src"],
 		},
-		"outDir": "dist",
-		"experimentalDecorators": true,
+		"outDir": "../publish_components",
 		"allowJs": true,
 		"skipLibCheck": true,
 		"esModuleInterop": true,
 		"allowSyntheticDefaultImports": true,
 		"strict": true,
 		"forceConsistentCasingInFileNames": true,
-		"moduleResolution": "node",
+		"moduleResolution":"node",
 		"resolveJsonModule": true,
 		"noImplicitAny": false,
-		"jsx": "preserve",
+		"jsx":"react",
 		"jsxFactory": "h",
-        "sourceMap": true,
+    	// "sourceMap": false,
+		"declaration": true,
+		"declarationDir": "../publish_components"
 		// "noEmit": true
 	},
-	"include": ["lib", "src"],
-	"exclude": ["lib/react-window/", "node_modules", "**/test"]
+	"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/{src/pixUIReactComponents/ui → ui}/components/slapface/Slapface.tsx

@@ -133,6 +133,10 @@ export class Slapface extends Component<any, any>
     constructor(props) {
         super(props)
         this.LoadGroup = this.props.LoadGroup;
+        for(let i = 0;i<this.LoadGroup.length;i++)
+        {
+            this.LoadGroup[i].isLoadDone = false;
+        }
         this.jumpButton = this.props.jumpButton? this.props.jumpButton : jumpButton
         this.settingsitems = this.props.settingsitems? this.props.settingsitems : settingsitems
         this.btn_closeButton = this.props.btn_closeButton? this.props.btn_closeButton : ''
@@ -150,9 +154,7 @@ export class Slapface extends Component<any, any>
         }
 
         return (
-            <div className={SlapfaceLess.maininterface} style ={{display:this.actDisplay}}>
-                <div style={{ flexDirection: 'row', flexWrap: 'nowrap' }}>
-                </div>
+            <div style ={{display:this.actDisplay,width:"100%",height:"100%"}}>
                 <div style={{ width: '100%', height: '100%', backgroundColor: "rgba(0,0,0,0.5)" }}>
                     {<Group  {...slapfaceinfo} closeAct = {this.closeAct}/>}
                 </div>
@@ -198,9 +200,10 @@ class Group extends Component<any, any>
         //     setTimeout(()=>{this.picBack.style.display = 'flex';
         //     this.closeClick()},300)
         // }
+        this.loadDisplay = "hidden"
         if(this.firstFrameDisplay == "none"){
             setTimeout(()=>{this.firstFrameDisplay = 'flex';
-            this.closeClick()},0)
+            this.closeClick()},300)
         }
     }
 
@@ -217,10 +220,9 @@ class Group extends Component<any, any>
     closeClick(e?: Event) {
         e?.stopPropagation()
         let nextIndex = this.groupIndexList.CheckReady();
-
         // setTimeout(() => {
         //     this.loadDisplay = "visible"
-        // }, 1);
+        // }, 50);
         this.loadDisplay = "visible"
         this.elseDisplay = "hidden"
         if (nextIndex != -1) {
@@ -243,16 +245,14 @@ class Group extends Component<any, any>
             )
         }
 
-        return (<div  ref={(div)=>{this.picBack = div}} style={{ width: '100%', height: '100%', alignItems: 'center', justifyContent: 'center', position: 'absolute'}} onAnimationEnd={() => {setTimeout(()=>{this.picBack.className = SlapfaceLess.groupBackReverse},10)}}>
+        return (<div style={{ width: '100%', height: '100%', alignItems: 'center', justifyContent: 'center', position: 'absolute'}}>
             <div onClick={() => { if (this.props.settingsitems.is_mask == false) return; this.closeClick() }} style={{ position: "absolute", width: "100%", height: "100%" }}></div>
-            <div >
-                <img src = {this.groupArr[this.state.curIndex].picture} style ={{visibility:this.elseDisplay,width: this.groupArr[this.state.curIndex].width, height: this.groupArr[this.state.curIndex].height}} onLoad = {()=>{let curIndex = this.state.curIndex;if(!this.groupArr[curIndex].isLoadDone) {this.groupArr[curIndex].isLoadDone = true; this.loadDisplay = "hidden";this.elseDisplay = "visible";this.forceUpdate()}}}></img>
-                <div ref={(div)=>{this.loadPic = div}} className={SlapfaceLess.loading_anim}  style ={{backgroundImage: `url(${this.props.pic_loading})`,width: this.groupArr[this.state.curIndex].width, height: this.groupArr[this.state.curIndex].height,position:"absolute",visibility : this.loadDisplay}}> </div>
-                <div style={{width: '100%', height: '100%',visibility:this.firstFrameDisplay}}>
-                    <CloseButton btn_closeButton = {this.props.btn_closeButton} elseDisplay = {this.elseDisplay} onClick={(e: Event) => { this.closeClick(e);this.loadDisplay = "hidden" }} />
-                    <JumpButton elseDisplay = {this.elseDisplay} jumpButton = {this.props.jumpButton}/>
-                </div>
+            <div ref={(div)=>{this.picBack = div}} onAnimationEnd={() => {setTimeout(()=>{this.picBack.className = SlapfaceLess.groupBackReverse},0)}}>
+                <img src = {this.groupArr[this.state.curIndex].picture} style ={{visibility:this.elseDisplay,width: this.groupArr[this.state.curIndex].width, height: this.groupArr[this.state.curIndex].height}} onLoad = {()=>{let curIndex = this.state.curIndex;if(!this.groupArr[curIndex].isLoadDone) {this.groupArr[curIndex].isLoadDone = true;this.loadDisplay = "hidden";this.elseDisplay = "visible";this.forceUpdate()}}}></img>
+                <CloseButton firstFrameDisplay = {this.firstFrameDisplay} btn_closeButton = {this.props.btn_closeButton} elseDisplay = {this.elseDisplay} onClick={(e: Event) => { this.closeClick(e);}} />
+                <JumpButton firstFrameDisplay = {this.firstFrameDisplay} elseDisplay = {this.elseDisplay} jumpButton = {this.props.jumpButton}/>
             </div>
+            <div ref={(div)=>{this.loadPic = div}} className={SlapfaceLess.loading_anim}  style ={{backgroundImage: `url(${this.props.pic_loading})`,width:"300px", height: "300px",position:"absolute",visibility : this.loadDisplay}}> </div>
         </div>);
     }
 
@@ -262,7 +262,7 @@ class CloseButton extends Component<any, any>
 {
     render() {
         return (
-            <button className={SlapfaceLess.closeButton} style={{ visibility : this.props.elseDisplay,backgroundSize:"contain",backgroundImage: `url(${this.props.btn_closeButton})` }} onClick={this.props.onClick}></button>
+            <button className={SlapfaceLess.closeButton} style={{display:this.props.firstFrameDisplay,visibility : this.props.elseDisplay,backgroundSize:"contain",backgroundImage: `url(${this.props.btn_closeButton})` }} onClick={this.props.onClick}></button>
         )
     }
 }
@@ -272,8 +272,8 @@ class JumpButton extends Component<any, any>
     private jumpbtnImg
     render() {
         return (
-            <div className= {SlapfaceLess.jumpButton} style ={{visibility : this.props.elseDisplay}}
-                onMouseDown={() => {(this.jumpbtnImg as HTMLImageElement).src = this.props.jumpButton.pic_yaxia;console.log("yaxia") }}
+            <div className= {SlapfaceLess.jumpButton} style ={{display:this.props.firstFrameDisplay,visibility : this.props.elseDisplay}}
+                onMouseDown={() => {(this.jumpbtnImg as HTMLImageElement).src = this.props.jumpButton.pic_yaxia;}}
                 onMouseUp={() => { (this.jumpbtnImg as HTMLImageElement).src = this.props.jumpButton.pic_xuanfu }}
                 onMouseOver={() => { (this.jumpbtnImg as HTMLImageElement).src = this.props.jumpButton.pic_xuanfu; }}
                 onMouseOut={() => { (this.jumpbtnImg as HTMLImageElement).src = this.props.jumpButton.pic_changtai; }}>

package/ui/sample/Slapface/SlapfaceDemo.tsx

@@ -0,0 +1,30 @@
+import { Component } from 'preact';
+import { Slapface } from 'src/pixUIReactComponents/ui/components/slapface/Slapface';
+import { Images } from 'src/pixUIReactComponents/ui/sample/Images'
+
+const settingsitems = {
+    ani_switch_type: 2,
+    is_mask: false
+}
+
+let jumpButton = {
+    pic_changtai: Images.changtai_button,
+    pic_yaxia: Images.yaxia_button,
+    pic_xuanfu: Images.xuanfu_button
+}
+
+let btn_closeButton = Images.btn_close
+
+let groupArr = [{ picture: Images.slapface_samplepic1, width: 632, height: 639 }, { picture: Images.slapface_samplepic2, width: 304, height: 331 },
+{ picture: Images.slapface_samplepic3, width: 662, height: 631 }, { picture: Images.slapface_samplepic4, width: 728, height: 651 },
+{ picture: Images.slapface_samplepic5, width: 630, height: 579 }, { picture: Images.slapface_samplepic6, width: 703, height: 621 }];
+
+export class SlapfaceDemo extends Component<any, any>{
+    render() {
+        return (
+            <div style={{position:"relative",width:"100%",height:"100%"}}>
+                <Slapface LoadGroup={groupArr} jumpButton={jumpButton} settingsitems={settingsitems}  pic_loading={Images.loading} btn_closeButton = {Images.btn_close}/>
+            </div>
+        )
+    }
+}

package/.eslintignore

@@ -1,7 +0,0 @@
-.eslintrc.js
-src/migration/
-lib/grpc-web
-gen/
-build/
-config/
-src/entry.js

package/.eslintrc.js

@@ -1,48 +0,0 @@
-module.exports = {
-	env: {
-		browser: true,
-		node: true,
-	},
-	parser: '@typescript-eslint/parser',
-	parserOptions: {
-		project: './tsconfig.json',
-	},
-	plugins: ['jest', '@typescript-eslint'],
-	extends: [
-		'eslint:recommended',
-		// 'plugin:react/recommended',
-		'plugin:@typescript-eslint/eslint-recommended',
-		'plugin:@typescript-eslint/recommended',
-	],
-	overrides: [
-		{
-			files: ['*.ts', '*.tsx'],
-			rules: {
-				'prefer-const': [0],
-				'no-var': [2],
-				'no-constant-condition': [0],
-				'@typescript-eslint/camelcase': [0],
-			},
-		},
-	],
-	rules: {
-		'prefer-const': [0],
-		'linebreak-style': ['error', 'unix'],
-		quotes: ['error', 'single', { avoidEscape: true }],
-		semi: ['error', 'always'],
-		'no-console': [1, { allow: ['warn', 'error', 'log', 'enable_trace'] }],
-		'no-unused-vars': [0],
-		// 'comma-dangle': ['error', 'always-multiline'],
-		// 'react/prop-types': [0],
-		'@typescript-eslint/no-explicit-any': [0],
-		'@typescript-eslint/no-empty-function': [0],
-		'@typescript-eslint/no-empty-interface': [0],
-		'@typescript-eslint/no-unused-vars': [0],
-		'@typescript-eslint/no-use-before-define': [0],
-		'@typescript-eslint/explicit-member-accessibility': [0],
-		'@typescript-eslint/no-var-requires': [0],
-		'@typescript-eslint/no-non-null-assertion': [0],
-		'@typescript-eslint/explicit-function-return-type': [0],
-	},
-	settings: {},
-};

package/.pixiderc/apps.json

@@ -1,12 +0,0 @@
-[
-    {
-        "name": "app",
-        "template": "./src/app/index.html",
-        "entry": "./src/app/main.tsx"
-    },
-    {
-        "name": "preprocess",
-        "template": "./src/preprocess/index.html",
-        "entry": "./src/preprocess/main.tsx"
-    }
-]

package/.pixiderc/devel-config.meta.json

@@ -1,23 +0,0 @@
-{
-    "$schema": "http://json-schema.org/draft-07/schema",
-    "$id": "http://px.woa.com/schemas/devel-config",
-    "title": "Development Config Schema",
-    "type": "object",
-    "required": [],
-    "properties": {
-        "clientLogEnablement": {
-            "title": "客户端日志开关",
-            "type": "boolean"
-        },
-        "customConfig": {
-            "type": "object",
-            "title": "自定义配置",
-            "patternProperties": {
-                "^[a-zA-Z][a-zA-Z0-9_]*$": {
-                    "type": "string",
-                    "title": "自定义开发配置项"
-                }
-            }
-        }
-    }
-}

package/.pixiderc/postinstall.js

@@ -1,17 +0,0 @@
-const { rmdirSync, existsSync } = require('fs');
-const { resolve: pathResolve } = require('path');
-
-// rm -rf node_modules/@types/react && rm -rf node_modules/preact
-
-const dirs = [
-    pathResolve(__dirname, '..', 'node_modules/@types/react'),
-    pathResolve(__dirname, '..', 'node_modules/preact'),
-];
-
-dirs.forEach(dir => {
-    existsSync(dir) && rmdirSync(dir, {recursive: true});
-})
-
-// > 14.14之后可以使用rmSync:
-// rmSync(pathResolve(__dirname, '..', 'node_modules/@types/react'), {recursive: true, force: true});
-// rmSync(pathResolve(__dirname, '..', 'node_modules/preact'), {recursive: true, force: true});

package/.pixiderc/util.js

@@ -1,136 +0,0 @@
-const port = process.env.port || 8080;
-const { rtCompilerToolPath } = process.env;
-module.exports.getLocalIP = function () {
-	let os = require('os');
-	let ifaces = os.networkInterfaces();
-
-	let ipList = [];
-	Object.keys(ifaces).forEach(function (ifname) {
-		let alias = 0;
-
-		ifaces[ifname].forEach(function (iface) {
-			if ('IPv4' !== iface.family || iface.internal !== false) {
-				// skip over internal (i.e. 127.0.0.1) and non-ipv4 addresses
-				return;
-			}
-			ipList.push(iface.address);
-		});
-	});
-	console.log('iplist', ipList);
-	return ipList;
-};
-
-module.exports.setupFilter = (appDef) =>
-	function (app, servers) {
-		let log = () => {};
-		log = console.log;
-
-		app.disable('etag');
-
-		app.get('/log0', (req, res) => {
-			log = () => {};
-			res.send('ok');
-		});
-		app.get('/log1', (req, res) => {
-			log = console.log;
-			res.send('ok');
-		});
-
-		//拦截输出，当agent为PixUI且输出类型为html时，转换为fbs二进制数据再返回
-		app.use((req, res, next) => {
-			//去掉缓存标记，因为很可能源文件没变，但转换后的表示变了
-			delete req.headers['if-none-match'];
-			let ua = req.get('User-Agent');
-			log('req', req.url, ua, JSON.stringify(req.headers));
-
-			let _write = res.write;
-			let _end = res.end;
-			let _send = res.send;
-
-			let buffers = [];
-			var addBuffer = (chunk, encoding) => {
-				if (chunk === undefined) return;
-				if (typeof chunk === 'string') {
-					chunk = Buffer.from(chunk, encoding);
-				}
-				buffers.push(chunk);
-			};
-
-			//处理直接裸写的情况，一般见于发送静态文件
-			res.write = function (chunk, encoding) {
-				let type = res.get('Content-Type');
-				log('hook write...', type, chunk);
-				addBuffer(chunk, encoding);
-			};
-			res.end = function (chunk, encoding) {
-				let type = res.get('Content-Type');
-				if (chunk) addBuffer(chunk, encoding);
-				let data = Buffer.concat(buffers);
-				log('hook end...', type, data.length);
-				res.write = _write;
-				res.end = _end;
-				_send.call(this, data);
-			};
-
-			//处理通过send发送的情况，如webpack合成的html
-			res.send = function (c) {
-				let type = res.get('Content-Type') || 'text/plain';
-				let isPixUI = /PixUI/.test(ua);
-				let ver = /(\d)\.(\d)\.(\d+)/.exec(ua); // 0.2.*以上
-				let isHTML = type.indexOf('text/html') >= 0;
-				let isJS = type.indexOf('javascript') >= 0;
-				let isCSS = type.indexOf('text/css') >= 0;
-				log('hook send...', c.length, type);
-				if (isPixUI && parseInt(ver[2]) >= 2 && (isHTML || isJS)) {
-					let cp = require('child_process');
-					let opts = isJS ? ['--js'] : [];
-					let child = cp.spawn(rtCompilerToolPath, ['--src', 'stdin', ...opts]);
-					child.stdin.write(c);
-					child.stdout.on('data', (data) => {
-						// console.log('get data from fbs', req.url, data.byteLength);
-						addBuffer(data);
-					});
-					child.stdout.on('close', () => {
-						// console.log('get data from fbs finish!!', req.url);
-						res.end();
-					});
-					child.stderr.on('data', (data) => {
-						console.log('get err from fbs', data.toString());
-					});
-					child.stdin.end();
-				} else {
-					_send.call(this, c);
-				}
-			};
-			next();
-		});
-
-		//一个虚拟path，可以随时修改指向地址，可以将此地址硬编码到测试代码里，每次想切换测试页面就不用改代码重新编译了
-		let testTo;
-		app.get('/test', (req, res) => {
-			if (req.query.to) {
-				testTo = '/' + req.query.to;
-				res.send(`set /test to ${testTo}`);
-				return;
-			} else {
-				if (!testTo) {
-					res.send('use /test?to=xxx to set redirect target');
-					return;
-				}
-				res.redirect(testTo);
-			}
-		});
-
-		//定制首页显示所有entry，方便浏览
-		app.get(`/`, (req, res) => {
-			res.setHeader('content-type', 'text/html');
-			res.send(
-				appDef
-					.concat([{ name: 'test' }])
-					.map((v) => {
-						return `<a href=${port}/${v.name} style='font-size:36px'>${v.name}</a>`;
-					})
-					.join('<br>') + "<div style='font-size:40pt' onclick='window.close();'>close</div>"
-			);
-		});
-	};