@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
145 lines • 7.63 kB
JavaScript
import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
import React from 'react';
import classnames from 'classnames';
import useNumberFormatWithParts from "../number-format/useNumberFormatWithParts.js";
import { getHeadingLineHeightSize } from "../../elements/typography/Typography.js";
import { convertJsxToString, warn } from "../../shared/component-helper.js";
import StatValueContext from "./StatValueContext.js";
import useStatSkeleton from "./useStatSkeleton.js";
import { TextInternal as Text } from "./Text.js";
const renderAffix = (resolved, className) => {
if (typeof resolved === 'function') {
resolved = resolved();
}
return React.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
} = 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 suffixStartsWithSlash = typeof suffix === 'string' && suffix.startsWith('/');
const forceCurrencyAfterAmount = suffixStartsWithSlash && currencyPosition === 'auto';
const formatted = useNumberFormatWithParts(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 = 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 = React.createElement(React.Fragment, null, renderSign && React.createElement(React.Fragment, null, React.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.createElement(React.Fragment, null, React.createElement("span", {
className: currencyClass
}, parts.currency), parts.spaceAfterCurrency ? ' ' : null), React.createElement("span", {
className: amountClass
}, renderedAmount), parts.percent && React.createElement(React.Fragment, null, parts.percentSpacing, React.createElement("span", {
className: percentClass
}, parts.percent)), hasCurrency && !renderCurrencyBefore && React.createElement(React.Fragment, null, parts.spaceBeforeCurrency ? ' ' : null, React.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.createElement(React.Fragment, null, 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 = React.createElement(React.Fragment, null, content, suffixSpace, suffixElement);
aria = `${aria}${suffixSpace}${convertJsxToString(suffixElement)}`;
}
const srText = srLabel ? `${convertJsxToString(srLabel)}${' '}${aria}` : aria;
return React.createElement(Text, _extends({}, rest, {
id: id,
element: Element,
className: classnames('dnb-stat', className),
colorizeBySign: colorizeBySign ? numericValue : false,
style: style,
lang: lang || resolvedLocale || formatted.locale,
skeleton: skeleton,
textClassName: false
}), React.createElement("span", {
className: "dnb-stat__content",
"aria-hidden": true
}, content), React.createElement("span", {
className: "dnb-sr-only",
"data-text": srText
}));
}
AmountBase._supportsSpacingProps = true;
export { AmountBase };
function Amount(props) {
warn('Stat.Amount is deprecated. Use Stat.Number instead. Stat.Currency and Stat.Percent are not affected by this deprecation.');
return React.createElement(AmountBase, props);
}
Amount._supportsSpacingProps = true;
export default Amount;
//# sourceMappingURL=Amount.js.map