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
|
import React, {Component} from 'react'
import { rgb } from './Utils.js'
const colorPalette = [
[0,0,0],
[132,0,0],
[0,132,0],
[132,132,0],
[0,0,132],
[132,0,132],
[0,132,132],
[132,132,132],
[198,198,198],
[255,0,0],
[0,255,0],
[255,255,0],
[0,0,255],
[255,0,255],
[0,255,255],
[255,255,255],
]
export default class Palette extends Component {
render() {
let paletteListItems = colorPalette.map((item) => {
let { r, g, b } = rgb(item)
let selected = rgb(this.props.selectedColor)
let isSelected = r === selected.r && g === selected.g && b === selected.b
let className = isSelected ? "paletteItem selected" : "paletteItem"
return <div
key={r*10000+g*1000+b}
className={className}
style={{background: `rgb(${r},${g},${b})`}}
onClick={() => this.props.onSelectColor([r, g, b])}/>
})
return (
<div className="palette">
{paletteListItems}
</div>)
}
}
|
