@dnb/eufemia/components/number-format/NumberFormat.js

DNB Eufemia Design System UI Library

"use client";

import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
import React from 'react';
import classnames from 'classnames';
import Context from "../../shared/Context.js";
import { warn, isTrue, makeUniqueId, validateDOMAttributes, convertJsxToString, extendPropsWithContextInClassComponent, extendDeep, detectOutsideClick, isTouchDevice } from "../../shared/component-helper.js";
import { hasSelectedText, IS_IOS } from "../../shared/helpers.js";
import { createSpacingClasses } from "../space/SpacingHelper.js";
import { skeletonDOMAttributes, createSkeletonClass } from "../skeleton/SkeletonHelper.js";
import Tooltip, { injectTooltipSemantic } from "../tooltip/Tooltip.js";
import { format, runIOSSelectionFix } from "./NumberUtils.js";
export { default as useNumberFormat } from "./useNumberFormat.js";
export { default as useNumberFormatWithParts } from "./useNumberFormatWithParts.js";
export const COPY_TOOLTIP_TIMEOUT = 3000;
export default class NumberFormat extends React.PureComponent {
  constructor(props) {
    super(props);
    _defineProperty(this, "clearCopyTooltipTimeout", () => {
      if (this._copyTooltipTimeout) {
        clearTimeout(this._copyTooltipTimeout);
        this._copyTooltipTimeout = null;
      }
    });
    _defineProperty(this, "showCopyTooltip", message => {
      var _this$context$getTran, _this$context;
      const translations = (_this$context$getTran = (_this$context = this.context).getTranslation) === null || _this$context$getTran === void 0 || (_this$context$getTran = _this$context$getTran.call(_this$context, this.props)) === null || _this$context$getTran === void 0 ? void 0 : _this$context$getTran.NumberFormat;
      const label = message || (translations === null || translations === void 0 ? void 0 : translations.clipboard_copy);
      if (!label) {
        return;
      }
      this.clearCopyTooltipTimeout();
      this.setState({
        copyTooltipActive: true,
        copyTooltipText: label
      }, () => {
        this._copyTooltipTimeout = setTimeout(() => {
          this.setState({
            copyTooltipActive: false
          });
        }, COPY_TOOLTIP_TIMEOUT);
      });
    });
    _defineProperty(this, "shortcutHandler", () => {
      var _this$context$getTran2;
      const label = (_this$context$getTran2 = this.context.getTranslation(this.props)) === null || _this$context$getTran2 === void 0 ? void 0 : _this$context$getTran2.NumberFormat.clipboard_copy;
      this.showCopyTooltip(label);
    });
    _defineProperty(this, "onBlurHandler", () => {
      this.setState({
        selected: false
      });
    });
    _defineProperty(this, "onContextMenuHandler", () => {
      if (!hasSelectedText()) {
        this.setFocus();
      }
    });
    _defineProperty(this, "onClickHandler", () => {
      if ((isTrue(this.props.selectall) || isTrue(this.props.always_selectall)) && !hasSelectedText()) {
        this.setFocus();
      }
    });
    _defineProperty(this, "onMouseEnter", () => {
      this.setState({
        hover: true
      });
    });
    _defineProperty(this, "onMouseLeave", () => {
      this.setState({
        hover: false
      });
    });
    this._ref = React.createRef();
    this._selectionRef = React.createRef();
    this._id = props.tooltip ? props.id || makeUniqueId() : undefined;
    this._copyTooltipTimeout = null;
    this.state = {
      selected: false,
      omitCurrencySign: false,
      hover: false,
      copyTooltipActive: false,
      copyTooltipText: null
    };
  }
  componentDidMount() {
    if (IS_IOS && !hasiOSFix) {
      hasiOSFix = true;
      runIOSSelectionFix();
    }
  }
  componentWillUnmount() {
    var _this$outsideClick;
    (_this$outsideClick = this.outsideClick) === null || _this$outsideClick === void 0 || _this$outsideClick.remove();
    this.clearCopyTooltipTimeout();
  }
  setFocus() {
    if (isTouchDevice()) {
      return;
    }
    this.setState({
      selected: true
    }, () => {
      var _this$_selectionRef$c;
      (_this$_selectionRef$c = this._selectionRef.current) === null || _this$_selectionRef$c === void 0 || _this$_selectionRef$c.focus({
        preventScroll: true
      });
      this.selectAll();
      if (!isTrue(this.props.copy_selection)) {
        this.outsideClick = detectOutsideClick(this._ref.current, this.onBlurHandler);
      }
    });
  }
  selectAll() {
    try {
      const elem = this._selectionRef.current || this._ref.current;
      if (elem) {
        const selection = window.getSelection();
        const range = document.createRange();
        range.selectNodeContents(elem);
        selection.removeAllRanges();
        selection.addRange(range);
      }
    } catch (e) {
      warn(e);
    }
  }
  runFix(comp, className) {
    if (typeof comp === 'function') {
      comp = comp();
    }
    if (React.isValidElement(comp)) {
      return React.cloneElement(comp, {
        className: classnames(comp.props.className, className)
      });
    }
    return React.createElement("span", {
      className: className
    }, comp);
  }
  render() {
    const translations = this.context.getTranslation(this.props).NumberFormat;
    const props = extendPropsWithContextInClassComponent(this.props, NumberFormat.defaultProps, translations, this.context.NumberFormat);
    const {
      id,
      value: _value,
      prefix,
      suffix,
      children,
      currency,
      currency_display,
      currency_position,
      compact,
      ban,
      nin,
      phone,
      org,
      percent,
      link: _link,
      monospace,
      tooltip,
      skeleton,
      options,
      locale,
      decimals,
      omit_rounding,
      rounding,
      signDisplay,
      clean,
      selectall,
      copy_selection,
      clean_copy_value,
      srLabel,
      element,
      className,
      ..._rest
    } = props;
    let rest = _rest;
    let link = _link;
    let value = _value;
    if (value === null && children !== null) {
      value = children;
    }
    let currencyPosition = currency_position;
    if (currency_display === 'code' && !currencyPosition) {
      currencyPosition = 'before';
    }
    const formatOptions = {
      locale,
      currency,
      currency_display,
      currency_position: currencyPosition,
      omit_currency_sign: this.state.omitCurrencySign,
      compact,
      ban,
      nin,
      phone,
      org,
      percent,
      decimals,
      omit_rounding: isTrue(omit_rounding),
      rounding,
      signDisplay,
      options,
      clean: isTrue(clean),
      clean_copy_value: isTrue(clean_copy_value),
      returnAria: true,
      invalidAriaText: locale && locale !== this.context.locale ? null : translations === null || translations === void 0 ? void 0 : translations.not_available
    };
    const useContext = extendDeep({
      locale: null,
      currency: null
    }, this.context);
    if (useContext) {
      if (useContext.locale && !locale) {
        formatOptions.locale = useContext.locale;
      }
      if (useContext.currency && isTrue(currency)) {
        formatOptions.options = formatOptions.options ? {
          ...formatOptions.options
        } : {};
        formatOptions.options.currency = useContext.currency;
      }
    }
    const result = format(value, formatOptions);
    const {
      cleanedValue,
      locale: lang
    } = result;
    let {
      aria,
      number: display
    } = result;
    this.cleanedValue = cleanedValue;
    if (prefix) {
      display = React.createElement(React.Fragment, null, this.runFix(prefix, 'dnb-number-format__prefix'), " ", display);
      aria = String(`${convertJsxToString(this.runFix(prefix, 'dnb-number-format__prefix'))} ${aria}`);
    }
    if (suffix) {
      const suffixElement = this.runFix(suffix, 'dnb-number-format__suffix');
      const suffixStartsWithSlash = typeof suffix === 'string' && suffix.startsWith('/');
      const suffixSpace = suffixStartsWithSlash ? '' : ' ';
      display = React.createElement(React.Fragment, null, display, suffixSpace, suffixElement);
      aria = `${aria}${suffixSpace}${convertJsxToString(suffixElement)}`;
    }
    if (tooltip) {
      rest = injectTooltipSemantic(rest);
    }
    const attributes = {
      lang,
      ref: this._ref,
      className: classnames('dnb-number-format', className, (isTrue(currency) || typeof currency === 'string') && 'dnb-number-format--currency', createSpacingClasses(this.props), isTrue(selectall) && 'dnb-number-format--selectall', this.state.selected && 'dnb-number-format--selected', link && 'dnb-anchor', monospace && 'dnb-number-format--monospace'),
      onMouseEnter: this.onMouseEnter,
      onMouseLeave: this.onMouseLeave,
      ...rest
    };
    const displayParams = {};
    if (isTrue(selectall) || isTrue(copy_selection)) {
      displayParams.onClick = this.onClickHandler;
      displayParams.onContextMenu = this.onContextMenuHandler;
    }
    validateDOMAttributes(this.props, attributes);
    skeletonDOMAttributes(attributes, skeleton, this.context);
    if (link) {
      if (isTrue(link)) {
        link = 'tel';
      }
      return React.createElement("a", _extends({
        href: `${link}:${display}`
      }, attributes), display);
    }
    const Element = element;
    return React.createElement(Element, attributes, React.createElement("span", _extends({
      className: classnames('dnb-number-format__visible', createSkeletonClass('font', skeleton, this.context)),
      "aria-hidden": !this.state.hover
    }, displayParams), display), React.createElement("span", {
      className: "dnb-sr-only",
      "data-text": srLabel ? `${convertJsxToString(srLabel)}${' '}${aria}` : aria
    }), isTrue(copy_selection) && React.createElement("span", {
      className: "dnb-number-format__selection dnb-no-focus",
      ref: this._selectionRef,
      tabIndex: -1,
      onBlur: this.onBlurHandler,
      onCopy: this.shortcutHandler,
      "aria-hidden": true
    }, this.state.selected && cleanedValue), tooltip && React.createElement(Tooltip, {
      id: this._id + '-tooltip',
      targetElement: this._ref,
      tooltip: tooltip
    }), this.state.copyTooltipActive && React.createElement(Tooltip, {
      active: this.state.copyTooltipActive,
      targetElement: this._ref,
      showDelay: 0,
      hideDelay: 0,
      triggerOffset: 8
    }, this.state.copyTooltipText));
  }
}
_defineProperty(NumberFormat, "contextType", Context);
_defineProperty(NumberFormat, "defaultProps", {
  id: null,
  value: null,
  locale: null,
  prefix: null,
  suffix: null,
  currency: null,
  currency_display: null,
  currency_position: null,
  compact: null,
  ban: null,
  nin: null,
  phone: null,
  org: null,
  percent: null,
  link: null,
  monospace: false,
  options: null,
  decimals: null,
  selectall: true,
  always_selectall: false,
  copy_selection: true,
  clean_copy_value: false,
  omit_rounding: null,
  rounding: null,
  clean: null,
  srLabel: null,
  element: 'span',
  tooltip: null,
  skeleton: null,
  className: null,
  children: null
});
let hasiOSFix = false;
NumberFormat._supportsSpacingProps = true;
//# sourceMappingURL=NumberFormat.js.map