colorInfo.jsx
2.1 KB
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
/* eslint-disable */
import React, { PureComponent } from "react";
import styles from "./index.less";
export default class ColorInfo extends PureComponent {
colorContentItem = (item,language) => {
const title =language ==='sEnglish'? item?.sEnglishName : language === 'sBig5'? item?.sBig5Name: item?.sName;
const info = Array.isArray(item?.sColor) ? item.sColor.filter(Boolean) : [];
return (
<>
<div className={styles.colorInfo}>
<div style={{ fontWeight: "bold", marginRight: 10 }}>{title}:</div>
<div style={{ display: "flex", flexWrap: "wrap", flex: 1 }}>
{info.map((i, index) => (
<div style={{ marginRight: 15 }}>
<input
type="color"
value={i?.sColor}
disabled
name={index}
id={index}
style={{
marginRight: 5,
width: 15,
height: 15,
padding: 0,
verticalAlign: "middle"
}}
/>
<label for={index} style={{ fontSize: 10 }}>
{language ==='sEnglish'? i.sEnglishName : language === 'sBig5'? i.sBig5Name: i.sName}
</label>
</div>
))}
</div>
</div>
</>
);
};
colorContent = () => {
const { masterConfig, app } = this.props;
const {userinfo} = app;
const language = userinfo.sLanguage;
try {
const result = JSON.parse(masterConfig.sTableColorTs);
if (!Array.isArray(result)) return;
return result.map(i => this.colorContentItem(i, language));
} catch (error) {
return [];
}
};
render() {
return (
<div
className="colorInfo"
style={{
lineHeight: "20px",
overflow: "hidden"
}}
>
<div
style={{
maxHeight: 60,
overflowY: "scroll",
marginRight: -20,
}}
>
{this.colorContent()}
</div>
</div>
);
}
}