-
-
Notifications
You must be signed in to change notification settings - Fork 46.7k
/
ColorPaletteToolDark.tsx
104 lines (97 loc) · 3.54 KB
/
ColorPaletteToolDark.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
100
101
102
103
104
import type { ChangeEvent } from 'react';
import React, { Component } from 'react';
import { FormattedMessage } from 'dumi';
import { Row, Col } from 'antd';
import ColorPicker from './ColorPicker';
import ColorPatterns from './ColorPatterns';
const primaryMinSaturation = 70; // 主色推荐最小饱和度
const primaryMinBrightness = 70; // 主色推荐最小亮度
class ColorPaletteTool extends Component {
state = {
primaryColor: '#1890ff',
backgroundColor: '#141414',
primaryColorInstance: null,
};
handleChangeColor = (e: string | ChangeEvent, color: { hex: string }) => {
const value = (e as ChangeEvent<HTMLInputElement>).target
? (e as ChangeEvent<HTMLInputElement>).target.value
: e;
this.setState({ primaryColor: value, primaryColorInstance: color });
};
handleChangeBackgroundColor = (e: string | ChangeEvent) => {
const value = (e as ChangeEvent<HTMLInputElement>).target
? (e as ChangeEvent<HTMLInputElement>).target.value
: e;
this.setState({ backgroundColor: value });
};
renderColorValidation() {
const { primaryColorInstance } = this.state;
let text = '';
if (primaryColorInstance) {
if (primaryColorInstance.hsv.s * 100 < primaryMinSaturation) {
text += ` 饱和度建议不低于${primaryMinSaturation}(现在 ${(
primaryColorInstance.hsv.s * 100
).toFixed(2)})`;
}
if (primaryColorInstance.hsv.v * 100 < primaryMinBrightness) {
text += ` 亮度建议不低于${primaryMinBrightness}(现在 ${(
primaryColorInstance.hsv.v * 100
).toFixed(2)})`;
}
}
return (
<span className="color-palette-picker-validation color-palette-picker-validation-dark">
{text.trim()}
</span>
);
}
render() {
const { primaryColor, backgroundColor } = this.state;
return (
<div className="color-palette-horizontal color-palette-horizontal-dark">
<div className="main-color">
{ColorPatterns({ color: primaryColor, dark: true, backgroundColor })}
</div>
<div className="color-palette-picker">
<Row>
<Col span={12}>
<div className="color-palette-pick">
<FormattedMessage id="app.docs.color.pick-primary" />
</div>
<span style={{ display: 'inline-block', verticalAlign: 'middle' }}>
<Row>
<Col span={18}>
<ColorPicker color={primaryColor} onChange={this.handleChangeColor} />
</Col>
<Col span={6}>
<span className="color-palette-pick-hex">{primaryColor}</span>
</Col>
</Row>
</span>
</Col>
<Col span={12}>
<div className="color-palette-pick">
<FormattedMessage id="app.docs.color.pick-background" />
</div>
<span style={{ display: 'inline-block', verticalAlign: 'middle' }}>
<Row>
<Col span={18}>
<ColorPicker
color={backgroundColor}
onChange={this.handleChangeBackgroundColor}
/>
</Col>
<Col span={6}>
<span className="color-palette-pick-hex">{backgroundColor}</span>
</Col>
</Row>
</span>
</Col>
</Row>
{this.renderColorValidation()}
</div>
</div>
);
}
}
export default ColorPaletteTool;