@razorpay/blade/build/lib/native/components/ProgressBar/ProgressBar.js

The Design System that powers Razorpay

import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React__default from 'react';
import { ProgressBarFilled } from './ProgressBarFilled.native.js';
import { CircularProgressBarFilled } from './CircularProgressBar.native.js';
import clamp from '../../utils/lodashButBetter/clamp.js';
import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.native.js';
import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
import { Text } from '../Typography/Text/Text.js';
import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
import '@babel/runtime/helpers/slicedToArray';
import 'react-native';
import '../../tokens/global/typography.js';
import '../../tokens/global/motion.js';
import { size } from '../../tokens/global/size.js';
import { throwBladeError } from '../../utils/logger/logger.js';
import { makeSize } from '../../utils/makeSize/makeSize.js';
import useTheme from '../BladeProvider/useTheme.js';
import { useId } from '../../utils/useId.js';
import 'styled-components/native';
import '@gorhom/portal';
import 'react-native-gesture-handler';
import '../BottomSheet/BottomSheetStack.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import { BaseBox } from '../Box/BaseBox/BaseBox.native.js';
import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.native.js';
import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';

var _excluded=["accessibilityLabel","color","type","isIndeterminate","label","showPercentage","size","value","variant","min","max","testID"];var progressBarHeight={small:size[2],medium:size[4],large:size[0]};var _ProgressBar=function _ProgressBar(_ref,ref){var _label$trim;var accessibilityLabel=_ref.accessibilityLabel,color=_ref.color,type=_ref.type,_ref$isIndeterminate=_ref.isIndeterminate,isIndeterminate=_ref$isIndeterminate===void 0?false:_ref$isIndeterminate,label=_ref.label,_ref$showPercentage=_ref.showPercentage,showPercentage=_ref$showPercentage===void 0?true:_ref$showPercentage,_ref$size=_ref.size,size=_ref$size===void 0?'small':_ref$size,_ref$value=_ref.value,value=_ref$value===void 0?0:_ref$value,_ref$variant=_ref.variant,variant=_ref$variant===void 0?'progress':_ref$variant,_ref$min=_ref.min,min=_ref$min===void 0?0:_ref$min,_ref$max=_ref.max,max=_ref$max===void 0?100:_ref$max,testID=_ref.testID,rest=_objectWithoutProperties(_ref,_excluded);var _useTheme=useTheme(),theme=_useTheme.theme;var progressType=!type&&(variant==='meter'||variant==='progress')?variant:type;var progressVariant=variant==='meter'||variant==='progress'?'linear':variant;var id=useId(`${progressType}-${progressVariant}`);if(__DEV__){if(progressType==='meter'&&isIndeterminate){throwBladeError({moduleName:'ProgressBar',message:`Cannot set 'isIndeterminate' when 'type' or 'variant' is 'meter'.`});}if(progressVariant==='circular'&&isIndeterminate){throwBladeError({moduleName:'ProgressBar',message:`Cannot set 'isIndeterminate' when 'variant' is 'circular'.`});}if(progressVariant==='linear'&&size==='large'){throwBladeError({moduleName:'ProgressBar',message:`Large size isn't available when 'variant' is 'linear'.`});}if(type&&(variant==='progress'||variant==='meter')){throwBladeError({moduleName:'ProgressBar',message:`variant can only be 'linear' or 'circular' when 'type=${type}'.`});}}var unfilledBackgroundColor=theme.colors.feedback.background.neutral.subtle;var filledBackgroundColor=color?theme.colors.feedback.background[color].intense:theme.colors.surface.background.primary.intense;var hasLabel=label&&((_label$trim=label.trim())==null?void 0:_label$trim.length)>0;var isMeter=progressType==='meter';var isCircular=progressVariant==='circular';var progressValue=clamp(value,min,max);var percentageValue=(progressValue-min)*100/(max-min);var percentageProgressValue=isMeter?parseFloat(percentageValue.toFixed(1)):Math.floor(percentageValue);var shouldShowPercentage=showPercentage&&!isMeter&&!isIndeterminate;var accessibilityProps={role:'progressbar',label:accessibilityLabel!=null?accessibilityLabel:label,valueNow:percentageProgressValue,valueText:`${percentageProgressValue}%`,valueMin:min,valueMax:max};if(isMeter){accessibilityProps.role='meter';accessibilityProps.valueNow=progressValue;accessibilityProps.valueText=`${progressValue}`;}if(isIndeterminate){accessibilityProps.valueNow=undefined;accessibilityProps.valueMin=undefined;accessibilityProps.valueMax=undefined;accessibilityProps.valueText=undefined;}return jsx(BaseBox,Object.assign({ref:ref},getStyledProps(rest),metaAttribute({name:MetaConstants.ProgressBar,testID:testID}),makeAnalyticsAttribute(rest),{children:jsxs(BaseBox,{display:"flex",flexDirection:"column",width:"100%",children:[!isCircular?jsxs(BaseBox,{display:"flex",flexDirection:"row",justifyContent:hasLabel?'space-between':'flex-end',children:[hasLabel?jsx(Text,{as:"label",variant:"body",size:"small",color:"surface.text.gray.subtle",children:label}):null,shouldShowPercentage?jsx(BaseBox,{marginBottom:"spacing.2",children:jsx(Text,{variant:"body",size:"small",color:"surface.text.gray.subtle",children:`${percentageProgressValue}%`})}):null]}):null,jsx(BaseBox,Object.assign({id:id},makeAccessible({role:accessibilityProps.role,label:accessibilityProps.label,valueNow:accessibilityProps.valueNow,valueText:accessibilityProps.valueText,valueMin:accessibilityProps.valueMin,valueMax:accessibilityProps.valueMax}),{children:isCircular?jsx(CircularProgressBarFilled,{size:size,label:label,progressPercent:percentageProgressValue,isMeter:isMeter,showPercentage:showPercentage,backgroundColor:unfilledBackgroundColor,fillColor:filledBackgroundColor,pulseMotionDuration:"duration.2xgentle",fillMotionDuration:"duration.2xgentle",pulseMotionDelay:"delay.long",motionEasing:"easing.emphasized"}):jsx(BaseBox,{backgroundColor:unfilledBackgroundColor,height:makeSize(progressBarHeight[size]),overflow:"hidden",position:"relative",children:jsx(ProgressBarFilled,{backgroundColor:filledBackgroundColor,progress:percentageProgressValue,fillMotionDuration:"duration.2xgentle",pulseMotionDuration:"duration.2xgentle",indeterminateMotionDuration:"duration.2xgentle",pulseMotionDelay:"delay.long",motionEasing:"easing.emphasized",type:progressType,isIndeterminate:isIndeterminate})})}))]})}));};var ProgressBar=React__default.forwardRef(_ProgressBar);

export { ProgressBar };
//# sourceMappingURL=ProgressBar.js.map