import React , { Component } from 'react' ; import { isValidHex , EuiColorPicker , EuiFormControlLayoutProps } from '@elastic/eui' ; export const RGBA_0000 = 'rgba(0,0,0,0)' ; interface Props { onChange : ( color : string ) => void ; color : string ; swatches ? : string [ ] ; append ? : EuiFormControlLayoutProps [ 'append' ] ; } interface State { colorInputValue : string ; } export class MbValidatedColorPicker extends Component < Props , State > { state = { colorInputValue : this . props . color === RGBA_0000 ? '' : this . props . color , } ; _onColorChange = ( color ) => { this . setState ( { colorInputValue : color } ) ; this . props . onChange ( isValidHex ( color ) ? color : RGBA_0000 ) ; } ; render ( ) { return ( < EuiColorPicker onChange = { this . _onColorChange } color = { this . state . colorInputValue } swatches = { this . props . swatches } append = { this . props . append } compressed / > ) ; } }