rsuite
Version:
A suite of react components
87 lines (86 loc) • 2.96 kB
JavaScript
'use client';
import _extends from "@babel/runtime/helpers/esm/extends";
import React from 'react';
import Box from "../internals/Box/index.js";
import ProgressInfo from "./ProgressInfo.js";
import ProgressStroke from "./ProgressStroke.js";
import ProgressSections from "./ProgressSections.js";
import { forwardRef, mergeStyles, getCssValue } from "../internals/utils/index.js";
import { useStyles, useCustom } from "../internals/hooks/index.js";
/**
* The `Progress.Line` component is used to display the progress of current operation.
* @see https://rsuitejs.com/components/progress/#line
*/
const ProgressLine = forwardRef((props, ref) => {
const {
propsWithDefaults
} = useCustom('ProgressLine', props);
const {
as,
className,
classPrefix = 'progress-line',
percent = 0,
percentPlacement = 'end',
radius,
strokeColor,
strokeWidth,
status,
striped,
style,
showInfo = true,
trailColor,
trailWidth,
vertical,
sections,
renderInfo,
indeterminate,
...rest
} = propsWithDefaults;
const {
merge,
prefix,
withPrefix,
cssVar
} = useStyles(classPrefix);
const classes = merge(className, withPrefix({
vertical,
striped,
indeterminate
}));
const totalPercent = sections ? sections.reduce((sum, section) => sum + section.percent, 0) : percent;
const styles = mergeStyles(cssVar('trail-size', getCssValue(trailWidth || strokeWidth)), cssVar('trail-color', trailColor), cssVar('stroke', `${totalPercent}%`), cssVar('size', getCssValue(strokeWidth)), cssVar('color', strokeColor), cssVar('radius', getCssValue(radius)), style);
const info = /*#__PURE__*/React.createElement(ProgressInfo, {
percent: percent,
renderInfo: renderInfo,
status: status,
classPrefix: classPrefix
});
// Determine if the info should be placed inside the stroke
const isInsidePlacement = percentPlacement === null || percentPlacement === void 0 ? void 0 : percentPlacement.startsWith('inside');
return /*#__PURE__*/React.createElement(Box, _extends({
as: as,
ref: ref,
className: classes,
role: "progressbar",
"aria-valuemin": "0",
"aria-valuemax": "100",
"aria-valuenow": totalPercent,
"data-status": status,
"data-placement": percentPlacement,
style: styles
}, rest), /*#__PURE__*/React.createElement("div", {
className: prefix('outer')
}, /*#__PURE__*/React.createElement("div", {
className: prefix('trail')
}, sections ? /*#__PURE__*/React.createElement(ProgressSections, {
classPrefix: classPrefix,
sections: sections,
vertical: vertical
}) : /*#__PURE__*/React.createElement(ProgressStroke, {
classPrefix: classPrefix,
percent: indeterminate ? 100 : percent,
vertical: vertical
}, showInfo && isInsidePlacement ? info : null))), showInfo && !isInsidePlacement ? info : null);
});
ProgressLine.displayName = 'ProgressLine';
export default ProgressLine;