@razorpay/blade
Version:
The Design System that powers Razorpay
328 lines (324 loc) • 13.6 kB
JavaScript
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React__default from 'react';
import { formatNumberByParts } from '@razorpay/i18nify-js/currency';
import { subtleFontSizes, normalAmountSizes, amountLineHeights } from './amountTokens.js';
import '../Box/BaseBox/index.js';
import '../../utils/index.js';
import '../../utils/metaAttribute/index.js';
import '../Box/styledProps/index.js';
import '../../utils/assignWithoutSideEffects/index.js';
import '../../utils/logger/index.js';
import { objectKeysWithType } from '../../utils/objectKeysWithType.js';
import '../Typography/BaseText/index.js';
import '../Typography/index.js';
import '../../tokens/global/index.js';
import '../../utils/makeAnalyticsAttribute/index.js';
import { jsxs, jsx } from 'react/jsx-runtime';
import { getPlatformType } from '../../utils/getPlatformType/getPlatformType.js';
import { Text } from '../Typography/Text/Text.js';
import { BaseText } from '../Typography/BaseText/BaseText.web.js';
import { opacity } from '../../tokens/global/opacity.js';
import { throwBladeError } from '../../utils/logger/logger.js';
import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
var _excluded = ["value", "suffix", "type", "size", "weight", "isAffixSubtle", "isStrikethrough", "color", "currencyIndicator", "currency", "testID"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var stripTrailingZerosFromParts = function stripTrailingZerosFromParts(parts) {
var decimalPart = parts.rawParts.filter(function (_ref) {
var type = _ref.type;
return type === 'fraction';
}).map(function (_ref2) {
var value = _ref2.value;
return value;
}).join('');
var hasFraction = parts.rawParts.some(function (_ref3) {
var type = _ref3.type;
return type === 'fraction';
});
if (hasFraction && /^0+$/.test(decimalPart)) {
delete parts.decimal;
delete parts.fraction;
parts.rawParts = parts.rawParts.filter(function (_ref4) {
var type = _ref4.type;
return type !== 'decimal' && type !== 'fraction';
});
}
return parts;
};
/**
* Wrapper that uses pollyfill of i18nify team
*/
var pollyfilledFormatNumberByParts = function pollyfilledFormatNumberByParts(value, options) {
var _options$intlOptions;
var parts = formatNumberByParts(value, options);
if ((options === null || options === void 0 ? void 0 : (_options$intlOptions = options.intlOptions) === null || _options$intlOptions === void 0 ? void 0 : _options$intlOptions.trailingZeroDisplay) === 'stripIfInteger') {
return stripTrailingZerosFromParts(parts);
}
return parts;
};
var getTextColorProps = function getTextColorProps(_ref5) {
var color = _ref5.color;
var props = {
amountValueColor: 'surface.text.gray.normal'
};
if (!color) return props;
props.amountValueColor = color;
return props;
};
var AmountValue = function AmountValue(_ref6) {
var amount = _ref6.amount,
_ref6$size = _ref6.size,
size = _ref6$size === void 0 ? 'medium' : _ref6$size,
_ref6$type = _ref6.type,
type = _ref6$type === void 0 ? 'body' : _ref6$type,
_ref6$weight = _ref6.weight,
weight = _ref6$weight === void 0 ? 'regular' : _ref6$weight,
amountValueColor = _ref6.amountValueColor,
isAffixSubtle = _ref6.isAffixSubtle,
suffix = _ref6.suffix;
var isReactNative = getPlatformType() === 'react-native';
var affixFontSize = isAffixSubtle ? subtleFontSizes[type][size] : normalAmountSizes[type][size];
var numberFontFamily = type === 'body' ? 'text' : 'heading';
if (suffix === 'decimals' && isAffixSubtle) {
// Native does not support alignItems of Text inside a div, instead we need to wrap is in a Text
var AmountWrapper = isReactNative ? Text : React__default.Fragment;
return /*#__PURE__*/jsxs(AmountWrapper, {
children: [/*#__PURE__*/jsx(BaseText, {
fontSize: normalAmountSizes[type][size],
fontWeight: weight,
lineHeight: amountLineHeights[type][size],
color: amountValueColor,
fontFamily: numberFontFamily,
as: isReactNative ? undefined : 'span',
children: amount.integer
}), /*#__PURE__*/jsxs(BaseText, {
fontWeight: weight,
fontSize: affixFontSize,
fontFamily: numberFontFamily,
color: amountValueColor,
as: isReactNative ? undefined : 'span',
opacity: isAffixSubtle ? opacity[800] : 1,
children: [amount.decimal, amount.fraction]
})]
});
}
return /*#__PURE__*/jsxs(BaseText, {
fontSize: normalAmountSizes[type][size],
fontWeight: weight,
fontFamily: numberFontFamily,
color: amountValueColor,
lineHeight: amountLineHeights[type][size],
children: [amount.integer, amount.decimal, amount.fraction, amount.compact]
});
};
/**
* Returns a parsed object based on the suffix passed in parameters
* === Logic ===
* value = 12500.45
* if suffix === 'decimals' => {
"integer": "12,500",
"decimal": ".",
"fraction": "45",
"compact": "K",
"isPrefixSymbol": false,
"rawParts": [{"type": "integer","value": "12"},{"type": "group","value": ","},{"type": "integer","value": "500"},{"type": "decimal","value": "."},{"type": "fraction","value": "45"}]
}
* @returns {AmountType}
*/
var getAmountByParts = function getAmountByParts(_ref7) {
var suffix = _ref7.suffix,
value = _ref7.value,
currency = _ref7.currency;
try {
switch (suffix) {
case 'decimals':
{
var options = {
intlOptions: {
maximumFractionDigits: 2,
minimumFractionDigits: 2
},
currency: currency
};
return pollyfilledFormatNumberByParts(value, options);
}
case 'humanize':
{
var _options = {
intlOptions: {
notation: 'compact',
maximumFractionDigits: 2,
trailingZeroDisplay: 'stripIfInteger'
},
currency: currency
};
return pollyfilledFormatNumberByParts(value, _options);
}
default:
{
var _options2 = {
intlOptions: {
maximumFractionDigits: 0,
roundingMode: 'floor'
},
currency: currency
};
return pollyfilledFormatNumberByParts(value, _options2);
}
}
} catch (err) {
return {
integer: "".concat(value),
currency: currency
};
}
};
var _Amount = function _Amount(_ref8, ref) {
var _renderedValue$isPref, _renderedValue$curren;
var value = _ref8.value,
_ref8$suffix = _ref8.suffix,
suffix = _ref8$suffix === void 0 ? 'decimals' : _ref8$suffix,
_ref8$type = _ref8.type,
type = _ref8$type === void 0 ? 'body' : _ref8$type,
_ref8$size = _ref8.size,
size = _ref8$size === void 0 ? 'medium' : _ref8$size,
_ref8$weight = _ref8.weight,
weight = _ref8$weight === void 0 ? 'regular' : _ref8$weight,
_ref8$isAffixSubtle = _ref8.isAffixSubtle,
isAffixSubtle = _ref8$isAffixSubtle === void 0 ? true : _ref8$isAffixSubtle,
_ref8$isStrikethrough = _ref8.isStrikethrough,
isStrikethrough = _ref8$isStrikethrough === void 0 ? false : _ref8$isStrikethrough,
color = _ref8.color,
_ref8$currencyIndicat = _ref8.currencyIndicator,
currencyIndicator = _ref8$currencyIndicat === void 0 ? 'currency-symbol' : _ref8$currencyIndicat,
_ref8$currency = _ref8.currency,
currency = _ref8$currency === void 0 ? 'INR' : _ref8$currency,
testID = _ref8.testID,
rest = _objectWithoutProperties(_ref8, _excluded);
if (false) {
if (typeof value !== 'number') {
throwBladeError({
message: '`value` prop must be of type `number` for Amount.',
moduleName: 'Amount'
});
}
// @ts-expect-error neutral color should throw error
if (color === 'neutral') {
throwBladeError({
message: '`neutral` color is not supported.',
moduleName: 'Amount'
});
}
var bodySizes = objectKeysWithType(normalAmountSizes.body);
if ((type === 'body' || !type) && !bodySizes.includes(size)) {
throwBladeError({
message: "size=\"".concat(size, "\" is not allowed with type=\"body\""),
moduleName: 'Amount'
});
}
var displaySizes = objectKeysWithType(normalAmountSizes.display);
if (type === 'display' && !displaySizes.includes(size)) {
throwBladeError({
message: "size=\"".concat(size, "\" is not allowed with type=\"display\""),
moduleName: 'Amount'
});
}
var headingSizes = objectKeysWithType(normalAmountSizes.heading);
if (type === 'heading' && !headingSizes.includes(size)) {
throwBladeError({
message: "size=\"".concat(size, "\" is not allowed with type=\"heading\""),
moduleName: 'Amount'
});
}
}
var _getTextColorProps = getTextColorProps({
color: color
}),
amountValueColor = _getTextColorProps.amountValueColor;
var renderedValue = getAmountByParts({
suffix: suffix,
value: value,
currency: currency
});
var isPrefixSymbol = (_renderedValue$isPref = renderedValue.isPrefixSymbol) !== null && _renderedValue$isPref !== void 0 ? _renderedValue$isPref : true;
var currencySymbol = (_renderedValue$curren = renderedValue.currency) !== null && _renderedValue$curren !== void 0 ? _renderedValue$curren : currency;
var currencyPosition = isPrefixSymbol ? 'left' : 'right';
var currencySymbolOrCode = currencyIndicator === 'currency-symbol' ? currencySymbol : currency;
var currencyFontSize = isAffixSubtle ? subtleFontSizes[type][size] : normalAmountSizes[type][size];
var isReactNative = getPlatformType() === 'react-native';
return /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
ref: ref,
display: isReactNative ? 'flex' : 'inline-flex',
flexDirection: "row"
}, metaAttribute({
name: MetaConstants.Amount,
testID: testID
})), getStyledProps(rest)), makeAnalyticsAttribute(rest)), {}, {
children: /*#__PURE__*/jsxs(BaseBox, {
display: isReactNative ? 'flex' : 'inline-flex',
alignItems: "baseline",
flexDirection: "row",
position: "relative",
children: [renderedValue.minusSign ? /*#__PURE__*/jsx(BaseText, {
fontSize: normalAmountSizes[type][size],
fontWeight: weight,
lineHeight: amountLineHeights[type][size],
color: amountValueColor,
as: isReactNative ? undefined : 'span',
marginX: "spacing.2",
children: renderedValue.minusSign
}) : null, currencyPosition === 'left' && /*#__PURE__*/jsx(BaseText, {
marginRight: "spacing.1",
fontWeight: weight,
fontSize: currencyFontSize,
color: amountValueColor,
as: isReactNative ? undefined : 'span',
opacity: isAffixSubtle ? opacity[800] : 1,
children: currencySymbolOrCode
}), /*#__PURE__*/jsx(AmountValue, {
amount: renderedValue,
amountValueColor: amountValueColor,
type: type,
weight: weight,
size: size,
isAffixSubtle: isAffixSubtle,
suffix: suffix,
currency: currency
}), currencyPosition === 'right' && /*#__PURE__*/jsx(BaseText, {
marginLeft: "spacing.1",
fontWeight: weight,
fontSize: currencyFontSize,
color: amountValueColor,
as: isReactNative ? undefined : 'span',
opacity: isAffixSubtle ? opacity[800] : 1,
children: currencySymbolOrCode
}), isStrikethrough &&
/*#__PURE__*/
// eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error
// @ts-ignore: the borderBottomColor error below is thrown here as well
jsx(BaseBox
// eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error
// @ts-ignore- intentionally setting the border color to the color prop for this hacky strikethrough
, {
borderBottomColor: amountValueColor,
borderBottomWidth: type === 'body' ? 'thin' : 'thicker',
borderBottomStyle: "solid",
position: "absolute",
width: "100%",
top: "50%"
})]
})
}));
};
var Amount = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/React__default.forwardRef(_Amount), {
displayName: 'Amount',
componentId: 'Amount'
});
export { Amount, getAmountByParts };
//# sourceMappingURL=Amount.js.map