@dnb/eufemia/cjs/components/stat/Amount.js

DNB Eufemia Design System UI Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.AmountBase = AmountBase;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _useNumberFormatWithParts = _interopRequireDefault(require("../number-format/useNumberFormatWithParts.js"));
var _Typography = require("../../elements/typography/Typography.js");
var _componentHelper = require("../../shared/component-helper.js");
var _StatValueContext = _interopRequireDefault(require("./StatValueContext.js"));
var _useStatSkeleton = _interopRequireDefault(require("./useStatSkeleton.js"));
var _Text = require("./Text.js");
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); }
const renderAffix = (resolved, className) => {
  if (typeof resolved === 'function') {
    resolved = resolved();
  }
  return _react.default.createElement("span", {
    className: className
  }, resolved);
};
function AmountBase(props) {
  var _ref, _context$NumberFormat, _ref2, _ref3, _ref4;
  const {
    element: Element = 'span',
    value,
    children,
    currency = false,
    currencyDisplay = null,
    currencyPosition = 'auto',
    locale = null,
    className = null,
    prefix = null,
    suffix = null,
    srLabel = null,
    fontSize = null,
    mainSize = null,
    mainWeight,
    auxiliarySize = null,
    auxiliaryWeight = null,
    colorizeBySign = false,
    id = null,
    style = null,
    lang = null,
    decimals = 0,
    rounding = null,
    signDisplay = null,
    skeleton = null,
    options = null,
    compact = null,
    percent = null,
    ...rest
  } = props;
  const {
    context
  } = (0, _useStatSkeleton.default)(skeleton);
  const {
    useBasisSize,
    defaultMainWeight
  } = _react.default.useContext(_StatValueContext.default);
  const resolvedLocale = (_ref = locale !== null && locale !== void 0 ? locale : context === null || context === void 0 || (_context$NumberFormat = context.NumberFormat) === null || _context$NumberFormat === void 0 ? void 0 : _context$NumberFormat.locale) !== null && _ref !== void 0 ? _ref : context === null || context === void 0 ? void 0 : context.locale;
  const rawValue = typeof value !== 'undefined' ? value : typeof children === 'string' || typeof children === 'number' ? children : null;
  const suffixStartsWithSlash = typeof suffix === 'string' && suffix.startsWith('/');
  const forceCurrencyAfterAmount = suffixStartsWithSlash && currencyPosition === 'auto';
  const formatted = (0, _useNumberFormatWithParts.default)(rawValue, {
    locale: resolvedLocale,
    currency,
    currencyDisplay,
    currencyPosition,
    compact,
    percent,
    decimals,
    rounding,
    signDisplay,
    forceCurrencyAfterAmount,
    options
  });
  const parts = formatted.parts;
  const isNegativeZero = Object.is(Number(rawValue), -0);
  const renderSign = signDisplay === 'always' && parts.sign ? isNegativeZero && parts.sign === '+' ? '\u2212' : parts.sign : null;
  const spaceAfterSign = renderSign === '-' || renderSign === '−';
  const renderedAmount = renderSign ? parts.number : parts.signedNumber;
  const hasCurrency = Boolean(parts.currency);
  const renderCurrencyBefore = parts.currencyPosition === 'before';
  const hasExplicitSizeProps = mainSize !== null || auxiliarySize !== null || fontSize !== null;
  const defaultFontSize = useBasisSize && !hasExplicitSizeProps ? 'basis' : 'large';
  const resolvedMainSize = (_ref2 = mainSize !== null && mainSize !== void 0 ? mainSize : fontSize) !== null && _ref2 !== void 0 ? _ref2 : defaultFontSize;
  const resolvedAuxiliarySize = (_ref3 = auxiliarySize !== null && auxiliarySize !== void 0 ? auxiliarySize : fontSize) !== null && _ref3 !== void 0 ? _ref3 : defaultFontSize;
  const resolvedMainLineHeight = (0, _Typography.getHeadingLineHeightSize)(resolvedMainSize);
  const resolvedAuxiliaryLineHeight = (0, _Typography.getHeadingLineHeightSize)(resolvedAuxiliarySize);
  const resolvedMainWeight = (_ref4 = mainWeight !== null && mainWeight !== void 0 ? mainWeight : defaultMainWeight) !== null && _ref4 !== void 0 ? _ref4 : 'medium';
  const resolvedAuxWeight = auxiliaryWeight !== null && auxiliaryWeight !== void 0 ? auxiliaryWeight : typeof mainWeight === 'undefined' && resolvedMainSize === resolvedAuxiliarySize ? 'medium' : null;
  const numericValue = Number(rawValue);
  const currencyClass = `dnb-stat__currency dnb-t__size--${resolvedAuxiliarySize} dnb-t__line-height--${resolvedAuxiliaryLineHeight}` + (resolvedAuxWeight ? ` dnb-t__weight--${resolvedAuxWeight}` : "");
  const amountClass = `dnb-stat__amount dnb-t__size--${resolvedMainSize} dnb-t__line-height--${resolvedMainLineHeight} dnb-t__weight--${resolvedMainWeight}`;
  const percentClass = `dnb-stat__percent dnb-t__size--${resolvedAuxiliarySize} dnb-t__line-height--${resolvedAuxiliaryLineHeight}` + (resolvedAuxWeight ? ` dnb-t__weight--${resolvedAuxWeight}` : "");
  let content = _react.default.createElement(_react.default.Fragment, null, renderSign && _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("span", {
    className: `dnb-stat__sign dnb-t__size--${resolvedMainSize} dnb-t__line-height--${resolvedMainLineHeight} dnb-t__weight--${resolvedMainWeight}`
  }, renderSign), spaceAfterSign ? ' ' : null), hasCurrency && renderCurrencyBefore && _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("span", {
    className: currencyClass
  }, parts.currency), parts.spaceAfterCurrency ? ' ' : null), _react.default.createElement("span", {
    className: amountClass
  }, renderedAmount), parts.percent && _react.default.createElement(_react.default.Fragment, null, parts.percentSpacing, _react.default.createElement("span", {
    className: percentClass
  }, parts.percent)), hasCurrency && !renderCurrencyBefore && _react.default.createElement(_react.default.Fragment, null, parts.spaceBeforeCurrency ? ' ' : null, _react.default.createElement("span", {
    className: currencyClass
  }, parts.currency)));
  let aria = formatted.aria;
  if (isNegativeZero && signDisplay === 'always' && typeof aria === 'string') {
    aria = aria.replace(/^\+/, '\u2212');
  }
  if (prefix) {
    const prefixElement = renderAffix(prefix, `dnb-stat__prefix dnb-t__size--${resolvedAuxiliarySize} dnb-t__line-height--${resolvedAuxiliaryLineHeight}` + (resolvedAuxWeight ? ` dnb-t__weight--${resolvedAuxWeight}` : ""));
    content = _react.default.createElement(_react.default.Fragment, null, prefixElement, " ", content);
    aria = `${(0, _componentHelper.convertJsxToString)(prefixElement)} ${aria}`;
  }
  if (suffix) {
    const suffixElement = renderAffix(suffix, `dnb-stat__suffix dnb-t__size--${resolvedAuxiliarySize} dnb-t__line-height--${resolvedAuxiliaryLineHeight}` + (resolvedAuxWeight ? ` dnb-t__weight--${resolvedAuxWeight}` : ""));
    const suffixSpace = typeof suffix === 'string' && suffix.startsWith('/') ? '' : ' ';
    content = _react.default.createElement(_react.default.Fragment, null, content, suffixSpace, suffixElement);
    aria = `${aria}${suffixSpace}${(0, _componentHelper.convertJsxToString)(suffixElement)}`;
  }
  const srText = srLabel ? `${(0, _componentHelper.convertJsxToString)(srLabel)}${' '}${aria}` : aria;
  return _react.default.createElement(_Text.TextInternal, _extends({}, rest, {
    id: id,
    element: Element,
    className: (0, _classnames.default)('dnb-stat', className),
    colorizeBySign: colorizeBySign ? numericValue : false,
    style: style,
    lang: lang || resolvedLocale || formatted.locale,
    skeleton: skeleton,
    textClassName: false
  }), _react.default.createElement("span", {
    className: "dnb-stat__content",
    "aria-hidden": true
  }, content), _react.default.createElement("span", {
    className: "dnb-sr-only",
    "data-text": srText
  }));
}
AmountBase._supportsSpacingProps = true;
function Amount(props) {
  (0, _componentHelper.warn)('Stat.Amount is deprecated. Use Stat.Number instead. Stat.Currency and Stat.Percent are not affected by this deprecation.');
  return _react.default.createElement(AmountBase, props);
}
Amount._supportsSpacingProps = true;
var _default = exports.default = Amount;
//# sourceMappingURL=Amount.js.map