wix-style-react
Version:
wix-style-react
26 lines • 1.9 kB
JavaScript
import React, { useCallback, useContext } from 'react';
import SidebarItemButtonNext from '../../SidebarItemNext/SidebarItemButtonNext';
import { SidebarNextContext } from '../../SidebarNext/SidebarNextContext';
import { dataHooks, getCompoundDataHook } from '../constants';
import { st, classes } from '../SidebarSubMenuNext.st.css';
import { ContextMenuPopover } from './ContextMenuPopover';
import { getSuffixWithChevron } from './common';
export const ContextMenu = ({ title, suffix, prefix, children, dataHook, itemKey, disabled, onClick, onExpand, onCollapse, onQuickNavOpen, ...asComponentProps }) => {
const context = useContext(SidebarNextContext);
const selected = context.selectedPath.includes(itemKey);
const handleClick = useCallback(event => {
context.closeQuickNav?.();
// @ts-ignore
onClick?.(event, itemKey); // FIXME: this was never typed but implemented originally
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[context.closeQuickNav, onClick, itemKey]);
return (React.createElement(ContextMenuPopover, { dataHook: getCompoundDataHook(dataHook, dataHooks.submenuPopover), element: React.createElement(SidebarItemButtonNext, { prefix: prefix, suffix: getSuffixWithChevron(suffix), onClick: handleClick, disabled: disabled, itemKey: itemKey, dataHook: getCompoundDataHook(dataHook, dataHooks.sidebarItem), className: st(classes.subMenu, { animation: 'closed', selected }), ...asComponentProps }, title), content: React.createElement(SidebarNextContext.Provider, { value: {
...context,
level: context.level + 1,
parent: 'inContextMenu',
inert: true, // popover items are not focusable
isParentWithPrefix: !!prefix,
} }, children), disabled: disabled, onShow: onQuickNavOpen }));
};
//# sourceMappingURL=ContextMenu.js.map