Dashboard sipadu mbip
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

ProgressBar.js 4.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. import _extends from "@babel/runtime/helpers/esm/extends";
  2. import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
  3. import classNames from 'classnames';
  4. import React, { cloneElement } from 'react';
  5. import { useBootstrapPrefix } from './ThemeProvider';
  6. import { map } from './utils/ElementChildren';
  7. var ROUND_PRECISION = 1000;
  8. /**
  9. * Validate that children, if any, are instances of `<ProgressBar>`.
  10. */
  11. function onlyProgressBar(props, propName, componentName) {
  12. var children = props[propName];
  13. if (!children) {
  14. return null;
  15. }
  16. var error = null;
  17. React.Children.forEach(children, function (child) {
  18. if (error) {
  19. return;
  20. }
  21. /**
  22. * Compare types in a way that works with libraries that patch and proxy
  23. * components like react-hot-loader.
  24. *
  25. * see https://github.com/gaearon/react-hot-loader#checking-element-types
  26. */
  27. var element = React.createElement(ProgressBar, null);
  28. if (child.type === element.type) return;
  29. var childIdentifier = React.isValidElement(child) ? child.type.displayName || child.type.name || child.type : child;
  30. error = new Error("Children of " + componentName + " can contain only ProgressBar " + ("components. Found " + childIdentifier + "."));
  31. });
  32. return error;
  33. }
  34. var defaultProps = {
  35. min: 0,
  36. max: 100,
  37. animated: false,
  38. isChild: false,
  39. srOnly: false,
  40. striped: false
  41. };
  42. function getPercentage(now, min, max) {
  43. var percentage = (now - min) / (max - min) * 100;
  44. return Math.round(percentage * ROUND_PRECISION) / ROUND_PRECISION;
  45. }
  46. function renderProgressBar(_ref, ref) {
  47. var _classNames;
  48. var min = _ref.min,
  49. now = _ref.now,
  50. max = _ref.max,
  51. label = _ref.label,
  52. srOnly = _ref.srOnly,
  53. striped = _ref.striped,
  54. animated = _ref.animated,
  55. className = _ref.className,
  56. style = _ref.style,
  57. variant = _ref.variant,
  58. bsPrefix = _ref.bsPrefix,
  59. props = _objectWithoutPropertiesLoose(_ref, ["min", "now", "max", "label", "srOnly", "striped", "animated", "className", "style", "variant", "bsPrefix"]);
  60. return React.createElement("div", _extends({
  61. ref: ref
  62. }, props, {
  63. role: "progressbar",
  64. className: classNames(className, bsPrefix + "-bar", (_classNames = {}, _classNames["bg-" + variant] = variant, _classNames[bsPrefix + "-bar-animated"] = animated, _classNames[bsPrefix + "-bar-striped"] = animated || striped, _classNames)),
  65. style: _extends({
  66. width: getPercentage(now, min, max) + "%"
  67. }, style),
  68. "aria-valuenow": now,
  69. "aria-valuemin": min,
  70. "aria-valuemax": max
  71. }), srOnly ? React.createElement("span", {
  72. className: "sr-only"
  73. }, label) : label);
  74. }
  75. var ProgressBar = React.forwardRef(function (_ref2, ref) {
  76. var isChild = _ref2.isChild,
  77. props = _objectWithoutPropertiesLoose(_ref2, ["isChild"]);
  78. props.bsPrefix = useBootstrapPrefix(props.bsPrefix, 'progress');
  79. if (isChild) {
  80. return renderProgressBar(props, ref);
  81. }
  82. var min = props.min,
  83. now = props.now,
  84. max = props.max,
  85. label = props.label,
  86. srOnly = props.srOnly,
  87. striped = props.striped,
  88. animated = props.animated,
  89. bsPrefix = props.bsPrefix,
  90. variant = props.variant,
  91. className = props.className,
  92. children = props.children,
  93. wrapperProps = _objectWithoutPropertiesLoose(props, ["min", "now", "max", "label", "srOnly", "striped", "animated", "bsPrefix", "variant", "className", "children"]);
  94. return React.createElement("div", _extends({
  95. ref: ref
  96. }, wrapperProps, {
  97. className: classNames(className, bsPrefix)
  98. }), children ? map(children, function (child) {
  99. return cloneElement(child, {
  100. isChild: true
  101. });
  102. }) : renderProgressBar({
  103. min: min,
  104. now: now,
  105. max: max,
  106. label: label,
  107. srOnly: srOnly,
  108. striped: striped,
  109. animated: animated,
  110. bsPrefix: bsPrefix,
  111. variant: variant
  112. }, ref));
  113. });
  114. ProgressBar.displayName = 'ProgressBar';
  115. ProgressBar.defaultProps = defaultProps;
  116. export default ProgressBar;