@razorpay/blade
Version:
The Design System that powers Razorpay
143 lines (140 loc) • 6.27 kB
JavaScript
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import styled, { keyframes, css } from 'styled-components';
import 'react';
import { pulseAnimation, getCircularProgressSVGTokens, circularProgressSizeTokens } from './progressBarTokens.js';
import { CircularProgressLabel } from './CircularProgressLabel.js';
import getIn from '../../utils/lodashButBetter/get.js';
import '../Box/BaseBox/index.js';
import '../../utils/index.js';
import '../../utils/makeMotionTime/index.web.js';
import '../Typography/index.js';
import '../Icons/_Svg/index.js';
import getBaseTextStyles from '../Typography/BaseText/getBaseTextStyles.js';
import { jsxs, jsx } from 'react/jsx-runtime';
import { getTextProps } from '../Typography/Text/Text.js';
import { castWebType } from '../../utils/platform/castUtils.js';
import { makeMotionTime } from '../../utils/makeMotionTime/makeMotionTime.web.js';
import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
import Svg from '../Icons/_Svg/Svg/Svg.web.js';
import Circle from '../Icons/_Svg/Circle/Circle.web.js';
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var pulseKeyframes = /*#__PURE__*/keyframes(["0%{opacity:1;}50%{opacity:0.65;}100%{opacity:1;}"]);
var getPulseAnimationStyles = function getPulseAnimationStyles(_ref) {
var duration = _ref.duration,
easing = _ref.easing,
progressPercent = _ref.progressPercent,
isMeter = _ref.isMeter;
if (isMeter || progressPercent === 100) {
return css(["height:100%;width:100%;transition:stroke-dashoffset ", " ", ";"], duration, easing);
}
return css(["height:100%;width:100%;opacity:", ";background-color:", ";transition:stroke-dashoffset ", " ", ";animation:", " ", " ", " infinite;"], pulseAnimation.opacityInitial, pulseAnimation.backgroundColor, duration, easing, pulseKeyframes, duration, easing);
};
var StyledSVGText = /*#__PURE__*/styled.text.withConfig({
displayName: "CircularProgressBarweb__StyledSVGText",
componentId: "h4xj3g-0"
})(function (_ref2) {
var theme = _ref2.theme,
size = _ref2.size,
weight = _ref2.weight;
return _objectSpread(_objectSpread({}, getBaseTextStyles(_objectSpread({
theme: theme
}, getTextProps({
variant: 'body',
size: size,
weight: weight
})))), {}, {
fill: theme.colors.surface.text.gray.normal
});
});
var DeterminatePulseAnimation = /*#__PURE__*/styled.circle.withConfig({
displayName: "CircularProgressBarweb__DeterminatePulseAnimation",
componentId: "h4xj3g-1"
})(function (_ref3) {
var theme = _ref3.theme,
pulseMotionDuration = _ref3.pulseMotionDuration,
motionEasing = _ref3.motionEasing,
progressPercent = _ref3.progressPercent,
isMeter = _ref3.isMeter;
var duration = castWebType(makeMotionTime(getIn(theme.motion, pulseMotionDuration)));
var easing = castWebType(getIn(theme.motion, motionEasing));
return getPulseAnimationStyles({
duration: duration,
easing: easing,
progressPercent: progressPercent,
isMeter: isMeter
});
});
var CircularProgressBarFilled = function CircularProgressBarFilled(_ref4) {
var progressPercent = _ref4.progressPercent,
fillColor = _ref4.fillColor,
backgroundColor = _ref4.backgroundColor,
_ref4$size = _ref4.size,
size = _ref4$size === void 0 ? 'small' : _ref4$size,
label = _ref4.label,
_ref4$showPercentage = _ref4.showPercentage,
showPercentage = _ref4$showPercentage === void 0 ? true : _ref4$showPercentage,
isMeter = _ref4.isMeter;
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;
return /*#__PURE__*/jsxs(BaseBox, {
width: "fit-content",
textAlign: "center",
display: "flex",
flexDirection: "column",
alignItems: "center",
children: [/*#__PURE__*/jsxs(Svg, {
width: String(sqSize),
height: String(sqSize),
viewBox: viewBox,
children: [/*#__PURE__*/jsx(Circle, {
fill: "none",
stroke: backgroundColor,
cx: String(sqSize / 2),
cy: String(sqSize / 2),
r: String(radius),
strokeWidth: "".concat(strokeWidth, "px")
}), /*#__PURE__*/jsx(DeterminatePulseAnimation, {
progressPercent: progressPercent,
isMeter: isMeter,
fill: "none",
stroke: fillColor,
cx: sqSize / 2,
cy: sqSize / 2,
r: radius,
strokeWidth: "".concat(strokeWidth, "px")
// Start progress marker at 12 O'Clock
,
transform: "rotate(-90 ".concat(sqSize / 2, " ").concat(sqSize / 2, ")"),
strokeDasharray: dashArray,
strokeDashoffset: dashOffset,
pulseMotionDuration: "duration.2xgentle",
pulseMotionDelay: "delay.long",
motionEasing: "easing.emphasized"
}), showPercentage && size !== 'small' && /*#__PURE__*/jsxs(StyledSVGText, {
size: circularProgressSizeTokens[size].percentTextSize,
weight: "semibold",
x: "50%",
y: "50%",
textAnchor: "middle",
dy: ".4em",
children: [progressPercent, "%"]
})]
}), /*#__PURE__*/jsx(CircularProgressLabel, {
progressPercent: progressPercent,
size: size,
label: label,
showPercentage: showPercentage
})]
});
};
export { CircularProgressBarFilled };
//# sourceMappingURL=CircularProgressBar.web.js.map