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

refactor: func

Browse Source
This commit is contained in:
hufeixiong
2021-11-04 17:59:01 +08:00
parent b854f9f275
commit 79efa6e15a
9 changed files with 260 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.md
View File

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

4
README.md
View File

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

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 { 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,190 +48,196 @@ function ActionButton(props: ActionButtonProps) {
modalMap = props.config.getStore().getData().modalMap;
}
const handleInputDataSource = (
w: {
uid: string;
value: string;
detail: Record<string, any>;
},
c: any,
name = 'dataSource'
) => {
return (
<div>
<div
style={{
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];
});
const handleInputDataSource = useCallback(
(
w: {
uid: string;
value: string;
detail: Record<string, any>;
},
c: any,
name = 'dataSource'
) => {
return (
<div>
<div
style={{
textAlign: 'right',
margin: '10px 0',
}}
>
添加
</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 || '') : '';
<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>
</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 (
<Option key={n} value={n}>
{n}
</Option>
);
})}
</Select>
</Col>
<Col span={5} style={{ textAlign: 'right' }}>
<Button
danger
onClick={() => {
setSearch((pre) => {
pre.forEach((v) => {
v.uid === w.uid ? v.detail[name][c.name].splice(x, 1) : '';
}}
>
{Object.keys(dataMap).map((n) => {
return (
<Option key={n} value={n}>
{n}
</Option>
);
})}
</Select>
</Col>
<Col span={5} style={{ textAlign: 'right' }}>
<Button
danger
onClick={() => {
setSearch((pre) => {
pre.forEach((v) => {
v.uid === w.uid ? v.detail[name][c.name].splice(x, 1) : '';
});
return [...pre];
});
return [...pre];
});
}}
>
删除
</Button>
</Col>
</Row>
);
})}
}}
>
删除
</Button>
</Col>
</Row>
);
})}
</div>
</div>
</div>
);
};
);
},
[]
);
const handleInput = (
w: {
uid: string;
value: string;
detail: Record<string, any>;
},
c: any,
name = 'ctx'
) => {
return (
<div>
<div
style={{
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];
});
const handleInput = useCallback(
(
w: {
uid: string;
value: string;
detail: Record<string, any>;
},
c: any,
name = 'ctx'
) => {
return (
<div>
<div
style={{
textAlign: 'right',
margin: '10px 0',
}}
>
添加输入框
</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 || '') : '';
<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>
</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>
<Col span={5} style={{ textAlign: 'right' }}>
<Button
danger
onClick={() => {
setSearch((pre) => {
pre.forEach((v) => {
v.uid === w.uid ? v.detail[name][c.name].splice(x, 1) : '';
}}
></Input>
</Col>
<Col span={5} style={{ textAlign: 'right' }}>
<Button
danger
onClick={() => {
setSearch((pre) => {
pre.forEach((v) => {
v.uid === w.uid ? v.detail[name][c.name].splice(x, 1) : '';
});
return [...pre];
});
return [...pre];
});
}}
>
删除
</Button>
</Col>
</Row>
);
})}
}}
>
删除
</Button>
</Col>
</Row>
);
})}
</div>
</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>

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

@@ -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 () => {

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

@@ -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 () => {

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

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

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

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

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

@@ -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;
}[];

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

@@ -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<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];
}
/**
*
* 注册函数，同名覆盖，返回删除函数
* @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];
};
}