import { i18n } from '@osd/i18n' ; import React , { PureComponent } from 'react' ; import { EuiScreenReaderOnly , keys } from '@elastic/eui' ; import { EuiIcon , EuiFlexGroup , EuiFlexItem , EuiText } from '@elastic/eui' ; export interface ExitFullScreenButtonProps { onExitFullScreenMode : ( ) => void ; } import './index.scss' ; import OpenSearchMarkDarkMode from '../../../home/public/assets/logos/opensearch_mark_darkmode.svg' ; class ExitFullScreenButtonUi extends PureComponent < ExitFullScreenButtonProps > { public onKeyDown = ( e ) => { if ( e . key === keys . ESCAPE ) { this . props . onExitFullScreenMode ( ) ; } } ; public UNSAFE_componentWillMount ( ) { document . addEventListener ( 'keydown' , this . onKeyDown , false ) ; } public componentWillUnmount ( ) { document . removeEventListener ( 'keydown' , this . onKeyDown , false ) ; } public render ( ) { return ( < div > < EuiScreenReaderOnly > < p aria - live = "polite" > { i18n . translate ( 'opensearch-dashboards-react.exitFullScreenButton.fullScreenModeDescription' , { defaultMessage : 'In full screen mode, press ESC to exit.' , } ) } < /p> < /EuiScreenReaderOnly> < div > < button aria - label = { i18n . translate ( 'opensearch-dashboards-react.exitFullScreenButton.exitFullScreenModeButtonAriaLabel' , { defaultMessage : 'Exit full screen mode' , } ) } className = "dshExitFullScreenButton" onClick = { this . props . onExitFullScreenMode } data - test - subj = "exitFullScreenModeLogo" > < EuiFlexGroup component = "span" responsive = { false } alignItems = "center" gutterSize = "s" > < EuiFlexItem grow = { false } > < EuiIcon type = { OpenSearchMarkDarkMode } size = "l" / > < /EuiFlexItem> < EuiFlexItem grow = { false } data - test - subj = "exitFullScreenModeText" > < div > < EuiText size = "s" className = "dshExitFullScreenButton__text" > < p > { i18n . translate ( 'opensearch-dashboards-react.exitFullScreenButton.exitFullScreenModeButtonText' , { defaultMessage : 'Exit full screen' , } ) } < /p> < /EuiText> < /div> < /EuiFlexItem> < EuiFlexItem grow = { false } > < EuiIcon type = "fullScreen" className = "dshExitFullScreenButton__icon" / > < /EuiFlexItem> < /EuiFlexGroup> < /button> < /div> < /div>); } } export const ExitFullScreenButton = ExitFullScreenButtonUi ;