@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
53 lines (52 loc) • 2.05 kB
JavaScript
"use client";
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _Icon;
const _excluded = ["variant", "text", "max", "className", "locale"];
import React, { useContext, useMemo, useRef } from 'react';
import classnames from 'classnames';
import { toPascalCase } from '../../shared/component-helper';
import Context from '../../shared/Context';
import AriaLive from '../../components/AriaLive';
import Icon from '../../components/icon/Icon';
import { exclamation_triangle } from '../../icons';
import P from '../../elements/P';
export default function TextCounter(localProps) {
const context = useContext(Context);
const {
variant: _variant,
text,
max,
className,
locale
} = localProps,
rest = _objectWithoutProperties(localProps, _excluded);
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