Merge pull request #15 from H5-Dooring/func-refactor

Func refactor

CHANGELOG.md

@@ -1,5 +1,11 @@
 ## changelog
 
+## 0.10.0
+
+函数名提出name作为单独配置项传递，第一个参数作为id，最后个参数作为函数名，这样函数的显示名称可以支持转换。
+
+弹窗事件如果不传递弹窗名字，则不会出现弹窗。
+
 ## 0.9.5
 
 preview组件scripts加载由并发变为线性。

README.md

@@ -150,6 +150,8 @@ MIT
 
 ## Todo
 
-函数部分重构
+文档更新
 
+脚手架
 
+基础组件库

packages/dooringx-example/src/plugin/formComponents/actionButton.tsx

@@ -8,7 +8,7 @@
 
 import { Button, Col, Input, message, Modal, Row, Select } from 'antd';
 import { memo, useMemo, useState } from 'react';
-import React from 'react';
+import React, { useCallback } from 'react';
 import { UserConfig, createUid, deepCopy } from 'dooringx-lib';
 import { unstable_batchedUpdates } from 'react-dom';
 import { FormMap } from '../formTypes';
@@ -38,6 +38,7 @@ function ActionButton(props: ActionButtonProps) {
 	const functionCenter = props.config.getEventCenter().getFunctionCenter();
 	const functionConfig = functionCenter.getConfigMap();
 	const functionMap = functionCenter.getFunctionMap();
+	const functionNameMap = functionCenter.getNameMap();
 	const isEdit = props.config.getStoreChanger().isEdit();
 	const dataMap = props.config.getDataCenter().getDataMap();
 	let modalMap: Record<string, IStoreData>;
@@ -47,7 +48,8 @@ function ActionButton(props: ActionButtonProps) {
 		modalMap = props.config.getStore().getData().modalMap;
 	}
 
-	const handleInputDataSource = (
+	const handleInputDataSource = useCallback(
+		(
 			w: {
 				uid: string;
 				value: string;
@@ -142,9 +144,12 @@ function ActionButton(props: ActionButtonProps) {
 					</div>
 				</div>
 			);
-	};
+		},
+		[]
+	);
 
-	const handleInput = (
+	const handleInput = useCallback(
+		(
 			w: {
 				uid: string;
 				value: string;
@@ -230,7 +235,9 @@ function ActionButton(props: ActionButtonProps) {
 					</div>
 				</div>
 			);
-	};
+		},
+		[]
+	);
 
 	return (
 		<div>
@@ -404,7 +411,7 @@ function ActionButton(props: ActionButtonProps) {
 												{Object.keys(functionMap).map((v) => {
 													return (
 														<Option key={v} value={v}>
-															{v}
+															{functionNameMap[v]}
 														</Option>
 													);
 												})}
@@ -425,12 +432,15 @@ function ActionButton(props: ActionButtonProps) {
 										</Col>
 									</Row>
 									<div
-									//[{data: ""
+									//[{data: [""]
 									///   name: "改变文本数据源"
 									//options: {receive: "_changeval"}}]
 									>
 										{options &&
 											options.map((c) => {
+												if (c.data.length === 0) {
+													return <div key={c.name}></div>;
+												}
 												return (
 													<Row key={c.name} style={{ margin: '10px 0' }}>
 														<Col span={6}>{c.name}:</Col>

packages/dooringx-example/src/plugin/registComponents/button.tsx

@@ -39,7 +39,7 @@ function ButtonTemp(pr: ComponentRenderConfigProps) {
 		if (op1) {
 			const functionCenter = eventCenter.getFunctionCenter();
 			unregist = functionCenter.register(
-				`${pr.data.id}+改变文本函数`,
+				`${pr.data.id}+changeText`,
 				async (ctx, next, config, args: any, _eventList, iname) => {
 					const userSelect = iname.data;
 					const ctxVal = changeUserValue(
@@ -62,7 +62,8 @@ function ButtonTemp(pr: ComponentRenderConfigProps) {
 							multi: false,
 						},
 					},
-				]
+				],
+				`${pr.data.id}+改变文本函数`
 			);
 		}
 		return () => {

packages/dooringx-example/src/plugin/registComponents/inputCo.tsx

@@ -34,7 +34,7 @@ const InputTemp = (pr: InputProps) => {
 		if (props.op1) {
 			const functionCenter = eventCenter.getFunctionCenter();
 			unregist = functionCenter.register(
-				`${pr.data.id}+验证已填函数`,
+				`${pr.data.id}+validate-func`,
 				async (_ctx, next, _config, _args: any, _eventList, _iname) => {
 					if (value === '') {
 						setErr(props.warnning);
@@ -52,7 +52,8 @@ const InputTemp = (pr: InputProps) => {
 							multi: false,
 						},
 					},
-				]
+				],
+				`${pr.data.id}+验证已填函数`
 			);
 		}
 		return () => {
@@ -65,7 +66,7 @@ const InputTemp = (pr: InputProps) => {
 		if (props.op2) {
 			const functionCenter = eventCenter.getFunctionCenter();
 			unregist = functionCenter.register(
-				`${pr.data.id}+获取输入数据`,
+				`${pr.data.id}+get-input`,
 				async (ctx, next, _config, args: any, _eventList, _iname) => {
 					const key = args['_changeval'][0];
 					ctx[key] = value;
@@ -80,7 +81,8 @@ const InputTemp = (pr: InputProps) => {
 							multi: false,
 						},
 					},
-				]
+				],
+				`${pr.data.id}+获取输入数据`
 			);
 		}
 		return () => {

packages/dooringx-lib/package.json

@@ -1,5 +1,5 @@
 {
-	"version": "0.9.5",
+	"version": "0.10.0",
 	"license": "MIT",
 	"main": "dist/index.js",
 	"module": "dist/dooringx-lib.esm.js",

packages/dooringx-lib/src/components/modalRender.tsx

@@ -30,7 +30,6 @@ export function ModalRender(props: ModalRenderProps) {
 	const { parentDom, rootDom } = props;
 
 	const modalConfig = props.data.modalConfig[props.name];
-
 	//这里还要添加个关闭函数，
 	const unmount = useMemo(() => {
 		return () => {
@@ -81,6 +80,9 @@ export const createModal = (name: string, data: IStoreData, config: UserConfig)
 	if (wrap) {
 		wrap = null;
 	}
+	if (!name) {
+		return;
+	}
 
 	if (!wrap) {
 		wrap = document.createElement('div');

packages/dooringx-lib/src/config/index.tsx

@@ -203,6 +203,7 @@ export const defaultConfig: InitConfig = {
 					},
 				},
 			],
+			name: '打开弹窗函数',
 		},
 		关闭弹窗函数: {
 			fn: (_ctx, next, _config, args) => {
@@ -223,6 +224,7 @@ export const defaultConfig: InitConfig = {
 					},
 				},
 			],
+			name: '关闭弹窗函数',
 		},
 	},
 	initDataCenterMap: {},

packages/dooringx-lib/src/core/functionCenter/config.ts

@@ -19,9 +19,9 @@ export interface FunctionDataMap {
 	input: FuncitonOptionConfigType;
 	ctx: FuncitonOptionConfigType;
 }
-// data 如果是''则在datasource,input,ctx选择
+// data 如果是''则在datasource,input,ctx选择  有可能是空
 export type FunctionConfigType = {
 	name: FunctionNameType; // 会放到左侧展示 唯一！
-	data: FunctionDataType[];
+	data: FunctionDataType[]; //可能空
 	options: FuncitonOptionConfigType;
 }[];

packages/dooringx-lib/src/core/functionCenter/index.ts

@@ -28,10 +28,13 @@ export type FunctionCenterFunction = (
 	iname: EventCenterMapItem
 ) => void;
 
-export type FunctionCenterType = Record<
+export type FunctionCenterValue = {
-	string,
+	fn: FunctionCenterFunction;
-	{ fn: FunctionCenterFunction; config: FunctionConfigType }
+	config: FunctionConfigType;
->;
+	name: string;
+};
+
+export type FunctionCenterType = Record<string, FunctionCenterValue>;
 
 /**
  *
@@ -48,6 +51,7 @@ export class FunctionCenter {
 	public asyncMap: Record<string, Function> = {};
 	public configMap: Record<string, FunctionConfigType> = {};
 	public funcitonMap: Record<string, FunctionCenterFunction> = {};
+	public nameMap: Record<string, string> = {}; // id对名字
 	constructor(public initConfig: FunctionCenterType = {}) {
 		this.init(initConfig);
 	}
@@ -68,20 +72,48 @@ export class FunctionCenter {
 			},
 			{}
 		);
+		this.nameMap = Object.keys(initConfig).reduce<Record<string, string>>((prev, next) => {
+			prev[next] = initConfig[next].name;
+			return prev;
+		}, {});
 	}
 
 	reset() {
 		this.funcitonMap = {};
 		this.configMap = {};
+		this.nameMap = {};
 	}
 
 	getFunctionMap() {
 		return this.funcitonMap;
 	}
-
 	getConfigMap() {
 		return this.configMap;
 	}
+	getNameMap() {
+		return this.nameMap;
+	}
+
+	/**
+	 *
+	 * 通过name查id
+	 * @param {string} name
+	 * @return {*}  {(string | undefined)}
+	 * @memberof FunctionCenter
+	 */
+	nameToKey(name: string): string | undefined {
+		const keys = Object.keys(this.nameMap);
+		const keylen = keys.length;
+		let result: string | undefined;
+		for (let i = 0; i < keylen; i++) {
+			const key = keys[i];
+			if (this.nameMap[key] === name) {
+				result = key;
+				break;
+			}
+		}
+		return result;
+	}
 
 	/**
 	 *
@@ -92,26 +124,31 @@ export class FunctionCenter {
 	deleteFunc(name: string) {
 		delete this.funcitonMap[name];
 		delete this.configMap[name];
+		delete this.nameMap[name];
 	}
 
 	/**
 	 *
-	 * 注册函数，同名覆盖，返回删除函数
+	 *注册函数，同id覆盖，返回删除函数
-	 * @param {string} name
+	 * @param {string} id 唯一值 注意！每个组件都要不一样，所以需要带着每个组件的id，这样也方便区分是哪个组件抛出的函数!!
-	 * @param {FunctionCenterFunction} fn
+	 * @param {FunctionCenterFunction} fn 函数体
+	 * @param {FunctionConfigType} config 配置项
+	 * @param {string} name 显示名
 	 * @return {*}
 	 * @memberof FunctionCenter
 	 */
-	register(name: string, fn: FunctionCenterFunction, config: FunctionConfigType) {
+	register(id: string, fn: FunctionCenterFunction, config: FunctionConfigType, name: string) {
 		// 注册时，需要通知asyncmap已经拿到
-		this.funcitonMap[name] = fn;
+		this.funcitonMap[id] = fn;
-		if (this.asyncMap[name]) {
+		this.configMap[id] = config;
-			this.asyncMap[name]();
+		this.nameMap[id] = name;
+		if (this.asyncMap[id]) {
+			this.asyncMap[id]();
 		}
-		this.configMap[name] = config;
 		return () => {
-			delete this.funcitonMap[name];
+			delete this.funcitonMap[id];
-			delete this.configMap[name];
+			delete this.configMap[id];
+			delete this.nameMap[id];
 		};
 	}