@dnb/eufemia/components/number-format/NumberFormat.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";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
const _excluded = ["id", "value", "prefix", "suffix", "children", "currency", "currency_display", "currency_position", "compact", "ban", "nin", "phone", "org", "percent", "link", "monospace", "tooltip", "skeleton", "options", "locale", "decimals", "omit_rounding", "rounding", "clean", "selectall", "copy_selection", "clean_copy_value", "srLabel", "element", "className"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import Context from '../../shared/Context';
import { warn, isTrue, makeUniqueId, validateDOMAttributes, convertJsxToString, extendPropsWithContextInClassComponent, extendDeep, detectOutsideClick } from '../../shared/component-helper';
import { hasSelectedText, IS_IOS } from '../../shared/helpers';
import { spacingPropTypes, createSpacingClasses } from '../space/SpacingHelper';
import { skeletonDOMAttributes, createSkeletonClass } from '../skeleton/SkeletonHelper';
import Tooltip, { injectTooltipSemantic } from '../tooltip/Tooltip';
import { format, showSelectionNotice, runIOSSelectionFix } from './NumberUtils';
export default class NumberFormat extends React.PureComponent {
  constructor(props) {
    super(props);
    _defineProperty(this, "shortcutHandler", () => {
      var _this$context$getTran, _this$context$getTran2;
      showSelectionNotice({
        value: this.cleanedValue,
        label: (_this$context$getTran = this.context.getTranslation(this.props)) === null || _this$context$getTran === void 0 ? void 0 : (_this$context$getTran2 = _this$context$getTran.NumberFormat) === null || _this$context$getTran2 === void 0 ? void 0 : _this$context$getTran2.clipboard_copy
      }).run(this._ref.current);
    });
    _defineProperty(this, "onBlurHandler", () => {
      this.setState({
        selected: false
      });
    });
    _defineProperty(this, "onContextMenuHandler", () => {
      if (!hasSelectedText()) {
        clearTimeout(this._selectAllTimeout);
        this._selectAllTimeout = setTimeout(() => {
          this.setFocus();
        }, 1);
      }
    });
    _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.state = {
      selected: false,
      omitCurrencySign: false,
      hover: false
    };
  }
  componentDidMount() {
    clearTimeout(this._selectAllTimeout);
    if (IS_IOS && !hasiOSFix) {
      hasiOSFix = true;
      runIOSSelectionFix();
    }
  }
  componentWillUnmount() {
    var _this$outsideClick;
    (_this$outsideClick = this.outsideClick) === null || _this$outsideClick === void 0 ? void 0 : _this$outsideClick.remove();
  }
  setFocus() {
    this.setState({
      selected: true
    }, () => {
      var _this$_selectionRef$c;
      (_this$_selectionRef$c = this._selectionRef.current) === null || _this$_selectionRef$c === void 0 ? void 0 : _this$_selectionRef$c.focus();
      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,
        clean,
        selectall,
        copy_selection,
        clean_copy_value,
        srLabel,
        element,
        className
      } = props,
      _rest = _objectWithoutProperties(props, _excluded);
    let rest = _rest;
    let link = _link;
    let value = _value;
    if (value === null && children !== null) {
      value = children;
    }
    const formatOptions = {
      locale,
      currency,
      currency_display,
      currency_position,
      omit_currency_sign: this.state.omitCurrencySign,
      compact,
      ban,
      nin,
      phone,
      org,
      percent,
      decimals,
      omit_rounding: isTrue(omit_rounding),
      rounding,
      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 ? _objectSpread({}, formatOptions.options) : {};
        formatOptions.options.currency = useContext.currency;
      }
    }
    let {
      cleanedValue,
      number: display,
      aria,
      locale: lang
    } = format(value, formatOptions);
    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) {
      display = React.createElement(React.Fragment, null, display, " ", this.runFix(suffix, 'dnb-number-format__suffix'));
      aria = `${aria} ${convertJsxToString(this.runFix(suffix, 'dnb-number-format__suffix'))}`;
    }
    if (tooltip) {
      rest = injectTooltipSemantic(rest);
    }
    const attributes = _objectSpread({
      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
    }));
  }
}
_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
});
process.env.NODE_ENV !== "production" ? NumberFormat.propTypes = _objectSpread(_objectSpread({
  id: PropTypes.string,
  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  locale: PropTypes.string,
  prefix: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
  suffix: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
  currency: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
  currency_display: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['code', 'name', 'symbol', 'narrowSymbol', ''])]),
  currency_position: PropTypes.oneOf(['auto', 'before', 'after']),
  compact: PropTypes.oneOfType([PropTypes.oneOf(['short', 'long']), PropTypes.bool]),
  ban: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
  nin: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
  phone: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
  org: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
  percent: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
  link: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
  monospace: PropTypes.bool,
  options: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
  decimals: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  selectall: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
  always_selectall: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
  copy_selection: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
  clean_copy_value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
  omit_rounding: PropTypes.bool,
  rounding: PropTypes.oneOf(['omit', 'half-even', 'half-up']),
  clean: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
  srLabel: PropTypes.node,
  element: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
  tooltip: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node]),
  skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
}, spacingPropTypes), {}, {
  className: PropTypes.string,
  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
}) : void 0;
let hasiOSFix = false;
NumberFormat._supportsSpacingProps = true;
//# sourceMappingURL=NumberFormat.js.map