-
Notifications
You must be signed in to change notification settings - Fork 7
/
config-panel.tsx
99 lines (93 loc) · 2.83 KB
/
config-panel.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
import React, { FC } from 'react';
import { Button, Radio, Collapse } from 'antd';
import { CaretRightOutlined } from '@ant-design/icons';
import { copyToClipboard } from '../utils/copy-to-board';
import Palette from '../theme/palette.json';
import './config-panel.less';
const { Panel } = Collapse;
type Props = {
config: any;
/** 配置变化,含:seriesCount 等 🤔 */
onChange: (config: any) => void;
/** 主题配置变化,含:🤔 */
onThemeChange: (theme: object) => void;
style?: React.CSSProperties;
};
export const ConfigPanel: FC<Props> = props => {
const { style = {}, config, onThemeChange } = props;
const copyConfig = () => {
copyToClipboard(JSON.stringify(config || null));
};
const onColorsChange = ({ colors10, colors20 }) => {
onThemeChange({ colors10, colors20 });
};
return (
<div className="config-panel" style={style}>
<div className="config-panel-title">配置区</div>
{/* todo 添加主题下载区 */}
<div className="">
<Button onClick={copyConfig}>拷贝</Button>
</div>
<hr />
{/* 颜色色板区 START */}
<h4>颜色色板</h4>
<Radio.Group defaultValue={0} className="color-palette-picker">
{Palette.categorical.map((colors, idx) => {
return (
<Radio.Button
key={`${idx}`}
value={idx}
className="color-group"
onClick={() => onColorsChange(colors)}
>
{colors.colors10.map((color, colorIdx) => (
<span
key={`${colorIdx}`}
className="color-item"
style={{ background: color }}
/>
))}
</Radio.Button>
);
})}
</Radio.Group>
{/* 颜色色板区 END */}
<hr />
<Collapse
bordered={false}
defaultActiveKey={['1']}
className="custom-collapse"
expandIcon={({ isActive }) => (
<CaretRightOutlined rotate={isActive ? 90 : 0} />
)}
>
<Panel header="基础配置" key="1" className="custom-panel">
<div>
<span>背景色</span>
</div>
<div>
<span>标签文字</span>
</div>
</Panel>
<Panel header="语义色" key="2" className="custom-panel">
<div>
<span>上涨色</span>
</div>
<div>
<span>下降色</span>
</div>
</Panel>
<Panel header="图例" key="3" className="custom-panel">
<div>
<span>上涨色</span>
</div>
</Panel>
<Panel header="悬浮提示 - Tooltip" key="4" className="custom-panel">
<div>
<span>指示线(crosshairs)</span>
</div>
</Panel>
</Collapse>
</div>
);
};