@eaze/color-picker/src/index.js

Color Picker

import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import { GithubPicker } from 'react-color'
import { Checkboard } from 'react-color/lib/components/common'
import Color from '@eaze/color'

// this contains a box with a color that will show ColorPickerWidget conditionally
export default class ColorPicker extends PureComponent {
  static propTypes = {
    color: PropTypes.string.isRequired,
    showColorPicker: PropTypes.bool.isRequired,
    onColorChange: PropTypes.func.isRequired
  }

  render () {
    const { color, showColorPicker, onColorChange } = this.props

    return (
      <div className='box' style={{backgroundColor: color}}>
        <ColorPickerWidget show={showColorPicker} onColorChange={onColorChange} />
        {color === 'transparent' ? <Checkboard /> : null}
        <style jsx> {`
          .box {
            position: relative;
            height: 2rem;
            width: 2rem;
            border-radius: 1px;
            border: 1px solid black;
          }
        `}
        </style>
      </div>
    )
  }
}

export class ColorPickerWidget extends PureComponent {
  static propTypes = {
    onColorChange: PropTypes.func.isRequired,
    show: PropTypes.bool.isRequired,
    colors: PropTypes.array,
    componentStyle: PropTypes.object
  }

  // default the colors array to the 1 value of @eaze/color with transparent first
  static defaultProps = {
    colors: ['transparent'].concat(Object.entries(Color).map(([_, value]) => value[1]))
  }

  handleColorChange = (color) => {
    // color has hex and rgb values, right now let's always use hex
    this.props.onColorChange(color.hex)
  }

  render () {
    if (!this.props.show) return null

    const { colors, componentStyle } = this.props

    return (
      <div style={{position: 'relative', top: '2.5rem', ...componentStyle}}>
        <GithubPicker onChangeComplete={this.handleColorChange} width='150px' triangle='top-left' colors={colors} />
      </div>
    )
  }
}