progress.js 6.3 KB

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