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

update example

Browse Source
This commit is contained in:
hufeixiong
2021-08-03 11:05:40 +08:00
parent a5984c5a7f
commit 44eab9ce9b
4 changed files with 107 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
packages/dooringx-example/src/plugin/formComponents/switch.tsx Normal file
View File

@@ -0,0 +1,51 @@
/*
* @Author: yehuozhili
* @Date: 2021-08-03 10:45:06
* @LastEditors: yehuozhili
* @LastEditTime: 2021-08-03 10:45:07
* @FilePath: \dooringx\packages\dooringx-example\src\plugin\formComponents\switch.tsx
*/
import React, { useMemo, memo } from 'react';
import { Switch, Row, Col } from 'antd';
import { deepCopy, UserConfig } from 'dooringx-lib';
import { FormMap } from '../formTypes';
import { CreateOptionsRes } from 'dooringx-lib/dist/core/components/formTypes';
import { IBlockType } from 'dooringx-lib/dist/core/store/storetype';
interface MSwitchProps {
data: CreateOptionsRes<FormMap, 'switch'>;
current: IBlockType;
config: UserConfig;
}
const MSwitch = (props: MSwitchProps) => {
const option = useMemo(() => {
return props.data?.option || {};
}, [props.data]);
const store = props.config.getStore();
return (
<Row style={{ padding: '10px 20px' }}>
<Col span={6} style={{ lineHeight: '30px' }}>
{(option as any)?.label || '文字'}：
</Col>
<Col span={18}>
<Switch
checked={props.current.props[(option as any).receive] || ''}
onChange={(checked) => {
const receive = (option as any).receive;
const clonedata = deepCopy(store.getData());
const newblock = clonedata.block.map((v: IBlockType) => {
if (v.id === props.current.id) {
v.props[receive] = checked;
}
return v;
});
store.setData({ ...clonedata, block: [...newblock] });
}}
></Switch>
</Col>
</Row>
);
};
export default memo(MSwitch);

8
packages/dooringx-example/src/plugin/formTypes.ts
View File

@@ -2,7 +2,7 @@
* @Author: yehuozhili
* @Date: 2021-07-07 14:31:20
* @LastEditors: yehuozhili
* @LastEditTime: 2021-07-10 17:21:04
* @LastEditTime: 2021-08-03 10:45:52
* @FilePath: \dooringx\packages\dooringx-example\src\plugin\formTypes.ts
*/
export interface FormBaseType {
@@ -14,8 +14,14 @@ export interface FormInputType extends FormBaseType {
}
export interface FormActionButtonType {}
export interface FormAnimateControlType {}
export interface FormSwitchType extends FormBaseType {
label: string;
value: boolean;
}
export interface FormMap {
input: FormInputType;
actionButton: FormActionButtonType;
animateControl: FormAnimateControlType;
switch: FormSwitchType;
}

20
packages/dooringx-example/src/plugin/index.tsx
View File

@@ -2,7 +2,7 @@
* @Author: yehuozhili
* @Date: 2021-02-27 21:33:36
* @LastEditors: yehuozhili
* @LastEditTime: 2021-07-10 19:32:16
* @LastEditTime: 2021-08-03 11:05:24
* @FilePath: \dooringx\packages\dooringx-example\src\plugin\index.tsx
*/
@@ -14,16 +14,6 @@ import { functionMap } from './functionMap';
import { Formmodules } from './formComponentModules';
const LeftRegistMap: LeftRegistComponentMapItem[] = [
// build 时如果用代码分割会生成多个文件，这样就不能生成多类型文件。
// 建议基础包全部不分割。后面插件包可以用webpack的特性，所以插件包用新脚手架制作
// 基础包不独立出去的原因是部分左侧分类起始值最好规定住
// {
// type: 'xxa',
// component: 'asyncCo',
// img: '',
// urlFn: () => import('./registComponents/asyncCo'),
// displayName:'xxx'
// },
{
type: 'basic',
component: 'button',
@@ -66,6 +56,14 @@ export const defaultConfig: Partial<InitConfig> = {
</div>
),
},
{
type: 'fn',
icon: (
<div className="right-tab-item" style={{ width: 50, textAlign: 'center' }}>
函数
</div>
),
},
{
type: 'actions',
icon: (

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

@@ -2,7 +2,7 @@
* @Author: yehuozhili
* @Date: 2021-07-07 14:35:38
* @LastEditors: yehuozhili
* @LastEditTime: 2021-07-27 10:46:07
* @LastEditTime: 2021-08-03 11:01:06
* @FilePath: \dooringx\packages\dooringx-example\src\plugin\registComponents\button.tsx
*/
@@ -25,7 +25,6 @@ function ButtonTemp(pr: ComponentRenderConfigProps) {
useDynamicAddEventCenter(pr, `${pr.data.id}-init`, '初始渲染时机'); //注册名必须带id 约定！
useDynamicAddEventCenter(pr, `${pr.data.id}-click`, '点击执行时机');
useEffect(() => {
// 模拟抛出事件
if (pr.context === 'preview') {
@@ -34,38 +33,42 @@ function ButtonTemp(pr: ComponentRenderConfigProps) {
}, [eventCenter, pr.config, pr.context, pr.data.id]);
const [text, setText] = useState('');
const op1 = props.op1;
useEffect(() => {
const functionCenter = eventCenter.getFunctionCenter();
const unregist = functionCenter.register(
`${pr.data.id}+改变文本函数`,
async (ctx, next, config, args: any, _eventList, iname) => {
const userSelect = iname.data;
const ctxVal = changeUserValue(
userSelect['改变文本数据源'],
args,
'_changeval',
config,
ctx
);
const text = ctxVal[0];
setText(text);
next();
},
[
{
name: '改变文本数据源',
data: ['ctx', 'input', 'dataSource'],
options: {
receive: '_changeval',
multi: false,
},
let unregist = () => {};
if (op1) {
const functionCenter = eventCenter.getFunctionCenter();
unregist = functionCenter.register(
`${pr.data.id}+改变文本函数`,
async (ctx, next, config, args: any, _eventList, iname) => {
const userSelect = iname.data;
const ctxVal = changeUserValue(
userSelect['改变文本数据源'],
args,
'_changeval',
config,
ctx
);
const text = ctxVal[0];
setText(text);
next();
},
]
);
[
{
name: '改变文本数据源',
data: ['ctx', 'input', 'dataSource'],
options: {
receive: '_changeval',
multi: false,
},
},
]
);
}
return () => {
unregist();
};
}, []);
}, [op1]);
return (
<Button
@@ -102,6 +105,13 @@ const MButton = new ComponentItemFactory(
text: 'yehuozhili',
}),
],
fn: [
createPannelOptions<FormMap, 'switch'>('switch', {
receive: 'op1',
label: '改变文本函数',
value: false,
}),
],
animate: [createPannelOptions<FormMap, 'animateControl'>('animateControl', {})],
actions: [createPannelOptions<FormMap, 'actionButton'>('actionButton', {})],
},
@@ -112,6 +122,7 @@ const MButton = new ComponentItemFactory(
backgroundColor: 'rgba(0,132,255,1)',
lineHeight: 1,
borderRadius: 0,
op1: false,
borderData: {
borderWidth: 0,
borderColor: 'rgba(0,0,0,1)',