@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
51 lines (50 loc) • 1.86 kB
JavaScript
"use client";
import _extends from "@babel/runtime/helpers/esm/extends";
var _Icon;
import React, { useContext, useMemo, useRef } from 'react';
import classnames from 'classnames';
import { toPascalCase } from "../../shared/component-helper.js";
import Context from "../../shared/Context.js";
import AriaLive from "../../components/AriaLive.js";
import Icon from "../../components/icon/Icon.js";
import { exclamation_triangle } from "../../icons/index.js";
import P from "../../elements/P.js";
export default function TextCounter(localProps) {
const context = useContext(Context);
const {
variant: _variant,
text,
max,
className,
locale,
...rest
} = localProps;
const textRef = useRef(text);
const variant = /up|down/.test(String(_variant)) ? _variant : 'down';
const length = (text || '').length;
const message = useMemo(() => {
if (!(max > 0)) {
return '';
}
const isExceeded = length > max;
const count = variant === 'down' || isExceeded ? Math.abs(max - length) : length;
const key = `character${isExceeded ? 'Exceeded' : toPascalCase(variant)}`;
return context.getTranslation(localProps).TextCounter[key].replace('%count', String(count)).replace('%max', String(max));
}, [max, length, variant, context, localProps]);
const bypassAria = useMemo(() => {
const bypass = textRef.current === text;
textRef.current = text;
return bypass;
}, [text]);
return React.createElement(P, _extends({
size: "small",
className: classnames('dnb-text-counter', className, length > max && 'dnb-text-counter--exceeded')
}, rest), _Icon || (_Icon = React.createElement(Icon, {
icon: exclamation_triangle
})), message, React.createElement(AriaLive, {
element: "span",
disabled: bypassAria,
delay: 2000
}, message));
}
//# sourceMappingURL=TextCounter.js.map