import React , { useCallback , useEffect } from 'react' ; import { useEuiTheme , keys } from '@elastic/eui' ; import { css } from '@emotion/react' ; import { ExitFullScreenButton as Component } from './exit_full_screen_button.component' ; import { usePlatformService } from '../../services' ; /**
 * Props for the service-enabled Exit Full Screen button component.
 */ export interface Props { /** Optional handler to call when one exits full-screen mode. */ onExit ? : ( ) => void ; /** Should the button toggle the Chrome visibility? */ toggleChrome ? : boolean ; } /**
 * A service-enabled component that provides Kibana-specific functionality to the `ExitFullScreenButton`
 * component.  Use of this component requires both the `EuiTheme` context as well as the Shared UX
 * `ServicesProvider`.
 *
 * See shared-ux/public/services for information.
 */ export const ExitFullScreenButton = ( { onExit = ( ) => { } , toggleChrome = false } ) => { const { euiTheme } = useEuiTheme ( ) ; const { setIsFullscreen } = usePlatformService ( ) ; const onClick = useCallback ( ( ) => { if ( toggleChrome ) { setIsFullscreen ( true ) ; } onExit ( ) ; } , [ onExit , setIsFullscreen , toggleChrome ] ) ; const onKeyDown = useCallback ( ( e ) => { if ( e . key === keys . ESCAPE ) { onClick ( ) ; } } , [ onClick ] ) ; useEffect ( ( ) => { document . addEventListener ( 'keydown' , onKeyDown , false ) ; if ( toggleChrome ) { setIsFullscreen ( false ) ; } return ( ) => { document . removeEventListener ( 'keydown' , onKeyDown , false ) ; } ; } , [ onKeyDown , toggleChrome , setIsFullscreen ] ) ; const buttonCSS = css `
    bottom: ${ euiTheme . size . s };
    left: ${ euiTheme . size . s };
    position: fixed;
    z-index: 5;
  ` ; return < Component css = { buttonCSS } { ... { onClick } } />; } ;