@progress/kendo-react-indicators
Version:
React Indicators offer an interface to represent a visual indication for their UI elements. KendoReact Indicators package
95 lines (94 loc) • 2.81 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 t from "react";
import e from "prop-types";
import { useDir as z, kendoThemeMaps as C, classNames as y } from "@progress/kendo-react-common";
const f = t.forwardRef((o, g) => {
const {
cutoutBorder: u = l.cutoutBorder,
position: i = l.position,
align: r = l.align,
children: b,
className: c,
style: h
} = o, n = t.useRef(null), k = t.useCallback(() => {
n.current && n.current.focus();
}, []);
t.useImperativeHandle(
g,
() => ({
element: n.current,
focus: k
})
);
const M = z(n, o.dir), a = t.useMemo(() => o.size || l.size, [o.size]), s = t.useMemo(() => o.fillMode || l.fillMode, [o.fillMode]), d = t.useMemo(() => o.themeColor || l.themeColor, [o.themeColor]), m = t.useMemo(
() => o.rounded ? C.roundedMap[o.rounded] : void 0,
[o.rounded]
), v = t.useMemo(
() => y(
"k-badge",
{
"k-badge-sm": a === "small",
"k-badge-md": a === "medium",
"k-badge-lg": a === "large",
[`k-badge-${s}`]: s,
[`k-badge-${d}`]: d,
"k-badge-border-cutout": u,
[`k-badge-${i}`]: i,
"k-top-start": r.vertical === "top" && r.horizontal === "start",
"k-top-end": r.vertical === "top" && r.horizontal === "end",
"k-bottom-start": r.vertical === "bottom" && r.horizontal === "start",
"k-bottom-end": r.vertical === "bottom" && r.horizontal === "end",
[`k-rounded-${m}`]: m
},
c
),
[a, s, d, m, u, r, i, c]
);
return /* @__PURE__ */ t.createElement("span", { className: v, style: h, dir: M }, b);
});
f.propTypes = {
className: e.string,
dir: e.string,
style: e.object,
align: e.shape({
vertical: e.oneOf(["top", "bottom"]),
horizontal: e.oneOf(["start", "end"])
}),
size: e.oneOf(["small", "medium", "large"]),
fillMode: e.oneOf(["solid", "outline"]),
themeColor: e.oneOf([
"base",
"primary",
"secondary",
"tertiary",
"info",
"success",
"warning",
"error",
"dark",
"light",
"inverse",
"inherit"
]),
rounded: e.oneOf(["small", "medium", "large", "full", "none"]),
position: e.oneOf(["edge", "outside", "inside"]),
cutoutBorder: e.bool
};
const l = {
size: void 0,
fillMode: void 0,
themeColor: void 0,
position: "edge",
align: { vertical: "top", horizontal: "end" },
cutoutBorder: !1
};
f.displayName = "KendoBadge";
export {
f as Badge
};