import React , { MouseEventHandler , forwardRef , memo } from 'react' ; import { PointStyle } from '../../utils/themes/theme' ; import { Icon } from '../icons/icon' ; import { LegendIcon } from './legend_icon' ; interface ColorProps { color : string ; seriesName : string ; hasColorPicker : boolean ; isSeriesHidden ? : boolean ; pointStyle ? : PointStyle ; onClick ? : MouseEventHandler ; } internal export const Color = memo ( forwardRef < HTMLButtonElement , ColorProps > ( ( { color , seriesName , isSeriesHidden = false , hasColorPicker , onClick , pointStyle } , ref ) => { if ( isSeriesHidden ) { return ( < div className = "echLegendItem__color" title = "series hidden" > { } < Icon type = "eyeClosed" viewBox = "-3 -3 22 22" aria - label = { `series ${ seriesName } is hidden` } /> < /div>); } if ( hasColorPicker ) { return ( < button type = "button" onClick = { onClick } className = "echLegendItem__color echLegendItem__color--changable" title = "change series color" ref = { ref } > < LegendIcon pointStyle = { pointStyle } color = { color } ariaLabel = { `Change series color, currently ${ color }` } /> < /button>); } return ( < div className = "echLegendItem__color" title = "series color" > < LegendIcon pointStyle = { pointStyle } color = { color } ariaLabel = { `series color: ${ color }` } /> < /div>); } ) ) ; Color . displayName = 'Color' ;