@kwiz/fluentui/dist/controls/toolbar.js

KWIZ common controls for FluentUI

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Toolbar, ToolbarDivider, ToolbarGroup } from '@fluentui/react-components';
import { KnownClassNames } from '../styles/styles';
import { KWIZOverflow } from './kwizoverflow';
export const ToolbarEX = (props) => {
    let elements = [];
    props.buttonGroups.forEach((group, groupIndex) => {
        group.forEach((button, buttonIndex) => {
            const mapped = Object.assign(Object.assign({}, button), { id: `m${groupIndex}-${buttonIndex}` });
            if (buttonIndex === 0 && groupIndex > 0 && props.buttonGroups[groupIndex - 1].length > 0) {
                //first button, not first group, and previous group was not empty
                //add divider
                mapped.overflowElement = mapped.overflowElement || mapped.elm;
                //this way if button rendes it is with the divider, but if it is in overflow - there will be no divider
                mapped.elm = _jsxs("span", { children: [_jsx(ToolbarDivider, { style: { display: 'inline-flex' } }), mapped.elm] });
            }
            elements.push(mapped);
        });
    });
    return (_jsx(KWIZOverflow, { className: KnownClassNames.printHide, items: elements, getKey: e => e.id, renderItem: (e, i, overflow) => overflow && e.overflowElement || e.elm, getPriority: e => e.priority || -1, groupWrapper: children => _jsxs(Toolbar, { "aria-label": "Default", style: { justifyContent: "space-between" }, children: [_jsx(ToolbarGroup, { role: "presentation", children: children }), _jsx(ToolbarGroup, { role: "presentation", children: props.sideButtons })] }) }));
};
//# sourceMappingURL=toolbar.js.map