change pkg

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

@@ -0,0 +1,112 @@
+import { IStoreData } from '../core/store/storetype';
+import React, { useMemo } from 'react';
+import Blocks from './blocks';
+import UserConfig from '../config';
+import * as ReactDOM from 'react-dom';
+import { deepCopy } from '../core/utils';
+
+interface ModalRenderProps {
+	data: IStoreData;
+	name: string; //传递的modal名字
+	config: UserConfig; //需要拿到componentRegister
+	parentDom: HTMLDivElement;
+	rootDom: HTMLDivElement;
+}
+
+export const unmountMap: Map<string, Function> = new Map();
+
+export function ModalRender(props: ModalRenderProps) {
+	//先获取数据
+	const storeData: IStoreData = useMemo(() => {
+		const z = props.data.modalMap[props.name];
+		if (z) {
+			const data = deepCopy(z);
+			//需要把第一个mask扔了手动写一个
+			data.block.shift();
+			return data;
+		}
+		return { block: [] };
+	}, [props.data.modalMap, props.name]);
+	const { parentDom, rootDom } = props;
+
+	//这里还要添加个关闭函数，
+	const unmount = useMemo(() => {
+		return () => {
+			if (parentDom && rootDom) {
+				ReactDOM.unmountComponentAtNode(parentDom);
+				rootDom.removeChild(parentDom);
+				rootDom.parentElement?.removeChild(rootDom);
+			}
+		};
+	}, [parentDom, rootDom]);
+
+	unmountMap.set(props.name, unmount);
+
+	return (
+		<>
+			<div
+				className="yh-container-modal"
+				style={{
+					height: `100%`,
+					width: `100%`,
+					position: 'fixed',
+					overflow: 'hidden',
+				}}
+			>
+				{storeData.block.map((v) => {
+					return <Blocks key={v.id} config={props.config} data={v} context={'preview'}></Blocks>;
+				})}
+				<div
+					onClick={() => {
+						unmount();
+					}}
+					style={{
+						backgroundColor: '#716f6f9e',
+						width: '100%',
+						height: '100%',
+					}}
+				></div>
+			</div>
+		</>
+	);
+}
+
+let wrap: HTMLDivElement | null;
+
+export const createModal = (name: string, data: IStoreData, config: UserConfig) => {
+	if (wrap) {
+		wrap = null;
+	}
+
+	if (!wrap) {
+		wrap = document.createElement('div');
+		wrap.style.cssText = `line-height:
+        1.5;text-align:
+        center;color: #333;
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        position: fixed;
+        z-index: 100000;
+        width: 100%;
+        height:100%;
+        top:0;
+        left: 0;`;
+		if (wrap) {
+			document.body.appendChild(wrap);
+		}
+	}
+	const divs = document.createElement('div');
+	wrap.appendChild(divs);
+	ReactDOM.render(
+		<ModalRender
+			name={name}
+			data={data}
+			config={config}
+			parentDom={divs}
+			rootDom={wrap}
+		></ModalRender>,
+		divs
+	);
+};