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