import React , { Fragment } from 'react' ; import { EuiFlexGroup , EuiFlexItem , EuiTitle , EuiPanel , EuiSpacer } from '@elastic/eui' ; import { FormattedMessage } from '@kbn/i18n-react' ; import { StyleDescriptor } from '../../../../common/descriptor_types' ; import { ILayer } from '../../../classes/layers/layer' ; export interface Props { layer : ILayer ; updateStyleDescriptor : ( styleDescriptor : StyleDescriptor ) => void ; } export function StyleSettings ( { layer , updateStyleDescriptor } ) { const settingsEditor = layer . renderStyleEditor ( updateStyleDescriptor ) ; if ( ! settingsEditor ) { return null ; } return ( < Fragment > < EuiPanel className = "mapStyleSettings" > < EuiFlexGroup > < EuiFlexItem > < EuiTitle size = "xs" > < h5 > < FormattedMessage id = "xpack.maps.layerPanel.styleSettingsTitle" defaultMessage = "Layer Style" / > < /h5> < /EuiTitle> < /EuiFlexItem> < /EuiFlexGroup> < EuiSpacer size = "m" / > { settingsEditor } < /EuiPanel> < EuiSpacer size = "s" / > < /Fragment>); }