@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
159 lines • 10 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Breadcrumbs = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
/**
*
* Copyright (c) "Neo4j"
* Neo4j Sweden AB [http://neo4j.com]
*
* This file is part of Neo4j.
*
* Neo4j is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
// NPM
const react_1 = __importStar(require("react"));
// Local
const defaultImports_1 = require("../_common/defaultImports");
const context_menu_1 = require("../context-menu");
const icon_button_1 = require("../icon-button");
const icons_1 = require("../icons");
const typography_1 = require("../typography");
const BreadcrumbsBaseItem = react_1.default.forwardRef(function BreadcrumbsBaseItem({ as, children = ((0, jsx_runtime_1.jsx)(typography_1.Typography, { as: "span", variant: "body-medium", children: "Home" })), className, href, isCurrentPage = false, onClick, htmlAttributes, }, ref) {
const Component = as || 'a';
const classes = (0, defaultImports_1.classNames)('ndl-breadcrumbs-base-item-link', className, {
'ndl-breadcrumbs-base-item-link-active': isCurrentPage,
});
return ((0, jsx_runtime_1.jsx)("li", { className: "ndl-breadcrumbs-base-item", ref: ref, children: (0, jsx_runtime_1.jsx)(Component, Object.assign({ role: "button", tabIndex: 0, "aria-label": "Home", className: classes, href: href, onClick: (event) => {
if (onClick)
onClick(event, href);
} }, htmlAttributes, { children: children })) }));
});
const BreadcrumbsGroupItem = ({ as, children, className, style, htmlAttributes, }) => {
const Component = as || 'li';
const classes = (0, defaultImports_1.classNames)('ndl-breadcrumbs-group-item', className);
return ((0, jsx_runtime_1.jsx)(Component, Object.assign({ className: classes, style: style }, htmlAttributes, { children: (0, jsx_runtime_1.jsx)("ol", { children: children }) })));
};
BreadcrumbsGroupItem.displayName = 'Breadcrumbs.GroupItem';
const BreadcrumbsItem = ({ as, children, className, hasSeparator = true, href, isCurrentPage = false, onClick, htmlAttributes, }) => {
const Component = as || 'a';
const isInteractable = Component === 'button' || Component === 'a';
const listItemClasses = (0, defaultImports_1.classNames)('ndl-breadcrumbs-item', {
'ndl-breadcrumbs-separator': hasSeparator,
});
const linkClasses = (0, defaultImports_1.classNames)('ndl-breadcrumbs-item-link', {
'ndl-breadcrumbs-item-link-interactable': isInteractable,
'ndl-breadcrumbs-item-link-active': isCurrentPage,
}, className);
return ((0, jsx_runtime_1.jsx)("li", { className: listItemClasses, children: (0, jsx_runtime_1.jsx)(typography_1.Typography, { as: Component, variant: "body-medium", className: linkClasses, href: href, htmlAttributes: Object.assign({ role: 'button', tabIndex: 0, onClick: (event) => {
if (onClick)
onClick(event, href);
}, 'aria-current': isCurrentPage ? 'page' : undefined }, htmlAttributes), children: children }) }));
};
BreadcrumbsItem.displayName = 'Breadcrumbs.Item';
const BreadcrumbsItemMenu = ({ children, className, isOpen = false, onClick, onClose, htmlAttributes, }) => {
const buttonRef = (0, react_1.useRef)(null);
const [isItemMenuOpen, setIsItemMenuOpen] = (0, react_1.useState)(isOpen);
(0, react_1.useEffect)(() => {
setIsItemMenuOpen(isOpen);
}, [isOpen]);
const classes = (0, defaultImports_1.classNames)('ndl-breadcrumbs-item-menu-button', className);
return ((0, jsx_runtime_1.jsxs)("li", { className: "ndl-breadcrumbs-item-menu", children: [(0, jsx_runtime_1.jsx)(icon_button_1.IconButton, { as: "button",
/* Overridable */
ariaLabel: "breadcrumbs item menu", isClean: true, isGrouped: true, size: "small",
/* Non-overridable */
className: classes, onClick: (event) => {
setIsItemMenuOpen(true);
if (onClick)
onClick(event);
}, ref: buttonRef, htmlAttributes: Object.assign({ 'aria-haspopup': true }, htmlAttributes), children: (0, jsx_runtime_1.jsx)(icons_1.ChevronDownIconOutline, {}) }), (0, jsx_runtime_1.jsx)(context_menu_1.Menu, { anchorRef: buttonRef, onClose: (event) => {
setIsItemMenuOpen(false);
if (onClose)
onClose(event);
}, isOpen: isItemMenuOpen, children: (0, jsx_runtime_1.jsx)(context_menu_1.Menu.Items, { children: children }) })] }));
};
BreadcrumbsItemMenu.displayName = 'Breadcrumbs.ItemMenu';
const BreadcrumbsEllipsisMenu = ({ as, children, className, isOpen = false, onClick, onClose, onKeyDown, htmlAttributes, }) => {
const ellipsisButtonRef = (0, react_1.useRef)(null);
const [isEllipsisMenuOpen, setIsEllipsisMenuOpen] = (0, react_1.useState)(isOpen);
const Component = as || 'span';
const classes = (0, defaultImports_1.classNames)('ndl-breadcrumbs-ellipsis-menu-button', className);
return ((0, jsx_runtime_1.jsxs)("li", { className: "ndl-breadcrumbs-ellipsis-menu ndl-breadcrumbs-separator", children: [(0, jsx_runtime_1.jsx)(Component, Object.assign({ "aria-controls": isEllipsisMenuOpen ? 'ellipsis-menu' : undefined, "aria-expanded": isEllipsisMenuOpen ? 'true' : undefined, "aria-haspopup": "true", role: "button", tabIndex: 0, className: classes, onClick: (event) => {
setIsEllipsisMenuOpen(true);
if (onClick)
onClick(event);
}, onKeyDown: (event) => {
if (event.key === 'Enter')
setIsEllipsisMenuOpen(true);
if (onKeyDown)
onKeyDown(event);
}, ref: ellipsisButtonRef }, htmlAttributes, { children: "\u2026" })), (0, jsx_runtime_1.jsx)(context_menu_1.Menu, { anchorRef: ellipsisButtonRef, onClose: (event) => {
setIsEllipsisMenuOpen(false);
if (onClose)
onClose(event);
}, isOpen: isEllipsisMenuOpen, children: (0, jsx_runtime_1.jsx)(context_menu_1.Menu.Items, { children: children }) })] }));
};
const BreadcrumbsMenuItem = ({ as, children, className, href, isCurrentPage = false, onClick, htmlAttributes, }) => {
const linkClasses = (0, defaultImports_1.classNames)('ndl-breadcrumbs-item-link', className, {
'ndl-breadcrumbs-item-link-active': isCurrentPage,
});
const Component = as || 'span';
return ((0, jsx_runtime_1.jsx)(context_menu_1.Menu.Item, { as: Component, className: "ndl-breadcrumbs-menu-item", onClick: (event) => {
if (onClick)
onClick(event, href);
}, title: href ? ((0, jsx_runtime_1.jsx)(typography_1.Typography, { as: Component, variant: "body-medium", className: linkClasses, href: href, htmlAttributes: Object.assign({ role: 'button', tabIndex: 0, 'aria-current': isCurrentPage ? 'page' : undefined }, htmlAttributes), children: children })) : ((0, jsx_runtime_1.jsx)(typography_1.Typography, { as: Component, variant: "body-medium",
/* Non-overridable */
className: linkClasses, htmlAttributes: Object.assign({ tabIndex: -1 }, htmlAttributes), children: children })) }));
};
BreadcrumbsMenuItem.displayName = 'Breadcrumbs.MenuItem';
const BreadcrumbsComponent = ({ as, children, className, htmlAttributes, }) => {
const Component = as || 'nav';
const classes = (0, defaultImports_1.classNames)('ndl-breadcrumbs ndl-breadcrumbs-old', className);
return ((0, jsx_runtime_1.jsx)(Component, Object.assign({ "aria-label": "Breadcrumb", className: classes }, htmlAttributes, { children: (0, jsx_runtime_1.jsx)("ol", { children: children }) })));
};
BreadcrumbsComponent.displayName = 'Breadcrumbs';
// Issue with TypeScript forwardRef and subcomponents: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/34757#issuecomment-894053907
const Breadcrumbs = Object.assign(BreadcrumbsComponent, {
BaseItem: BreadcrumbsBaseItem,
GroupItem: BreadcrumbsGroupItem,
Item: BreadcrumbsItem,
ItemMenu: BreadcrumbsItemMenu,
EllipsisMenu: BreadcrumbsEllipsisMenu,
MenuItem: BreadcrumbsMenuItem,
});
exports.Breadcrumbs = Breadcrumbs;
//# sourceMappingURL=Breadcrumbs.js.map