@kwiz/fluentui
Version:
KWIZ common controls for FluentUI
48 lines • 3.05 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Menu, MenuButton, MenuItem, MenuList, MenuPopover, MenuTrigger, Overflow, OverflowItem, useIsOverflowItemVisible, useOverflowMenu } from "@fluentui/react-components";
import { MoreHorizontalFilled } from "@fluentui/react-icons";
import { isNumber } from '@kwiz/common';
import { useKWIZFluentContext } from "../helpers/context-internal";
const OverflowMenu = (props) => {
var _a, _b, _c, _d;
const ctx = useKWIZFluentContext();
const { ref, isOverflowing, overflowCount } = useOverflowMenu();
if (!isOverflowing) {
return null;
}
let menu = _jsxs(Menu, { mountNode: ctx.mountNode, children: [_jsx(MenuTrigger, { disableButtonEnhancement: true, children: props.menuTrigger
? props.menuTrigger(props.menuRef || ref, overflowCount)
: _jsx(MenuButton, { icon: _jsx(MoreHorizontalFilled, {}), ref: props.menuRef || ref, "aria-label": ((_b = (_a = ctx.strings) === null || _a === void 0 ? void 0 : _a.more_param) === null || _b === void 0 ? void 0 : _b.call(_a, { cap: true, param: ((_d = (_c = ctx.strings) === null || _c === void 0 ? void 0 : _c.items) === null || _d === void 0 ? void 0 : _d.call(_c)) || "items" })) || "More items", appearance: "subtle" }) }), _jsx(MenuPopover, { children: _jsx(MenuList, { children: props.items.map((item, index) => (_jsx(OverflowMenuItem, Object.assign({}, props, { item: item, index: index }), props.getKey(item, index)))) }) })] });
return (props.menuWrapper
? props.menuWrapper(menu)
: menu);
};
const OverflowMenuItem = (props) => {
const isVisible = useIsOverflowItemVisible(props.getKey(props.item, props.index));
if (isVisible) {
return null;
}
return (_jsx(MenuItem, { children: props.renderItem(props.item, props.index, true) }, props.getKey(props.item, props.index)));
};
export const KWIZOverflow = (props) => {
let content = [];
let addMenu = () => {
if (menuIndex >= 0)
content.splice(menuIndex, 0, _jsx(OverflowMenu, Object.assign({}, props), "overflow_menu"));
else
content.push(_jsx(OverflowMenu, Object.assign({}, props), "overflow_menu"));
};
let menuIndex = -1;
props.items.forEach((item, index) => {
//add the menu before the first item with priority
let priority = props.getPriority ? props.getPriority(item, index) : undefined;
if (isNumber(priority) && priority > 0)
menuIndex = index;
content.push(_jsx(OverflowItem, { id: props.getKey(item, index), priority: priority, children: props.renderItem(item, index) }, props.getKey(item, index)));
});
addMenu();
return (_jsx(Overflow, { minimumVisible: 2, padding: 60, children: _jsx("div", { style: { overflow: "hidden" }, className: props.className, children: props.groupWrapper
? props.groupWrapper(content)
: content }) }, `overflow_${props.items.length}`));
};
//# sourceMappingURL=kwizoverflow.js.map