import React from 'react' ; import { EuiFormRow , EuiColorPalettePicker } from '@elastic/eui' ; import { NUMERICAL_COLOR_PALETTES } from '../../color_palettes' ; import { HEATMAP_COLOR_RAMP_LABEL } from './heatmap_constants' ; interface Props { colorRampName : string ; onHeatmapColorChange : ( { colorRampName } : { colorRampName : string ; } ) => void ; } export function HeatmapStyleEditor ( { colorRampName , onHeatmapColorChange } ) { const onColorRampChange = ( selectedPaletteId ) => { onHeatmapColorChange ( { colorRampName : selectedPaletteId , } ) ; } ; return ( < EuiFormRow label = { HEATMAP_COLOR_RAMP_LABEL } display = "rowCompressed" > < EuiColorPalettePicker palettes = { NUMERICAL_COLOR_PALETTES } onChange = { onColorRampChange } valueOfSelected = { colorRampName } compressed / > < /EuiFormRow>); }