@hitachivantara/uikit-react-core
Version:
UI Kit Core React components.
56 lines (55 loc) • 2.09 kB
JavaScript
import { HvTypography } from "../../Typography/Typography.js";
import { setId } from "../../utils/setId.js";
import { HvFormElementContext } from "../context.js";
import { useClasses } from "./CharCounter.styles.js";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { useContext } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/FormElement/CharCounter/CharCounter.tsx
/**
* Displays the capacity and current usage of a text input box (character count by default).
*
* Use the character counter when there is a character or word limit.
* By itself it doesn't block the user from going above the limit.
*/
var 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}`
})]
});
};
//#endregion
export { HvCharCounter };