UNPKG

@razorpay/blade

Version:

The Design System that powers Razorpay

36 lines (33 loc) 10.3 kB
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties'; import React__default from 'react'; import { formatNumberByParts } from '@razorpay/i18nify-js/currency'; import { normalAmountSizes, amountLineHeights, subtleFontSizes, currencyHardcodedSizes } from './amountTokens.js'; import { BaseBox } from '../Box/BaseBox/BaseBox.native.js'; import 'react-native'; import { getPlatformType } from '../../utils/getPlatformType/getPlatformType.js'; import { useBreakpoint } from '../../utils/useBreakpoint/useBreakpoint.js'; import '@babel/runtime/helpers/slicedToArray'; import { throwBladeError } from '../../utils/logger/logger.js'; import { opacity } from '../../tokens/global/opacity.js'; import '../../tokens/global/typography.js'; import '../../tokens/global/motion.js'; import useTheme from '../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 { 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 'styled-components/native'; import '@gorhom/portal'; import 'react-native-gesture-handler'; import '../BottomSheet/BottomSheetStack.js'; import { jsx, jsxs } from 'react/jsx-runtime'; var _excluded=["value","suffix","type","size","weight","isAffixSubtle","isStrikethrough","color","currencyIndicator","currency","fractionDigits","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,_ref7$fractionDigits=_ref7.fractionDigits,fractionDigits=_ref7$fractionDigits===void 0?2:_ref7$fractionDigits;try{switch(suffix){case'decimals':{var intlOptions=fractionDigits==='auto'?{style:'currency'}:{maximumFractionDigits:fractionDigits,minimumFractionDigits:fractionDigits};var options={intlOptions:intlOptions,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,_ref8$fractionDigits=_ref8.fractionDigits,fractionDigits=_ref8$fractionDigits===void 0?2:_ref8$fractionDigits,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 _useTheme=useTheme(),theme=_useTheme.theme;var _useBreakpoint=useBreakpoint({breakpoints:theme.breakpoints}),matchedDeviceType=_useBreakpoint.matchedDeviceType;var isDesktop=matchedDeviceType==='desktop';var renderedValue=getAmountByParts({suffix:suffix,value:value,currency:currency,fractionDigits:fractionDigits});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 getCurrencyFontProps=function getCurrencyFontProps(){if(isAffixSubtle){return {fontSize:subtleFontSizes[type][size],style:undefined};}if(type==='body'){return {fontSize:normalAmountSizes[type][size],style:undefined};}var hardcodedSize=currencyHardcodedSizes[type][size];return {fontSize:normalAmountSizes[type][size],style:hardcodedSize?{fontSize:`${hardcodedSize[isDesktop?'desktop':'mobile']}px`}:undefined};};var currencyFontProps=getCurrencyFontProps();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:currencyFontProps.fontSize,color:amountValueColor,as:isReactNative?undefined:'span',opacity:isAffixSubtle?opacity[800]:1,style:currencyFontProps.style,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:currencyFontProps.fontSize,color:amountValueColor,as:isReactNative?undefined:'span',opacity:isAffixSubtle?opacity[800]:1,style:currencyFontProps.style,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