@atlaskit/progress-bar
Version:
A progress bar communicates the status of a system process.
64 lines (63 loc) • 2.58 kB
JavaScript
/* progress-bar.tsx generated by @compiled/babel-plugin v0.39.1 */
import "./progress-bar.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React from 'react';
import { fg } from '@atlaskit/platform-feature-flags';
const MIN_VALUE = 0;
const MAX_VALUE = 1;
const increasingBarAnimation = null;
const decreasingBarAnimation = null;
const containerStyles = null;
const containerStylesT26Shape = null;
const containerAppearance = {
default: "_bfhki8nm",
success: "_bfhki8nm",
inverse: "_bfhk1vck"
};
const barAppearance = {
default: "_bfhk1aqn",
success: "_bfhkkcmj",
inverse: "_bfhkvuon"
};
const barStyles = null;
const barStylesT26Shape = null;
const determinateBarStyles = null;
const increasingBarStyles = null;
const decreasingBarStyles = null;
/**
* __Progress bar__
*
* A progress bar displays the status of a given process.
*
* - [Examples](https://atlassian.design/components/progress-bar/examples)
* - [Code](https://atlassian.design/components/progress-bar/code)
* - [Usage](https://atlassian.design/components/progress-bar/usage)
*/
const ProgressBar = ({
appearance = 'default',
ariaLabel,
isIndeterminate = false,
testId = 'progress-bar',
value = 0
}) => {
const valueParsed = isIndeterminate ? MIN_VALUE : Math.max(MIN_VALUE, Math.min(value, MAX_VALUE));
return /*#__PURE__*/React.createElement("div", {
role: "progressbar",
"aria-label": ariaLabel,
"aria-valuemin": MIN_VALUE,
"aria-valuenow": valueParsed,
"aria-valuemax": MAX_VALUE,
"data-testid": testId,
className: ax(["_2rkofajl _1reo15vq _18m915vq _1bsb1osq _4t3ii2wt _kqswh2mm _bfhki8nm", fg('platform-dst-shape-theme-default') && "_2rko1rr0", containerAppearance[appearance]])
}, isIndeterminate ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
className: ax(["_2rkofajl _1e0c1ule _4t3ii2wt _kqswstnw", barAppearance[appearance], "_5sagymdr _tip812c5 _j7hq7g40", fg('platform-dst-shape-theme-default') && "_2rko1rr0"])
}), /*#__PURE__*/React.createElement("span", {
className: ax(["_2rkofajl _1e0c1ule _4t3ii2wt _kqswstnw", barAppearance[appearance], "_ju251bs3 _5sagymdr _tip812c5 _j7hqio0v", fg('platform-dst-shape-theme-default') && "_2rko1rr0"])
})) : /*#__PURE__*/React.createElement("span", {
style: {
width: `${Number(value) * 100}%`
},
className: ax(["_2rkofajl _1e0c1ule _4t3ii2wt _kqswstnw", barAppearance[appearance], "_v564calv", fg('platform-dst-shape-theme-default') && "_2rko1rr0"])
}));
};
export default ProgressBar;