add preview props

packages/dooringx-example/src/pages/iframeTest.tsx

@@ -2,7 +2,7 @@
  * @Author: yehuozhili
  * @Date: 2021-07-17 10:12:11
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-08-03 14:06:12
+ * @LastEditTime: 2021-08-19 16:52:27
  * @FilePath: \dooringx\packages\dooringx-example\src\pages\iframeTest.tsx
  */
 

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

@@ -2,7 +2,7 @@
  * @Author: yehuozhili
  * @Date: 2021-05-15 12:49:28
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-08-12 15:57:35
+ * @LastEditTime: 2021-08-19 16:52:35
  * @FilePath: \dooringx\packages\dooringx-example\src\pages\index.tsx
  */
 import {
@@ -37,6 +37,7 @@ export default function IndexPage() {
 	const everyFn = () => {};
 
 	const subscribeFn = useCallback(() => {
+		//需要去预览前判断下弹窗。
 		localStorage.setItem(PREVIEWSTATE, JSON.stringify(config.getStore().getData()));
 	}, [config]);
 

packages/dooringx-lib/src/components/preview.tsx

@@ -2,14 +2,39 @@
  * @Author: yehuozhili
  * @Date: 2021-03-14 05:40:37
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-10 16:09:19
- * @FilePath: \DooringV2\packages\dooringx-lib\src\components\preview.tsx
+ * @LastEditTime: 2021-08-19 16:46:56
+ * @FilePath: \dooringx\packages\dooringx-lib\src\components\preview.tsx
  */
 import Container from './container';
 import React, { ReactElement, ReactNode, useEffect, useState } from 'react';
 import UserConfig from '../config';
 
-function Preview(props: { config: UserConfig; loadText?: ReactNode }): ReactElement {
+export interface PreviewProps {
+	config: UserConfig;
+	/**
+	 *
+	 * loading node
+	 * @type {ReactNode}
+	 * @memberof PreviewProps
+	 */
+	loadText?: ReactNode;
+	/**
+	 *
+	 * 手动维护状态
+	 * @type {boolean}
+	 * @memberof PreviewProps
+	 */
+	loadingState?: boolean;
+	/**
+	 *
+	 * 页面链接完后调用
+	 * @type {Function}
+	 * @memberof PreviewProps
+	 */
+	completeFn?: Function;
+}
+
+function Preview(props: PreviewProps): ReactElement {
 	const isEdit = props.config.getStoreChanger().isEdit();
 	/// 这里需要在渲染组件之前必须把所有config加载完成，否则会导致先运行的函数无法运行
 	const [loading, setLoading] = useState(true);
@@ -29,10 +54,14 @@ function Preview(props: { config: UserConfig; loadText?: ReactNode }): ReactElem
 			if (bodyColor) {
 				document.body.style.backgroundColor = bodyColor;
 			}
-
+			if (props.completeFn) {
+				props.completeFn();
+			}
+			if (props.loadingState === undefined) {
 				setLoading(false);
+			}
 		});
-	}, [props.config]);
+	}, [props, props.config]);
 
 	if (isEdit) {
 		// 正常情况不会走这
@@ -43,10 +72,8 @@ function Preview(props: { config: UserConfig; loadText?: ReactNode }): ReactElem
 			</>
 		);
 	} else {
-		if (loading) {
-			return <div>{props.loadText ? props.loadText : 'loading'}</div>;
-		} else {
-			return (
+		const loadingNode = <div>{props.loadText ? props.loadText : 'loading'}</div>;
+		const container = (
 			<>
 				<Container
 					config={props.config}
@@ -55,6 +82,18 @@ function Preview(props: { config: UserConfig; loadText?: ReactNode }): ReactElem
 				></Container>
 			</>
 		);
+		if (props.loadingState === undefined) {
+			if (loading) {
+				return loadingNode;
+			} else {
+				return container;
+			}
+		} else {
+			if (props.loadingState) {
+				return loadingNode;
+			} else {
+				return container;
+			}
 		}
 	}
 }

packages/dooringx-lib/src/config/index.tsx

@@ -2,7 +2,7 @@
  * @Author: yehuozhili
  * @Date: 2021-02-25 21:16:58
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-08-16 10:17:55
+ * @LastEditTime: 2021-08-19 16:17:39
  * @FilePath: \dooringx\packages\dooringx-lib\src\config\index.tsx
  */
 import React from 'react';
@@ -576,6 +576,25 @@ export class UserConfig {
 			this.componentRegister.emitEvent(name);
 		}
 	}
+
+	scriptRegistComponentSingle(item: ComponentItemFactory, leftProps: LeftRegistComponentMapItem) {
+		this.registComponent(item);
+		this.addCoRegistMap(leftProps);
+	}
+
+	scriptRegistComponentMulti(
+		items: ComponentItemFactory[],
+		leftProps: LeftRegistComponentMapItem[]
+	) {
+		items.forEach((item) => {
+			this.registComponent(item);
+		});
+		const obj = {} as InitConfig;
+		obj.leftAllRegistMap = leftProps;
+		this.initConfig = userConfigMerge(this.initConfig, obj);
+		this.init();
+		this.store.forceUpdate();
+	}
 }
 
 export default UserConfig;

packages/dooringx-lib/src/index.less

@@ -10,12 +10,11 @@
 		.coitem {
 			margin: 5px;
 
-
 			.redbox {
 				height: 68px;
 				width: 68px;
 				// background: var(--redbox-color);
-        background-color: #F7F8FA;
+				background-color: #f7f8fa;
 				// line-height: 20px;
 				display: flex;
 				align-items: center;
@@ -31,7 +30,6 @@
 					cursor: pointer;
 				}
 			}
-
 		}
 	}
 }