guoshujing/dooring
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add example

Browse Source
This commit is contained in:
hufeixiong
2021-07-10 19:35:06 +08:00
parent b1133c8773
commit c27b4eb8e0
50 changed files with 5786 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
packages/dooringx-lib/src/components/rightConfig.tsx
View File

@@ -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>
);
}