@progress/kendo-react-layout
Version:
React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package
131 lines (130 loc) • 4.5 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import * as r from "react";
import i from "prop-types";
import { useDir as T, classNames as M, kendoThemeMaps as O, dispatchEvent as C } from "@progress/kendo-react-common";
import { BreadcrumbListItem as w } from "./BreadcrumbListItem.mjs";
import { BreadcrumbDelimiter as x } from "./BreadcrumbDelimiter.mjs";
import { BreadcrumbLink as B } from "./BreadcrumbLink.mjs";
import { BreadcrumbOrderedList as R } from "./BreadcrumbOrderedList.mjs";
const v = r.forwardRef((e, E) => {
const d = r.useRef(null), n = r.useRef(null), f = r.useMemo(
() => e.breadcrumbOrderedList || R,
[e.breadcrumbOrderedList]
), g = r.useMemo(
() => e.breadcrumbListItem || w,
[e.breadcrumbListItem]
), S = r.useMemo(
() => e.breadcrumbDelimiter || x,
[e.breadcrumbDelimiter]
), F = r.useMemo(() => e.breadcrumbLink || B, [e.breadcrumbLink]), D = r.useCallback(() => {
n.current && n.current.focus();
}, [n]), h = r.useMemo(() => e.disabled || !1, [e.disabled]);
r.useImperativeHandle(d, () => ({
element: n.current,
focus: D,
props: e
})), r.useImperativeHandle(E, () => d.current);
const u = T(n, e.dir), L = (t) => {
d.current && C(e.onItemSelect, t, t.target, { id: t.target.id });
}, y = (t) => {
d.current && C(e.onKeyDown, t, t.target, { id: t.target.id });
}, I = e.valueField || o.valueField, k = e.iconField || o.iconField, c = e.iconClassField || o.iconClassField, m = e.textField || o.textField, b = e.size || "medium";
return /* @__PURE__ */ r.createElement(
"nav",
{
"aria-label": e.ariaLabel,
id: e.id,
style: e.style,
ref: n,
dir: u,
className: M(
"k-breadcrumb k-breadcrumb-wrap",
{
"k-rtl": u === "rtl",
"k-disabled": h,
"k-breadcrumb-md": !e.size,
[`k-breadcrumb-${O.sizeMap[b] || b}`]: b
},
e.className
)
},
/* @__PURE__ */ r.createElement(f, { rootItem: !0 }, /* @__PURE__ */ r.createElement(r.Fragment, null, e.data.map((t, a, l) => {
const s = t[I];
if (a === 0)
return /* @__PURE__ */ r.createElement(g, { key: s, isFirstItem: !0, isLastItem: l.length - 1 === a }, /* @__PURE__ */ r.createElement(
F,
{
isLast: l.length - 1 === a,
isFirst: !0,
id: String(s),
icon: t[k] || void 0,
iconClass: t[c] ? String(t[c]) : void 0,
text: t[m] ? String(t[m]) : void 0,
disabled: t.disabled || !1,
onItemSelect: L,
onKeyDown: y,
...e
}
));
}))),
/* @__PURE__ */ r.createElement(f, { rootItem: !1 }, /* @__PURE__ */ r.createElement(r.Fragment, null, e.data.map((t, a, l) => {
const s = t[I];
if (a !== 0)
return /* @__PURE__ */ r.createElement(g, { key: s, isFirstItem: !1, isLastItem: l.length - 1 === a }, /* @__PURE__ */ r.createElement(S, { dir: u }), /* @__PURE__ */ r.createElement(
F,
{
isLast: l.length - 1 === a,
isFirst: !1,
id: String(s),
icon: t[k] || void 0,
iconClass: t[c] ? String(t[c]) : void 0,
text: t[m] ? String(t[m]) : void 0,
disabled: t.disabled || !1,
onItemSelect: L,
onKeyDown: y,
...e
}
));
})))
);
}), K = {
id: i.string,
style: i.object,
className: i.string,
breadcrumbOrderedList: i.elementType,
breadcrumbListItem: i.elementType,
breadcrumbDelimiter: i.elementType,
breadcrumbLink: i.elementType,
data: i.arrayOf(
i.shape({
id: i.string,
text: i.string,
icon: i.any,
iconClass: i.string
})
),
dir: i.oneOf(["ltr", "rtl"]),
disabled: i.bool,
valueField: i.string,
textField: i.string,
iconField: i.string,
iconClassField: i.string,
onItemSelect: i.func,
ariaLabel: i.string
}, o = {
valueField: "id",
textField: "text",
iconField: "icon",
iconClassField: "iconClass"
};
v.displayName = "KendoReactBreadcrumb";
v.propTypes = K;
export {
v as Breadcrumb
};