@razorpay/blade
Version:
The Design System that powers Razorpay
131 lines (127 loc) • 6.24 kB
JavaScript
import styled, { keyframes, css } from 'styled-components';
import 'react';
import { pulseAnimation, indeterminateAnimation } from './progressBarTokens.js';
import getIn from '../../utils/lodashButBetter/get.js';
import '../Box/BaseBox/index.js';
import '../../utils/index.js';
import '../../utils/makeMotionTime/index.web.js';
import { jsx } from 'react/jsx-runtime';
import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
import { castWebType } from '../../utils/platform/castUtils.js';
import { makeMotionTime } from '../../utils/makeMotionTime/makeMotionTime.web.js';
var pulseKeyframes = /*#__PURE__*/keyframes(["0%{opacity:", ";}50%{opacity:", ";}100%{opacity:", ";}"], pulseAnimation.opacityInitial, pulseAnimation.opacityMid, pulseAnimation.opacityFinal);
var slideAndScaleKeyframes = /*#__PURE__*/keyframes(["0%{left:", ";transform:scaleX(", ");}50%{left:", ";transform:scaleX(", ");}100%{left:", ";transform:scaleX(", ");}"], indeterminateAnimation.leftInitial, indeterminateAnimation.scaleXInitial, indeterminateAnimation.leftMid, indeterminateAnimation.scaleXMid, indeterminateAnimation.leftFinal, indeterminateAnimation.scaleXFinal);
var getPulseAnimationStyles = function getPulseAnimationStyles(_ref) {
var duration = _ref.duration,
easing = _ref.easing,
delay = _ref.delay;
return css(["height:100%;width:100%;opacity:", ";background-color:", ";animation:", " ", " ", " infinite;animation-delay:", ";"], pulseAnimation.opacityInitial, pulseAnimation.backgroundColor, pulseKeyframes, duration, easing, delay);
};
var BoxWithIndeterminateAnimation = /*#__PURE__*/styled(BaseBox).withConfig({
displayName: "ProgressBarFilledweb__BoxWithIndeterminateAnimation",
componentId: "sc-15oi5xk-0"
})(function (_ref2) {
var theme = _ref2.theme,
indeterminateMotionDuration = _ref2.indeterminateMotionDuration;
var duration = castWebType(makeMotionTime(getIn(theme.motion, indeterminateMotionDuration)));
var easing = 'linear'; // TODO: Add this in motion tokens
return css(["animation:", " ", " ", " infinite;position:absolute;width:", ";height:100%;"], slideAndScaleKeyframes, duration, easing, indeterminateAnimation.fillWidth);
});
var IndeterminateFilledContainer = /*#__PURE__*/styled(BoxWithIndeterminateAnimation).withConfig({
displayName: "ProgressBarFilledweb__IndeterminateFilledContainer",
componentId: "sc-15oi5xk-1"
})(function (_ref3) {
var backgroundColor = _ref3.backgroundColor;
return {
backgroundColor: backgroundColor
};
});
var IndeterminatePulseAnimation = /*#__PURE__*/styled(BoxWithIndeterminateAnimation).withConfig({
displayName: "ProgressBarFilledweb__IndeterminatePulseAnimation",
componentId: "sc-15oi5xk-2"
})(function (_ref4) {
var theme = _ref4.theme,
pulseMotionDuration = _ref4.pulseMotionDuration,
pulseMotionDelay = _ref4.pulseMotionDelay,
motionEasing = _ref4.motionEasing,
type = _ref4.type;
var duration = castWebType(makeMotionTime(getIn(theme.motion, pulseMotionDuration)));
var easing = castWebType(getIn(theme.motion, motionEasing));
var delay = castWebType(makeMotionTime(getIn(theme.motion, pulseMotionDelay)));
return type === 'progress' ? getPulseAnimationStyles({
duration: duration,
easing: easing,
delay: delay
}) : '';
});
var BoxWithProgressFillTransition = /*#__PURE__*/styled(BaseBox).withConfig({
displayName: "ProgressBarFilledweb__BoxWithProgressFillTransition",
componentId: "sc-15oi5xk-3"
})(function (_ref5) {
var theme = _ref5.theme,
fillMotionDuration = _ref5.fillMotionDuration,
motionEasing = _ref5.motionEasing;
return {
transitionProperty: 'width',
transitionDuration: castWebType(makeMotionTime(getIn(theme.motion, fillMotionDuration))),
transitionTimingFunction: castWebType(getIn(theme.motion, motionEasing))
};
});
var DeterminateFilledContainer = /*#__PURE__*/styled(BoxWithProgressFillTransition).withConfig({
displayName: "ProgressBarFilledweb__DeterminateFilledContainer",
componentId: "sc-15oi5xk-4"
})(function (_ref6) {
var backgroundColor = _ref6.backgroundColor,
progress = _ref6.progress;
return {
backgroundColor: backgroundColor,
height: '100%',
width: "".concat(progress, "%")
};
});
var DeterminatePulseAnimation = /*#__PURE__*/styled(BoxWithProgressFillTransition).withConfig({
displayName: "ProgressBarFilledweb__DeterminatePulseAnimation",
componentId: "sc-15oi5xk-5"
})(function (_ref7) {
var theme = _ref7.theme,
pulseMotionDuration = _ref7.pulseMotionDuration,
pulseMotionDelay = _ref7.pulseMotionDelay,
motionEasing = _ref7.motionEasing,
type = _ref7.type;
var duration = castWebType(makeMotionTime(getIn(theme.motion, pulseMotionDuration)));
var easing = castWebType(getIn(theme.motion, motionEasing));
var delay = castWebType(makeMotionTime(getIn(theme.motion, pulseMotionDelay)));
return type === 'progress' ? getPulseAnimationStyles({
duration: duration,
easing: easing,
delay: delay
}) : '';
});
var ProgressBarFilled = function ProgressBarFilled(_ref8) {
var backgroundColor = _ref8.backgroundColor,
fillMotionDuration = _ref8.fillMotionDuration,
motionEasing = _ref8.motionEasing,
progress = _ref8.progress,
pulseMotionDelay = _ref8.pulseMotionDelay,
pulseMotionDuration = _ref8.pulseMotionDuration,
indeterminateMotionDuration = _ref8.indeterminateMotionDuration,
type = _ref8.type,
isIndeterminate = _ref8.isIndeterminate;
var ProgressBarFilledContainer = isIndeterminate ? IndeterminateFilledContainer : DeterminateFilledContainer;
var ProgressBarPulseAnimation = isIndeterminate ? IndeterminatePulseAnimation : DeterminatePulseAnimation;
return /*#__PURE__*/jsx(ProgressBarFilledContainer, {
backgroundColor: backgroundColor,
fillMotionDuration: fillMotionDuration,
progress: progress,
indeterminateMotionDuration: indeterminateMotionDuration,
children: /*#__PURE__*/jsx(ProgressBarPulseAnimation, {
fillMotionDuration: fillMotionDuration,
motionEasing: motionEasing,
type: type,
pulseMotionDelay: pulseMotionDelay,
pulseMotionDuration: pulseMotionDuration
})
});
};
export { ProgressBarFilled };
//# sourceMappingURL=ProgressBarFilled.web.js.map