progress.js 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
  1. import _defineProperty from 'babel-runtime/helpers/defineProperty';
  2. import _extends from 'babel-runtime/helpers/extends';
  3. import classNames from 'classnames';
  4. import PropTypes from '../_util/vue-types';
  5. import { getOptionProps, initDefaultProps, getListeners } from '../_util/props-util';
  6. import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
  7. import Icon from '../icon';
  8. import Line from './line';
  9. import Circle from './circle';
  10. import { validProgress } from './utils';
  11. var ProgressStatuses = ['normal', 'exception', 'active', 'success'];
  12. export var ProgressType = PropTypes.oneOf(['line', 'circle', 'dashboard']);
  13. export var ProgressSize = PropTypes.oneOf(['default', 'small']);
  14. export var ProgressProps = {
  15. prefixCls: PropTypes.string,
  16. type: ProgressType,
  17. percent: PropTypes.number,
  18. successPercent: PropTypes.number,
  19. format: PropTypes.func,
  20. status: PropTypes.oneOf(ProgressStatuses),
  21. showInfo: PropTypes.bool,
  22. strokeWidth: PropTypes.number,
  23. strokeLinecap: PropTypes.oneOf(['butt', 'round', 'square']),
  24. strokeColor: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
  25. trailColor: PropTypes.string,
  26. width: PropTypes.number,
  27. gapDegree: PropTypes.number,
  28. gapPosition: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
  29. size: ProgressSize
  30. };
  31. export default {
  32. name: 'AProgress',
  33. props: initDefaultProps(ProgressProps, {
  34. type: 'line',
  35. percent: 0,
  36. showInfo: true,
  37. trailColor: '#f3f3f3',
  38. size: 'default',
  39. gapDegree: 0,
  40. strokeLinecap: 'round'
  41. }),
  42. inject: {
  43. configProvider: { 'default': function _default() {
  44. return ConfigConsumerProps;
  45. } }
  46. },
  47. methods: {
  48. getPercentNumber: function getPercentNumber() {
  49. var _$props = this.$props,
  50. successPercent = _$props.successPercent,
  51. _$props$percent = _$props.percent,
  52. percent = _$props$percent === undefined ? 0 : _$props$percent;
  53. return parseInt(successPercent !== undefined ? successPercent.toString() : percent.toString(), 10);
  54. },
  55. getProgressStatus: function getProgressStatus() {
  56. var status = this.$props.status;
  57. if (ProgressStatuses.indexOf(status) < 0 && this.getPercentNumber() >= 100) {
  58. return 'success';
  59. }
  60. return status || 'normal';
  61. },
  62. renderProcessInfo: function renderProcessInfo(prefixCls, progressStatus) {
  63. var h = this.$createElement;
  64. var _$props2 = this.$props,
  65. showInfo = _$props2.showInfo,
  66. format = _$props2.format,
  67. type = _$props2.type,
  68. percent = _$props2.percent,
  69. successPercent = _$props2.successPercent;
  70. if (!showInfo) return null;
  71. var text = void 0;
  72. var textFormatter = format || this.$scopedSlots.format || function (percentNumber) {
  73. return percentNumber + '%';
  74. };
  75. var iconType = type === 'circle' || type === 'dashboard' ? '' : '-circle';
  76. if (format || this.$scopedSlots.format || progressStatus !== 'exception' && progressStatus !== 'success') {
  77. text = textFormatter(validProgress(percent), validProgress(successPercent));
  78. } else if (progressStatus === 'exception') {
  79. text = h(Icon, {
  80. attrs: { type: 'close' + iconType, theme: type === 'line' ? 'filled' : 'outlined' }
  81. });
  82. } else if (progressStatus === 'success') {
  83. text = h(Icon, {
  84. attrs: { type: 'check' + iconType, theme: type === 'line' ? 'filled' : 'outlined' }
  85. });
  86. }
  87. return h(
  88. 'span',
  89. { 'class': prefixCls + '-text', attrs: { title: typeof text === 'string' ? text : undefined }
  90. },
  91. [text]
  92. );
  93. }
  94. },
  95. render: function render() {
  96. var _classNames;
  97. var h = arguments[0];
  98. var props = getOptionProps(this);
  99. var customizePrefixCls = props.prefixCls,
  100. size = props.size,
  101. type = props.type,
  102. showInfo = props.showInfo;
  103. var getPrefixCls = this.configProvider.getPrefixCls;
  104. var prefixCls = getPrefixCls('progress', customizePrefixCls);
  105. var progressStatus = this.getProgressStatus();
  106. var progressInfo = this.renderProcessInfo(prefixCls, progressStatus);
  107. var progress = void 0;
  108. // Render progress shape
  109. if (type === 'line') {
  110. var lineProps = {
  111. props: _extends({}, props, {
  112. prefixCls: prefixCls
  113. })
  114. };
  115. progress = h(
  116. Line,
  117. lineProps,
  118. [progressInfo]
  119. );
  120. } else if (type === 'circle' || type === 'dashboard') {
  121. var circleProps = {
  122. props: _extends({}, props, {
  123. prefixCls: prefixCls,
  124. progressStatus: progressStatus
  125. })
  126. };
  127. progress = h(
  128. Circle,
  129. circleProps,
  130. [progressInfo]
  131. );
  132. }
  133. var classString = classNames(prefixCls, (_classNames = {}, _defineProperty(_classNames, prefixCls + '-' + (type === 'dashboard' && 'circle' || type), true), _defineProperty(_classNames, prefixCls + '-status-' + progressStatus, true), _defineProperty(_classNames, prefixCls + '-show-info', showInfo), _defineProperty(_classNames, prefixCls + '-' + size, size), _classNames));
  134. var progressProps = {
  135. on: getListeners(this),
  136. 'class': classString
  137. };
  138. return h(
  139. 'div',
  140. progressProps,
  141. [progress]
  142. );
  143. }
  144. };