import React , { Component } from 'react' ; import { i18n } from '@kbn/i18n' ; import { EuiForm , EuiFormRow , EuiSwitch } from '@elastic/eui' ; interface Props { useMargins : boolean ; onUseMarginsChange : ( useMargins : boolean ) => void ; hidePanelTitles : boolean ; onHidePanelTitlesChange : ( hideTitles : boolean ) => void ; syncColors : boolean ; onSyncColorsChange : ( syncColors : boolean ) => void ; } interface State { useMargins : boolean ; hidePanelTitles : boolean ; syncColors : boolean ; } export class OptionsMenu extends Component < Props , State > { state = { useMargins : this . props . useMargins , hidePanelTitles : this . props . hidePanelTitles , syncColors : this . props . syncColors , } ; constructor ( props ) { super ( props ) ; } handleUseMarginsChange = ( evt ) => { const isChecked = evt . target . checked ; this . props . onUseMarginsChange ( isChecked ) ; this . setState ( { useMargins : isChecked } ) ; } ; handleHidePanelTitlesChange = ( evt ) => { const isChecked = ! evt . target . checked ; this . props . onHidePanelTitlesChange ( isChecked ) ; this . setState ( { hidePanelTitles : isChecked } ) ; } ; handleSyncColorsChange = ( evt ) => { const isChecked = evt . target . checked ; this . props . onSyncColorsChange ( isChecked ) ; this . setState ( { syncColors : isChecked } ) ; } ; render ( ) { return ( < EuiForm data - test - subj = "dashboardOptionsMenu" > < EuiFormRow > < EuiSwitch label = { i18n . translate ( 'dashboard.topNav.options.useMarginsBetweenPanelsSwitchLabel' , { defaultMessage : 'Use margins between panels' , } ) } checked = { this . state . useMargins } onChange = { this . handleUseMarginsChange } data - test - subj = "dashboardMarginsCheckbox" / > < /EuiFormRow> < EuiFormRow > < EuiSwitch label = { i18n . translate ( 'dashboard.topNav.options.hideAllPanelTitlesSwitchLabel' , { defaultMessage : 'Show panel titles' , } ) } checked = { ! this . state . hidePanelTitles } onChange = { this . handleHidePanelTitlesChange } data - test - subj = "dashboardPanelTitlesCheckbox" / > < /EuiFormRow> < EuiFormRow > < EuiSwitch label = { i18n . translate ( 'dashboard.topNav.options.syncColorsBetweenPanelsSwitchLabel' , { defaultMessage : 'Sync color palettes across panels' , } ) } checked = { this . state . syncColors } onChange = { this . handleSyncColorsChange } data - test - subj = "dashboardSyncColorsCheckbox" / > < /EuiFormRow> < /EuiForm>); } }