start iframe

2021-07-17 22:15:30 +08:00
parent 4808062d79
commit f1a3d98bcb
17 changed files with 825 additions and 11 deletions
--- a/packages/dooringx-example/src/pages/iframeTest.tsx
+++ b/packages/dooringx-example/src/pages/iframeTest.tsx
@@ -0,0 +1,125 @@
+/*
+ * @Author: yehuozhili
+ * @Date: 2021-07-17 10:12:11
+ * @LastEditors: yehuozhili
+ * @LastEditTime: 2021-07-17 22:13:20
+ * @FilePath: \dooringx\packages\dooringx-example\src\pages\iframeTest.tsx
+ */
+
+import {
+	RightConfig,
+	Container,
+	useStoreState,
+	innerContainerDragUp,
+	LeftConfig,
+	IframeContainerWrapper,
+	Control,
+	postMessage,
+	useIframePostMessage,
+} from 'dooringx-lib';
+import { useContext, useState } from 'react';
+import { configContext } from '@/layouts';
+import { useCallback } from 'react';
+import { PREVIEWSTATE } from '@/constant';
+import { useEffect } from 'react';
+
+export const HeaderHeight = '40px';
+
+export default function IndexPage() {
+	const config = useContext(configContext);
+
+	const everyFn = () => {};
+
+	const subscribeFn = useCallback(() => {
+		localStorage.setItem(PREVIEWSTATE, JSON.stringify(config.getStore().getData()));
+	}, [config]);
+
+	const [state] = useStoreState(config, subscribeFn, everyFn);
+
+	const [iframeReady, setIframeReady] = useState(false);
+	const [fnx] = useIframePostMessage(`${location.origin}/container`, config, iframeReady);
+	useEffect(() => {
+		const fn = (e: MessageEvent<any>) => {
+			console.log(e, '收到');
+			if (e.data === 'ready') {
+				setIframeReady(true);
+				fnx();
+			}
+			if (typeof e.data === 'object') {
+				if (e.data.type === 'update') {
+					if (e.data.column === 'scale') {
+						config.scaleState = e.data.data;
+						config.getStore().forceUpdate();
+						config.refreshIframe();
+					}
+				}
+			}
+		};
+		window.addEventListener('message', fn);
+		return () => {
+			window.removeEventListener('message', fn);
+		};
+	}, []);
+
+	const scaleState = config.getScaleState();
+	return (
+		<div {...innerContainerDragUp(config, 'iframe')}>
+			<div style={{ height: HeaderHeight }}>
+				head
+				<button
+					onClick={() => {
+						window.open('/iframe');
+					}}
+				>
+					go preview
+				</button>
+				<button
+					onClick={() => {
+						window.open('/preview');
+					}}
+				>
+					go preview
+				</button>
+			</div>
+			<div
+				style={{
+					display: 'flex',
+					justifyContent: 'center',
+					alignItems: 'center',
+					height: `calc(100vh - ${HeaderHeight})`,
+					width: '100vw',
+				}}
+			>
+				<div style={{ height: '100%' }}>
+					<LeftConfig config={config}></LeftConfig>
+				</div>
+
+				<IframeContainerWrapper
+					config={config}
+					extra={
+						<Control
+							config={config}
+							style={{ position: 'fixed', bottom: '60px', right: '450px', zIndex: 100 }}
+						></Control>
+					}
+				>
+					<>
+						<iframe
+							id="yh-container-iframe"
+							style={{
+								width: state.container.width * scaleState.value,
+								height: state.container.height * scaleState.value + 1,
+								border: 'none',
+								userSelect: 'none',
+							}}
+							src="/container"
+						></iframe>
+					</>
+				</IframeContainerWrapper>
+				<div className="rightrender" style={{ height: '100%' }}>
+					<RightConfig state={state} config={config}></RightConfig>
+				</div>
+			</div>
+		</div>
+	);
+}