nice-ui
Version:
React design system, components, and utilities
37 lines (36 loc) • 2.46 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ToolbarMenuItem = void 0;
const React = require("react");
const ToolbarItem_1 = require("../ToolbarItem");
const FixedColumn_1 = require("../../../3-list-item/FixedColumn");
const Arrow_1 = require("../../../icons/interactive/Arrow");
const ToolbarMenuPopup_1 = require("./ToolbarMenuPopup");
const context_1 = require("./context");
const ToolbarMenuItemTerminal_1 = require("./ToolbarMenuItemTerminal");
const useBehaviorSubject_1 = require("../../../hooks/useBehaviorSubject");
const Iconista_1 = require("../../../icons/Iconista");
const ToolbarMenuItem = (props) => {
const { item, disabled } = props;
const arrow = React.useRef(null);
const toolbar = (0, context_1.useToolbarMenu)();
const openPanel = toolbar?.openPanel;
const selectedPanel = (0, useBehaviorSubject_1.useBehaviorSubjectOpt)(openPanel?.selected$);
const isTerminal = !item.children || item.children.length === 0;
const id = item.id ?? item.name;
if (isTerminal) {
return React.createElement(ToolbarMenuItemTerminal_1.ToolbarMenuItemTerminal, { ...props });
}
const selected = selectedPanel === id;
return (React.createElement(ToolbarMenuPopup_1.ToolbarMenuPopup, { header: true, open: selected, item: item },
React.createElement(ToolbarItem_1.ToolbarItem, { width: 'auto', compact: true, disabled: disabled, selected: selected, onMouseEnter: disabled ? void 0 : () => openPanel?.onMouseMove(id), onMouseMove: disabled ? void 0 : () => openPanel?.onMouseMove(id), onMouseLeave: disabled ? void 0 : openPanel?.onMouseLeave, onClick: disabled ? void 0 : (event) => toolbar?.execute(item, event) },
React.createElement(FixedColumn_1.FixedColumn, { right: 16, style: { alignItems: 'center' } },
item.icon?.() ?? React.createElement(Iconista_1.Iconista, { set: 'elastic', icon: 'empty', width: 16, height: 16 }),
React.createElement("div", { ref: arrow, style: { marginRight: -2, display: 'flex', justifyContent: 'center', alignItems: 'center' } },
React.createElement(Arrow_1.default, { direction: selected
? (arrow.current?.getBoundingClientRect()?.top ?? 0) * 2 + 16 >= window.innerHeight
? 'u'
: 'd'
: 'r' }))))));
};
exports.ToolbarMenuItem = ToolbarMenuItem;