@razorpay/blade
Version:
The Design System that powers Razorpay
31 lines (28 loc) • 9.05 kB
JavaScript
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 { BaseBox } from '../Box/BaseBox/BaseBox.native.js';
import 'react-native';
import { getPlatformType } from '../../utils/getPlatformType/getPlatformType.js';
import '@babel/runtime/helpers/slicedToArray';
import { throwBladeError } from '../../utils/logger/logger.js';
import '../BladeProvider/useTheme.js';
import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.native.js';
import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
import { opacity } from '../../tokens/global/opacity.js';
import '../../tokens/global/typography.js';
import '../../tokens/global/motion.js';
import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
import { objectKeysWithType } from '../../utils/objectKeysWithType.js';
import { BaseText } from '../Typography/BaseText/BaseText.native.js';
import '../Typography/Heading/Heading.js';
import { Text } from '../Typography/Text/Text.js';
import '../Typography/Code/Code.js';
import '../Typography/Display/Display.js';
import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
import { jsx, jsxs } from 'react/jsx-runtime';
var _excluded=["value","suffix","type","size","weight","isAffixSubtle","isStrikethrough","color","currencyIndicator","currency","testID"];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;};var pollyfilledFormatNumberByParts=function pollyfilledFormatNumberByParts(value,options){var _options$intlOptions;var parts=formatNumberByParts(value,options);if((options==null?void 0:(_options$intlOptions=options.intlOptions)==null?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){var AmountWrapper=isReactNative?Text:React__default.Fragment;return jsxs(AmountWrapper,{children:[jsx(BaseText,{fontSize:normalAmountSizes[type][size],fontWeight:weight,lineHeight:amountLineHeights[type][size],color:amountValueColor,fontFamily:numberFontFamily,as:isReactNative?undefined:'span',children:amount.integer}),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 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]});};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:`${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(__DEV__){if(typeof value!=='number'){throwBladeError({message:'`value` prop must be of type `number` for Amount.',moduleName:'Amount'});}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="${size}" is not allowed with type="body"`,moduleName:'Amount'});}var displaySizes=objectKeysWithType(normalAmountSizes.display);if(type==='display'&&!displaySizes.includes(size)){throwBladeError({message:`size="${size}" is not allowed with type="display"`,moduleName:'Amount'});}var headingSizes=objectKeysWithType(normalAmountSizes.heading);if(type==='heading'&&!headingSizes.includes(size)){throwBladeError({message:`size="${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:true;var currencySymbol=(_renderedValue$curren=renderedValue.currency)!=null?_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 jsx(BaseBox,Object.assign({ref:ref,display:isReactNative?'flex':'inline-flex',flexDirection:"row"},metaAttribute({name:MetaConstants.Amount,testID:testID}),getStyledProps(rest),makeAnalyticsAttribute(rest),{children:jsxs(BaseBox,{display:isReactNative?'flex':'inline-flex',alignItems:"baseline",flexDirection:"row",position:"relative",children:[renderedValue.minusSign?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'&&jsx(BaseText,{marginRight:"spacing.1",fontWeight:weight,fontSize:currencyFontSize,color:amountValueColor,as:isReactNative?undefined:'span',opacity:isAffixSubtle?opacity[800]:1,children:currencySymbolOrCode}),jsx(AmountValue,{amount:renderedValue,amountValueColor:amountValueColor,type:type,weight:weight,size:size,isAffixSubtle:isAffixSubtle,suffix:suffix,currency:currency}),currencyPosition==='right'&&jsx(BaseText,{marginLeft:"spacing.1",fontWeight:weight,fontSize:currencyFontSize,color:amountValueColor,as:isReactNative?undefined:'span',opacity:isAffixSubtle?opacity[800]:1,children:currencySymbolOrCode}),isStrikethrough&&jsx(BaseBox,{borderBottomColor:amountValueColor,borderBottomWidth:type==='body'?'thin':'thicker',borderBottomStyle:"solid",position:"absolute",width:"100%",top:"50%"})]})}));};var Amount=assignWithoutSideEffects(React__default.forwardRef(_Amount),{displayName:'Amount',componentId:'Amount'});
export { Amount, getAmountByParts };
//# sourceMappingURL=Amount.js.map