diff --git a/CHANGELOG.md b/CHANGELOG.md index 8a5c636..451499a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ ## changelog +## 0.10.0 + +函数名提出name作为单独配置项传递，第一个参数作为id，最后个参数作为函数名，这样函数的显示名称可以支持转换。 + +弹窗事件如果不传递弹窗名字，则不会出现弹窗。 + ## 0.9.5 preview组件scripts加载由并发变为线性。 diff --git a/README.md b/README.md index 94a553d..13cdfbb 100644 --- a/README.md +++ b/README.md @@ -150,6 +150,8 @@ MIT ## Todo -函数部分重构 +文档更新 +脚手架 +基础组件库 diff --git a/packages/dooringx-example/src/plugin/formComponents/actionButton.tsx b/packages/dooringx-example/src/plugin/formComponents/actionButton.tsx index 394e2b1..93f4185 100644 --- a/packages/dooringx-example/src/plugin/formComponents/actionButton.tsx +++ b/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; @@ -47,190 +48,196 @@ function ActionButton(props: ActionButtonProps) { modalMap = props.config.getStore().getData().modalMap; } - const handleInputDataSource = ( - w: { - uid: string; - value: string; - detail: Record; - }, - c: any, - name = 'dataSource' - ) => { - return ( -
-
- -
-
- {w.detail[name] && - w.detail[name][c.name] && - w.detail[name][c.name].map((vvv: string, x: number) => { - return ( - - - { + const value = e; + setSearch((pre) => { + pre.forEach((v) => { + v.uid === w.uid ? (v.detail[name][c.name][x] = value || '') : ''; + }); + return [...pre]; }); - return [...pre]; - }); - }} - > - {Object.keys(dataMap).map((n) => { - return ( - - ); - })} - - - - - - - ); - })} + }} + > + 删除 + + + + ); + })} +
- - ); - }; + ); + }, + [] + ); - const handleInput = ( - w: { - uid: string; - value: string; - detail: Record; - }, - c: any, - name = 'ctx' - ) => { - return ( -
-
- -
-
- {w.detail[name] && - w.detail[name][c.name] && - w.detail[name][c.name].map((vvv: string, x: number) => { - return ( - - - { - const value = e.target.value; - setSearch((pre) => { - pre.forEach((v) => { - v.uid === w.uid ? (v.detail[name][c.name][x] = value || '') : ''; + +
+
+ {w.detail[name] && + w.detail[name][c.name] && + w.detail[name][c.name].map((vvv: string, x: number) => { + return ( + + + { + const value = e.target.value; + setSearch((pre) => { + pre.forEach((v) => { + v.uid === w.uid ? (v.detail[name][c.name][x] = value || '') : ''; + }); + return [...pre]; }); - return [...pre]; - }); - }} - > - - - - - - ); - })} + }} + > + 删除 + + + + ); + })} +
- - ); - }; + ); + }, + [] + ); return (
@@ -404,7 +411,7 @@ function ActionButton(props: ActionButtonProps) { {Object.keys(functionMap).map((v) => { return ( ); })} @@ -425,12 +432,15 @@ function ActionButton(props: ActionButtonProps) {
{options && options.map((c) => { + if (c.data.length === 0) { + return
; + } return ( {c.name}: diff --git a/packages/dooringx-example/src/plugin/registComponents/button.tsx b/packages/dooringx-example/src/plugin/registComponents/button.tsx index 6ff2c06..60d82ec 100644 --- a/packages/dooringx-example/src/plugin/registComponents/button.tsx +++ b/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 () => { diff --git a/packages/dooringx-example/src/plugin/registComponents/inputCo.tsx b/packages/dooringx-example/src/plugin/registComponents/inputCo.tsx index 492d27a..ca86d0a 100644 --- a/packages/dooringx-example/src/plugin/registComponents/inputCo.tsx +++ b/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 () => { diff --git a/packages/dooringx-lib/package.json b/packages/dooringx-lib/package.json index a3bb581..f246f2c 100644 --- a/packages/dooringx-lib/package.json +++ b/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", diff --git a/packages/dooringx-lib/src/components/modalRender.tsx b/packages/dooringx-lib/src/components/modalRender.tsx index 35ae169..c2eb4d3 100644 --- a/packages/dooringx-lib/src/components/modalRender.tsx +++ b/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'); diff --git a/packages/dooringx-lib/src/config/index.tsx b/packages/dooringx-lib/src/config/index.tsx index 5ebe410..f57879f 100644 --- a/packages/dooringx-lib/src/config/index.tsx +++ b/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: {}, diff --git a/packages/dooringx-lib/src/core/functionCenter/config.ts b/packages/dooringx-lib/src/core/functionCenter/config.ts index a12f7ea..2e1bad3 100644 --- a/packages/dooringx-lib/src/core/functionCenter/config.ts +++ b/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; }[]; diff --git a/packages/dooringx-lib/src/core/functionCenter/index.ts b/packages/dooringx-lib/src/core/functionCenter/index.ts index 97b6f0e..a831fd7 100644 --- a/packages/dooringx-lib/src/core/functionCenter/index.ts +++ b/packages/dooringx-lib/src/core/functionCenter/index.ts @@ -28,10 +28,13 @@ export type FunctionCenterFunction = ( iname: EventCenterMapItem ) => void; -export type FunctionCenterType = Record< - string, - { fn: FunctionCenterFunction; config: FunctionConfigType } ->; +export type FunctionCenterValue = { + fn: FunctionCenterFunction; + config: FunctionConfigType; + name: string; +}; + +export type FunctionCenterType = Record; /** * @@ -48,6 +51,7 @@ export class FunctionCenter { public asyncMap: Record = {}; public configMap: Record = {}; public funcitonMap: Record = {}; + public nameMap: Record = {}; // id对名字 constructor(public initConfig: FunctionCenterType = {}) { this.init(initConfig); } @@ -68,20 +72,48 @@ export class FunctionCenter { }, {} ); + this.nameMap = Object.keys(initConfig).reduce>((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]; } /** * - * 注册函数，同名覆盖，返回删除函数 - * @param {string} name - * @param {FunctionCenterFunction} fn + *注册函数，同id覆盖，返回删除函数 + * @param {string} id 唯一值 注意！每个组件都要不一样，所以需要带着每个组件的id，这样也方便区分是哪个组件抛出的函数!! + * @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; - if (this.asyncMap[name]) { - this.asyncMap[name](); + this.funcitonMap[id] = fn; + this.configMap[id] = config; + this.nameMap[id] = name; + if (this.asyncMap[id]) { + this.asyncMap[id](); } - this.configMap[name] = config; return () => { - delete this.funcitonMap[name]; - delete this.configMap[name]; + delete this.funcitonMap[id]; + delete this.configMap[id]; + delete this.nameMap[id]; }; }