import { observer } from 'mobx-react-lite' ; import type { ButtonHTMLAttributes } from 'react' ; import styled from 'reshadow' ; import { Icon , IconOrImage } from '@cloudbeaver/core-blocks' ; import { IMenuItem , MenuTrigger } from '@cloudbeaver/core-dialogs' ; import { useTranslate } from '@cloudbeaver/core-localization' ; import { useStyles , ComponentStyle , joinStyles } from '@cloudbeaver/core-theming' ; import { TopMenuButton } from './TopMenuButton' ; import { topMenuStyles } from './topMenuStyles' ; interface IProps extends Omit < ButtonHTMLAttributes < any > , 'style' > { menuItem : IMenuItem ; style ? : ComponentStyle ; } export const TopMenuItem = observer < IProps > ( function TopMenuItem ( { menuItem , style , ... props } ) { const translate = useTranslate ( ) ; const styles = useStyles ( style , topMenuStyles ) ; const title = translate ( menuItem . title ) ; if ( ! menuItem . panel ) { return ( < TopMenuButton { ... props } disabled = { menuItem . isDisabled } onClick = { ( ) => menuItem . onClick ?. ( ) } > { translate ( menuItem . title ) } < /TopMenuButton>); } return styled ( styles ) ( < MenuTrigger { ... props } panel = { menuItem . panel } disabled = { menuItem . isDisabled } style = { joinStyles ( style , topMenuStyles ) } placement = "bottom-end" modal onClick = { ( ) => menuItem . onClick ?. ( ) } > { menuItem . icon && ( < menu - trigger - icon > < IconOrImage icon = { menuItem . icon } / > < /menu-trigger-icon>)} < menu - trigger - text title = { title } > { title } < /menu-trigger-text> < Icon name = "angle" viewBox = "0 0 15 8" / > < /MenuTrigger>); } ) ;