add preview props

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;
 			}
-
-			setLoading(false);
+			if (props.completeFn) {
+				props.completeFn();
+			}
+			if (props.loadingState === undefined) {
+				setLoading(false);
+			}
 		});
-	}, [props.config]);
+	}, [props, props.config]);
 
 	if (isEdit) {
 		// 正常情况不会走这
@@ -43,18 +72,28 @@ function Preview(props: { config: UserConfig; loadText?: ReactNode }): ReactElem
 			</>
 		);
 	} else {
-		if (loading) {
-			return <div>{props.loadText ? props.loadText : 'loading'}</div>;
+		const loadingNode = <div>{props.loadText ? props.loadText : 'loading'}</div>;
+		const container = (
+			<>
+				<Container
+					config={props.config}
+					context="preview"
+					state={props.config.getStore().getData()}
+				></Container>
+			</>
+		);
+		if (props.loadingState === undefined) {
+			if (loading) {
+				return loadingNode;
+			} else {
+				return container;
+			}
 		} else {
-			return (
-				<>
-					<Container
-						config={props.config}
-						context="preview"
-						state={props.config.getStore().getData()}
-					></Container>
-				</>
-			);
+			if (props.loadingState) {
+				return loadingNode;
+			} else {
+				return container;
+			}
 		}
 	}
 }