@progress/kendo-react-layout
Version:
React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package
93 lines (92 loc) • 2.49 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2026 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import * as e from "react";
import t from "prop-types";
import { classNames as D, IconWrap as P, svgIconPropType as T } from "@progress/kendo-react-common";
const f = e.forwardRef(
(d, x) => {
const b = e.useRef(null);
e.useImperativeHandle(
x,
() => ({
element: b.current
})
);
const {
className: p,
style: k,
selected: s,
disabled: a,
item: y,
render: N,
dataItem: g,
icon: l,
svgIcon: o,
text: i,
id: C,
onSelect: m,
onKeyDown: r,
index: n,
tabIndex: E = h.tabIndex
} = d, R = e.useMemo(
() => D(
"k-bottom-nav-item",
{
"k-selected": s,
"k-disabled": a
},
p
),
[s, a, p]
), w = e.useCallback(
(c) => {
m && n !== void 0 && !a && m(c, n);
},
[m, n, a]
), K = e.useCallback(
(c) => {
r && n !== void 0 && !a && r(c, n);
},
[r, n, a]
), v = N, u = y, I = /* @__PURE__ */ e.createElement(
"span",
{
ref: b,
className: R,
style: k,
role: "link",
id: C,
tabIndex: E,
onClick: w,
onKeyDown: K,
"aria-current": s,
"aria-disabled": a,
"aria-label": i ? void 0 : (o == null ? void 0 : o.name) || l || void 0
},
u ? /* @__PURE__ */ e.createElement(u, { itemIndex: n, item: g }) : /* @__PURE__ */ e.createElement(e.Fragment, null, (l || o) && /* @__PURE__ */ e.createElement(P, { className: "k-bottom-nav-item-icon", name: l, icon: o, size: "xlarge" }), i && /* @__PURE__ */ e.createElement("span", { className: "k-bottom-nav-item-text", style: { userSelect: "none" } }, i))
);
return v !== void 0 ? v.call(void 0, I, d) : I;
}
), h = {
tabIndex: 0
};
f.propTypes = {
className: t.string,
style: t.object,
id: t.string,
disabled: t.bool,
selected: t.bool,
icon: t.string,
svgIcon: T,
text: t.string,
tabIndex: t.number
};
f.displayName = "KendoReactBottomNavigationItem";
export {
f as BottomNavigationItem
};