import React from 'react' ; import { CustomPicker } from 'react-color' ; import { Swatch } from 'react-color/lib/components/common' ; import './ColorPicker.css' ; interface Props { colors : string [ ] ; onChange ( color , e ) : void ; } ColorPicker . defaultProps = { colors : [ ] , onChange : ( ) => { } } ; function ColorPicker ( props ) { function handleChange ( hexcode , e ) { props . onChange ( { hex : hexcode , source : 'hex' } , e ) ; } const swatches = props . colors . map ( ( c ) => ( < div key = { c } className = "ColorPicker__swatch" > < Swatch color = { c } hex = { c } onClick = { handleChange } focusStyle = { { border : `0 0 4px ${ c }` } } /> < /div>)); return < div className = "ColorPicker" > { swatches } < /div>; } export default CustomPicker ( ColorPicker ) ;