guoshujing/dooring
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
Func refactor
This commit is contained in:
yehuozhili
2021-11-05 09:28:14 +08:00
committed by GitHub
parent b854f9f275 c47edfcc44
commit f7b127baf6
10 changed files with 264 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
CHANGELOG.md
View File

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

4
README.md
View File

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

362
packages/dooringx-example/src/plugin/formComponents/actionButton.tsx
View File

@@ -8,7 +8,7 @@
import { Button, Col, Input, message, Modal, Row, Select } from 'antd'; import { Button, Col, Input, message, Modal, Row, Select } from 'antd';
import { memo, useMemo, useState } from 'react'; import { memo, useMemo, useState } from 'react';
import React from 'react'; import React, { useCallback } from 'react';
import { UserConfig, createUid, deepCopy } from 'dooringx-lib'; import { UserConfig, createUid, deepCopy } from 'dooringx-lib';
import { unstable_batchedUpdates } from 'react-dom'; import { unstable_batchedUpdates } from 'react-dom';
import { FormMap } from '../formTypes'; import { FormMap } from '../formTypes';
@@ -38,6 +38,7 @@ function ActionButton(props: ActionButtonProps) {
const functionCenter = props.config.getEventCenter().getFunctionCenter(); const functionCenter = props.config.getEventCenter().getFunctionCenter();
const functionConfig = functionCenter.getConfigMap(); const functionConfig = functionCenter.getConfigMap();
const functionMap = functionCenter.getFunctionMap(); const functionMap = functionCenter.getFunctionMap();
const functionNameMap = functionCenter.getNameMap();
const isEdit = props.config.getStoreChanger().isEdit(); const isEdit = props.config.getStoreChanger().isEdit();
const dataMap = props.config.getDataCenter().getDataMap(); const dataMap = props.config.getDataCenter().getDataMap();
let modalMap: Record<string, IStoreData>; let modalMap: Record<string, IStoreData>;
@@ -47,190 +48,196 @@ function ActionButton(props: ActionButtonProps) {
modalMap = props.config.getStore().getData().modalMap; modalMap = props.config.getStore().getData().modalMap;
} }
const handleInputDataSource = ( const handleInputDataSource = useCallback(
w: { (
uid: string; w: {
value: string; uid: string;
detail: Record<string, any>; value: string;
}, detail: Record<string, any>;
c: any, },
name = 'dataSource' c: any,
) => { name = 'dataSource'
return ( ) => {
<div> return (
<div <div>
style={{ <div
textAlign: 'right', style={{
margin: '10px 0', textAlign: 'right',
}} margin: '10px 0',
>
<Button
type="primary"
onClick={() => {
setSearch((pre) => {
pre.forEach((v) => {
if (v.uid === w.uid) {
let sign = true;
if (!v.detail[name][c.name]) {
v.detail[name][c.name] = [];
}
if (!c.options.multi) {
if (v.detail[name][c.name].length >= 1) {
sign = false;
message.error('该函数最多只能添加1个');
}
}
if (sign) {
v.detail[name][c.name].push('');
}
}
});
return [...pre];
});
}} }}
> >
添加 <Button
</Button> type="primary"
</div> onClick={() => {
<div> setSearch((pre) => {
{w.detail[name] && pre.forEach((v) => {
w.detail[name][c.name] && if (v.uid === w.uid) {
w.detail[name][c.name].map((vvv: string, x: number) => { let sign = true;
return ( if (!v.detail[name][c.name]) {
<Row key={x}> v.detail[name][c.name] = [];
<Col span={19}> }
<Select if (!c.options.multi) {
style={{ width: '100%' }} if (v.detail[name][c.name].length >= 1) {
value={vvv} sign = false;
onChange={(e) => { message.error('该函数最多只能添加1个');
const value = e; }
setSearch((pre) => { }
pre.forEach((v) => { if (sign) {
v.uid === w.uid ? (v.detail[name][c.name][x] = value || '') : ''; v.detail[name][c.name].push('');
}
}
});
return [...pre];
});
}}
>
添加
</Button>
</div>
<div>
{w.detail[name] &&
w.detail[name][c.name] &&
w.detail[name][c.name].map((vvv: string, x: number) => {
return (
<Row key={x}>
<Col span={19}>
<Select
style={{ width: '100%' }}
value={vvv}
onChange={(e) => {
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 (
{Object.keys(dataMap).map((n) => { <Option key={n} value={n}>
return ( {n}
<Option key={n} value={n}> </Option>
{n} );
</Option> })}
); </Select>
})} </Col>
</Select> <Col span={5} style={{ textAlign: 'right' }}>
</Col> <Button
<Col span={5} style={{ textAlign: 'right' }}> danger
<Button onClick={() => {
danger setSearch((pre) => {
onClick={() => { pre.forEach((v) => {
setSearch((pre) => { v.uid === w.uid ? v.detail[name][c.name].splice(x, 1) : '';
pre.forEach((v) => { });
v.uid === w.uid ? v.detail[name][c.name].splice(x, 1) : ''; return [...pre];
}); });
return [...pre]; }}
}); >
}} 删除
> </Button>
删除 </Col>
</Button> </Row>
</Col> );
</Row> })}
); </div>
})}
</div> </div>
</div> );
); },
}; []
);
const handleInput = ( const handleInput = useCallback(
w: { (
uid: string; w: {
value: string; uid: string;
detail: Record<string, any>; value: string;
}, detail: Record<string, any>;
c: any, },
name = 'ctx' c: any,
) => { name = 'ctx'
return ( ) => {
<div> return (
<div <div>
style={{ <div
textAlign: 'right', style={{
margin: '10px 0', textAlign: 'right',
}} margin: '10px 0',
>
<Button
type="primary"
onClick={() => {
setSearch((pre) => {
pre.forEach((v) => {
if (v.uid === w.uid) {
if (!v.detail[name][c.name]) {
v.detail[name][c.name] = [];
}
let sign = true;
if (!c.options.multi) {
if (v.detail[name][c.name].length >= 1) {
sign = false;
message.error('该函数最多只能添加1个');
}
}
if (sign) {
v.detail[name][c.name].push('');
}
}
});
return [...pre];
});
}} }}
> >
添加输入框 <Button
</Button> type="primary"
</div> onClick={() => {
<div> setSearch((pre) => {
{w.detail[name] && pre.forEach((v) => {
w.detail[name][c.name] && if (v.uid === w.uid) {
w.detail[name][c.name].map((vvv: string, x: number) => { if (!v.detail[name][c.name]) {
return ( v.detail[name][c.name] = [];
<Row key={x}> }
<Col span={19}> let sign = true;
<Input if (!c.options.multi) {
value={vvv} if (v.detail[name][c.name].length >= 1) {
onChange={(e) => { sign = false;
const value = e.target.value; message.error('该函数最多只能添加1个');
setSearch((pre) => { }
pre.forEach((v) => { }
v.uid === w.uid ? (v.detail[name][c.name][x] = value || '') : ''; if (sign) {
v.detail[name][c.name].push('');
}
}
});
return [...pre];
});
}}
>
添加输入框
</Button>
</div>
<div>
{w.detail[name] &&
w.detail[name][c.name] &&
w.detail[name][c.name].map((vvv: string, x: number) => {
return (
<Row key={x}>
<Col span={19}>
<Input
value={vvv}
onChange={(e) => {
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]; }}
}); ></Input>
}} </Col>
></Input> <Col span={5} style={{ textAlign: 'right' }}>
</Col> <Button
<Col span={5} style={{ textAlign: 'right' }}> danger
<Button onClick={() => {
danger setSearch((pre) => {
onClick={() => { pre.forEach((v) => {
setSearch((pre) => { v.uid === w.uid ? v.detail[name][c.name].splice(x, 1) : '';
pre.forEach((v) => { });
v.uid === w.uid ? v.detail[name][c.name].splice(x, 1) : ''; return [...pre];
}); });
return [...pre]; }}
}); >
}} 删除
> </Button>
删除 </Col>
</Button> </Row>
</Col> );
</Row> })}
); </div>
})}
</div> </div>
</div> );
); },
}; []
);
return ( return (
<div> <div>
@@ -404,7 +411,7 @@ function ActionButton(props: ActionButtonProps) {
{Object.keys(functionMap).map((v) => { {Object.keys(functionMap).map((v) => {
return ( return (
<Option key={v} value={v}> <Option key={v} value={v}>
{v} {functionNameMap[v]}
</Option> </Option>
); );
})} })}
@@ -425,12 +432,15 @@ function ActionButton(props: ActionButtonProps) {
</Col> </Col>
</Row> </Row>
<div <div
//[{data: "" //[{data: [""]
/// name: "改变文本数据源" /// name: "改变文本数据源"
//options: {receive: "_changeval"}}] //options: {receive: "_changeval"}}]
> >
{options && {options &&
options.map((c) => { options.map((c) => {
if (c.data.length === 0) {
return <div key={c.name}></div>;
}
return ( return (
<Row key={c.name} style={{ margin: '10px 0' }}> <Row key={c.name} style={{ margin: '10px 0' }}>
<Col span={6}>{c.name}:</Col> <Col span={6}>{c.name}:</Col>

5
packages/dooringx-example/src/plugin/registComponents/button.tsx
View File

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

10
packages/dooringx-example/src/plugin/registComponents/inputCo.tsx
View File

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

2
packages/dooringx-lib/package.json
View File

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

4
packages/dooringx-lib/src/components/modalRender.tsx
View File

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

2
packages/dooringx-lib/src/config/index.tsx
View File

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

4
packages/dooringx-lib/src/core/functionCenter/config.ts
View File

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

67
packages/dooringx-lib/src/core/functionCenter/index.ts
View File

@@ -28,10 +28,13 @@ export type FunctionCenterFunction = (
iname: EventCenterMapItem iname: EventCenterMapItem
) => void; ) => 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 asyncMap: Record<string, Function> = {};
public configMap: Record<string, FunctionConfigType> = {}; public configMap: Record<string, FunctionConfigType> = {};
public funcitonMap: Record<string, FunctionCenterFunction> = {}; public funcitonMap: Record<string, FunctionCenterFunction> = {};
public nameMap: Record<string, string> = {}; // id对名字
constructor(public initConfig: FunctionCenterType = {}) { constructor(public initConfig: FunctionCenterType = {}) {
this.init(initConfig); 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() { reset() {
this.funcitonMap = {}; this.funcitonMap = {};
this.configMap = {}; this.configMap = {};
this.nameMap = {};
} }
getFunctionMap() { getFunctionMap() {
return this.funcitonMap; return this.funcitonMap;
} }
getConfigMap() { getConfigMap() {
return this.configMap; 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) { deleteFunc(name: string) {
delete this.funcitonMap[name]; delete this.funcitonMap[name];
delete this.configMap[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 {*} * @return {*}
* @memberof FunctionCenter * @memberof FunctionCenter
*/ */
register(name: string, fn: FunctionCenterFunction, config: FunctionConfigType) { register(id: string, fn: FunctionCenterFunction, config: FunctionConfigType, name: string) {
// 注册时，需要通知asyncmap已经拿到 // 注册时，需要通知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 () => { return () => {
delete this.funcitonMap[name]; delete this.funcitonMap[id];
delete this.configMap[name]; delete this.configMap[id];
delete this.nameMap[id];
}; };
} }