Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
 
 
 
 

70 Zeilen
2.3 KiB

  1. import _extends from "@babel/runtime/helpers/esm/extends";
  2. import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
  3. import React from 'react';
  4. import PropTypes from 'prop-types';
  5. import classNames from 'classnames';
  6. import toNumber from 'lodash.tonumber';
  7. import { mapToCssModules, tagPropType } from './utils';
  8. var propTypes = {
  9. children: PropTypes.node,
  10. bar: PropTypes.bool,
  11. multi: PropTypes.bool,
  12. tag: tagPropType,
  13. value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  14. max: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  15. animated: PropTypes.bool,
  16. striped: PropTypes.bool,
  17. color: PropTypes.string,
  18. className: PropTypes.string,
  19. barClassName: PropTypes.string,
  20. cssModule: PropTypes.object
  21. };
  22. var defaultProps = {
  23. tag: 'div',
  24. value: 0,
  25. max: 100
  26. };
  27. var Progress = function Progress(props) {
  28. var children = props.children,
  29. className = props.className,
  30. barClassName = props.barClassName,
  31. cssModule = props.cssModule,
  32. value = props.value,
  33. max = props.max,
  34. animated = props.animated,
  35. striped = props.striped,
  36. color = props.color,
  37. bar = props.bar,
  38. multi = props.multi,
  39. Tag = props.tag,
  40. attributes = _objectWithoutPropertiesLoose(props, ["children", "className", "barClassName", "cssModule", "value", "max", "animated", "striped", "color", "bar", "multi", "tag"]);
  41. var percent = toNumber(value) / toNumber(max) * 100;
  42. var progressClasses = mapToCssModules(classNames(className, 'progress'), cssModule);
  43. var progressBarClasses = mapToCssModules(classNames('progress-bar', bar ? className || barClassName : barClassName, animated ? 'progress-bar-animated' : null, color ? "bg-" + color : null, striped || animated ? 'progress-bar-striped' : null), cssModule);
  44. var ProgressBar = multi ? children : React.createElement("div", {
  45. className: progressBarClasses,
  46. style: {
  47. width: percent + "%"
  48. },
  49. role: "progressbar",
  50. "aria-valuenow": value,
  51. "aria-valuemin": "0",
  52. "aria-valuemax": max,
  53. children: children
  54. });
  55. if (bar) {
  56. return ProgressBar;
  57. }
  58. return React.createElement(Tag, _extends({}, attributes, {
  59. className: progressClasses,
  60. children: ProgressBar
  61. }));
  62. };
  63. Progress.propTypes = propTypes;
  64. Progress.defaultProps = defaultProps;
  65. export default Progress;