@hitachivantara/uikit-react-core
Version:
Core React components for the NEXT Design System.
58 lines (57 loc) • 2.15 kB
JavaScript
import { jsxs, jsx } from "react/jsx-runtime";
import { forwardRef } from "react";
import { useDefaultProps, mergeStyles } from "@hitachivantara/uikit-react-utils";
import { getColor } from "@hitachivantara/uikit-styles";
import { useClasses } from "./Badge.styles.js";
import { staticClasses } from "./Badge.styles.js";
import { HvTypography } from "../Typography/Typography.js";
const HvBadge = forwardRef(function HvBadge2(props, ref) {
const {
classes: classesProp,
className,
color,
showCount = false,
count: countProp = 0,
maxCount = 99,
label,
icon,
text,
textVariant,
children: childrenProp,
style,
...others
} = useDefaultProps("HvBadge", props);
const { classes, cx } = useClasses(classesProp);
const count = typeof label === "number" ? label : countProp;
const countValue = count > maxCount ? `${maxCount}+` : count;
const renderedCount = showCount && count > 0 ? countValue : "";
const renderedCountOrLabel = label && typeof label !== "number" ? label : renderedCount;
const children = childrenProp || icon || text && /* @__PURE__ */ jsx(HvTypography, { variant: textVariant, children: text });
return /* @__PURE__ */ jsxs("div", { ref, className: cx(classes.root, className), ...others, children: [
children,
/* @__PURE__ */ jsx(
"div",
{
"data-color": color,
style: mergeStyles(style, {
"--bg-color": color && getColor(color)
}),
className: cx(classes.badgePosition, {
[classes.badgeContainer]: children,
[classes.badgeHidden]: !(count > 0 || renderedCountOrLabel),
// TODO: remove unnecessary classes in v6 (hoist+rename `badge` to `badgePosition`)
[classes.badge]: !!(count > 0 || renderedCountOrLabel),
[classes.showCount]: !!(!label && renderedCountOrLabel),
[classes.showLabel]: !!label,
[classes.badgeIcon]: !!icon,
[classes.badgeOneDigit]: String(renderedCountOrLabel).length === 1
}),
children: renderedCountOrLabel
}
)
] });
});
export {
HvBadge,
staticClasses as badgeClasses
};