@razorpay/blade
Version:
The Design System that powers Razorpay
197 lines (194 loc) • 9.12 kB
JavaScript
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React__default from 'react';
import { ProgressBarFilled } from './ProgressBarFilled.web.js';
import { CircularProgressBarFilled } from './CircularProgressBar.web.js';
import clamp from '../../utils/lodashButBetter/clamp.js';
import '../../utils/metaAttribute/index.js';
import '../Typography/Text/index.js';
import '../Box/styledProps/index.js';
import { useId } from '../../utils/useId.js';
import '../BladeProvider/index.js';
import '../Box/BaseBox/index.js';
import '../../tokens/global/index.js';
import '../../utils/makeSize/index.js';
import '../../utils/makeAccessible/index.js';
import '../../utils/logger/index.js';
import '../../utils/makeAnalyticsAttribute/index.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import { size } from '../../tokens/global/size.js';
import useTheme from '../BladeProvider/useTheme.js';
import { throwBladeError } from '../../utils/logger/logger.js';
import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
import { Text } from '../Typography/Text/Text.js';
import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.web.js';
import { makeSize } from '../../utils/makeSize/makeSize.js';
var _excluded = ["accessibilityLabel", "color", "type", "isIndeterminate", "label", "showPercentage", "size", "value", "variant", "min", "max", "testID"];
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 progressBarHeight = {
small: size[2],
medium: size[4],
// Large size isn't available when variant is 'linear'
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("".concat(progressType, "-").concat(progressVariant));
if (true) {
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=".concat(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 || _label$trim === void 0 ? 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 !== void 0 ? accessibilityLabel : label,
valueNow: percentageProgressValue,
valueText: "".concat(percentageProgressValue, "%"),
valueMin: min,
valueMax: max
};
if (isMeter) {
accessibilityProps.role = 'meter';
accessibilityProps.valueNow = progressValue;
accessibilityProps.valueText = "".concat(progressValue);
}
if (isIndeterminate) {
accessibilityProps.valueNow = undefined;
accessibilityProps.valueMin = undefined;
accessibilityProps.valueMax = undefined;
accessibilityProps.valueText = undefined;
}
return /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
ref: ref
}, getStyledProps(rest)), metaAttribute({
name: MetaConstants.ProgressBar,
testID: testID
})), makeAnalyticsAttribute(rest)), {}, {
children: /*#__PURE__*/jsxs(BaseBox, {
display: "flex",
flexDirection: "column",
width: "100%",
children: [!isCircular ? /*#__PURE__*/jsxs(BaseBox, {
display: "flex",
flexDirection: "row",
justifyContent: hasLabel ? 'space-between' : 'flex-end',
children: [hasLabel ? /*#__PURE__*/jsx(Text, {
as: "label",
variant: "body",
size: "small",
color: "surface.text.gray.subtle",
children: label
}) : null, shouldShowPercentage ? /*#__PURE__*/jsx(BaseBox, {
marginBottom: "spacing.2",
children: /*#__PURE__*/jsx(Text, {
variant: "body",
size: "small",
color: "surface.text.gray.subtle",
children: "".concat(percentageProgressValue, "%")
})
}) : null]
}) : null, /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({
id: id
}, makeAccessible({
role: accessibilityProps.role,
label: accessibilityProps.label,
valueNow: accessibilityProps.valueNow,
valueText: accessibilityProps.valueText,
valueMin: accessibilityProps.valueMin,
valueMax: accessibilityProps.valueMax
})), {}, {
children: isCircular ? /*#__PURE__*/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"
}) : /*#__PURE__*/jsx(BaseBox, {
backgroundColor: unfilledBackgroundColor,
height: makeSize(progressBarHeight[size]),
overflow: "hidden",
position: "relative",
children: /*#__PURE__*/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 = /*#__PURE__*/React__default.forwardRef(_ProgressBar);
export { ProgressBar };
//# sourceMappingURL=ProgressBar.js.map