unicornpaint

A web-based painting app for raspberry PI and pimoroni Unicorn Hat HD
Log | Files | Refs | README

Palette.js (1057B)

      1 import React, {Component} from 'react'
      2 import { rgb } from './Utils.js'
      3 
      4 const colorPalette = [
      5     [0,0,0],
      6     [132,0,0],
      7     [0,132,0],
      8     [132,132,0],
      9     [0,0,132],
     10     [132,0,132],
     11     [0,132,132],
     12     [132,132,132],
     13     [198,198,198],
     14     [255,0,0],
     15     [0,255,0],
     16     [255,255,0],
     17     [0,0,255],
     18     [255,0,255],
     19     [0,255,255],
     20     [255,255,255],
     21   ]
     22   
     23   
     24   export default class Palette extends Component {
     25     render() {
     26       let paletteListItems = colorPalette.map((item) => {
     27         let { r, g, b } = rgb(item)
     28         let selected = rgb(this.props.selectedColor)
     29         let isSelected = r === selected.r && g === selected.g && b === selected.b
     30 
     31         let className = isSelected ? "paletteItem selected" : "paletteItem"
     32 
     33         return <div
     34           key={r*10000+g*1000+b}
     35           className={className}
     36           style={{background: `rgb(${r},${g},${b})`}} 
     37           onClick={() => this.props.onSelectColor([r, g, b])}/>
     38       })
     39       return (
     40         <div className="palette">
     41           {paletteListItems}
     42         </div>)
     43     }
     44   }