@vectara/vectara-ui
Version:
Vectara's design system, codified as a React and Sass component library
39 lines (38 loc) • 2.82 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from "react";
import { BiChevronDown, BiChevronUp } from "react-icons/bi";
import { VuiIcon } from "../../icon/Icon";
import { VuiIconButton } from "../../button/IconButton";
import { VuiAppSideNavLink } from "./AppSideNavLink";
export const buildTree = (items) => {
return _jsx("div", Object.assign({ className: "vuiAppSideNavTree" }, { children: buildTreeItems(items) }));
};
const buildTreeItems = (items) => {
return items.map((_a) => {
var { name, pages, path, iconBefore, iconAfter, isActive } = _a, rest = __rest(_a, ["name", "pages", "path", "iconBefore", "iconAfter", "isActive"]);
if (path) {
if (pages) {
const childPages = buildTreeItems(pages);
return (_jsx(AppSideNavTreeSection, Object.assign({ path: path, name: name, iconBefore: iconBefore, iconAfter: iconAfter, isActive: isActive }, rest, { children: childPages }), path !== null && path !== void 0 ? path : name));
}
return (_jsx(VuiAppSideNavLink, Object.assign({ path: path, name: name, iconBefore: iconBefore, iconAfter: iconAfter, isActive: isActive }, rest), path !== null && path !== void 0 ? path : name));
}
return (_jsx("div", Object.assign({ className: "vuiAppSideNavTreeSection__subTitle" }, rest, { children: name }), name));
});
};
const AppSideNavTreeSection = (_a) => {
var { name, path, children, iconBefore, iconAfter, isActive } = _a, rest = __rest(_a, ["name", "path", "children", "iconBefore", "iconAfter", "isActive"]);
const [isOpen, setIsOpen] = useState(true);
return (_jsxs("div", Object.assign({ className: "vuiAppSideNavTreeSection" }, { children: [_jsx(VuiAppSideNavLink, Object.assign({ path: path !== null && path !== void 0 ? path : "/", name: name, iconBefore: iconBefore, iconAfter: iconAfter, isActive: isActive }, rest)), _jsx(VuiIconButton, { "aria-label": isOpen ? "Hide section" : "Show section", size: "s", className: "vuiAppSideNavTreeToggleButton", onClick: () => setIsOpen(!isOpen), color: "neutral", icon: _jsx(VuiIcon, { children: isOpen ? _jsx(BiChevronUp, {}) : _jsx(BiChevronDown, {}) }) }), isOpen && _jsx("div", Object.assign({ className: "vuiAppSideNavTreeChildren" }, { children: children }))] })));
};