From ee5e95b96d77667f4ab424c46dc66cabef807b9b Mon Sep 17 00:00:00 2001 From: Wroud Date: Sat, 18 Jun 2022 17:40:34 +0300 Subject: [PATCH] refactor(core-ui): CB-2038 use menu blocks in context menu --- webapp/packages/core-blocks/src/Menu/Menu.tsx | 27 +++- .../core-blocks/src/Menu/MenuPanel.tsx | 26 +++- .../core-blocks/src/Menu/MenuStateContext.ts | 4 +- .../core-ui/src/ContextMenu/ContextMenu.tsx | 121 +++++++-------- .../src/ContextMenu/MenuActionElement.tsx | 5 +- .../core-ui/src/ContextMenu/MenuEmptyItem.tsx | 43 ------ .../src/ContextMenu/MenuItemElement.tsx | 60 -------- .../src/ContextMenu/MenuItemRenderer.tsx | 9 +- .../core-ui/src/ContextMenu/MenuPanel.tsx | 65 -------- .../src/ContextMenu/SubMenuElement.tsx | 105 ++++++------- .../src/ContextMenu/menuPanelStyles.ts | 139 ------------------ webapp/packages/core-ui/src/index.ts | 1 - 12 files changed, 156 insertions(+), 449 deletions(-) delete mode 100644 webapp/packages/core-ui/src/ContextMenu/MenuEmptyItem.tsx delete mode 100644 webapp/packages/core-ui/src/ContextMenu/MenuItemElement.tsx delete mode 100644 webapp/packages/core-ui/src/ContextMenu/MenuPanel.tsx delete mode 100644 webapp/packages/core-ui/src/ContextMenu/menuPanelStyles.ts diff --git a/webapp/packages/core-blocks/src/Menu/Menu.tsx b/webapp/packages/core-blocks/src/Menu/Menu.tsx index b30df26ff0..1f84e26c89 100644 --- a/webapp/packages/core-blocks/src/Menu/Menu.tsx +++ b/webapp/packages/core-blocks/src/Menu/Menu.tsx @@ -16,28 +16,36 @@ import { ComponentStyle, useStyles } from '@cloudbeaver/core-theming'; import { useObjectRef } from '../useObjectRef'; import { MenuPanel } from './MenuPanel'; import { menuPanelStyles } from './menuPanelStyles'; -import { MenuStateContext } from './MenuStateContext'; +import { IMenuState, MenuStateContext } from './MenuStateContext'; interface IMenuProps extends Omit, 'style'> { label: string; - items: React.ReactNode; + items: React.ReactNode | (() => React.ReactNode); + menuRef?: React.RefObject; style?: ComponentStyle; disclosure?: boolean; placement?: MenuInitialState['placement']; modal?: boolean; visible?: boolean; rtl?: boolean; + hasBindings?: boolean; + panelAvailable?: boolean; + getHasBindings?: () => boolean; onVisibleSwitch?: (visible: boolean) => void; } -export const Menu = observer>(function Menu({ +export const Menu = observer(function Menu({ label, items, + menuRef, disclosure, children, style, placement, visible, + hasBindings, + panelAvailable, + getHasBindings, onVisibleSwitch, modal, rtl, @@ -47,6 +55,11 @@ export const Menu = observer>(functi const menu = useMenuState({ modal, placement, visible, rtl }); const styles = useStyles(menuPanelStyles, style); + if (menuRef) { + //@ts-expect-error Ref mutation + menuRef.current = menu; + } + useEffect(() => { propsRef.onVisibleSwitch?.(menu.visible); }, [menu.visible]); @@ -63,6 +76,9 @@ export const Menu = observer>(functi menu={menu} style={style} rtl={rtl} + panelAvailable={panelAvailable} + hasBindings={hasBindings} + getHasBindings={getHasBindings} > {items} @@ -72,7 +88,7 @@ export const Menu = observer>(functi return styled(styles)( - + {children} >(functi menu={menu} style={style} rtl={rtl} + panelAvailable={panelAvailable} + hasBindings={hasBindings} + getHasBindings={getHasBindings} > {items} diff --git a/webapp/packages/core-blocks/src/Menu/MenuPanel.tsx b/webapp/packages/core-blocks/src/Menu/MenuPanel.tsx index 9230361fd8..fa54995b1e 100644 --- a/webapp/packages/core-blocks/src/Menu/MenuPanel.tsx +++ b/webapp/packages/core-blocks/src/Menu/MenuPanel.tsx @@ -13,6 +13,7 @@ import styled, { use } from 'reshadow'; import { ComponentStyle, useStyles } from '@cloudbeaver/core-theming'; +import { getComputed } from '../getComputed'; import { MenuEmptyItem } from './MenuEmptyItem'; import { menuPanelStyles } from './menuPanelStyles'; @@ -22,18 +23,23 @@ export interface IMenuPanelProps { menu: MenuStateReturn; // from reakit useMenuState panelAvailable?: boolean; hasBindings?: boolean; + getHasBindings?: () => boolean; + children: React.ReactNode | (() => React.ReactNode); rtl?: boolean; style?: ComponentStyle; + className?: string; } -export const MenuPanel = observer>(function MenuPanel({ +export const MenuPanel = observer(function MenuPanel({ label, menu, panelAvailable = true, - hasBindings, rtl, + getHasBindings, + hasBindings, children, style, + className, }) { const styles = useStyles(menuPanelStyles, style); const visible = menu.visible; @@ -42,13 +48,23 @@ export const MenuPanel = observer>(func return null; } + hasBindings = panelAvailable && (hasBindings || getComputed(() => getHasBindings?.())); + + let renderedChildren: React.ReactNode = <>; + + if (panelAvailable) { + renderedChildren = typeof children === 'function' + ? children() + : children; + } + return styled(styles)( - + - {Children.count(children) === 0 && ( + {Children.count(renderedChildren) === 0 && ( )} - {children} + {renderedChildren} ); diff --git a/webapp/packages/core-blocks/src/Menu/MenuStateContext.ts b/webapp/packages/core-blocks/src/Menu/MenuStateContext.ts index 8401fccdb0..4cdb06f556 100644 --- a/webapp/packages/core-blocks/src/Menu/MenuStateContext.ts +++ b/webapp/packages/core-blocks/src/Menu/MenuStateContext.ts @@ -9,4 +9,6 @@ import { createContext } from 'react'; import type { MenuStateReturn } from 'reakit/ts'; -export const MenuStateContext = createContext(null); \ No newline at end of file +export type IMenuState = MenuStateReturn; + +export const MenuStateContext = createContext(null); \ No newline at end of file diff --git a/webapp/packages/core-ui/src/ContextMenu/ContextMenu.tsx b/webapp/packages/core-ui/src/ContextMenu/ContextMenu.tsx index b6ac2459c3..591a075933 100644 --- a/webapp/packages/core-ui/src/ContextMenu/ContextMenu.tsx +++ b/webapp/packages/core-ui/src/ContextMenu/ContextMenu.tsx @@ -7,18 +7,16 @@ */ import { observer } from 'mobx-react-lite'; -import React, { ButtonHTMLAttributes, useCallback, useEffect } from 'react'; -import { MenuButton, MenuInitialState, useMenuState } from 'reakit/Menu'; +import { ButtonHTMLAttributes, useRef } from 'react'; +import type { MenuInitialState } from 'reakit/Menu'; import styled from 'reshadow'; -import { getComputed, useObjectRef } from '@cloudbeaver/core-blocks'; +import { getComputed, IMenuState, Menu, menuPanelStyles, useObjectRef } from '@cloudbeaver/core-blocks'; import { useService } from '@cloudbeaver/core-di'; import { ComponentStyle, useStyles } from '@cloudbeaver/core-theming'; -import { IMenuData, MenuService } from '@cloudbeaver/core-view'; +import { IMenuData, MenuActionItem, MenuService } from '@cloudbeaver/core-view'; import { MenuItemRenderer } from './MenuItemRenderer'; -import { MenuPanel } from './MenuPanel'; -import { menuPanelStyles } from './menuPanelStyles'; interface IMenuProps extends React.PropsWithChildren { loading: boolean; @@ -39,7 +37,7 @@ interface IContextMenuProps extends Omit, 'style' | 'c onVisibleSwitch?: (visible: boolean) => void; } -export const ContextMenu = observer>(function ContextMenu({ +export const ContextMenu = observer(function ContextMenu({ menu: menuData, disclosure, children, @@ -59,80 +57,63 @@ export const ContextMenu = observer const disabled = getComputed(() => loading || handler?.isDisabled?.(menuData.context) || false); const lazy = getComputed(() => !menuData.available || hidden); - const propsRef = useObjectRef({ onVisibleSwitch, visible }); - const menu = useMenuState({ modal, placement, visible, rtl }); + const menu = useRef(); const styles = useStyles(menuPanelStyles, style); - const handleItemClose = useCallback(() => { - menu.hide(); - }, [menu]); + const handlers = useObjectRef(() => ({ + handleItemClose() { + menu.current?.hide(); + }, + hasBindings() { + return this.menuData.items.some( + item => item instanceof MenuActionItem && item.action.binding !== null + ); + }, + handleVisibleSwitch(visible: boolean) { + this.onVisibleSwitch?.(visible); - useEffect(() => { - propsRef.onVisibleSwitch?.(menu.visible); - - if (menu.visible) { - handler?.handler?.(menuData.context); - } - }, [menu.visible]); + if (visible) { + this.handler?.handler?.(this.menuData.context); + } + }, + }), { menuData, handler, onVisibleSwitch }, ['handleItemClose', 'hasBindings', 'handleVisibleSwitch']); if (lazy) { return null; } - // TODO: fix type error const renderingChildren: React.ReactNode = typeof children === 'function' - ? (children as any)({ loading, disabled }) + ? children({ loading, disabled }) : children; - if (React.isValidElement(renderingChildren) && disclosure) { - return styled(styles)( - <> - - {disclosureProps => React.cloneElement(renderingChildren, { ...disclosureProps, ...renderingChildren.props })} - - - {item => ( - - )} - - - ); - } - return styled(styles)( - <> - - {renderingChildren} - - - {item => ( - - )} - - + menuData.items.map(item => menu.current && ( + + ))} + rtl={rtl} + menuRef={menu} + modal={modal} + visible={visible} + placement={placement} + disabled={disabled} + disclosure={disclosure} + style={style} + getHasBindings={handlers.hasBindings} + onVisibleSwitch={handlers.handleVisibleSwitch} + {...props} + > + {renderingChildren} + ); }, { forwardRef: true }); diff --git a/webapp/packages/core-ui/src/ContextMenu/MenuActionElement.tsx b/webapp/packages/core-ui/src/ContextMenu/MenuActionElement.tsx index 5e933e70fc..f242dfad38 100644 --- a/webapp/packages/core-ui/src/ContextMenu/MenuActionElement.tsx +++ b/webapp/packages/core-ui/src/ContextMenu/MenuActionElement.tsx @@ -11,13 +11,10 @@ import React from 'react'; import { MenuItem, MenuItemCheckbox, MenuItemRadio, MenuStateReturn } from 'reakit/Menu'; import styled, { use } from 'reshadow'; -import { Checkbox, Radio } from '@cloudbeaver/core-blocks'; +import { Checkbox, MenuItemElement, menuPanelStyles, Radio } from '@cloudbeaver/core-blocks'; import { ComponentStyle, useStyles } from '@cloudbeaver/core-theming'; import type { IMenuActionItem } from '@cloudbeaver/core-view'; -import { MenuItemElement } from './MenuItemElement'; -import { menuPanelStyles } from './menuPanelStyles'; - interface IMenuActionElementProps { item: IMenuActionItem; menu: MenuStateReturn; diff --git a/webapp/packages/core-ui/src/ContextMenu/MenuEmptyItem.tsx b/webapp/packages/core-ui/src/ContextMenu/MenuEmptyItem.tsx deleted file mode 100644 index 20fcddf3a4..0000000000 --- a/webapp/packages/core-ui/src/ContextMenu/MenuEmptyItem.tsx +++ /dev/null @@ -1,43 +0,0 @@ -/* - * CloudBeaver - Cloud Database Manager - * Copyright (C) 2020-2022 DBeaver Corp and others - * - * Licensed under the Apache License, Version 2.0. - * you may not use this file except in compliance with the License. - */ - -import { observer } from 'mobx-react-lite'; -import { MenuItem, MenuStateReturn } from 'reakit/Menu'; -import styled from 'reshadow'; - -import { useTranslate } from '@cloudbeaver/core-localization'; -import { ComponentStyle, useStyles } from '@cloudbeaver/core-theming'; - -import { MenuItemElement } from './MenuItemElement'; -import { menuPanelStyles } from './menuPanelStyles'; - - -interface Props extends Omit, 'style'> { - menu: MenuStateReturn; // from reakit useMenuState - style?: ComponentStyle; -} - -export const MenuEmptyItem = observer(function MenuEmptyItem({ - menu, style, -}) { - const styles = useStyles(menuPanelStyles, style); - const translate = useTranslate(); - - const label = translate('core_ui_empty'); - - return styled(styles)( - - - - ); -}); \ No newline at end of file diff --git a/webapp/packages/core-ui/src/ContextMenu/MenuItemElement.tsx b/webapp/packages/core-ui/src/ContextMenu/MenuItemElement.tsx deleted file mode 100644 index d8edbe2b75..0000000000 --- a/webapp/packages/core-ui/src/ContextMenu/MenuItemElement.tsx +++ /dev/null @@ -1,60 +0,0 @@ -/* - * CloudBeaver - Cloud Database Manager - * Copyright (C) 2020-2022 DBeaver Corp and others - * - * Licensed under the Apache License, Version 2.0. - * you may not use this file except in compliance with the License. - */ - -import { observer } from 'mobx-react-lite'; -import styled from 'reshadow'; - -import { Icon, IconOrImage, Loader, useStateDelay } from '@cloudbeaver/core-blocks'; -import { useTranslate } from '@cloudbeaver/core-localization'; -import { useStyles, ComponentStyle } from '@cloudbeaver/core-theming'; - -import { menuPanelStyles } from './menuPanelStyles'; - -interface IMenuItemElementProps { - label: string; - tooltip?: string; - binding?: string; - icon?: string | React.ReactNode; - menu?: boolean; - loading?: boolean; - style?: ComponentStyle; -} - -export const MenuItemElement = observer(function MenuItemElement({ - label, - tooltip, - binding, - icon, - menu, - loading = false, - style = [], -}) { - const translate = useTranslate(); - - const title = translate(label); - loading = useStateDelay(loading, 100); - - return styled(useStyles(menuPanelStyles, style))( - - - {typeof icon === 'string' ? : icon} - - - {title} - - - {binding} - - - {loading && } - {menu && !loading && } - - - - ); -}); diff --git a/webapp/packages/core-ui/src/ContextMenu/MenuItemRenderer.tsx b/webapp/packages/core-ui/src/ContextMenu/MenuItemRenderer.tsx index 5ec8c2d1eb..d8d2d65e42 100644 --- a/webapp/packages/core-ui/src/ContextMenu/MenuItemRenderer.tsx +++ b/webapp/packages/core-ui/src/ContextMenu/MenuItemRenderer.tsx @@ -11,13 +11,11 @@ import React, { useCallback } from 'react'; import { MenuItem, MenuSeparator, MenuStateReturn } from 'reakit/Menu'; import styled, { use } from 'reshadow'; +import { MenuItemElement, menuPanelStyles } from '@cloudbeaver/core-blocks'; import { ComponentStyle, joinStyles, useStyles } from '@cloudbeaver/core-theming'; import { IMenuItem, IMenuData, MenuSubMenuItem, MenuSeparatorItem, MenuActionItem, MenuBaseItem } from '@cloudbeaver/core-view'; import { MenuActionElement } from './MenuActionElement'; -import { MenuItemElement } from './MenuItemElement'; -import { MenuPanel } from './MenuPanel'; -import { menuPanelStyles } from './menuPanelStyles'; import { SubMenuElement } from './SubMenuElement'; @@ -25,12 +23,13 @@ export interface IMenuItemRendererProps extends Omit void; style?: ComponentStyle; } export const MenuItemRenderer = observer(function MenuItemRenderer({ - item, menuData, menu, onItemClose, style, + item, rtl, menuData, menu, onItemClose, style, }) { const styles = useStyles(menuPanelStyles, style); const onClick = useCallback(() => { @@ -49,7 +48,7 @@ export const MenuItemRenderer = observer(function MenuIt id={item.id} aria-label={item.menu.label} itemRenderer={MenuItemRenderer} - menuPanel={MenuPanel} + rtl={rtl} menuData={menuData} subMenu={item} style={style} diff --git a/webapp/packages/core-ui/src/ContextMenu/MenuPanel.tsx b/webapp/packages/core-ui/src/ContextMenu/MenuPanel.tsx deleted file mode 100644 index 9e8d0ae6c7..0000000000 --- a/webapp/packages/core-ui/src/ContextMenu/MenuPanel.tsx +++ /dev/null @@ -1,65 +0,0 @@ -/* - * CloudBeaver - Cloud Database Manager - * Copyright (C) 2020-2022 DBeaver Corp and others - * - * Licensed under the Apache License, Version 2.0. - * you may not use this file except in compliance with the License. - */ - -import { observer } from 'mobx-react-lite'; -import { Menu, MenuStateReturn } from 'reakit/Menu'; -import styled, { use } from 'reshadow'; - -import { getComputed } from '@cloudbeaver/core-blocks'; -import { ComponentStyle, useStyles } from '@cloudbeaver/core-theming'; -import { IMenuData, IMenuItem, MenuActionItem } from '@cloudbeaver/core-view'; - -import { MenuEmptyItem } from './MenuEmptyItem'; -import { menuPanelStyles } from './menuPanelStyles'; - - -export interface IMenuPanelProps { - menuData: IMenuData; - menu: MenuStateReturn; // from reakit useMenuState - children: (item: IMenuItem) => React.ReactNode; - panelAvailable?: boolean; - rtl?: boolean; - style?: ComponentStyle; -} - -export const MenuPanel = observer(function MenuPanel({ - menuData, - menu, - panelAvailable = true, - rtl, - children, - style, -}) { - const styles = useStyles(menuPanelStyles, style); - const visible = menu.visible; - - if (!visible) { - return null; - } - - let items: IMenuItem[] = []; - - if (panelAvailable) { - items = menuData.items; - } - - const hasBindings = getComputed(() => items.some( - item => item instanceof MenuActionItem && item.action.binding !== null - )); - - return styled(styles)( - - - {items.length === 0 && ( - - )} - {items.map(item => children(item))} - - - ); -}); \ No newline at end of file diff --git a/webapp/packages/core-ui/src/ContextMenu/SubMenuElement.tsx b/webapp/packages/core-ui/src/ContextMenu/SubMenuElement.tsx index 35c6944d6b..e6f25b722f 100644 --- a/webapp/packages/core-ui/src/ContextMenu/SubMenuElement.tsx +++ b/webapp/packages/core-ui/src/ContextMenu/SubMenuElement.tsx @@ -7,25 +7,21 @@ */ import { observer } from 'mobx-react-lite'; -import { useCallback, useEffect } from 'react'; -import { MenuButton, useMenuState } from 'reakit/Menu'; +import { useRef } from 'react'; import styled from 'reshadow'; -import { getComputed } from '@cloudbeaver/core-blocks'; +import { getComputed, IMenuState, Menu, MenuItemElement, menuPanelStyles, useObjectRef } from '@cloudbeaver/core-blocks'; import { useService } from '@cloudbeaver/core-di'; import { ComponentStyle, useStyles } from '@cloudbeaver/core-theming'; -import { DATA_CONTEXT_MENU_NESTED, IMenuData, IMenuSubMenuItem, MenuService, useMenu } from '@cloudbeaver/core-view'; +import { DATA_CONTEXT_MENU_NESTED, IMenuData, IMenuSubMenuItem, MenuActionItem, MenuService, useMenu } from '@cloudbeaver/core-view'; -import { MenuItemElement } from './MenuItemElement'; import type { IMenuItemRendererProps } from './MenuItemRenderer'; -import type { IMenuPanelProps } from './MenuPanel'; -import { menuPanelStyles } from './menuPanelStyles'; interface ISubMenuElementProps extends Omit, 'style'> { menuData: IMenuData; subMenu: IMenuSubMenuItem; itemRenderer: React.FC; - menuPanel: React.FC; + rtl?: boolean; onItemClose?: () => void; style?: ComponentStyle; } @@ -35,15 +31,15 @@ export const SubMenuElement = observer( menuData, subMenu, itemRenderer, - menuPanel, style, + rtl, onItemClose, ...rest }, ref ) { const menuService = useService(MenuService); - const menu = useMenuState(); + const menu = useRef(); const styles = useStyles(menuPanelStyles, style); const subMenuData = useMenu({ menu: subMenu.menu, context: menuData.context }); subMenuData.context.set(DATA_CONTEXT_MENU_NESTED, true); @@ -51,17 +47,23 @@ export const SubMenuElement = observer( const handler = menuService.getHandler(subMenuData.context); const hidden = getComputed(() => handler?.isHidden?.(subMenuData.context)); - const handleItemClose = useCallback(() => { - menu.hide(); - onItemClose?.(); - }, [menu, onItemClose]); - - useEffect(() => { - if (menu.visible) { - subMenu.events?.onOpen?.(); - handler?.handler?.(subMenuData.context); - } - }, [menu.visible]); + const handlers = useObjectRef(() => ({ + handleItemClose() { + menu.current?.hide(); + this.onItemClose?.(); + }, + hasBindings() { + return this.subMenuData.items.some( + item => item instanceof MenuActionItem && item.action.binding !== null + ); + }, + handleVisibleSwitch(visible: boolean) { + if (visible) { + this.subMenu.events?.onOpen?.(); + this.handler?.handler?.(this.subMenuData.context); + } + }, + }), { subMenuData, menuData, handler, subMenu, onItemClose }, ['handleItemClose', 'hasBindings', 'handleVisibleSwitch']); if (hidden) { return null; @@ -69,40 +71,39 @@ export const SubMenuElement = observer( const loading = getComputed(() => handler?.isLoading?.(subMenuData.context)); const disabled = getComputed(() => handler?.isDisabled?.(subMenuData.context)); - const MenuPanel = menuPanel; const MenuItemRenderer = itemRenderer; return styled(styles)( - <> - - - - - - subMenuData.items.map(item => menu.current && ( + + ))} + rtl={rtl} + style={style} + panelAvailable={subMenuData.available && !loading} + disabled={disabled} + getHasBindings={handlers.hasBindings} + onVisibleSwitch={handlers.handleVisibleSwitch} + {...rest} + > + - {item => ( - - )} - - + menu + /> + ); }, { forwardRef: true }); \ No newline at end of file diff --git a/webapp/packages/core-ui/src/ContextMenu/menuPanelStyles.ts b/webapp/packages/core-ui/src/ContextMenu/menuPanelStyles.ts deleted file mode 100644 index e2af32b9be..0000000000 --- a/webapp/packages/core-ui/src/ContextMenu/menuPanelStyles.ts +++ /dev/null @@ -1,139 +0,0 @@ -/* - * CloudBeaver - Cloud Database Manager - * Copyright (C) 2020-2022 DBeaver Corp and others - * - * Licensed under the Apache License, Version 2.0. - * you may not use this file except in compliance with the License. - */ - -import { css } from 'reshadow'; - -export const menuPanelStyles = css` - menu-box { - composes: theme-background-surface theme-text-on-surface from global; - } - MenuItem, - MenuItemCheckbox, - MenuItemRadio, - MenuButton, - MenuItemElement { - composes: theme-ripple from global; - } - menu-panel-item, MenuSeparator { - composes: theme-border-color-background from global; - } - MenuButton { - background: none; - border: none; - outline: none !important; - color: inherit; - cursor: pointer; - & box { - display: flex; - align-items: center; - flex: 1; - height: inherit; - } - } - Menu { - outline: none; - z-index: 999; - } - menu-box { - composes: theme-typography--body2 theme-elevation-z5 from global; - min-width: 140px; - padding: 12px 0; - - & menu-box { - margin-top: -12px; - } - } - - menu-box { - display: flex; - flex-direction: column; - - &:not([|hasBindings]) menu-item-binding { - width: 0; - } - } - - MenuItem, MenuItemCheckbox, MenuItemRadio { - display: flex; - align-items: center; - border: none; - padding: 0; - background: none; - text-align: left; - outline: none; - color: inherit; - cursor: pointer; - white-space: nowrap; - - &[use|hidden] { - display: none; - } - - &:hover, &:global([aria-expanded="true"]) { - & Icon { - opacity: 1; - } - } - } - - MenuSeparator { - flex: 1; - width: 100%; - display: flex; - margin: 4px 0; - border: none !important; - border-bottom: 1px solid !important; - } - - menu-item-binding { - composes: theme-typography--caption from global; - } - - menu-panel-item { - flex: 1; - display: flex; - position: relative; - align-items: center; - height: 30px; - padding: 0 4px; - & menu-item-text, & menu-item-binding { - display: block; - padding: 0 4px; - } - & menu-item-binding { - flex: 1; - text-align: right; - padding-left: 32px; - width: 80px; - overflow: hidden; - text-overflow: ellipsis; - } - & menu-item-content { - width: 24px; - height: 24px; - overflow: hidden; - display: flex; - align-items: center; - justify-content: center; - } - & Icon { - width: 16px; - height: 16px; - opacity: 0.5; - transform: rotate(-90deg); - } - & IconOrImage { - width: 16px; - height: 16px; - object-fit: contain; - } - & Loader { - width: 16px; - } - } - `; diff --git a/webapp/packages/core-ui/src/index.ts b/webapp/packages/core-ui/src/index.ts index f79ad0882c..229645a3dd 100644 --- a/webapp/packages/core-ui/src/index.ts +++ b/webapp/packages/core-ui/src/index.ts @@ -1,7 +1,6 @@ export * from './Clipboard/ClipboardBootstrap'; export * from './Clipboard/ClipboardService'; -export * from './ContextMenu/MenuItemElement'; export * from './ContextMenu/ContextMenu'; export * from './ContextMenu/MenuBar/MenuBar'; export * from './ContextMenu/MenuBar/MENU_BAR_DEFAULT_STYLES';