import React from 'react' ; import Menu from 'design/Menu' ; import { ButtonIcon } from 'design' ; import { Ellipsis } from 'design/Icon' ; import { MenuProps , AnchorProps } from './types' ; export default class MenuActionIcon extends React . Component < Props > { anchorEl = null ; state = { open : false , } ; constructor ( props ) { super ( props ) ; this . state . open = props . defaultOpen || false ; } onOpen = ( e ) => { e . stopPropagation ( ) ; this . setState ( { open : true } ) ; } ; onClose = ( ) => { this . setState ( { open : false } ) ; } ; render ( ) { const { open } = this . state ; const { children , buttonIconProps , menuProps } = this . props ; return ( < > < ButtonIcon { ... buttonIconProps } setRef = { e => ( this . anchorEl = e ) } onClick = { this . onOpen } data - testid = "button" > < Ellipsis /> < /ButtonIcon> < Menu menuListCss = { menuListCss } anchorEl = { this . anchorEl } open = { open } onClose = { this . onClose } anchorOrigin = { { vertical : 'center' , horizontal : 'center' , } } transformOrigin = { { vertical : 'top' , horizontal : 'center' , } } { ... menuProps } > { open && this . renderItems ( children ) } < /Menu> < />); } renderItems ( children ) { const filtered = React . Children . toArray ( children ) as React . ReactElement [ ] ; const cloned = filtered . map ( child => { return React . cloneElement ( child , { onClick : this . makeOnClick ( child . props . onClick ) , } ) ; } ) ; return cloned ; } makeOnClick ( cb ) { return e => { e . stopPropagation ( ) ; this . onClose ( ) ; cb && cb ( e ) ; } ; } } const menuListCss = ( ) => `
  min-width: 100px;
` ; type Props = MenuProps & { defaultOpen ? : boolean ; buttonIconProps ? : AnchorProps ; menuProps ? : MenuProps ; } ;