devexpress-reporting-react
Version:
DevExpress Reporting React provides the capability to develop a reporting application to create and customize reports.
20 lines (19 loc) • 1.52 kB
JavaScript
import React from 'react';
import Template from '../../../core/Template';
import useDxMutationObserver from '../../../../hooks/dxMutationObserver';
const ClickableCrumb = ({ item, handleClick }) => (React.createElement(React.Fragment, null,
React.createElement("a", { className: "dxrd-breadcrump-link dxrd-breadcrumb-item dxd-text-accented dx-accessibility-border-accented", onClick: handleClick },
React.createElement("span", null, item.displayText)),
React.createElement(Template, { className: "dxrd-breadcrumb-item-seperator", template: "dxrd-svg-preview-breadcrumbs_seperator" })));
const CurrentCrumb = ({ item }) => (React.createElement("a", { className: "dxrd-breadcrumb-item dxd-text-primary dx-accessibility-border-accented", "aria-current": "location" },
React.createElement("span", null, item.displayText)));
const Breadcrumbs = ({ data }) => {
if (data.listItems.length <= 1)
return null;
const dxMutationObserverRef = React.useRef();
useDxMutationObserver(dxMutationObserverRef, data.keyboardHelper);
return (React.createElement("div", { className: "dxrd-breadcrumbs-wrapper", ref: dxMutationObserverRef, "aria-label": "Breadcrumbs", role: "navigation" }, data.listItems.map((item, index) => data.listItems.length === (index + 1)
? React.createElement(CurrentCrumb, { key: index, item: item })
: React.createElement(ClickableCrumb, { key: index, item: item, handleClick: () => data.onClick(item.position) }))));
};
export default Breadcrumbs;