add example

2021-07-10 19:35:06 +08:00
parent b1133c8773
commit c27b4eb8e0
50 changed files with 5786 additions and 212 deletions
--- a/packages/dooringx-lib/src/components/container.tsx
+++ b/packages/dooringx-lib/src/components/container.tsx
@@ -39,7 +39,6 @@ function Container(props: PropsWithChildren<ContainerProps>) {
 			return props.state.globalState.containerColor;
 		}
 	};
-
 	return (
 		<>
 			{props.context === 'edit' && (
--- a/packages/dooringx-lib/src/components/leftConfig.tsx
+++ b/packages/dooringx-lib/src/components/leftConfig.tsx
@@ -2,8 +2,8 @@
 * @Author: yehuozhili
 * @Date: 2021-02-04 10:32:45
 * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-06 23:55:37
- * @FilePath: \dooringv2\packages\dooring-v2-lib\src\components\leftConfig.tsx
+ * @LastEditTime: 2021-07-10 15:47:34
+ * @FilePath: \DooringV2\packages\dooringx-lib\src\components\leftConfig.tsx
 */
 import React, { ReactNode, useEffect, useMemo, useState } from 'react';
 import { Input, Menu } from 'antd';
@@ -42,7 +42,7 @@ function LeftConfig(props: LeftConfigProps) {
 			cache = config.leftAllRegistMap.filter((k) => k.type === type);
 			cache.forEach((v) => props.config.asyncRegistComponent(v.component));
 			setLeftRender(
-				<div className={styles.leftco}>
+				<div className={`${styles.leftco} yh-leftcomp`}>
 					<div
 						style={{
 							display: 'flex',
@@ -53,7 +53,7 @@ function LeftConfig(props: LeftConfigProps) {
 					>
 						<div
 							style={{
-								width: 100,
+								width: 120,
 								overflow: 'hidden',
 								textOverflow: 'ellipsis',
 								whiteSpace: 'nowrap',
--- a/packages/dooringx-lib/src/components/modalRender.tsx
+++ b/packages/dooringx-lib/src/components/modalRender.tsx
@@ -29,6 +29,8 @@ export function ModalRender(props: ModalRenderProps) {
 	}, [props.data.modalMap, props.name]);
 	const { parentDom, rootDom } = props;

+	const modalConfig = props.data.modalConfig[props.name];
+
 	//这里还要添加个关闭函数，
 	const unmount = useMemo(() => {
 		return () => {
@@ -58,7 +60,9 @@ export function ModalRender(props: ModalRenderProps) {
 				})}
 				<div
 					onClick={() => {
-						unmount();
+						if (!modalConfig) {
+							unmount();
+						}
 					}}
 					style={{
 						backgroundColor: '#716f6f9e',
--- a/packages/dooringx-lib/src/components/preview.tsx
+++ b/packages/dooringx-lib/src/components/preview.tsx
@@ -2,7 +2,7 @@
 * @Author: yehuozhili
 * @Date: 2021-03-14 05:40:37
 * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-08 20:44:45
+ * @LastEditTime: 2021-07-10 16:09:19
 * @FilePath: \DooringV2\packages\dooringx-lib\src\components\preview.tsx
 */
 import Container from './container';
@@ -24,6 +24,12 @@ function Preview(props: { config: UserConfig; loadText?: ReactNode }): ReactElem
 			.getEventCenter()
 			.syncEventMap(props.config.getStore().getData(), props.config.getStoreChanger());
 		setTimeout(() => {
+			// 设置全局
+			const bodyColor = props.config.getStore().getData().globalState?.bodyColor;
+			if (bodyColor) {
+				document.body.style.backgroundColor = bodyColor;
+			}
+
 			setLoading(false);
 		});
 	}, [props.config]);
--- a/packages/dooringx-lib/src/components/rightConfig.tsx
+++ b/packages/dooringx-lib/src/components/rightConfig.tsx
@@ -2,15 +2,15 @@
 * @Author: yehuozhili
 * @Date: 2021-03-14 05:42:13
 * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-05 23:35:05
- * @FilePath: \DooringV2\packages\dooring-v2-lib\src\components\rightConfig.tsx
+ * @LastEditTime: 2021-07-10 16:06:33
+ * @FilePath: \DooringV2\packages\dooringx-lib\src\components\rightConfig.tsx
 */
 import { CreateOptionsRes } from '../core/components/formTypes';
 import { IBlockType, IStoreData } from '../core/store/storetype';
 import { store } from '../runtime/store';
 import { PropsWithChildren, useEffect, useMemo, useState } from 'react';
 import React from 'react';
-import { Tabs, Input, Row, Col } from 'antd';
+import { Tabs, Input, Row, Col, Checkbox } from 'antd';
 import UserConfig from '../config';
 import { RGBColor, SketchPicker } from 'react-color';
 import { rgba2Obj } from '../core/utils';
@@ -89,8 +89,15 @@ function RightConfig(props: PropsWithChildren<RightConfigProps>) {
 			? rgba2Obj(props.config.getStoreChanger().getOrigin()?.now.globalState.containerColor)
 			: rgba2Obj(props.config.getStore().getData().globalState.containerColor);
 	}, [props.config]);
+	const initColor2 = useMemo(() => {
+		return props.config.getStoreChanger().isEdit()
+			? rgba2Obj(props.config.getStoreChanger().getOrigin()?.now.globalState.bodyColor)
+			: rgba2Obj(props.config.getStore().getData().globalState.bodyColor);
+	}, [props.config]);
 	const [color, setColor] = useState<RGBColor>(initColor);
+	const [color2, setColor2] = useState<RGBColor>(initColor2);
 	const [colorPickerVisible, setColorPickerVisible] = useState(false);
+	const [colorPickerVisible2, setColorPickerVisible2] = useState(false);
 	const initTitle = useMemo(() => {
 		const title = props.config.getStoreChanger().isEdit()
 			? props.config.getStoreChanger().getOrigin()?.now.globalState.title
@@ -100,6 +107,9 @@ function RightConfig(props: PropsWithChildren<RightConfigProps>) {
 	const [title, setTitle] = useState(initTitle);

 	const customGlobal = props.config.getConfig().rightGlobalCustom;
+	const isEdit = props.config.getStoreChanger().isEdit();
+	const modalName = props.config.getStoreChanger().getState().modalEditName;
+	const originData = props.config.getStoreChanger().getOrigin()?.now;
 	return (
 		<div
 			className="ant-menu"
@@ -137,7 +147,7 @@ function RightConfig(props: PropsWithChildren<RightConfigProps>) {
 					})}
 				</Tabs>
 			)}
-			{!current && !customGlobal && (
+			{!current && !isEdit && !customGlobal && (
 				<div style={{ padding: '20px' }}>
 					<Row style={{ padding: '10 0 20px 0', fontWeight: 'bold' }}>全局设置</Row>
 					<Row style={{ padding: '10px 0' }}>
@@ -230,9 +240,97 @@ function RightConfig(props: PropsWithChildren<RightConfigProps>) {
 							}
 						</Col>
 					</Row>
+					<Row style={{ padding: '10px 0' }}>
+						<Col span={6}>body底色</Col>
+						<Col span={18}>
+							{
+								<div style={{ position: 'relative' }}>
+									<div
+										onClick={() => {
+											setColorPickerVisible2((pre) => !pre);
+										}}
+										style={{
+											background: '#fff',
+											borderRadius: '1px',
+											boxShadow: '0 0 0 1px rgba(0,0,0,.1)',
+											cursor: 'pointer',
+											display: 'inline-block',
+										}}
+									>
+										<div
+											style={{
+												width: '20px',
+												height: '20px',
+												borderRadius: '2px',
+												background: `rgba(${color2.r}, ${color2.g}, ${color2.b}, ${color2.a})`,
+											}}
+										/>
+									</div>
+									{colorPickerVisible2 && (
+										<>
+											<div style={{ position: 'absolute', zIndex: 2000 }}>
+												<SketchPicker
+													color={color2}
+													onChange={(c) => {
+														const newcolor = c.rgb;
+														setColor2(newcolor);
+														const isEdit = props.config.getStoreChanger().isEdit();
+														if (isEdit) {
+															const originData: IStoreData = deepcopy(
+																props.config.getStoreChanger().getOrigin()!.now
+															);
+															originData.globalState.bodyColor = `rgba(${newcolor.r}, ${newcolor.g}, ${newcolor.b}, ${newcolor.a})`;
+															props.config.getStoreChanger().updateOrigin(originData);
+														} else {
+															const originData = deepcopy(props.config.getStore().getData());
+															originData.globalState.bodyColor = `rgba(${newcolor.r}, ${newcolor.g}, ${newcolor.b}, ${newcolor.a})`;
+															props.config.getStore().setData(originData);
+														}
+													}}
+												></SketchPicker>
+											</div>
+											<div
+												style={{
+													position: 'fixed',
+													top: '0px',
+													right: '0px',
+													bottom: '0px',
+													left: '0px',
+													zIndex: 1000,
+												}}
+												onClick={() => setColorPickerVisible2(false)}
+											/>
+										</>
+									)}
+								</div>
+							}
+						</Col>
+					</Row>
+				</div>
+			)}
+			{!current && !isEdit && customGlobal && customGlobal}
+			{!current && isEdit && (
+				<div style={{ padding: '20px' }} className="yh-tcsz">
+					<Row style={{ padding: '10 0 20px 0', fontWeight: 'bold' }}>弹窗设置</Row>
+					<Row style={{ padding: '10px 0' }}>
+						<Col span={8}>取消点击删除弹窗</Col>
+						<Col span={16} style={{ textAlign: 'right' }}>
+							<Checkbox
+								checked={originData ? originData.modalConfig[modalName] : false}
+								onChange={(e) => {
+									const val = e.target.checked;
+									const cloneData = deepcopy(originData);
+									if (cloneData) {
+										cloneData.modalConfig[modalName] = val;
+										props.config.getStoreChanger().updateOrigin(cloneData);
+										props.config.getStore().forceUpdate();
+									}
+								}}
+							></Checkbox>
+						</Col>
+					</Row>
 				</div>
 			)}
-			{!current && customGlobal && customGlobal}
 		</div>
 	);
 }
--- a/packages/dooringx-lib/src/config/index.tsx
+++ b/packages/dooringx-lib/src/config/index.tsx
@@ -2,8 +2,8 @@
 * @Author: yehuozhili
 * @Date: 2021-02-25 21:16:58
 * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-08 20:42:22
- * @FilePath: \DooringV2\packages\dooringx-lib\src\config\index.tsx
+ * @LastEditTime: 2021-07-10 18:29:07
+ * @FilePath: \dooringx\packages\dooringx-lib\src\config\index.tsx
 */
 import { IBlockType, IStoreData } from '../core/store/storetype';
 import { store } from '../runtime/store';
@@ -23,7 +23,6 @@ import { createModal, unmountMap } from '../components/modalRender';
 import { scaleState } from '../core/scale/state';
 import { CommanderItemFactory } from '../core/command/abstract';
 import MmodalMask from '../core/components/defaultFormComponents/modalMask';
-import MmodalContainer from '../core/components/defaultFormComponents/modalContainer';

 // 组件部分

@@ -156,7 +155,9 @@ export const defaultStore: IStoreData = {
 	globalState: {
 		containerColor: 'rgba(255,255,255,1)',
 		title: 'dooring',
+		bodyColor: 'rgba(255,255,255,1)',
 	},
+	modalConfig: {},
 };

 export const defaultConfig: InitConfig = {
@@ -166,8 +167,7 @@ export const defaultConfig: InitConfig = {
 	rightGlobalCustom: null,
 	rightRenderListCategory: [],
 	initComponentCache: {
-		modalMask: { component: MmodalMask }, // 这2个组件不配置显示
-		modalContainer: { component: MmodalContainer },
+		modalMask: { component: MmodalMask }, // 这个组件不配置显示
 	},
 	initFunctionMap: {
 		打开弹窗函数: {
@@ -192,7 +192,9 @@ export const defaultConfig: InitConfig = {
 			fn: (_ctx, next, _config, args) => {
 				const modalName = args['_modal'];
 				const fn = unmountMap.get(modalName);
-				fn ? fn() : '';
+				if (fn) {
+					fn();
+				}
 				next();
 			},
 			config: [
--- a/packages/dooringx-lib/src/core/components/defaultFormComponents/modalContainer.tsx
+++ b/packages/dooringx-lib/src/core/components/defaultFormComponents/modalContainer.tsx
@@ -1,34 +0,0 @@
-/*
- * @Author: yehuozhili
- * @Date: 2021-04-05 19:21:36
- * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-05 23:56:07
- * @FilePath: \DooringV2\packages\dooring-v2-lib\src\core\components\defaultFormComponents\modalContainer.tsx
- */
-import React from 'react';
-import { ComponentItemFactory } from '../abstract';
-
-const MmodalContainer = new ComponentItemFactory(
-	'modalContainer',
-	'模态框容器',
-	{},
-	{
-		props: {},
-		width: 300,
-		height: 300,
-	},
-	(data) => {
-		return (
-			<div
-				style={{
-					zIndex: data.zIndex,
-					width: data.width,
-					height: data.height,
-					backgroundColor: 'white',
-				}}
-			></div>
-		);
-	}
-);
-
-export default MmodalContainer;
--- a/packages/dooringx-lib/src/core/components/index.ts
+++ b/packages/dooringx-lib/src/core/components/index.ts
@@ -2,8 +2,8 @@
 * @Author: yehuozhili
 * @Date: 2021-03-14 04:29:09
 * @LastEditors: yehuozhili
- * @LastEditTime: 2021-03-14 04:43:53
- * @FilePath: \dooring-v2\src\core\components\index.ts
+ * @LastEditTime: 2021-07-10 18:34:34
+ * @FilePath: \dooringx\packages\dooringx-lib\src\core\components\index.ts
 */
 import { ComponentItem } from './componentItem';

--- a/packages/dooringx-lib/src/core/crossDrag/index.ts
+++ b/packages/dooringx-lib/src/core/crossDrag/index.ts
@@ -2,8 +2,8 @@
 * @Author: yehuozhili
 * @Date: 2021-03-14 04:29:09
 * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-04 15:21:54
- * @FilePath: \DooringV2\packages\dooring-v2-lib\src\core\crossDrag\index.ts
+ * @LastEditTime: 2021-07-10 18:34:40
+ * @FilePath: \dooringx\packages\dooringx-lib\src\core\crossDrag\index.ts
 */
 import { store } from '../../runtime/store';
 import { componentRegister } from '../../runtime';
--- a/packages/dooringx-lib/src/core/eventCenter/index.ts
+++ b/packages/dooringx-lib/src/core/eventCenter/index.ts
@@ -2,8 +2,8 @@
 * @Author: yehuozhili
 * @Date: 2021-04-06 19:33:17
 * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-04 14:41:48
- * @FilePath: \DooringV2\packages\dooring-v2-lib\src\core\eventCenter\index.ts
+ * @LastEditTime: 2021-07-09 16:33:22
+ * @FilePath: \DooringV2\packages\dooringx-lib\src\core\eventCenter\index.ts
 */
 import UserConfig from '../../config';
 import { FunctionCenter, FunctionCenterType } from '../functionCenter';
--- a/packages/dooringx-lib/src/core/functionCenter/index.ts
+++ b/packages/dooringx-lib/src/core/functionCenter/index.ts
@@ -2,8 +2,8 @@
 * @Author: yehuozhili
 * @Date: 2021-04-08 19:59:01
 * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-07 01:46:17
- * @FilePath: \dooringv2\packages\dooringx-lib\src\core\functionCenter\index.ts
+ * @LastEditTime: 2021-07-09 16:23:02
+ * @FilePath: \DooringV2\packages\dooringx-lib\src\core\functionCenter\index.ts
 */

 import UserConfig from '../../config';
@@ -83,6 +83,17 @@ export class FunctionCenter {
 		return this.configMap;
 	}

+	/**
+	 *
+	 * 删除的组件需要删除动态注册的函数
+	 * @param {string} name
+	 * @memberof FunctionCenter
+	 */
+	deleteFunc(name: string) {
+		delete this.funcitonMap[name];
+		delete this.configMap[name];
+	}
+
 	/**
 	 *
 	 * 注册函数，同名覆盖，返回删除函数
--- a/packages/dooringx-lib/src/core/store/index.ts
+++ b/packages/dooringx-lib/src/core/store/index.ts
@@ -1,9 +1,9 @@
 /*
 * @Author: yehuozhili
 * @Date: 2021-03-14 04:29:09
- * @LastEditors: Please set LastEditors
- * @LastEditTime: 2021-06-19 17:07:10
- * @FilePath: \dooringv2\packages\dooring-v2-lib\src\core\store\index.ts
+ * @LastEditors: yehuozhili
+ * @LastEditTime: 2021-07-10 18:17:56
+ * @FilePath: \dooringx\packages\dooringx-lib\src\core\store\index.ts
 */
 import { IStoreData } from './storetype';
 import { storeChangerState } from '../storeChanger/state';
@@ -17,9 +17,11 @@ export const initialData: IStoreData = {
 	modalMap: {},
 	dataSource: {},
 	globalState: {},
+	modalConfig: {},
 };

 class Store {
+	static instance: Store;
 	constructor(
 		public storeDataList: IStoreData[] = [initialData],
 		public listeners: Array<Function> = [],
--- a/packages/dooringx-lib/src/core/store/storetype.ts
+++ b/packages/dooringx-lib/src/core/store/storetype.ts
@@ -2,7 +2,7 @@
 * @Author: yehuozhili
 * @Date: 2021-03-14 04:29:09
 * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-07 17:00:07
+ * @LastEditTime: 2021-07-09 17:22:14
 * @FilePath: \DooringV2\packages\dooringx-lib\src\core\store\storetype.ts
 */

@@ -17,6 +17,7 @@ export interface IStoreData {
 	modalMap: Record<string, IStoreData>;
 	dataSource: Record<string, any>;
 	globalState: Record<string, any>;
+	modalConfig: Record<string, any>;
 }

 export interface IBlockType {
@@ -38,7 +39,7 @@ export interface IBlockType {
 	functionList: Array<string>; //抛出的函数名
 	animate: {
 		animate?: string; //动画名
-		animationIterationCount?: any;
+		animationIterationCount?: number | string;
 		speed?: //动画速度
 		'animate__slow' | 'animate__slower' | 'animate__fast' | 'animate__faster' | '';
 		delay?: //首次延迟
--- a/packages/dooringx-lib/src/core/storeChanger/index.ts
+++ b/packages/dooringx-lib/src/core/storeChanger/index.ts
@@ -2,7 +2,7 @@
 * @Author: yehuozhili
 * @Date: 2021-04-05 14:55:31
 * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-07 16:59:54
+ * @LastEditTime: 2021-07-09 18:31:24
 * @FilePath: \DooringV2\packages\dooringx-lib\src\core\storeChanger\index.ts
 */

@@ -43,26 +43,6 @@ function createDefaultModalBlock(): IStoreData['block'] {
 			animate: {},
 			fixed: false,
 		},
-		{
-			id: createUid('modal-container'),
-			name: 'modalContainer',
-			top: 100,
-			left: 35,
-			zIndex: 0,
-			props: {},
-			resize: true,
-			focus: true,
-			position: 'absolute',
-			display: 'block',
-			width: 300,
-			height: 300,
-			syncList: [],
-			canDrag: true,
-			eventMap: {},
-			functionList: [],
-			animate: {},
-			fixed: false,
-		},
 	];
 }

@@ -80,6 +60,7 @@ const defaultModalStore: () => IStoreData = () => {
 		modalMap: {},
 		dataSource: {},
 		globalState: {},
+		modalConfig: {},
 	};
 };

--- a/packages/dooringx-lib/src/core/utils/icon.ts
+++ b/packages/dooringx-lib/src/core/utils/icon.ts
@@ -1,7 +1,14 @@
+/*
+ * @Author: yehuozhili
+ * @Date: 2021-07-10 16:52:41
+ * @LastEditors: yehuozhili
+ * @LastEditTime: 2021-07-10 18:28:18
+ * @FilePath: \dooringx\packages\dooringx-lib\src\core\utils\icon.ts
+ */
 import { createFromIconfontCN } from '@ant-design/icons';

 export const IconFont = createFromIconfontCN({
-	scriptUrl: '//at.alicdn.com/t/font_2607370_myr2zkz3ku.js', // 在 iconfont.cn 上生成
+	scriptUrl: '//at.alicdn.com/t/font_2607370_zx7pglxj1m.js', // 在 iconfont.cn 上生成
 	extraCommonProps: {
 		fill: 'currentColor',
 		stroke: 'currentColor',
--- a/packages/dooringx-lib/src/core/utils/index.ts
+++ b/packages/dooringx-lib/src/core/utils/index.ts
@@ -156,7 +156,7 @@ export const changeLayer = (store: Store, id: string, action: 'up' | 'down' | 'd
 * @param {*} from
 * @param {*} to
 */
-export const arrayMove = (array: any, from: number, to: number) => {
+export const arrayMove = (array: Array<any>, from: number, to: number) => {
 	array = [...array];
 	arrayMoveMutate(array, from, to);
 	return array;
@@ -179,7 +179,7 @@ const indexSub = (arrLength: number, toIndex: number) => {
 * @param {Number} to Index of where to move the item. If negative, it will begin that many elements from the end / 0 / -1 / 2
 * returns A new array with the item moved to the new position [1,2,3] -> [1,3,2]
 */
-const arrayMoveMutate = (array: [], from: number, to: number) => {
+const arrayMoveMutate = (array: Array<any>, from: number, to: number) => {
 	const arrLength = array.length;
 	const startIndex = indexSub(arrLength, from);
 	if (startIndex >= 0 && startIndex < arrLength) {
--- a/packages/dooringx-lib/src/hooks/index.ts
+++ b/packages/dooringx-lib/src/hooks/index.ts
@@ -2,10 +2,9 @@
 * @Author: yehuozhili
 * @Date: 2021-03-14 05:35:15
 * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-04 17:52:02
- * @FilePath: \DooringV2\packages\dooring-v2-lib\src\hooks\index.ts
+ * @LastEditTime: 2021-07-10 17:46:26
+ * @FilePath: \dooringx\packages\dooringx-lib\src\hooks\index.ts
 */
-import { store } from '../runtime/store';
 import { useEffect, useMemo, useState } from 'react';
 import UserConfig from '../config';
 import { ComponentRenderConfigProps } from '../core/components/componentItem';
@@ -16,11 +15,13 @@ export function useStoreState(
 	extraFn: Function = () => {},
 	everyFn: Function = () => {}
 ) {
+	const store = config.getStore();
 	const [state, setState] = useState(store.getData());
 	const forceUpdate = useState(0)[1];
 	useEffect(() => {
 		const unRegister = store.subscribe(() => {
-			setState(store.getData());
+			const data = store.getData();
+			setState(data);
 			config.getEventCenter().syncEventMap(store.getData(), config.getStoreChanger());
 			extraFn();
 		});
@@ -32,7 +33,7 @@ export function useStoreState(
 			unRegister();
 			unRegistCommandFn(commandModules, commander);
 		};
-	}, [config, extraFn]);
+	}, [config, extraFn, forceUpdate, store]);
 	useEffect(() => {
 		everyFn();
 	}, [everyFn]);
--- a/packages/dooringx-lib/src/runtime/index.ts
+++ b/packages/dooringx-lib/src/runtime/index.ts
@@ -2,15 +2,14 @@
 * @Author: yehuozhili
 * @Date: 2021-03-14 04:33:52
 * @LastEditors: yehuozhili
- * @LastEditTime: 2021-05-30 15:51:50
- * @FilePath: \dooringv2\packages\dooring-v2-lib\src\runtime\index.ts
+ * @LastEditTime: 2021-07-10 18:18:15
+ * @FilePath: \dooringx\packages\dooringx-lib\src\runtime\index.ts
 */
 import CommanderWrapper from '../core/command';
 import ComponentRegister from '../core/components';
 import { FormComponentRegister } from '../core/components/formComponentRegister';
 import { StoreChanger } from '../core/storeChanger';
 import { store } from './store';
-
 export const commander = new CommanderWrapper(store);
 export const componentRegister = new ComponentRegister();
 export const formRegister = new FormComponentRegister();