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

refactor: extract colorpicker

Browse Source
This commit is contained in:
hufeixiong
2022-01-20 12:24:41 +08:00
parent 387423ce62
commit 4ef294ea8b
2 changed files with 115 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
packages/dooringx-lib/src/components/colorPicker/index.tsx Normal file
View File

@@ -0,0 +1,79 @@
/*
* @Author: yehuozhili
* @Date: 2022-01-20 11:04:15
* @LastEditors: yehuozhili
* @LastEditTime: 2022-01-20 12:18:54
* @FilePath: \dooringx\packages\dooringx-lib\src\components\colorPicker\index.tsx
*/
import React, { memo, useState } from 'react';
import { RGBColor, SketchPicker } from 'react-color';
export interface ColorPickerProps {
initColor: RGBColor;
onChange: (v: RGBColor) => void;
}
function ColorPicker(props: ColorPickerProps) {
const [color, setColor] = useState<RGBColor>(props.initColor);
const [colorPickerVisible, setColorPickerVisible] = useState(false);
return (
<>
<div style={{ position: 'relative' }}>
<div
onClick={() => {
setColorPickerVisible((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(${color.r}, ${color.g}, ${color.b}, ${color.a})`,
}}
/>
</div>
{colorPickerVisible && (
<>
<div
style={{
position: 'absolute',
zIndex: 2000,
transform: `translate(-100%, 0px)`,
}}
>
<SketchPicker
color={color}
onChange={(c) => {
const newcolor = c.rgb;
setColor(newcolor);
props.onChange(newcolor);
}}
></SketchPicker>
</div>
<div
style={{
position: 'fixed',
top: '0px',
right: '0px',
bottom: '0px',
left: '0px',
zIndex: 1000,
}}
onClick={() => setColorPickerVisible(false)}
></div>
</>
)}
</div>
</>
);
}
export default memo(ColorPicker);

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

@@ -2,7 +2,7 @@
* @Author: yehuozhili * @Author: yehuozhili
* @Date: 2021-03-14 05:42:13 * @Date: 2021-03-14 05:42:13
* @LastEditors: yehuozhili * @LastEditors: yehuozhili
* @LastEditTime: 2021-09-27 20:33:04 * @LastEditTime: 2022-01-20 12:21:48
* @FilePath: \dooringx\packages\dooringx-lib\src\components\rightConfig.tsx * @FilePath: \dooringx\packages\dooringx-lib\src\components\rightConfig.tsx
*/ */
import { CreateOptionsRes } from '../core/components/formTypes'; import { CreateOptionsRes } from '../core/components/formTypes';
@@ -11,10 +11,10 @@ import { CSSProperties, PropsWithChildren, useEffect, useMemo, useState } from '
import React from 'react'; import React from 'react';
import { Tabs, Input, Row, Col, Checkbox, InputNumber } from 'antd'; import { Tabs, Input, Row, Col, Checkbox, InputNumber } from 'antd';
import UserConfig from '../config'; import UserConfig from '../config';
import { RGBColor, SketchPicker } from 'react-color';
import { rgba2Obj } from '../core/utils'; import { rgba2Obj } from '../core/utils';
import deepcopy from 'deepcopy'; import deepcopy from 'deepcopy';
import { replaceLocale } from '../locale'; import { replaceLocale } from '../locale';
import ColorPicker from './colorPicker';
const colStyle: CSSProperties = { const colStyle: CSSProperties = {
display: 'flex', display: 'flex',
@@ -101,10 +101,6 @@ function RightConfig(props: PropsWithChildren<RightConfigProps>) {
? rgba2Obj(props.config.getStoreChanger().getOrigin()?.now.globalState.bodyColor) ? rgba2Obj(props.config.getStoreChanger().getOrigin()?.now.globalState.bodyColor)
: rgba2Obj(props.config.getStore().getData().globalState.bodyColor); : rgba2Obj(props.config.getStore().getData().globalState.bodyColor);
}, [props.config]); }, [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 initTitle = useMemo(() => {
const title = props.config.getStoreChanger().isEdit() const title = props.config.getStoreChanger().isEdit()
? props.config.getStoreChanger().getOrigin()?.now.globalState.title ? props.config.getStoreChanger().getOrigin()?.now.globalState.title
@@ -216,73 +212,23 @@ function RightConfig(props: PropsWithChildren<RightConfigProps>) {
{replaceLocale('right.containerColor', '容器底色', props.config)} {replaceLocale('right.containerColor', '容器底色', props.config)}
</Col> </Col>
<Col span={18} style={colStyle}> <Col span={18} style={colStyle}>
{ <ColorPicker
<div style={{ position: 'relative' }}> initColor={initColor}
<div onChange={(newcolor) => {
onClick={() => { const isEdit = props.config.getStoreChanger().isEdit();
setColorPickerVisible((pre) => !pre); if (isEdit) {
}} const originData: IStoreData = deepcopy(
style={{ props.config.getStoreChanger().getOrigin()!.now
background: '#fff', );
borderRadius: '1px', originData.globalState.containerColor = `rgba(${newcolor.r}, ${newcolor.g}, ${newcolor.b}, ${newcolor.a})`;
boxShadow: '0 0 0 1px rgba(0,0,0,.1)', props.config.getStoreChanger().updateOrigin(originData);
cursor: 'pointer', } else {
display: 'inline-block', const originData = deepcopy(props.config.getStore().getData());
}} originData.globalState.containerColor = `rgba(${newcolor.r}, ${newcolor.g}, ${newcolor.b}, ${newcolor.a})`;
> props.config.getStore().setData(originData);
<div }
style={{ }}
width: '20px', ></ColorPicker>
height: '20px',
borderRadius: '2px',
background: `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`,
}}
/>
</div>
{colorPickerVisible && (
<>
<div
style={{
position: 'absolute',
zIndex: 2000,
transform: `translate(-100%, 0px)`,
}}
>
<SketchPicker
color={color}
onChange={(c) => {
const newcolor = c.rgb;
setColor(newcolor);
const isEdit = props.config.getStoreChanger().isEdit();
if (isEdit) {
const originData: IStoreData = deepcopy(
props.config.getStoreChanger().getOrigin()!.now
);
originData.globalState.containerColor = `rgba(${newcolor.r}, ${newcolor.g}, ${newcolor.b}, ${newcolor.a})`;
props.config.getStoreChanger().updateOrigin(originData);
} else {
const originData = deepcopy(props.config.getStore().getData());
originData.globalState.containerColor = `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={() => setColorPickerVisible(false)}
/>
</>
)}
</div>
}
</Col> </Col>
</Row> </Row>
<Row style={{ padding: '10px 0' }}> <Row style={{ padding: '10px 0' }}>
@@ -290,73 +236,23 @@ function RightConfig(props: PropsWithChildren<RightConfigProps>) {
{replaceLocale('right.bodyColor', 'body底色', props.config)} {replaceLocale('right.bodyColor', 'body底色', props.config)}
</Col> </Col>
<Col span={18} style={colStyle}> <Col span={18} style={colStyle}>
{ <ColorPicker
<div style={{ position: 'relative' }}> initColor={initColor2}
<div onChange={(newcolor) => {
onClick={() => { const isEdit = props.config.getStoreChanger().isEdit();
setColorPickerVisible2((pre) => !pre); if (isEdit) {
}} const originData: IStoreData = deepcopy(
style={{ props.config.getStoreChanger().getOrigin()!.now
background: '#fff', );
borderRadius: '1px', originData.globalState.bodyColor = `rgba(${newcolor.r}, ${newcolor.g}, ${newcolor.b}, ${newcolor.a})`;
boxShadow: '0 0 0 1px rgba(0,0,0,.1)', props.config.getStoreChanger().updateOrigin(originData);
cursor: 'pointer', } else {
display: 'inline-block', const originData = deepcopy(props.config.getStore().getData());
}} originData.globalState.bodyColor = `rgba(${newcolor.r}, ${newcolor.g}, ${newcolor.b}, ${newcolor.a})`;
> props.config.getStore().setData(originData);
<div }
style={{ }}
width: '20px', ></ColorPicker>
height: '20px',
borderRadius: '2px',
background: `rgba(${color2.r}, ${color2.g}, ${color2.b}, ${color2.a})`,
}}
/>
</div>
{colorPickerVisible2 && (
<>
<div
style={{
position: 'absolute',
zIndex: 2000,
transform: `translate(-100%, 0px)`,
}}
>
<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> </Col>
</Row> </Row>
</div> </div>