fix: add createcomponents and add doc

packages/dooringx-dumi-doc/docs/API/index.en.md

@@ -1,9 +1,6 @@
 ---
 title: API
 toc: menu
-nav:
-  title: API
-  order: 5
 ---
 
 In process

packages/dooringx-dumi-doc/docs/API/index.md

@@ -1,9 +1,22 @@
 ---
 title: API
 toc: menu
-nav:
-  title: API
-  order: 5
 ---
 
-In process
+## useStoreState
+
+
+
+#### 传参：
+
+| 属性名                         | 类型                   |  说明 |
+| ----------------------------  | ----------------       | ---- |
+| config                        | UserConfig         |                |
+| extraFn                       | Function = () => {}   |             |
+| everyFn                       | Function = () => {}     |       |
+
+
+#### 返回值：
+
+`[IStoreData]`
+

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

@@ -29,6 +29,14 @@ const LeftRegistMap: LeftRegistComponentMapItem[] = [
 		img: 'https://img.guguzhu.com/d/file/android/ico/2021/09/08/rytzi2w34tm.png',
 		displayName: '输入框',
 	},
+	{
+		type: 'basic',
+		component: 'testco',
+		img: 'icon-anniu',
+		imgCustom: <PlayCircleOutlined />,
+		displayName: '测试按钮',
+		urlFn: () => import('./registComponents/testco'),
+	},
 ];
 
 export const defaultConfig: Partial<InitConfig> = {

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

@@ -0,0 +1,150 @@
+/*
+ * @Author: yehuozhili
+ * @Date: 2021-07-07 14:35:38
+ * @LastEditors: yehuozhili
+ * @LastEditTime: 2022-04-27 22:24:23
+ * @FilePath: \dooringx\packages\dooringx-example\src\plugin\registComponents\button.tsx
+ */
+
+import { Button } from 'antd';
+import React, { useEffect, useMemo, useState } from 'react';
+import {
+	changeUserValue,
+	createComponent,
+	createPannelOptions,
+	useDynamicAddEventCenter,
+	useRegistFunc,
+} from 'dooringx-lib';
+import { FormMap } from '../formTypes';
+import { ComponentRenderConfigProps } from 'dooringx-lib/dist/core/components/componentItem';
+function ButtonTemp(pr: ComponentRenderConfigProps) {
+	const props = pr.data.props;
+	const eventCenter = useMemo(() => {
+		return pr.config.getEventCenter();
+	}, [pr.config]);
+
+	useDynamicAddEventCenter(pr, `${pr.data.id}-init`, '初始渲染时机'); //注册名必须带id 约定！
+	useDynamicAddEventCenter(pr, `${pr.data.id}-click`, '点击执行时机');
+	useEffect(() => {
+		// 模拟抛出事件
+		if (pr.context === 'preview') {
+			eventCenter.runEventQueue(`${pr.data.id}-init`, pr.config);
+		}
+	}, [eventCenter, pr.config, pr.context, pr.data.id]);
+
+	const [text, setText] = useState('');
+	const op1 = props.op1;
+
+	const fn = useMemo(() => {
+		const functionCenter = eventCenter.getFunctionCenter();
+		return functionCenter.register({
+			id: `${pr.data.id}+changeText`,
+			fn: 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();
+			},
+			config: [
+				{
+					name: '改变文本数据源',
+					data: ['ctx', 'input', 'dataSource'],
+					options: {
+						receive: '_changeval',
+						multi: false,
+					},
+				},
+			],
+			name: `${pr.data.id}+改变文本函数`,
+			componentId: pr.data.id,
+		});
+	}, []);
+
+	useRegistFunc(op1, pr.context, fn);
+
+	return (
+		<Button
+			style={{
+				width: pr.data.width ? pr.data.width : props.sizeData[0],
+				height: pr.data.height ? pr.data.height : props.sizeData[1],
+				borderRadius: props.borderRadius + 'px',
+				border: `${props.borderData.borderWidth}px ${props.borderData.borderStyle} ${props.borderData.borderColor}`,
+				backgroundColor: props.backgroundColor,
+				color: props.fontData.color,
+				fontSize: props.fontData.fontSize,
+				fontWeight: props.fontData.fontWeight,
+				fontStyle: props.fontData.fontStyle,
+				textDecoration: props.fontData.textDecoration,
+				lineHeight: props.lineHeight,
+			}}
+			onClick={() => {
+				eventCenter.runEventQueue(`${pr.data.id}-click`, pr.config);
+			}}
+		>
+			{text ? text : props.text}
+		</Button>
+	);
+}
+
+const MButton = createComponent({
+	name: 'testco',
+	display: '测试按钮',
+	props: {
+		style: [
+			createPannelOptions<FormMap, 'input'>('input', {
+				receive: 'text',
+				label: '文字',
+			}),
+		],
+		fn: [
+			createPannelOptions<FormMap, 'switch'>('switch', {
+				receive: 'op1',
+				label: '改变文本函数',
+			}),
+		],
+		animate: [createPannelOptions<FormMap, 'animateControl'>('animateControl', {})],
+		actions: [createPannelOptions<FormMap, 'actionButton'>('actionButton', {})],
+	},
+	initData: {
+		props: {
+			text: 'yehuozhili',
+			sizeData: [100, 30],
+			backgroundColor: 'rgba(0,132,255,1)',
+			lineHeight: 1,
+			borderRadius: 0,
+			op1: false,
+			borderData: {
+				borderWidth: 0,
+				borderColor: 'rgba(0,0,0,1)',
+				borderStyle: 'solid',
+			},
+			fontData: {
+				fontSize: 14,
+				textDecoration: 'none',
+				fontStyle: 'normal',
+				color: 'rgba(255,255,255,1)',
+				fontWeight: 'normal',
+			},
+		},
+		width: 100, // 绝对定位元素初始必须有宽高，否则适配会有问题。
+		height: 30, // 绝对定位元素初始必须有宽高，否则适配会有问题。
+		rotate: {
+			canRotate: true,
+			value: 0,
+		},
+		canDrag: true, // false就不能拖
+	},
+	render: (data, context, store, config) => {
+		return <ButtonTemp data={data} store={store} context={context} config={config}></ButtonTemp>;
+	},
+	resize: true,
+});
+
+export default MButton;

