@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
166 lines • 8.04 kB
JavaScript
import React from 'react';
import clsx from 'clsx';
import useNumberFormatWithParts from "../number-format/useNumberFormatWithParts.js";
import { formatCurrency, formatPercent, formatNumber } from "../number-format/utils/index.js";
import { getHeadingLineHeightSize } from "../../elements/typography/Typography.js";
import { convertJsxToString } from "../../shared/component-helper.js";
import StatValueContext from "./StatValueContext.js";
import useStatSkeleton from "./useStatSkeleton.js";
import { TextInternal as Text } from "./Text.js";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
const renderAffix = (resolved, className) => {
if (typeof resolved === 'function') {
resolved = resolved();
}
return _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
} = useStatSkeleton(skeleton);
const {
useBasisSize,
defaultMainWeight
} = React.useContext(StatValueContext);
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 ? formatPercent : isCurrency ? formatCurrency : formatNumber;
const formatted = useNumberFormatWithParts(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 = getHeadingLineHeightSize(resolvedMainSize);
const resolvedAuxiliaryLineHeight = 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 = _jsxs(_Fragment, {
children: [renderSign && _jsxs(_Fragment, {
children: [_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 && _jsxs(_Fragment, {
children: [_jsx("span", {
className: currencyClass,
children: parts.currency
}), parts.spaceAfterCurrency && !omitCurrencySpacing ? ' ' : null]
}), _jsx("span", {
className: amountClass,
children: renderedAmount
}), parts.percent && _jsxs(_Fragment, {
children: [parts.percentSpacing, _jsx("span", {
className: percentClass,
children: parts.percent
})]
}), hasCurrency && !renderCurrencyBefore && _jsxs(_Fragment, {
children: [parts.spaceBeforeCurrency && !omitCurrencySpacing ? ' ' : null, _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 = _jsxs(_Fragment, {
children: [prefixElement, " ", content]
});
aria = `${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 = _jsxs(_Fragment, {
children: [content, suffixSpace, suffixElement]
});
aria = `${aria}${suffixSpace}${convertJsxToString(suffixElement)}`;
}
const srText = srLabel ? `${convertJsxToString(srLabel)}${' '}${aria}` : aria;
return _jsxs(Text, {
...rest,
id: id,
element: Element,
className: clsx('dnb-stat', className),
colorizeBySign: colorizeBySign ? numericValue : false,
style: style,
lang: lang || resolvedLocale || formatted.locale,
skeleton: skeleton,
textClassName: false,
children: [_jsx("span", {
className: "dnb-stat__content",
"aria-hidden": true,
children: content
}), _jsx("span", {
className: "dnb-sr-only",
"data-text": srText
})]
});
}
AmountBase._supportsSpacingProps = true;
export { AmountBase };
export default AmountBase;
//# sourceMappingURL=Amount.js.map