@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 _clsx = _interopRequireDefault(require("clsx"));
var _useNumberFormatWithParts = _interopRequireDefault(require("../number-format/useNumberFormatWithParts.js"));
var _index = require("../number-format/utils/index.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");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const renderAffix = (resolved, className) => {
  if (typeof resolved === 'function') {
    resolved = resolved();
  }
  return (0, _jsxRuntime.jsx)("span", {
    className: className,
    children: 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 isCurrency = currency === true || typeof currency === 'string';
  const suffixStartsWithSlash = typeof suffix === 'string' && suffix.startsWith('/');
  const forceCurrencyAfterAmount = isCurrency && currencyPosition === 'auto' && (suffixStartsWithSlash || signDisplay === 'always');
  const resolvedCurrencyPosition = forceCurrencyAfterAmount ? 'after' : currencyPosition === 'auto' ? null : currencyPosition;
  const formatter = percent ? _index.formatPercent : isCurrency ? _index.formatCurrency : _index.formatNumber;
  const formatted = (0, _useNumberFormatWithParts.default)(rawValue, formatter, {
    locale: resolvedLocale,
    currency: isCurrency ? currency : false,
    currencyDisplay,
    currencyPosition: resolvedCurrencyPosition,
    compact,
    decimals,
    rounding,
    signDisplay,
    options
  });
  const parts = formatted.parts;
  const omitCurrencySpacing = isCurrency && currencyPosition === 'auto' && signDisplay === 'always';
  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 = (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [renderSign && (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
      children: [(0, _jsxRuntime.jsx)("span", {
        className: `dnb-stat__sign dnb-t__size--${resolvedMainSize} dnb-t__line-height--${resolvedMainLineHeight} dnb-t__weight--${resolvedMainWeight}`,
        children: renderSign
      }), spaceAfterSign ? ' ' : null]
    }), hasCurrency && renderCurrencyBefore && (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
      children: [(0, _jsxRuntime.jsx)("span", {
        className: currencyClass,
        children: parts.currency
      }), parts.spaceAfterCurrency && !omitCurrencySpacing ? ' ' : null]
    }), (0, _jsxRuntime.jsx)("span", {
      className: amountClass,
      children: renderedAmount
    }), parts.percent && (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
      children: [parts.percentSpacing, (0, _jsxRuntime.jsx)("span", {
        className: percentClass,
        children: parts.percent
      })]
    }), hasCurrency && !renderCurrencyBefore && (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
      children: [parts.spaceBeforeCurrency && !omitCurrencySpacing ? ' ' : null, (0, _jsxRuntime.jsx)("span", {
        className: currencyClass,
        children: 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 = (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
      children: [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 = (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
      children: [content, suffixSpace, suffixElement]
    });
    aria = `${aria}${suffixSpace}${(0, _componentHelper.convertJsxToString)(suffixElement)}`;
  }
  const srText = srLabel ? `${(0, _componentHelper.convertJsxToString)(srLabel)}${' '}${aria}` : aria;
  return (0, _jsxRuntime.jsxs)(_Text.TextInternal, {
    ...rest,
    id: id,
    element: Element,
    className: (0, _clsx.default)('dnb-stat', className),
    colorizeBySign: colorizeBySign ? numericValue : false,
    style: style,
    lang: lang || resolvedLocale || formatted.locale,
    skeleton: skeleton,
    textClassName: false,
    children: [(0, _jsxRuntime.jsx)("span", {
      className: "dnb-stat__content",
      "aria-hidden": true,
      children: content
    }), (0, _jsxRuntime.jsx)("span", {
      className: "dnb-sr-only",
      "data-text": srText
    })]
  });
}
AmountBase._supportsSpacingProps = true;
var _default = exports.default = AmountBase;
//# sourceMappingURL=Amount.js.map