mui-extended/dist/TreeMenuWithLinks.js

Extended UI Components built on Material UI

import { __assign } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { RichTreeView, TreeItem2, TreeItem2Content, useTreeItem2Utils } from "@mui/x-tree-view";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { createRef, forwardRef } from "react";
var trimSlashes = function (str) {
    if (str.startsWith("/")) {
        str = str.substring(1);
    }
    if (str.endsWith("/")) {
        str = str.substring(0, str.length - 1);
    }
    return str;
};
var withNextLink = function (id, iconRef, handleExpansion) {
    var TreeItemContentWithNextLink = function (props) {
        var router = useRouter();
        var ref = createRef();
        var link = "/" + id.split(".").join("/");
        return (_jsx(Link, { href: link, style: { textDecoration: "none", color: "inherit" }, children: _jsx(TreeItem2Content, __assign({}, props, { ref: ref, onClick: function (e) {
                    var isExpandIcon = false;
                    var target = e.target;
                    while (target && target != ref.current) {
                        if (target == iconRef.current) {
                            isExpandIcon = true;
                            break;
                        }
                        target = target.parentElement;
                    }
                    e.preventDefault();
                    e.stopPropagation();
                    if (isExpandIcon) {
                        handleExpansion(e);
                    }
                    else {
                        router.push(link);
                    }
                } })) }));
    };
    return TreeItemContentWithNextLink;
};
var improveLabel = function (label, improve) {
    if (improve) {
        label = label
            .split(/(-|_)/)
            .filter(function (c) { return c != "-" && c != "_"; })
            .map(function (s) { return s.charAt(0).toLocaleUpperCase() + s.substring(1); })
            .join(" ");
    }
    return label;
};
var CustomTreeItem = forwardRef(function CustomTreeItem(props, ref) {
    var _a;
    var _b = useTreeItem2Utils({
        itemId: props.itemId,
        children: props.children
    }), publicAPI = _b.publicAPI, interactions = _b.interactions;
    var item = publicAPI.getItem(props.itemId);
    var iconRef = createRef();
    return (_jsx(TreeItem2, __assign({}, props, { ref: ref, slots: {
            content: item.hasLink
                ? withNextLink((_a = props.itemId) !== null && _a !== void 0 ? _a : "", iconRef, interactions.handleExpansion)
                : TreeItem2Content
        }, slotProps: {
            collapseIcon: { ref: iconRef },
            expandIcon: { ref: iconRef }
        } })));
});
export var TreeMenuWithNextLinks = function (_a) {
    var links = _a.links, improveLabels = _a.improveLabels, RichTreeViewProps = _a.RichTreeViewProps;
    var topItems = convertToRichTreeViewItems(links, improveLabels);
    return (_jsx(RichTreeView, __assign({}, RichTreeViewProps, { items: topItems, slots: { item: CustomTreeItem } })));
};
var convertToRichTreeViewItems = function (links, improveLabels) {
    var _a, _b;
    var itemsMap = {};
    for (var _i = 0, links_1 = links; _i < links_1.length; _i++) {
        var link = links_1[_i];
        var _link = typeof link == "string" ? { link: link } : link;
        if (_link.label === undefined) {
            _link.label = _link.link;
        }
        _link.link = trimSlashes(_link.link);
        _link.label = trimSlashes(_link.label);
        var linkSegments = _link.link.split("/");
        var labelSegments = _link.label.split("/");
        if (labelSegments.length < linkSegments.length) {
            labelSegments.unshift.apply(labelSegments, new Array(linkSegments.length - labelSegments.length).fill(null)); // insert null at start
        }
        else if (labelSegments.length > linkSegments.length) {
            var noOfExtraLabels = labelSegments.length - linkSegments.length;
            for (var i = 0; i < noOfExtraLabels; i++) {
                labelSegments.shift();
            }
        }
        for (var i = 0; i < linkSegments.length; i++) {
            var id = linkSegments.slice(0, i + 1).join(".");
            var label = (_a = labelSegments[i]) !== null && _a !== void 0 ? _a : linkSegments[i];
            if (itemsMap[id] === undefined) {
                itemsMap[id] = {
                    id: id,
                    label: label,
                    children: []
                };
            }
            itemsMap[id].label = label;
            if (improveLabels) {
                itemsMap[id].label = improveLabel(itemsMap[id].label, improveLabels);
            }
            if (i > 0) {
                var parentId = linkSegments.slice(0, i).join(".");
                var parentChildren = (_b = itemsMap[parentId].children) !== null && _b !== void 0 ? _b : [];
                parentChildren.push(itemsMap[id]);
            }
            if (i == linkSegments.length - 1) {
                itemsMap[id].hasLink = true;
            }
        }
    }
    // remove duplicate items in children
    Object.values(itemsMap).forEach(function (item) {
        var _a;
        if ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) {
            item.children = Object.values(Object.fromEntries(item.children.map(function (c) { return [c.id, c]; })));
        }
    });
    return Object.values(itemsMap).filter(function (i) { return !i.id.includes("."); });
};