@razorpay/blade
Version:
The Design System that powers Razorpay
30 lines (27 loc) • 5.09 kB
JavaScript
import { useEffect } from 'react';
import styled from 'styled-components/native';
import Animated, { useSharedValue, withTiming, cancelAnimation, withDelay, withRepeat, withSequence, useAnimatedStyle } from 'react-native-reanimated';
import { Text, Circle } from 'react-native-svg';
import { getCircularProgressSVGTokens, circularProgressSizeTokens } from './progressBarTokens.js';
import { CircularProgressLabel } from './CircularProgressLabel.js';
import getIn from '../../utils/lodashButBetter/get.js';
import { BaseBox } from '../Box/BaseBox/BaseBox.native.js';
import { makeMotionTime } from '../../utils/makeMotionTime/makeMotionTime.native.js';
import '../Typography/Heading/Heading.js';
import { getTextProps } from '../Typography/Text/Text.js';
import '../Typography/Code/Code.js';
import '../Typography/Display/Display.js';
import '@gorhom/portal';
import 'react-native-gesture-handler';
import useTheme from '../BladeProvider/useTheme.js';
import 'react-native';
import '@babel/runtime/helpers/slicedToArray';
import { castNativeType } from '../../utils/platform/castUtils.js';
import '../BottomSheet/BottomSheetStack.js';
import { jsxs, jsx } from 'react/jsx-runtime';
import '@babel/runtime/helpers/defineProperty';
import Svg from '../Icons/_Svg/Svg/Svg.native.js';
import getBaseTextStyles from '../Typography/BaseText/getBaseTextStyles.js';
var pulseAnimation={opacityInitial:1,opacityMid:0.65,opacityFinal:1};var StyledSVGText=styled(Text)(function(_ref){var theme=_ref.theme,size=_ref.size,weight=_ref.weight;var textProps=getTextProps({variant:'body',size:size,weight:weight});return Object.assign({},getBaseTextStyles(Object.assign({theme:theme},textProps)),{strokeWidth:0,fill:textProps.color==='currentColor'?textProps.color:getIn(theme.colors,textProps.color)});});var CircularProgressBarFilled=function CircularProgressBarFilled(_ref2){var progressPercent=_ref2.progressPercent,fillColor=_ref2.fillColor,backgroundColor=_ref2.backgroundColor,_ref2$size=_ref2.size,size=_ref2$size===void 0?'small':_ref2$size,label=_ref2.label,_ref2$showPercentage=_ref2.showPercentage,showPercentage=_ref2$showPercentage===void 0?true:_ref2$showPercentage,isMeter=_ref2.isMeter,motionEasing=_ref2.motionEasing,pulseMotionDuration=_ref2.pulseMotionDuration,pulseMotionDelay=_ref2.pulseMotionDelay,fillMotionDuration=_ref2.fillMotionDuration;var _getCircularProgressS=getCircularProgressSVGTokens({size:size,progressPercent:progressPercent}),sqSize=_getCircularProgressS.sqSize,strokeWidth=_getCircularProgressS.strokeWidth,radius=_getCircularProgressS.radius,viewBox=_getCircularProgressS.viewBox,dashArray=_getCircularProgressS.dashArray,dashOffset=_getCircularProgressS.dashOffset;var AnimatedCircle=Animated.createAnimatedComponent(Circle);var animatedOpacity=useSharedValue(pulseAnimation.opacityInitial);var animatedStrokeDashoffset=useSharedValue(dashOffset);var _useTheme=useTheme(),theme=_useTheme.theme;var fillAndPulseEasing=getIn(theme.motion,motionEasing);var pulseDuration=castNativeType(makeMotionTime(getIn(theme.motion,pulseMotionDuration)))/2;useEffect(function(){var fillDuration=castNativeType(makeMotionTime(getIn(theme.motion,fillMotionDuration)));animatedStrokeDashoffset.value=withTiming(dashOffset,{duration:fillDuration,easing:fillAndPulseEasing});return function(){cancelAnimation(animatedStrokeDashoffset);};},[dashOffset,animatedStrokeDashoffset,fillMotionDuration,theme,fillAndPulseEasing]);useEffect(function(){var pulsatingAnimationTimingConfig={duration:pulseDuration,easing:fillAndPulseEasing};if(!isMeter){animatedOpacity.value=withDelay(castNativeType(makeMotionTime(getIn(theme.motion,pulseMotionDelay))),withRepeat(withSequence(withTiming(pulseAnimation.opacityMid,pulsatingAnimationTimingConfig),withTiming(pulseAnimation.opacityFinal,pulsatingAnimationTimingConfig)),-1));}return function(){cancelAnimation(animatedOpacity);};},[animatedOpacity,fillAndPulseEasing,pulseDuration,pulseMotionDelay,theme,isMeter]);var firstIndicatorStyles=useAnimatedStyle(function(){return {strokeDashoffset:animatedStrokeDashoffset.value,opacity:progressPercent<100?animatedOpacity.value:1};});return jsxs(BaseBox,{display:"flex",width:"fit-content",alignItems:"center",children:[jsxs(Svg,{width:String(sqSize),height:String(sqSize),viewBox:viewBox,children:[jsx(Circle,{fill:"none",stroke:backgroundColor,cx:String(sqSize/2),cy:String(sqSize/2),r:String(radius),strokeWidth:`${strokeWidth}px`}),jsx(AnimatedCircle,{fill:"none",stroke:fillColor,cx:sqSize/2,cy:sqSize/2,r:radius,strokeWidth:`${strokeWidth}px`,transform:`rotate(-90 ${sqSize/2} ${sqSize/2})`,strokeDasharray:dashArray,strokeDashoffset:dashOffset,style:firstIndicatorStyles}),showPercentage&&size!=='small'&&jsx(StyledSVGText,{size:circularProgressSizeTokens[size].percentTextSize,weight:"semibold",x:"50%",y:"50%",textAnchor:"middle",dy:".5em",children:`${progressPercent}%`})]}),jsx(CircularProgressLabel,{progressPercent:progressPercent,size:size,label:label,showPercentage:showPercentage})]});};
export { CircularProgressBarFilled };
//# sourceMappingURL=CircularProgressBar.native.js.map