import React , { useState } from 'react' ; import { EuiIconTip , EuiColorPicker , EuiColorPickerProps , EuiColorPickerSwatch , } from '@elastic/eui' ; import { i18n } from '@kbn/i18n' ; const COMMAS_NUMS_ONLY_RE = /[^0-9,]/g ; export interface ColorProps { [ key ] : string | null ; } export interface ColorPickerProps { name : string ; value ? : string | null ; disableTrash ? : boolean ; onChange : ( props : ColorProps ) => void ; } export function ColorPicker ( { name , value , disableTrash = false , onChange } ) { const initialColorValue = value ?. includes ( 'rgba' ) ? value . replace ( COMMAS_NUMS_ONLY_RE , '' ) : value ; const [ color , setColor ] = useState ( initialColorValue || '' ) ; const handleColorChange = ( text , { rgba , hex } ) => { setColor ( text ) ; onChange ( { [ name ] : hex ? `rgba(${ rgba . join ( ',' ) })` : '' } ) ; } ; const handleClear = ( ) => { setColor ( '' ) ; onChange ( { [ name ] : null } ) ; } ; const label = value ? i18n . translate ( 'visTypeTimeseries.colorPicker.notAccessibleWithValueAriaLabel' , { defaultMessage : 'Color picker ({value}), not accessible' , values : { value } , } ) : i18n . translate ( 'visTypeTimeseries.colorPicker.notAccessibleAriaLabel' , { defaultMessage : 'Color picker, not accessible' , } ) ; return ( < div className = "tvbColorPicker" data - test - subj = "tvbColorPicker" > < EuiColorPicker onChange = { handleColorChange } color = { color } secondaryInputDisplay = "top" showAlpha button = { < EuiColorPickerSwatch color = { color } aria - label = { label } />}/ > { ! disableTrash && ( < div className = "tvbColorPicker__clear" onClick = { handleClear } > < EuiIconTip size = "s" type = "cross" color = "danger" content = { i18n . translate ( 'visTypeTimeseries.colorPicker.clearIconLabel' , { defaultMessage : 'Clear' , } ) } / > < /div>)} < /div>); }