@hitachivantara/uikit-react-core
Version:
UI Kit Core React components.
43 lines (42 loc) • 1.54 kB
JavaScript
import { useClasses } from "./Badge.styles.js";
import { getColor } from "@hitachivantara/uikit-styles";
import { mergeStyles, useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { forwardRef, useMemo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/Badge/Badge.tsx
/**
* The badge is a component used to notify the user that something has occurred, in the app context.
*/
var HvBadge = forwardRef(function HvBadge(props, ref) {
const { classes: classesProp, className, color, showCount = false, maxCount = 99, label: labelProp, icon, children, style, ...others } = useDefaultProps("HvBadge", props);
const { classes, cx } = useClasses(classesProp);
const hasContent = !!(children || icon);
const label = useMemo(() => {
if (typeof labelProp !== "number") return labelProp;
if (labelProp <= 0) return null;
if (!showCount) return "";
return labelProp > maxCount ? `${maxCount}+` : labelProp;
}, [
maxCount,
labelProp,
showCount
]);
return /* @__PURE__ */ jsxs("div", {
ref,
className: cx(classes.root, className),
...others,
children: [children || icon, /* @__PURE__ */ jsx("div", {
"data-color": color,
style: mergeStyles(style, { "--bg-color": color && getColor(color) }),
"data-badge-inline": !hasContent ? "" : void 0,
className: cx(classes.badge, {
[classes.badgeHidden]: label == null,
[classes.badgeIcon]: icon,
[classes.badgeOneDigit]: String(label).length === 1
}),
children: label
})]
});
});
//#endregion
export { HvBadge };