update example

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

@@ -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);

packages/dooringx-example/src/plugin/formTypes.ts

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

packages/dooringx-example/src/plugin/index.tsx

@@ -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: (

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

@@ -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,9 +33,12 @@ function ButtonTemp(pr: ComponentRenderConfigProps) {
 	}, [eventCenter, pr.config, pr.context, pr.data.id]);
 
 	const [text, setText] = useState('');
+	const op1 = props.op1;
 	useEffect(() => {
+		let unregist = () => {};
+		if (op1) {
 			const functionCenter = eventCenter.getFunctionCenter();
-		const unregist = functionCenter.register(
+			unregist = functionCenter.register(
 				`${pr.data.id}+改变文本函数`,
 				async (ctx, next, config, args: any, _eventList, iname) => {
 					const userSelect = iname.data;
@@ -62,10 +64,11 @@ function ButtonTemp(pr: ComponentRenderConfigProps) {
 					},
 				]
 			);
+		}
 		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)',