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

DNB Eufemia Design System UI Library

"use strict";
"use client";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.COPY_TOOLTIP_TIMEOUT = void 0;
Object.defineProperty(exports, "useNumberFormat", {
  enumerable: true,
  get: function () {
    return _useNumberFormat.default;
  }
});
Object.defineProperty(exports, "useNumberFormatWithParts", {
  enumerable: true,
  get: function () {
    return _useNumberFormatWithParts.default;
  }
});
var _react = _interopRequireDefault(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _Context = _interopRequireDefault(require("../../shared/Context.js"));
var _componentHelper = require("../../shared/component-helper.js");
var _helpers = require("../../shared/helpers.js");
var _SpacingHelper = require("../space/SpacingHelper.js");
var _SkeletonHelper = require("../skeleton/SkeletonHelper.js");
var _Tooltip = _interopRequireWildcard(require("../tooltip/Tooltip.js"));
var _NumberUtils = require("./NumberUtils.js");
var _useNumberFormat = _interopRequireDefault(require("./useNumberFormat.js"));
var _useNumberFormatWithParts = _interopRequireDefault(require("./useNumberFormatWithParts.js"));
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
const COPY_TOOLTIP_TIMEOUT = exports.COPY_TOOLTIP_TIMEOUT = 3000;
class NumberFormat extends _react.default.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 (!(0, _helpers.hasSelectedText)()) {
        this.setFocus();
      }
    });
    _defineProperty(this, "onClickHandler", () => {
      if (((0, _componentHelper.isTrue)(this.props.selectall) || (0, _componentHelper.isTrue)(this.props.always_selectall)) && !(0, _helpers.hasSelectedText)()) {
        this.setFocus();
      }
    });
    _defineProperty(this, "onMouseEnter", () => {
      this.setState({
        hover: true
      });
    });
    _defineProperty(this, "onMouseLeave", () => {
      this.setState({
        hover: false
      });
    });
    this._ref = _react.default.createRef();
    this._selectionRef = _react.default.createRef();
    this._id = props.tooltip ? props.id || (0, _componentHelper.makeUniqueId)() : undefined;
    this._copyTooltipTimeout = null;
    this.state = {
      selected: false,
      omitCurrencySign: false,
      hover: false,
      copyTooltipActive: false,
      copyTooltipText: null
    };
  }
  componentDidMount() {
    if (_helpers.IS_IOS && !hasiOSFix) {
      hasiOSFix = true;
      (0, _NumberUtils.runIOSSelectionFix)();
    }
  }
  componentWillUnmount() {
    var _this$outsideClick;
    (_this$outsideClick = this.outsideClick) === null || _this$outsideClick === void 0 || _this$outsideClick.remove();
    this.clearCopyTooltipTimeout();
  }
  setFocus() {
    if ((0, _componentHelper.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 (!(0, _componentHelper.isTrue)(this.props.copy_selection)) {
        this.outsideClick = (0, _componentHelper.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) {
      (0, _componentHelper.warn)(e);
    }
  }
  runFix(comp, className) {
    if (typeof comp === 'function') {
      comp = comp();
    }
    if (_react.default.isValidElement(comp)) {
      return _react.default.cloneElement(comp, {
        className: (0, _classnames.default)(comp.props.className, className)
      });
    }
    return _react.default.createElement("span", {
      className: className
    }, comp);
  }
  render() {
    const translations = this.context.getTranslation(this.props).NumberFormat;
    const props = (0, _componentHelper.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: (0, _componentHelper.isTrue)(omit_rounding),
      rounding,
      signDisplay,
      options,
      clean: (0, _componentHelper.isTrue)(clean),
      clean_copy_value: (0, _componentHelper.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 = (0, _componentHelper.extendDeep)({
      locale: null,
      currency: null
    }, this.context);
    if (useContext) {
      if (useContext.locale && !locale) {
        formatOptions.locale = useContext.locale;
      }
      if (useContext.currency && (0, _componentHelper.isTrue)(currency)) {
        formatOptions.options = formatOptions.options ? {
          ...formatOptions.options
        } : {};
        formatOptions.options.currency = useContext.currency;
      }
    }
    const result = (0, _NumberUtils.format)(value, formatOptions);
    const {
      cleanedValue,
      locale: lang
    } = result;
    let {
      aria,
      number: display
    } = result;
    this.cleanedValue = cleanedValue;
    if (prefix) {
      display = _react.default.createElement(_react.default.Fragment, null, this.runFix(prefix, 'dnb-number-format__prefix'), " ", display);
      aria = String(`${(0, _componentHelper.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.default.createElement(_react.default.Fragment, null, display, suffixSpace, suffixElement);
      aria = `${aria}${suffixSpace}${(0, _componentHelper.convertJsxToString)(suffixElement)}`;
    }
    if (tooltip) {
      rest = (0, _Tooltip.injectTooltipSemantic)(rest);
    }
    const attributes = {
      lang,
      ref: this._ref,
      className: (0, _classnames.default)('dnb-number-format', className, ((0, _componentHelper.isTrue)(currency) || typeof currency === 'string') && 'dnb-number-format--currency', (0, _SpacingHelper.createSpacingClasses)(this.props), (0, _componentHelper.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 ((0, _componentHelper.isTrue)(selectall) || (0, _componentHelper.isTrue)(copy_selection)) {
      displayParams.onClick = this.onClickHandler;
      displayParams.onContextMenu = this.onContextMenuHandler;
    }
    (0, _componentHelper.validateDOMAttributes)(this.props, attributes);
    (0, _SkeletonHelper.skeletonDOMAttributes)(attributes, skeleton, this.context);
    if (link) {
      if ((0, _componentHelper.isTrue)(link)) {
        link = 'tel';
      }
      return _react.default.createElement("a", _extends({
        href: `${link}:${display}`
      }, attributes), display);
    }
    const Element = element;
    return _react.default.createElement(Element, attributes, _react.default.createElement("span", _extends({
      className: (0, _classnames.default)('dnb-number-format__visible', (0, _SkeletonHelper.createSkeletonClass)('font', skeleton, this.context)),
      "aria-hidden": !this.state.hover
    }, displayParams), display), _react.default.createElement("span", {
      className: "dnb-sr-only",
      "data-text": srLabel ? `${(0, _componentHelper.convertJsxToString)(srLabel)}${' '}${aria}` : aria
    }), (0, _componentHelper.isTrue)(copy_selection) && _react.default.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.default.createElement(_Tooltip.default, {
      id: this._id + '-tooltip',
      targetElement: this._ref,
      tooltip: tooltip
    }), this.state.copyTooltipActive && _react.default.createElement(_Tooltip.default, {
      active: this.state.copyTooltipActive,
      targetElement: this._ref,
      showDelay: 0,
      hideDelay: 0,
      triggerOffset: 8
    }, this.state.copyTooltipText));
  }
}
exports.default = NumberFormat;
_defineProperty(NumberFormat, "contextType", _Context.default);
_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