@navikt/ds-react
Version:
React components from the Norwegian Labour and Welfare Administration.
36 lines • 1.93 kB
JavaScript
import React, { useEffect, useState } from "react";
import { useRenameCSS } from "../../theme/Theme.js";
import { BodyShort } from "../../typography/index.js";
import debounce from "../../util/debounce.js";
import { useI18n } from "../../util/i18n/i18n.hooks.js";
const TextareaCounter = ({ maxLengthId, maxLength, currentLength, size, i18n, }) => {
const { cn } = useRenameCSS();
const translate = useI18n("Textarea", {
charsLeft: (i18n === null || i18n === void 0 ? void 0 : i18n.counterLeft) ? `{chars} ${i18n.counterLeft}` : undefined,
charsTooMany: (i18n === null || i18n === void 0 ? void 0 : i18n.counterTooMuch)
? `{chars} ${i18n.counterTooMuch}`
: undefined,
});
const difference = maxLength - currentLength;
const [debouncedDiff, setDebouncedDiff] = useState(difference);
useEffect(() => {
const debounceFunc = debounce(() => {
setDebouncedDiff(difference);
}, 2000);
debounceFunc();
return () => {
debounceFunc.clear();
};
}, [difference]);
return (React.createElement(React.Fragment, null,
React.createElement("span", { id: maxLengthId, className: cn("navds-sr-only") }, translate("maxLength", { maxLength })),
difference < 20 && (React.createElement("span", { role: "status", className: cn("navds-textarea__sr-counter navds-sr-only") }, getCounterText(debouncedDiff, translate))),
React.createElement(BodyShort, { className: cn("navds-textarea__counter", {
"navds-textarea__counter--error": difference < 0,
}), size: size }, getCounterText(difference, translate))));
};
const getCounterText = (difference, translate) => difference < 0
? translate("charsTooMany", { chars: Math.abs(difference) })
: translate("charsLeft", { chars: difference });
export default TextareaCounter;
//# sourceMappingURL=TextareaCounter.js.map