@progress/sitefinity-nextjs-sdk/widgets/navigation/accordion.js

Provides OOB widgets developed using the Next.js framework, which includes an abstraction layer for Sitefinity communication. Additionally, it offers an expanded API, typings, and tools for further development and integration.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { getClass } from './utils';
import { AccordionLink } from './client/accordion-link';
import { AccordionGroupLink } from './client/accordion-group-link';
import { classNames } from '../../editor/utils/classNames';
import { getUniqueId } from '../../editor/utils/getUniqueId';
import { PageType } from '../../rest-sdk/dto/navigation-item';
const getAccordionButtonStateClass = (node) => {
    if (!node.IsCurrentlyOpened && !node.HasChildOpen) {
        return 'collapsed';
    }
    return null;
};
const getAccordionContentStateClass = (node) => {
    if (node.IsCurrentlyOpened || node.HasChildOpen) {
        return 'show';
    }
    return null;
};
const isActive = (node) => {
    if (node.IsCurrentlyOpened || node.HasChildOpen) {
        return 'true';
    }
    return 'false';
};
export function renderSubLevelRecursive(node, nested = false) {
    if (node.ChildNodes.length === 0) {
        return null;
    }
    return (_jsx("ul", { className: classNames('nav', 'flex-column', { 'ms-3': nested }), children: node.ChildNodes.map((childNode, idx) => {
            return (_jsxs("li", { className: "nav-item", children: [_jsx("a", { className: classNames('nav-link', 'd-inline-block', getClass(childNode)), href: childNode.Url, target: childNode.LinkTarget, children: childNode.Title }), renderSubLevelRecursive(childNode, true)] }, idx));
        }) }));
}
export function Accordion({ navCustomAttributes, items, attributes }) {
    let accordionId = getUniqueId('accordion');
    return (_jsx("div", { ...attributes, children: _jsx("nav", { className: "accordion", id: accordionId, ...navCustomAttributes, children: items.map((node, idx) => {
                const headingId = getUniqueId(`heading-${node.Key}`);
                const collapseId = getUniqueId(`collapse-${node.Key}`);
                return (_jsxs("div", { className: "accordion-item", children: [node.ChildNodes.length === 0 && _jsx("h2", { className: "accordion-header", children: _jsx("span", { className: classNames('accordion-button', 'empty', getAccordionButtonStateClass(node)), children: _jsx("a", { title: node.Title, className: "nav-link d-inline-block p-0 text-truncate", href: node.Url, target: node.LinkTarget, children: node.Title }) }) }), node.ChildNodes.length > 0 && [
                            _jsxs("h2", { className: "accordion-header sc-accordion-header", id: headingId, children: [_jsx("button", { "aria-label": `Expander for parent page ${node.Title}`, className: classNames('accordion-button', getAccordionButtonStateClass(node)), type: "button", "data-bs-toggle": "collapse", "data-bs-target": `#${collapseId}`, "aria-expanded": isActive(node), "aria-controls": collapseId, children: node.PageSiteMapNode.PageType === PageType.Group &&
                                            _jsx(AccordionGroupLink, { ...node }) }), node.PageSiteMapNode.PageType !== PageType.Group &&
                                        _jsx(AccordionLink, { ...node })] }, node.Key),
                            _jsx("div", { id: collapseId, className: classNames('accordion-collapse', 'collapse', getAccordionContentStateClass(node)), "aria-labelledby": headingId, "data-bs-parent": `#${accordionId}`, children: _jsx("div", { className: "accordion-body", children: renderSubLevelRecursive(node) }) }, node.Key + idx)
                        ]] }, node.Key));
            }) }) }));
}