import * as React from 'react' ; import { EuiButton , EuiContextMenu , EuiPopover } from '@elastic/eui' ; import useAsync from 'react-use/lib/useAsync' ; import { buildContextMenuForActions } from '../../../../src/plugins/ui_actions/public' ; import { sampleAction } from './util' ; export const PanelView = ( ) => { const [ open , setOpen ] = React . useState ( false ) ; const context = { } ; const trigger = 'TEST_TRIGGER' ; const actions = [ sampleAction ( 'test-1' , 100 , 'Explore underlying data' , 'discoverApp' ) , sampleAction ( 'test-2' , 99 , 'Customize time range' , 'calendar' ) , sampleAction ( 'test-3' , 98 , 'Inspect' , 'inspect' ) , sampleAction ( 'test-4' , 97 , 'Full screen' , 'fullScreen' ) , ] ; const panels = useAsync ( ( ) => buildContextMenuForActions ( { actions : actions . map ( ( action ) => ( { action , context , trigger } ) ) , } ) ) ; return ( < EuiPopover button = { < EuiButton onClick = { ( ) => setOpen ( ( x ) => ! x ) } > View mode < /EuiButton>} isOpen={open} panelPaddingSize="none" anchorPosition="downLeft" closePopover={() => setOpen(false)}> < EuiContextMenu initialPanelId = { 'mainMenu' } panels = { panels . value } / > < /EuiPopover>); } ;