add example

2021-07-10 19:35:06 +08:00
parent b1133c8773
commit c27b4eb8e0
50 changed files with 5786 additions and 212 deletions
--- a/packages/dooringx-lib/src/components/container.tsx
+++ b/packages/dooringx-lib/src/components/container.tsx
@@ -39,7 +39,6 @@ function Container(props: PropsWithChildren<ContainerProps>) {
 			return props.state.globalState.containerColor;
 		}
 	};
-
 	return (
 		<>
 			{props.context === 'edit' && (
--- a/packages/dooringx-lib/src/components/leftConfig.tsx
+++ b/packages/dooringx-lib/src/components/leftConfig.tsx
@@ -2,8 +2,8 @@
 * @Author: yehuozhili
 * @Date: 2021-02-04 10:32:45
 * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-06 23:55:37
- * @FilePath: \dooringv2\packages\dooring-v2-lib\src\components\leftConfig.tsx
+ * @LastEditTime: 2021-07-10 15:47:34
+ * @FilePath: \DooringV2\packages\dooringx-lib\src\components\leftConfig.tsx
 */
 import React, { ReactNode, useEffect, useMemo, useState } from 'react';
 import { Input, Menu } from 'antd';
@@ -42,7 +42,7 @@ function LeftConfig(props: LeftConfigProps) {
 			cache = config.leftAllRegistMap.filter((k) => k.type === type);
 			cache.forEach((v) => props.config.asyncRegistComponent(v.component));
 			setLeftRender(
-				<div className={styles.leftco}>
+				<div className={`${styles.leftco} yh-leftcomp`}>
 					<div
 						style={{
 							display: 'flex',
@@ -53,7 +53,7 @@ function LeftConfig(props: LeftConfigProps) {
 					>
 						<div
 							style={{
-								width: 100,
+								width: 120,
 								overflow: 'hidden',
 								textOverflow: 'ellipsis',
 								whiteSpace: 'nowrap',
--- a/packages/dooringx-lib/src/components/modalRender.tsx
+++ b/packages/dooringx-lib/src/components/modalRender.tsx
@@ -29,6 +29,8 @@ export function ModalRender(props: ModalRenderProps) {
 	}, [props.data.modalMap, props.name]);
 	const { parentDom, rootDom } = props;

+	const modalConfig = props.data.modalConfig[props.name];
+
 	//这里还要添加个关闭函数，
 	const unmount = useMemo(() => {
 		return () => {
@@ -58,7 +60,9 @@ export function ModalRender(props: ModalRenderProps) {
 				})}
 				<div
 					onClick={() => {
-						unmount();
+						if (!modalConfig) {
+							unmount();
+						}
 					}}
 					style={{
 						backgroundColor: '#716f6f9e',
--- a/packages/dooringx-lib/src/components/preview.tsx
+++ b/packages/dooringx-lib/src/components/preview.tsx
@@ -2,7 +2,7 @@
 * @Author: yehuozhili
 * @Date: 2021-03-14 05:40:37
 * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-08 20:44:45
+ * @LastEditTime: 2021-07-10 16:09:19
 * @FilePath: \DooringV2\packages\dooringx-lib\src\components\preview.tsx
 */
 import Container from './container';
@@ -24,6 +24,12 @@ function Preview(props: { config: UserConfig; loadText?: ReactNode }): ReactElem
 			.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;
+			}
+
 			setLoading(false);
 		});
 	}, [props.config]);
--- a/packages/dooringx-lib/src/components/rightConfig.tsx
+++ b/packages/dooringx-lib/src/components/rightConfig.tsx
@@ -2,15 +2,15 @@
 * @Author: yehuozhili
 * @Date: 2021-03-14 05:42:13
 * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-05 23:35:05
- * @FilePath: \DooringV2\packages\dooring-v2-lib\src\components\rightConfig.tsx
+ * @LastEditTime: 2021-07-10 16:06:33
+ * @FilePath: \DooringV2\packages\dooringx-lib\src\components\rightConfig.tsx
 */
 import { CreateOptionsRes } from '../core/components/formTypes';
 import { IBlockType, IStoreData } from '../core/store/storetype';
 import { store } from '../runtime/store';
 import { PropsWithChildren, useEffect, useMemo, useState } from 'react';
 import React from 'react';
-import { Tabs, Input, Row, Col } from 'antd';
+import { Tabs, Input, Row, Col, Checkbox } from 'antd';
 import UserConfig from '../config';
 import { RGBColor, SketchPicker } from 'react-color';
 import { rgba2Obj } from '../core/utils';
@@ -89,8 +89,15 @@ function RightConfig(props: PropsWithChildren<RightConfigProps>) {
 			? rgba2Obj(props.config.getStoreChanger().getOrigin()?.now.globalState.containerColor)
 			: rgba2Obj(props.config.getStore().getData().globalState.containerColor);
 	}, [props.config]);
+	const initColor2 = useMemo(() => {
+		return props.config.getStoreChanger().isEdit()
+			? rgba2Obj(props.config.getStoreChanger().getOrigin()?.now.globalState.bodyColor)
+			: rgba2Obj(props.config.getStore().getData().globalState.bodyColor);
+	}, [props.config]);
 	const [color, setColor] = useState<RGBColor>(initColor);
+	const [color2, setColor2] = useState<RGBColor>(initColor2);
 	const [colorPickerVisible, setColorPickerVisible] = useState(false);
+	const [colorPickerVisible2, setColorPickerVisible2] = useState(false);
 	const initTitle = useMemo(() => {
 		const title = props.config.getStoreChanger().isEdit()
 			? props.config.getStoreChanger().getOrigin()?.now.globalState.title
@@ -100,6 +107,9 @@ function RightConfig(props: PropsWithChildren<RightConfigProps>) {
 	const [title, setTitle] = useState(initTitle);

 	const customGlobal = props.config.getConfig().rightGlobalCustom;
+	const isEdit = props.config.getStoreChanger().isEdit();
+	const modalName = props.config.getStoreChanger().getState().modalEditName;
+	const originData = props.config.getStoreChanger().getOrigin()?.now;
 	return (
 		<div
 			className="ant-menu"
@@ -137,7 +147,7 @@ function RightConfig(props: PropsWithChildren<RightConfigProps>) {
 					})}
 				</Tabs>
 			)}
-			{!current && !customGlobal && (
+			{!current && !isEdit && !customGlobal && (
 				<div style={{ padding: '20px' }}>
 					<Row style={{ padding: '10 0 20px 0', fontWeight: 'bold' }}>全局设置</Row>
 					<Row style={{ padding: '10px 0' }}>
@@ -230,9 +240,97 @@ function RightConfig(props: PropsWithChildren<RightConfigProps>) {
 							}
 						</Col>
 					</Row>
+					<Row style={{ padding: '10px 0' }}>
+						<Col span={6}>body底色</Col>
+						<Col span={18}>
+							{
+								<div style={{ position: 'relative' }}>
+									<div
+										onClick={() => {
+											setColorPickerVisible2((pre) => !pre);
+										}}
+										style={{
+											background: '#fff',
+											borderRadius: '1px',
+											boxShadow: '0 0 0 1px rgba(0,0,0,.1)',
+											cursor: 'pointer',
+											display: 'inline-block',
+										}}
+									>
+										<div
+											style={{
+												width: '20px',
+												height: '20px',
+												borderRadius: '2px',
+												background: `rgba(${color2.r}, ${color2.g}, ${color2.b}, ${color2.a})`,
+											}}
+										/>
+									</div>
+									{colorPickerVisible2 && (
+										<>
+											<div style={{ position: 'absolute', zIndex: 2000 }}>
+												<SketchPicker
+													color={color2}
+													onChange={(c) => {
+														const newcolor = c.rgb;
+														setColor2(newcolor);
+														const isEdit = props.config.getStoreChanger().isEdit();
+														if (isEdit) {
+															const originData: IStoreData = deepcopy(
+																props.config.getStoreChanger().getOrigin()!.now
+															);
+															originData.globalState.bodyColor = `rgba(${newcolor.r}, ${newcolor.g}, ${newcolor.b}, ${newcolor.a})`;
+															props.config.getStoreChanger().updateOrigin(originData);
+														} else {
+															const originData = deepcopy(props.config.getStore().getData());
+															originData.globalState.bodyColor = `rgba(${newcolor.r}, ${newcolor.g}, ${newcolor.b}, ${newcolor.a})`;
+															props.config.getStore().setData(originData);
+														}
+													}}
+												></SketchPicker>
+											</div>
+											<div
+												style={{
+													position: 'fixed',
+													top: '0px',
+													right: '0px',
+													bottom: '0px',
+													left: '0px',
+													zIndex: 1000,
+												}}
+												onClick={() => setColorPickerVisible2(false)}
+											/>
+										</>
+									)}
+								</div>
+							}
+						</Col>
+					</Row>
+				</div>
+			)}
+			{!current && !isEdit && customGlobal && customGlobal}
+			{!current && isEdit && (
+				<div style={{ padding: '20px' }} className="yh-tcsz">
+					<Row style={{ padding: '10 0 20px 0', fontWeight: 'bold' }}>弹窗设置</Row>
+					<Row style={{ padding: '10px 0' }}>
+						<Col span={8}>取消点击删除弹窗</Col>
+						<Col span={16} style={{ textAlign: 'right' }}>
+							<Checkbox
+								checked={originData ? originData.modalConfig[modalName] : false}
+								onChange={(e) => {
+									const val = e.target.checked;
+									const cloneData = deepcopy(originData);
+									if (cloneData) {
+										cloneData.modalConfig[modalName] = val;
+										props.config.getStoreChanger().updateOrigin(cloneData);
+										props.config.getStore().forceUpdate();
+									}
+								}}
+							></Checkbox>
+						</Col>
+					</Row>
 				</div>
 			)}
-			{!current && customGlobal && customGlobal}
 		</div>
 	);
 }