import React from 'react' ; import { i18n } from '@kbn/i18n' ; import { EuiButtonIcon , EuiPanel } from '@elastic/eui' ; export interface Props { isTimesliderOpen : boolean ; openTimeslider : ( ) => void ; closeTimeslider : ( ) => void ; } export function TimesliderToggleButton ( props ) { function onClick ( ) { if ( props . isTimesliderOpen ) { props . closeTimeslider ( ) ; } else { props . openTimeslider ( ) ; } } const label = props . isTimesliderOpen ? i18n . translate ( 'xpack.maps.timesliderToggleButton.closeLabel' , { defaultMessage : 'Close timeslider' , } ) : i18n . translate ( 'xpack.maps.timesliderToggleButton.openLabel' , { defaultMessage : 'Open timeslider' , } ) ; return ( < EuiPanel paddingSize = "none" className = "mapToolbarOverlay__button" > < EuiButtonIcon size = "s" onClick = { onClick } data - test - subj = "timesliderToggleButton" iconType = "timeslider" aria - label = { label } title = { label } isSelected = { props . isTimesliderOpen } display = { props . isTimesliderOpen ? 'fill' : 'empty' } / > < /EuiPanel>); }