@hitachivantara/uikit-react-core
Version:
Core React components for the NEXT Design System.
78 lines (77 loc) • 2.27 kB
JavaScript
import { jsxs, jsx } from "react/jsx-runtime";
import { useContext } from "react";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { setId } from "../../utils/setId.js";
import { HvFormElementContext } from "../context.js";
import { useClasses } from "./CharCounter.styles.js";
import { staticClasses } from "./CharCounter.styles.js";
import { HvTypography } from "../../Typography/Typography.js";
const HvCharCounter = (props) => {
const {
separator = "/",
maxCharQuantity,
currentCharQuantity = 0,
classes: classesProp,
className,
id: idProp,
disabled: disabledProp,
disableGutter,
...others
} = useDefaultProps("HvCharCounter", props);
const { classes, cx } = useClasses(classesProp);
const context = useContext(HvFormElementContext);
const disabled = disabledProp ?? context.disabled;
const id = idProp ?? setId(context.id, "counter");
const currentId = setId(id, "currentQuantity");
const maxQuantityId = setId(id, "maxQuantity");
const isOverloaded = currentCharQuantity > maxCharQuantity;
return /* @__PURE__ */ jsxs(
"div",
{
id,
className: cx(
classes.root,
{
[classes.counterDisabled]: disabled,
[classes.gutter]: !disableGutter
},
className
),
"aria-live": "polite",
"aria-disabled": disabled,
...others,
children: [
/* @__PURE__ */ jsx(
HvTypography,
{
id: currentId,
className: cx({
[classes.overloaded]: isOverloaded && !disabled,
[classes.counterDisabled]: disabled
}),
variant: "label",
component: "label",
children: currentCharQuantity
}
),
/* @__PURE__ */ jsx(
HvTypography,
{
id: maxQuantityId,
className: cx({
[classes.overloaded]: isOverloaded && !disabled,
[classes.counterDisabled]: disabled
}),
variant: "body",
component: "label",
children: ` ${separator} ${maxCharQuantity}`
}
)
]
}
);
};
export {
HvCharCounter,
staticClasses as charCounterClasses
};