import React from 'react' ; import { EuiFormRow , EuiPanel , EuiSpacer , EuiSwitch , EuiSwitchEvent , EuiTitle } from '@elastic/eui' ; import { i18n } from '@kbn/i18n' ; import { FormattedMessage } from '@kbn/i18n-react' ; import { MapSettings } from '../../reducers/map' ; import { AlphaSlider } from '../../components/alpha_slider' ; import { MbValidatedColorPicker } from '../../classes/styles/vector/components/color/mb_validated_color_picker' ; interface Props { settings : MapSettings ; updateMapSetting : ( settingKey : string , settingValue : string | number | boolean ) => void ; } export function SpatialFiltersPanel ( { settings , updateMapSetting } ) { const onAlphaChange = ( alpha ) => { updateMapSetting ( 'spatialFiltersAlpa' , alpha ) ; } ; const onFillColorChange = ( color ) => { updateMapSetting ( 'spatialFiltersFillColor' , color ) ; } ; const onLineColorChange = ( color ) => { updateMapSetting ( 'spatialFiltersLineColor' , color ) ; } ; const onShowSpatialFiltersChange = ( event ) => { updateMapSetting ( 'showSpatialFilters' , event . target . checked ) ; } ; const renderStyleInputs = ( ) => { if ( ! settings . showSpatialFilters ) { return null ; } return ( < > < AlphaSlider alpha = { settings . spatialFiltersAlpa } onChange = { onAlphaChange } / > < EuiFormRow label = { i18n . translate ( 'xpack.maps.mapSettingsPanel.spatialFiltersFillColorLabel' , { defaultMessage : 'Fill color' , } ) } display = "columnCompressed" > < MbValidatedColorPicker color = { settings . spatialFiltersFillColor } onChange = { onFillColorChange } / > < /EuiFormRow> < EuiFormRow label = { i18n . translate ( 'xpack.maps.mapSettingsPanel.spatialFiltersLineColorLabel' , { defaultMessage : 'Border color' , } ) } display = "columnCompressed" > < MbValidatedColorPicker color = { settings . spatialFiltersLineColor } onChange = { onLineColorChange } / > < /EuiFormRow> < />); } ; return ( < EuiPanel > < EuiTitle size = "xs" > < h5 > < FormattedMessage id = "xpack.maps.mapSettingsPanel.spatialFiltersTitle" defaultMessage = "Spatial filters" / > < /h5> < /EuiTitle> < EuiSpacer size = "m" / > < EuiFormRow > < EuiSwitch label = { i18n . translate ( 'xpack.maps.mapSettingsPanel.showSpatialFiltersLabel' , { defaultMessage : 'Show spatial filters on map' , } ) } checked = { settings . showSpatialFilters } onChange = { onShowSpatialFiltersChange } compressed / > < /EuiFormRow> { renderStyleInputs ( ) } < /EuiPanel>); }