@carbon/react
Version:
React components for the Carbon Design System
131 lines (129 loc) • 4.97 kB
JavaScript
/**
* Copyright IBM Corp. 2016, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
const require_runtime = require("../../_virtual/_rolldown/runtime.js");
const require_usePrefix = require("../../internal/usePrefix.js");
const require_useIsomorphicEffect = require("../../internal/useIsomorphicEffect.js");
const require_useId = require("../../internal/useId.js");
let classnames = require("classnames");
classnames = require_runtime.__toESM(classnames);
let react = require("react");
react = require_runtime.__toESM(react);
let prop_types = require("prop-types");
prop_types = require_runtime.__toESM(prop_types);
let react_jsx_runtime = require("react/jsx-runtime");
let _carbon_icons_react = require("@carbon/icons-react");
//#region src/components/ProgressBar/ProgressBar.tsx
/**
* Copyright IBM Corp. 2021
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
function ProgressBar({ className, helperText, hideLabel, label, max = 100, size = "big", status = "active", type = "default", value }) {
const labelId = require_useId.useId("progress-bar");
const helperId = require_useId.useId("progress-bar-helper");
const helperTextId = require_useId.useId("progress-bar-helper-text");
const prefix = require_usePrefix.usePrefix();
const isFinished = status === "finished";
const isError = status === "error";
const indeterminate = !isFinished && !isError && (value === null || value === void 0);
let cappedValue = value;
if (cappedValue && cappedValue > max) cappedValue = max;
if (cappedValue && cappedValue < 0) cappedValue = 0;
if (isError) cappedValue = 0;
else if (isFinished) cappedValue = max;
const percentage = (cappedValue ?? NaN) / max;
const wrapperClasses = (0, classnames.default)(`${prefix}--progress-bar`, `${prefix}--progress-bar--${size}`, `${prefix}--progress-bar--${type}`, {
[`${prefix}--progress-bar--indeterminate`]: indeterminate,
[`${prefix}--progress-bar--finished`]: isFinished,
[`${prefix}--progress-bar--error`]: isError
}, className);
const labelClasses = (0, classnames.default)(`${prefix}--progress-bar__label`, { [`${prefix}--visually-hidden`]: hideLabel });
let StatusIcon = null;
if (isError) StatusIcon = react.default.forwardRef((props, ref) => {
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.ErrorFilled, {
ref,
size: 16,
...props
});
});
else if (isFinished) StatusIcon = react.default.forwardRef((props, ref) => {
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.CheckmarkFilled, {
ref,
size: 16,
...props
});
});
const ref = (0, react.useRef)(null);
require_useIsomorphicEffect.default(() => {
if (ref.current) if (!isFinished && !isError) ref.current.style.transform = `scaleX(${percentage})`;
else ref.current.style.transform = "";
}, [
percentage,
isFinished,
isError
]);
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
className: wrapperClasses,
children: [
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
className: labelClasses,
id: labelId,
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
className: `${prefix}--progress-bar__label-text`,
children: label
}), StatusIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusIcon, { className: `${prefix}--progress-bar__status-icon` })]
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
className: `${prefix}--progress-bar__track`,
role: "progressbar",
"aria-busy": !isFinished,
"aria-invalid": isError,
"aria-labelledby": labelId,
"aria-describedby": helperText ? helperTextId : void 0,
"aria-valuemin": !indeterminate ? 0 : void 0,
"aria-valuemax": !indeterminate ? max : void 0,
"aria-valuenow": !indeterminate ? cappedValue : void 0,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
className: `${prefix}--progress-bar__bar`,
ref
})
}),
helperText && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
id: helperTextId,
className: `${prefix}--progress-bar__helper-text`,
children: [helperText, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
className: `${prefix}--visually-hidden`,
"aria-live": "polite",
id: helperId,
children: isFinished ? "Done" : "Loading"
})]
})
]
});
}
ProgressBar.propTypes = {
className: prop_types.default.string,
helperText: prop_types.default.string,
hideLabel: prop_types.default.bool,
label: prop_types.default.string.isRequired,
max: prop_types.default.number,
size: prop_types.default.oneOf(["small", "big"]),
status: prop_types.default.oneOf([
"active",
"finished",
"error"
]),
type: prop_types.default.oneOf([
"default",
"inline",
"indented"
]),
value: prop_types.default.number
};
//#endregion
exports.default = ProgressBar;