@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
97 lines • 7.19 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ListToolbar = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var react_components_1 = require("@fluentui/react-components");
var react_icons_1 = require("@fluentui/react-icons");
var useListToolbarStyles_1 = require("./useListToolbarStyles");
var useOverflowIndex_1 = require("./useOverflowIndex");
var ToolbarItemRenderer_1 = require("./ToolbarItemRenderer");
var helpers_1 = require("./helpers");
/* ------------------------------------------------------------------ */
/* ListToolbar — main component */
/* ------------------------------------------------------------------ */
var ListToolbar = function (_a) {
var items = _a.items, _b = _a.farItems, farItems = _b === void 0 ? [] : _b, _c = _a.isLoading, isLoading = _c === void 0 ? false : _c, _d = _a.ariaLabel, ariaLabel = _d === void 0 ? 'Toolbar' : _d, totalCount = _a.totalCount, className = _a.className, _e = _a.showGroupDividers, showGroupDividers = _e === void 0 ? true : _e;
var styles = (0, useListToolbarStyles_1.useListToolbarStyles)();
var toolbarRef = React.useRef(null);
var leftRef = React.useRef(null);
var rightRef = React.useRef(null);
var measureRef = React.useRef(null);
// ---- Separate regular vs far items ----
var regularItems = React.useMemo(function () { return items.filter(function (i) { return !i.isFarItem && i.visible !== false; }); }, [items]);
var allFarItems = React.useMemo(function () {
var fromItems = items.filter(function (i) { return i.isFarItem && i.visible !== false; });
var fromFar = farItems.filter(function (i) { return i.visible !== false; });
return tslib_1.__spreadArray(tslib_1.__spreadArray([], fromItems, true), fromFar, true);
}, [items, farItems]);
var groupedFarItems = React.useMemo(function () { return (0, helpers_1.groupItems)(allFarItems); }, [allFarItems]);
// ---- Build flat list of regular items (items + dividers) ----
var flatItems = React.useMemo(function () { return (0, helpers_1.flattenWithDividers)(regularItems, showGroupDividers); }, [regularItems, showGroupDividers]);
// ---- Custom overflow detection ----
var overflowIndex = (0, useOverflowIndex_1.useOverflowIndex)(toolbarRef, rightRef, measureRef, flatItems.length);
// Determine which actual items (not dividers) are hidden
var visibleItemKeys = React.useMemo(function () {
var keys = new Set();
for (var i = 0; i < overflowIndex && i < flatItems.length; i++) {
if (flatItems[i].type === 'item') {
keys.add(flatItems[i].key);
}
}
return keys;
}, [flatItems, overflowIndex]);
var hiddenItems = React.useMemo(function () { return regularItems.filter(function (item) { return !visibleItemKeys.has(item.key); }); }, [regularItems, visibleItemKeys]);
var hasOverflow = hiddenItems.length > 0;
// ---- Render far items ----
var renderFarGroup = function (groupItemsList, groupIndex, isLastGroup) {
var elements = [];
for (var _i = 0, groupItemsList_1 = groupItemsList; _i < groupItemsList_1.length; _i++) {
var item = groupItemsList_1[_i];
if (item.dividerBefore) {
elements.push(React.createElement(react_components_1.ToolbarDivider, { key: "".concat(item.key, "-divider-before") }));
}
elements.push(React.createElement(ToolbarItemRenderer_1.ToolbarItemRenderer, { key: item.key, item: item, isLoading: isLoading, itemClass: styles.farItemButton, labelClass: styles.farItemLabel }));
if (item.dividerAfter) {
elements.push(React.createElement(react_components_1.ToolbarDivider, { key: "".concat(item.key, "-divider-after") }));
}
}
if (showGroupDividers && !isLastGroup) {
elements.push(React.createElement(react_components_1.ToolbarDivider, { key: "group-divider-".concat(groupIndex) }));
}
return elements;
};
return (React.createElement("div", { ref: toolbarRef, role: "toolbar", "aria-label": ariaLabel, className: "".concat(styles.toolbar, " ").concat(className || '') },
React.createElement("div", { ref: measureRef, className: styles.measureSection, "aria-hidden": "true" }, flatItems.map(function (flat) {
if (flat.type === 'divider') {
return React.createElement(react_components_1.ToolbarDivider, { key: flat.key });
}
return (React.createElement(ToolbarItemRenderer_1.ToolbarItemRenderer, { key: flat.key, item: flat.item, isLoading: isLoading, itemClass: styles.toolbarItem }));
})),
React.createElement("div", { ref: leftRef, className: styles.leftSection },
flatItems.map(function (flat, idx) {
if (idx >= overflowIndex)
return null;
if (flat.type === 'divider') {
return React.createElement(react_components_1.ToolbarDivider, { key: flat.key });
}
return (React.createElement(ToolbarItemRenderer_1.ToolbarItemRenderer, { key: flat.key, item: flat.item, isLoading: isLoading, itemClass: styles.toolbarItem }));
}),
hasOverflow && (React.createElement(react_components_1.Menu, null,
React.createElement(react_components_1.MenuTrigger, { disableButtonEnhancement: true },
React.createElement(react_components_1.Tooltip, { content: "".concat(hiddenItems.length, " more actions"), relationship: "label" },
React.createElement(react_components_1.ToolbarButton, { className: styles.overflowButton, icon: React.createElement(react_icons_1.MoreHorizontalRegular, null), "aria-label": "".concat(hiddenItems.length, " more actions") }))),
React.createElement(react_components_1.MenuPopover, null,
React.createElement(react_components_1.MenuList, null, hiddenItems.map(function (item) { return (React.createElement(react_components_1.MenuItem, { key: item.key, icon: item.icon, disabled: item.disabled || isLoading, onClick: item.onClick }, item.label || item.tooltip || item.key)); }))))),
totalCount !== undefined && totalCount > 0 && (React.createElement(react_components_1.Badge, { appearance: "filled", color: "informative", className: styles.countBadge },
React.createElement(react_components_1.Text, { size: 200 },
totalCount,
" items")))),
React.createElement("div", { ref: rightRef, className: styles.rightGroup }, allFarItems.length > 0 && (React.createElement("div", { className: styles.farItemsContainer }, Array.from(groupedFarItems.entries()).map(function (_a, groupIndex) {
var _groupName = _a[0], groupItemsList = _a[1];
return renderFarGroup(groupItemsList, groupIndex, groupIndex === groupedFarItems.size - 1);
}))))));
};
exports.ListToolbar = ListToolbar;
exports.default = exports.ListToolbar;
//# sourceMappingURL=ListToolbarControl.js.map