@razorpay/blade
Version:
The Design System that powers Razorpay
32 lines (29 loc) • 3.79 kB
JavaScript
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