nice-ui
Version:
React design system, components, and utilities
42 lines (41 loc) • 2.3 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ToolbarMenuPopup = void 0;
const React = require("react");
const use_t_1 = require("use-t");
const ContextMenu_1 = require("../../ContextMenu");
const ContextHeader_1 = require("../../ContextMenu/ContextHeader");
const Breadcrumbs_1 = require("../../../3-list-item/Breadcrumbs");
const PopupControlled_1 = require("../../Popup/PopupControlled");
const popup_1 = require("../../../utils/popup");
const Flex_1 = require("../../../3-list-item/Flex");
const MoveToViewport_1 = require("../../../utils/popup/MoveToViewport");
const popupAnchor = {
center: true,
gap: 12,
};
const ToolbarMenuPopup = ({ open, header, item, children }) => {
const [t] = (0, use_t_1.useT)();
const handle = (0, popup_1.useAnchorPointHandle)(popupAnchor);
const renderContext = () => (React.createElement(MoveToViewport_1.MoveToViewport, null,
React.createElement(ContextMenu_1.ContextMenu, { inset: true, pane: {
style: {
width: 242,
},
}, menu: item, header: header ? (React.createElement(ContextHeader_1.ContextHeader, { compact: true }, !!item.icon ? (React.createElement(Flex_1.Flex, { style: { alignItems: 'center' } },
React.createElement("div", { style: { width: 16, height: 16 } },
React.createElement("span", { style: {
display: 'inline-block',
transform: 'scale(.75)',
opacity: 0.8,
transformOrigin: '50% 100%',
verticalAlign: 'bottom',
marginTop: -8,
} },
item.icon?.(),
"\u00A0")),
React.createElement(Breadcrumbs_1.Breadcrumb, { compact: true }, t(item.name)))) : (React.createElement(Breadcrumbs_1.Breadcrumb, { compact: true }, t(item.name))))) : (void 0) })));
return (React.createElement(popup_1.anchorContext.Provider, { value: handle },
React.createElement(PopupControlled_1.PopupControlled, { refToggle: handle.ref, open: open, renderContext: renderContext }, children)));
};
exports.ToolbarMenuPopup = ToolbarMenuPopup;