update 0.9.2

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

@@ -2,7 +2,7 @@
  * @Author: yehuozhili
  * @Date: 2021-02-04 10:32:45
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-08-16 20:32:23
+ * @LastEditTime: 2021-09-28 21:28:41
  * @FilePath: \dooringx\packages\dooringx-lib\src\components\leftConfig.tsx
  */
 import React, { ReactNode, useEffect, useMemo, useState } from 'react';
@@ -31,9 +31,18 @@ interface LeftConfigProps {
 function LeftConfig(props: LeftConfigProps) {
 	const [menuSelect, setMenuSelect] = useState('0');
 	const [leftRender, setLeftRender] = useState<ReactNode | null>(null);
+
+	const [force, setForce] = useState(0);
+	useMemo(() => {
+		props.config.leftForceUpdate = () => {
+			setForce((v) => v + 1);
+		};
+	}, [props.config]);
+
 	const leftMapRenderListCategory = useMemo(() => {
 		return props.config.getConfig().leftRenderListCategory;
-	}, [props.config]);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [props.config, force]);
 
 	const [search, setSearch] = useState('');
 
@@ -103,7 +112,15 @@ function LeftConfig(props: LeftConfigProps) {
 									{...dragEventResolve(v)}
 								>
 									<div className={`${styles.redbox} yh-left-item-img-wrap`}>
-										{v.imgCustom ? v.imgCustom : <img src={v.img} alt="component"></img>}
+										{v.imgCustom ? (
+											v.imgCustom
+										) : (
+											<img
+												src={v.img}
+												style={{ width: '100%', height: '100%' }}
+												alt="component"
+											></img>
+										)}
 									</div>
 
 									<div
@@ -126,7 +143,15 @@ function LeftConfig(props: LeftConfigProps) {
 								{...dragEventResolve(v)}
 							>
 								<div className={`${styles.redbox} yh-left-item-img-wrap`}>
-									{v.imgCustom ? v.imgCustom : <img src={v.img} alt="component"></img>}
+									{v.imgCustom ? (
+										v.imgCustom
+									) : (
+										<img
+											src={v.img}
+											style={{ width: '100%', height: '100%' }}
+											alt="component"
+										></img>
+									)}
 								</div>
 								<div
 									style={{

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

@@ -2,12 +2,13 @@
  * @Author: yehuozhili
  * @Date: 2021-03-14 05:40:37
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-08-19 16:46:56
+ * @LastEditTime: 2021-09-28 22:26:00
  * @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';
+import { ComponentItemFactory } from '..';
 
 export interface PreviewProps {
 	config: UserConfig;
@@ -48,19 +49,47 @@ function Preview(props: PreviewProps): ReactElement {
 		props.config
 			.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;
-			}
-			if (props.completeFn) {
-				props.completeFn();
-			}
-			if (props.loadingState === undefined) {
-				setLoading(false);
-			}
-		});
+
+		const finalFn = () => {
+			setTimeout(() => {
+				// 设置全局
+				const bodyColor = props.config.getStore().getData().globalState?.bodyColor;
+				if (bodyColor) {
+					document.body.style.backgroundColor = bodyColor;
+				}
+				if (props.completeFn) {
+					props.completeFn();
+				}
+				if (props.loadingState === undefined) {
+					setLoading(false);
+				}
+			});
+		};
+		// 加载 script
+		const scripts = props.config.getStore().getData().globalState['script'];
+		if (scripts && Array.isArray(scripts) && scripts.length > 0) {
+			const allp = scripts.map((v) => {
+				return new Promise((res) => {
+					const s = document.createElement('script');
+					s.src = v;
+					document.body.appendChild(s);
+					s.onload = () => {
+						const item = window[
+							props.config.SCRIPTGLOBALNAME as any
+						] as unknown as ComponentItemFactory;
+						props.config.registComponent(item);
+						res(0);
+					};
+				});
+			});
+			Promise.all(allp)
+				.then(() => {
+					finalFn();
+				})
+				.catch(() => {
+					finalFn();
+				});
+		}
 	}, [props, props.config]);
 
 	if (isEdit) {

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

@@ -2,7 +2,7 @@
  * @Author: yehuozhili
  * @Date: 2021-02-25 21:16:58
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-09-27 17:34:21
+ * @LastEditTime: 2021-09-28 22:05:04
  * @FilePath: \dooringx\packages\dooringx-lib\src\config\index.tsx
  */
 import React from 'react';
@@ -171,6 +171,7 @@ export const defaultStore: IStoreData = {
 		containerColor: 'rgba(255,255,255,1)',
 		title: 'dooring',
 		bodyColor: 'rgba(255,255,255,1)',
+		script: [],
 	},
 	modalConfig: {},
 };
@@ -355,6 +356,9 @@ export class UserConfig {
 	public iframeOrigin = '';
 	public iframeId = 'yh-container-iframe';
 	public i18n = true;
+	public SCRIPTGLOBALNAME = 'DOORINGXPLUGIN';
+	public scriptLoading = false;
+	public leftForceUpdate = () => {};
 	constructor(initConfig?: Partial<InitConfig>) {
 		const mergeConfig = userConfigMerge(defaultConfig, initConfig);
 		this.initConfig = mergeConfig;
@@ -472,6 +476,7 @@ export class UserConfig {
 		const mergeConfig = userConfigMerge(defaultConfig, v);
 		this.initConfig = mergeConfig;
 		this.init();
+		this.leftForceUpdate();
 		this.store.forceUpdate();
 	}
 	/**
@@ -484,6 +489,7 @@ export class UserConfig {
 		obj.leftRenderListCategory = v;
 		this.initConfig = userConfigMerge(this.initConfig, obj);
 		this.init();
+		this.leftForceUpdate();
 		this.store.forceUpdate();
 	}
 
@@ -497,6 +503,7 @@ export class UserConfig {
 		obj.rightRenderListCategory = v;
 		this.initConfig = userConfigMerge(this.initConfig, obj);
 		this.init();
+		this.leftForceUpdate();
 		this.store.forceUpdate();
 	}
 
@@ -510,6 +517,7 @@ export class UserConfig {
 		obj.leftAllRegistMap = [v];
 		this.initConfig = userConfigMerge(this.initConfig, obj);
 		this.init();
+		this.leftForceUpdate();
 		this.store.forceUpdate();
 	}
 
@@ -521,6 +529,7 @@ export class UserConfig {
 	setConfig(v: Partial<InitConfig>) {
 		this.initConfig = userConfigMerge(this.initConfig, v);
 		this.init();
+		this.leftForceUpdate();
 		this.store.forceUpdate();
 	}
 
@@ -596,6 +605,54 @@ export class UserConfig {
 		this.init();
 		this.store.forceUpdate();
 	}
+
+	scriptSingleLoad(
+		src: string,
+		leftProps: Partial<LeftRegistComponentMapItem>,
+		callback?: Function
+	) {
+		let isEdit = this.storeChanger.isEdit();
+		let globalState = this.store.getData().globalState;
+		if (isEdit) {
+			globalState = this.storeChanger.getOrigin()!.now.globalState;
+		}
+		if (globalState['script'].includes(src)) {
+			console.error(src + 'scripts have been loaded');
+			return;
+		}
+		if (!this.scriptLoading) {
+			this.scriptLoading = true;
+			const script = document.createElement('script');
+			script.src = src;
+			script.onload = () => {
+				const item = window[this.SCRIPTGLOBALNAME as any] as unknown as ComponentItemFactory;
+				try {
+					const left = leftProps;
+					left.component = item.name;
+					left.displayName = item.display;
+					this.scriptRegistComponentSingle(item, left as LeftRegistComponentMapItem);
+				} catch (e) {
+					console.error(e);
+				}
+				// 前面加载会重置store 新增组件需要事件初始化
+				setTimeout(() => {
+					window[this.SCRIPTGLOBALNAME as any] = undefined as any;
+					isEdit = this.storeChanger.isEdit();
+					globalState = this.store.getData().globalState;
+					if (isEdit) {
+						globalState = this.storeChanger.getOrigin()!.now.globalState;
+					}
+					globalState['script'].push(src);
+					this.store.forceUpdate();
+					this.scriptLoading = false;
+					if (callback) {
+						callback();
+					}
+				});
+			};
+			document.body.appendChild(script);
+		}
+	}
 }
 
 export default UserConfig;

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

@@ -2,7 +2,7 @@
  * @Author: yehuozhili
  * @Date: 2021-03-14 04:29:09
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-26 12:06:00
+ * @LastEditTime: 2021-09-28 20:48:17
  * @FilePath: \dooringx\packages\dooringx-lib\src\core\components\abstract.ts
  */
 import { ComponentItem } from './componentItem';
@@ -17,6 +17,7 @@ export class ComponentItemFactory implements ComponentItem {
 		public resize: ComponentItem['resize'] = true,
 		public needPosition: ComponentItem['needPosition'] = true,
 		public init: ComponentItem['init'] = () => {},
-		public destroy: ComponentItem['destroy'] = () => {}
+		public destroy: ComponentItem['destroy'] = () => {},
+		public url: ComponentItem['url'] = ''
 	) {}
 }

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

@@ -2,8 +2,8 @@
  * @Author: yehuozhili
  * @Date: 2021-03-14 04:29:09
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-06 23:45:21
- * @FilePath: \dooringv2\packages\dooring-v2-lib\src\core\components\componentItem.ts
+ * @LastEditTime: 2021-09-28 20:47:36
+ * @FilePath: \dooringx\packages\dooringx-lib\src\core\components\componentItem.ts
  */
 import UserConfig from '../../config';
 import Store from '../store';
@@ -26,6 +26,7 @@ export interface ComponentItem {
 	props: Record<string, CreateOptionsResAll[]>; // 配置属性
 	render: (data: IBlockType, context: any, store: Store, config: UserConfig) => JSX.Element;
 	destroy: () => void;
+	url: string;
 }
 export type ComponentRenderConfigProps = {
 	data: IBlockType;

packages/dooringx-lib/src/core/focusHandler/index.tsx

@@ -2,7 +2,7 @@
  * @Author: yehuozhili
  * @Date: 2021-03-14 04:29:09
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-27 14:36:07
+ * @LastEditTime: 2021-09-28 17:14:16
  * @FilePath: \dooringx\packages\dooringx-lib\src\core\focusHandler\index.tsx
  */
 import { innerDragState } from '../innerDrag/state';

packages/dooringx-lib/src/core/innerDrag/state.ts

@@ -2,7 +2,7 @@
  * @Author: yehuozhili
  * @Date: 2021-03-14 12:09:11
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-08-04 11:39:02
+ * @LastEditTime: 2021-09-28 16:57:05
  * @FilePath: \dooringx\packages\dooringx-lib\src\core\innerDrag\state.ts
  */
 import { RefObject } from 'react';