add example

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

@@ -0,0 +1,82 @@
+/*
+ * @Author: yehuozhili
+ * @Date: 2021-05-15 12:49:28
+ * @LastEditors: yehuozhili
+ * @LastEditTime: 2021-07-10 19:08:25
+ * @FilePath: \dooringx\packages\dooringx-example\src\pages\index.tsx
+ */
+import {
+	RightConfig,
+	Container,
+	useStoreState,
+	innerContainerDragUp,
+	LeftConfig,
+	ContainerWrapper,
+	Control,
+} from 'dooringx-lib';
+import { useContext } from 'react';
+import { configContext } from '@/layouts';
+import { useCallback } from 'react';
+import { PREVIEWSTATE } from '@/constant';
+
+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);
+
+	return (
+		<div {...innerContainerDragUp()}>
+			<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>
+
+				<ContainerWrapper>
+					<>
+						<Control
+							config={config}
+							style={{ position: 'fixed', bottom: '60px', right: '450px' }}
+						></Control>
+						<Container state={state} config={config} context="edit"></Container>
+					</>
+				</ContainerWrapper>
+				<div className="rightrender" style={{ height: '100%' }}>
+					<RightConfig state={state} config={config}></RightConfig>
+				</div>
+			</div>
+		</div>
+	);
+}