UNPKG

@razorpay/blade

Version:

The Design System that powers Razorpay

32 lines (29 loc) 3.79 kB
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties'; import React__default from 'react'; import { StyledCounter } from './StyledCounter.native.js'; import { counterHeight, horizontalPadding } from './counterTokens.js'; import '../Typography/Heading/Heading.js'; import { Text } from '../Typography/Text/Text.js'; import '../Typography/Code/Code.js'; import '../Typography/Display/Display.js'; import { BaseBox } from '../Box/BaseBox/BaseBox.native.js'; import 'styled-components/native'; import '@gorhom/portal'; import 'react-native-gesture-handler'; import useTheme from '../BladeProvider/useTheme.js'; import 'react-native'; import '@babel/runtime/helpers/slicedToArray'; import { isReactNative } from '../../utils/platform/isReactNative.js'; import { makeSize } from '../../utils/makeSize/makeSize.js'; import '../BottomSheet/BottomSheetStack.js'; import { jsx } from 'react/jsx-runtime'; import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.native.js'; import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js'; import { getStyledProps } from '../Box/styledProps/getStyledProps.js'; import '../../tokens/global/typography.js'; import '../../tokens/global/motion.js'; import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js'; import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js'; var _excluded=["value","max","color","emphasis","size","testID"];var getColorProps=function getColorProps(_ref){var _ref$color=_ref.color,color=_ref$color===void 0?'neutral':_ref$color,_ref$emphasis=_ref.emphasis,emphasis=_ref$emphasis===void 0?'subtle':_ref$emphasis;var props={textColor:'feedback.text.neutral.intense',backgroundColor:'feedback.background.neutral.subtle'};if(color==='primary'){props.textColor=emphasis==='intense'?`surface.text.staticWhite.normal`:`surface.text.primary.normal`;props.backgroundColor=`surface.background.primary.${emphasis}`;}else {props.textColor=emphasis==='intense'?`surface.text.staticWhite.normal`:`feedback.text.${color}.intense`;props.backgroundColor=`feedback.background.${color}.${emphasis}`;}return props;};var _Counter=function _Counter(_ref2,ref){var value=_ref2.value,max=_ref2.max,_ref2$color=_ref2.color,color=_ref2$color===void 0?'neutral':_ref2$color,_ref2$emphasis=_ref2.emphasis,emphasis=_ref2$emphasis===void 0?'subtle':_ref2$emphasis,_ref2$size=_ref2.size,size=_ref2$size===void 0?'medium':_ref2$size,testID=_ref2.testID,rest=_objectWithoutProperties(_ref2,_excluded);var content=`${value}`;if(max&&value>max){content=`${max}+`;}var _useTheme=useTheme(),platform=_useTheme.platform;var _getColorProps=getColorProps({color:color,emphasis:emphasis}),backgroundColor=_getColorProps.backgroundColor,textColor=_getColorProps.textColor;var counterTextSizes={small:{variant:'body',size:'xsmall'},medium:{variant:'body',size:'small'},large:{variant:'body',size:'medium'}};return jsx(BaseBox,Object.assign({ref:ref,display:isReactNative()?'flex':'inline-flex'},metaAttribute({name:MetaConstants.Counter,testID:testID}),getStyledProps(rest),makeAnalyticsAttribute(rest),{children:jsx(StyledCounter,{minHeight:makeSize(counterHeight[size]),backgroundColor:backgroundColor,size:size,platform:platform,children:jsx(BaseBox,{paddingX:horizontalPadding[size],display:"flex",flexDirection:"row",justifyContent:"center",alignItems:"center",overflow:"hidden",children:jsx(Text,Object.assign({},counterTextSizes[size],{textAlign:"center",weight:"medium",truncateAfterLines:1,color:textColor,children:content}))})})}));};var Counter=assignWithoutSideEffects(React__default.forwardRef(_Counter),{displayName:'Counter',componentId:'Counter'}); export { Counter }; //# sourceMappingURL=Counter.js.map