import get from 'lodash/get' ; import isEqual from 'lodash/isEqual' ; import React from 'react' ; import { Instance } from 'tippy.js' ; import theme from '../theme' ; import { DeleteColumnComponent , GetBoardDocument , GetBoardQuery , UpdateColumnComponent , } from '../__generated__/graphql' ; import { EllipsesIcon , TrashIcon } from './Icon' ; import Menu , { MenuDivider , MenuItem } from './Menu' ; import UpdateColumnForm from './UpdateColumnForm' ; interface ColumnMenuProps { boardId : string ; id : string ; name : string ; query : string ; } const BoardMenu = ( { boardId , id , name , query , ... props } ) => { const tippyInstance = React . useRef < Instance > ( null ) ; const [ formValues , setFormValues ] = React . useState ( { name , query } ) ; return ( < Menu onCreate = { instance => ( ( tippyInstance . current as any ) = instance ) } onHidden = { ( ) => setFormValues ( { name , query } ) } content = { < > < UpdateColumnComponent variables = { { id , ... formValues } } > { updateColumn => ( < UpdateColumnForm values = { formValues } isDirty = { ! isEqual ( formValues , { name , query } ) } onChange = { setFormValues } onSubmit = { ( ) => { updateColumn ( ) ; if ( tippyInstance . current ) { tippyInstance . current . hide ( ) ; } } } onReset = { ( ) => setFormValues ( { name , query } ) } />)} < /UpdateColumnComponent> < MenuDivider / > < DeleteColumnComponent variables = { { id } } refetchQueries = { [ { query : GetBoardDocument , variables : { id : boardId } , } , ] } > { deleteColumn => ( < MenuItem onClick = { ( ) => { if ( window . confirm ( `Delete "${ name }" column?` ) ) { deleteColumn ( ) ; } } } css = { { '&:hover' : { color : theme . colors . red [ 8 ] , svg : { color : theme . colors . red [ 6 ] , } , } , } } > < TrashIcon css = { { marginRight : theme . space [ 3 ] , color : theme . colors . gray [ 6 ] , } } /> Delete column < /MenuItem>)} < /DeleteColumnComponent> < />}> < button aria - label = "Menu" aria - haspopup = "true" aria - expanded = "false" css = { { padding : theme . space [ 2 ] , color : theme . colors . gray [ 6 ] , backgroundColor : 'transparent' , border : 0 , borderRadius : theme . radii [ 1 ] , appearance : 'none' , cursor : 'pointer' , '&:hover' : { backgroundColor : theme . colors . gray [ 1 ] , } , } } { ... props } > < EllipsesIcon /> < /button> < /Menu>); } ; export default BoardMenu ;