packages/dooringx-lib/src/core/components/abstract.ts

@@ -21,3 +21,30 @@ export class ComponentItemFactory implements ComponentItem {
 		public remoteConfig: ComponentItem['remoteConfig'] = {}
 	) {}
 }
+export interface IPluginConfig {
+	name: ComponentItemFactory['name'];
+	display: ComponentItemFactory['display'];
+	props: ComponentItemFactory['props'];
+	initData: ComponentItemFactory['initData'];
+	render: ComponentItem['render'];
+	resize?: ComponentItem['resize'];
+	needPosition?: ComponentItem['needPosition'];
+	init?: ComponentItem['init'];
+	destroy?: ComponentItem['destroy'];
+	remoteConfig?: ComponentItem['remoteConfig'];
+}
+
+export function createComponent(config: IPluginConfig) {
+	return new ComponentItemFactory(
+		config.name,
+		config.display,
+		config.props,
+		config.initData,
+		config.render,
+		config.resize,
+		config.needPosition,
+		config.init,
+		config.destroy,
+		config.remoteConfig
+	);
+}

packages/dooringx-lib/src/core/utils/index.ts

@@ -7,20 +7,6 @@ import { specialCoList } from './special';
 import deepCopys from 'deepcopy';
 import { FunctionDataMap } from '../functionCenter/config';
 import UserConfig from '../../config';
-import { IPluginConfig } from './types';
-import { ComponentItemFactory } from '../components/abstract';
-
-// 创建插件
-export const createPlugin = (config: IPluginConfig) => {
-	return new ComponentItemFactory(
-		config.key,
-		config.name,
-		{},
-		config.attr,
-		config.render,
-		config.attr.resize
-	);
-};
 
 export function deepCopy<T = any>(obj: T): T {
 	return deepCopys(obj);

packages/dooringx-lib/src/core/utils/types.ts

@@ -1,7 +0,0 @@
-export interface IPluginConfig {
-	key: string;
-	name: string;
-	attr: any;
-	render: (props: any) => JSX.Element;
-	resize?: boolean;
-}

packages/dooringx-lib/src/index.tsx

@@ -40,7 +40,7 @@ export { scaleFn } from './core/scale/index';
 
 // 以下导出用于制作插件
 // 用于制作组件的函数
-export { ComponentItemFactory } from './core/components/abstract';
+export { ComponentItemFactory, createComponent } from './core/components/abstract';
 // 用于菜单拖拽的函数
 export { dragEventResolve } from './core/crossDrag/index';
 // 用于制作组件配置项的函数