nice-ui
Version:
React design system, components, and utilities
97 lines (96 loc) • 4.41 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.StatefulToolbarMenu = exports.ToolbarMenu = exports.ToolbarMenuState = void 0;
const React = require("react");
const ToolbarPane_1 = require("../ToolbarPane");
const ExpandChildren_1 = require("./ExpandChildren");
const ToolbarSep_1 = require("../ToolbarSep");
const ExpandSubChildren_1 = require("./ExpandSubChildren");
const ToolbarMenuItem_1 = require("./ToolbarMenuItem");
const context_1 = require("./context");
const ToolbarExpandBtn_1 = require("./ToolbarExpandBtn");
const context_2 = require("../../Popup/context");
const ClickAway_1 = require("../../../utils/ClickAway");
const useBehaviorSubject_1 = require("../../../hooks/useBehaviorSubject");
const state_1 = require("./state");
Object.defineProperty(exports, "ToolbarMenuState", { enumerable: true, get: function () { return state_1.ToolbarMenuState; } });
const ToolbarMenu = (props) => {
const menu = props.menu;
const state = React.useMemo(() => new state_1.ToolbarMenuState(props), [menu.id ?? menu.name]);
return React.createElement(exports.StatefulToolbarMenu, { ...props, state: state });
};
exports.ToolbarMenu = ToolbarMenu;
const StatefulToolbarMenu = (props) => {
const { state, menu, disabled, more, before, after, pane = true, onPopupClose, onClickAway } = props;
state.props = props;
const openPanel = state.openPanel;
const selected = (0, useBehaviorSubject_1.useBehaviorSubject)(openPanel.selected$);
const popupContextValue = React.useMemo(() => ({
close: () => {
openPanel.onClick('');
onPopupClose?.();
},
}), [onPopupClose]);
const handleClickAway = React.useCallback(() => {
if (onClickAway && !selected)
onClickAway();
openPanel.onClick('');
}, [onClickAway, selected]);
React.useEffect(() => {
const onKeydown = (event) => {
if (event.key === 'Escape') {
event.stopPropagation();
event.preventDefault();
const success = openPanel.deselect();
if (!success)
state.props.onEsc?.();
}
};
document.addEventListener('keydown', onKeydown);
return () => {
document.removeEventListener('keydown', onKeydown);
};
}, [openPanel]);
const nodes = [];
const children = menu.children;
const length = children?.length ?? 0;
const max = menu?.maxToolbarItems ?? 1e3;
let cnt = 0;
for (let i = 0; i < length && cnt < max; i++) {
const child = children[i];
const key = child.id || child.name || i;
if (child.sep || child.sepBefore) {
nodes.push(React.createElement(ToolbarSep_1.ToolbarSep, { key: key + '-sep', line: true }));
if (!child.sepBefore)
continue;
}
if (child.expand && !child?.children?.[0]?.iconBig) {
cnt++;
nodes.push(React.createElement(ExpandChildren_1.ExpandChildren, { key: key, item: child, disabled: disabled }));
}
else if (typeof child.expandChild === 'number') {
cnt++;
const subChild = child.children?.[child.expandChild];
if (!subChild)
continue;
nodes.push(React.createElement(ExpandSubChildren_1.ExpandSubChildren, { key: key, item: subChild, parent: child, disabled: disabled }));
}
else {
cnt++;
nodes.push(React.createElement(ToolbarMenuItem_1.ToolbarMenuItem, { key: key, item: child, disabled: disabled }));
}
}
const showMore = length > max && !!more;
let element = (React.createElement(context_2.context.Provider, { value: popupContextValue },
React.createElement(context_1.context.Provider, { value: state },
before,
nodes,
after,
showMore && React.createElement(ToolbarSep_1.ToolbarSep, { line: true }),
showMore && React.createElement(ToolbarExpandBtn_1.ToolbarExpandBtn, { ...more, disabled: disabled }))));
if (pane) {
element = React.createElement(ToolbarPane_1.ToolbarPane, { ...(typeof pane === 'object' ? pane : {}) }, element);
}
return React.createElement(ClickAway_1.ClickAway, { onClickAway: handleClickAway }, element);
};
exports.StatefulToolbarMenu = StatefulToolbarMenu;