@dnb/eufemia/fragments/text-counter/TextCounter.js

DNB Eufemia Design System UI Library

"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 "core-js/modules/es.string.replace.js";
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