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

The Design System that powers Razorpay

import { useEffect } from 'react';
import styled from 'styled-components/native';
import Animated, { useSharedValue, withTiming, cancelAnimation, useAnimatedStyle, Easing, withRepeat, withSequence, withDelay } from 'react-native-reanimated';
import { indeterminateAnimation, pulseAnimation } from './progressBarTokens.js';
import getIn from '../../utils/lodashButBetter/get.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 { makeMotionTime } from '../../utils/makeMotionTime/makeMotionTime.native.js';
import '../BottomSheet/BottomSheetStack.js';
import { jsx } from 'react/jsx-runtime';

var ProgressBarIndeterminateFilledContainer=styled(Animated.View)(function(_ref){var backgroundColor=_ref.backgroundColor;return {backgroundColor:backgroundColor,height:'100%',width:indeterminateAnimation.fillWidth,position:'absolute'};});var ProgressBarDeterminateFilledContainer=styled(Animated.View)(function(_ref2){var backgroundColor=_ref2.backgroundColor,progress=_ref2.progress;return {backgroundColor:backgroundColor,height:'100%',width:`${progress}%`};});var ProgressBarPulseAnimation=styled(Animated.View)({backgroundColor:pulseAnimation.backgroundColor,opacity:pulseAnimation.opacityInitial,width:'100%',height:'100%'});var ProgressBarFilled=function ProgressBarFilled(_ref3){var backgroundColor=_ref3.backgroundColor,progress=_ref3.progress,fillMotionDuration=_ref3.fillMotionDuration,motionEasing=_ref3.motionEasing,pulseMotionDuration=_ref3.pulseMotionDuration,pulseMotionDelay=_ref3.pulseMotionDelay,type=_ref3.type,isIndeterminate=_ref3.isIndeterminate,indeterminateMotionDuration=_ref3.indeterminateMotionDuration;var animatedWidth=useSharedValue(progress);var animatedOpacity=useSharedValue(pulseAnimation.opacityInitial);var animatedScaleX=useSharedValue(indeterminateAnimation.scaleXInitial);var animatedLeft=useSharedValue(indeterminateAnimation.leftInitial);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)));animatedWidth.value=withTiming(progress,{duration:fillDuration,easing:fillAndPulseEasing});return function(){cancelAnimation(animatedWidth);};},[progress,animatedWidth,fillMotionDuration,theme,fillAndPulseEasing]);var progressFillAnimatedStyle=useAnimatedStyle(function(){return {width:`${animatedWidth.value}%`};});useEffect(function(){if(type==='progress'&&isIndeterminate){var indeterminateDuration=castNativeType(makeMotionTime(getIn(theme.motion,indeterminateMotionDuration)));var indeterminateEasing=Easing.linear;animatedLeft.value=withRepeat(withTiming(indeterminateAnimation.leftFinal,{duration:indeterminateDuration,easing:indeterminateEasing}),-1);animatedScaleX.value=withRepeat(withSequence(withTiming(indeterminateAnimation.scaleXMid,{duration:indeterminateDuration/2,easing:indeterminateEasing}),withTiming(indeterminateAnimation.scaleXFinal,{duration:indeterminateDuration/2,easing:indeterminateEasing})),-1);}return function(){cancelAnimation(animatedLeft);cancelAnimation(animatedScaleX);};},[animatedLeft,animatedScaleX,indeterminateMotionDuration,isIndeterminate,theme,type]);var indeterminateAnimatedStyle=useAnimatedStyle(function(){return {left:animatedLeft.value,transform:[{scaleX:animatedScaleX.value}]};});useEffect(function(){var pulsatingAnimationTimingConfig={duration:pulseDuration,easing:fillAndPulseEasing};if(type==='progress'){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,type]);var pulseAnimatedStyle=useAnimatedStyle(function(){return {opacity:animatedOpacity.value};});var ProgressBarFilledContainer=isIndeterminate?ProgressBarIndeterminateFilledContainer:ProgressBarDeterminateFilledContainer;return jsx(ProgressBarFilledContainer,{style:isIndeterminate?indeterminateAnimatedStyle:progressFillAnimatedStyle,backgroundColor:backgroundColor,progress:progress,children:jsx(ProgressBarPulseAnimation,{style:pulseAnimatedStyle})});};

export { ProgressBarFilled };
//# sourceMappingURL=ProgressBarFilled.native.js.map