Step.js 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
  1. 'use strict';
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. var _babelHelperVueJsxMergeProps = require('babel-helper-vue-jsx-merge-props');
  6. var _babelHelperVueJsxMergeProps2 = _interopRequireDefault(_babelHelperVueJsxMergeProps);
  7. var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
  8. var _defineProperty3 = _interopRequireDefault(_defineProperty2);
  9. var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');
  10. var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
  11. var _vueTypes = require('../_util/vue-types');
  12. var _vueTypes2 = _interopRequireDefault(_vueTypes);
  13. var _propsUtil = require('../_util/props-util');
  14. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
  15. function isString(str) {
  16. return typeof str === 'string';
  17. }
  18. function noop() {}
  19. exports['default'] = {
  20. name: 'Step',
  21. props: {
  22. prefixCls: _vueTypes2['default'].string,
  23. wrapperStyle: _vueTypes2['default'].object,
  24. itemWidth: _vueTypes2['default'].string,
  25. active: _vueTypes2['default'].bool,
  26. disabled: _vueTypes2['default'].bool,
  27. status: _vueTypes2['default'].string,
  28. iconPrefix: _vueTypes2['default'].string,
  29. icon: _vueTypes2['default'].any,
  30. adjustMarginRight: _vueTypes2['default'].string,
  31. stepNumber: _vueTypes2['default'].string,
  32. stepIndex: _vueTypes2['default'].number,
  33. description: _vueTypes2['default'].any,
  34. title: _vueTypes2['default'].any,
  35. subTitle: _vueTypes2['default'].any,
  36. progressDot: _vueTypes2['default'].oneOfType([_vueTypes2['default'].bool, _vueTypes2['default'].func]),
  37. tailContent: _vueTypes2['default'].any,
  38. icons: _vueTypes2['default'].shape({
  39. finish: _vueTypes2['default'].any,
  40. error: _vueTypes2['default'].any
  41. }).loose
  42. },
  43. methods: {
  44. onClick: function onClick() {
  45. for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
  46. args[_key] = arguments[_key];
  47. }
  48. this.$emit.apply(this, ['click'].concat((0, _toConsumableArray3['default'])(args)));
  49. this.$emit('stepClick', this.stepIndex);
  50. },
  51. renderIconNode: function renderIconNode() {
  52. var _iconClassName;
  53. var h = this.$createElement;
  54. var _getOptionProps = (0, _propsUtil.getOptionProps)(this),
  55. prefixCls = _getOptionProps.prefixCls,
  56. stepNumber = _getOptionProps.stepNumber,
  57. status = _getOptionProps.status,
  58. iconPrefix = _getOptionProps.iconPrefix,
  59. icons = _getOptionProps.icons;
  60. var progressDot = this.progressDot;
  61. if (progressDot === undefined) {
  62. progressDot = this.$scopedSlots.progressDot;
  63. }
  64. var icon = (0, _propsUtil.getComponentFromProp)(this, 'icon');
  65. var title = (0, _propsUtil.getComponentFromProp)(this, 'title');
  66. var description = (0, _propsUtil.getComponentFromProp)(this, 'description');
  67. var iconNode = void 0;
  68. var iconClassName = (_iconClassName = {}, (0, _defineProperty3['default'])(_iconClassName, prefixCls + '-icon', true), (0, _defineProperty3['default'])(_iconClassName, iconPrefix + 'icon', true), (0, _defineProperty3['default'])(_iconClassName, iconPrefix + 'icon-' + icon, icon && isString(icon)), (0, _defineProperty3['default'])(_iconClassName, iconPrefix + 'icon-check', !icon && status === 'finish' && icons && !icons.finish), (0, _defineProperty3['default'])(_iconClassName, iconPrefix + 'icon-close', !icon && status === 'error' && icons && !icons.error), _iconClassName);
  69. var iconDot = h('span', { 'class': prefixCls + '-icon-dot' });
  70. // `progressDot` enjoy the highest priority
  71. if (progressDot) {
  72. if (typeof progressDot === 'function') {
  73. iconNode = h(
  74. 'span',
  75. { 'class': prefixCls + '-icon' },
  76. [progressDot({ index: stepNumber - 1, status: status, title: title, description: description, prefixCls: prefixCls })]
  77. );
  78. } else {
  79. iconNode = h(
  80. 'span',
  81. { 'class': prefixCls + '-icon' },
  82. [iconDot]
  83. );
  84. }
  85. } else if (icon && !isString(icon)) {
  86. iconNode = h(
  87. 'span',
  88. { 'class': prefixCls + '-icon' },
  89. [icon]
  90. );
  91. } else if (icons && icons.finish && status === 'finish') {
  92. iconNode = h(
  93. 'span',
  94. { 'class': prefixCls + '-icon' },
  95. [icons.finish]
  96. );
  97. } else if (icons && icons.error && status === 'error') {
  98. iconNode = h(
  99. 'span',
  100. { 'class': prefixCls + '-icon' },
  101. [icons.error]
  102. );
  103. } else if (icon || status === 'finish' || status === 'error') {
  104. iconNode = h('span', { 'class': iconClassName });
  105. } else {
  106. iconNode = h(
  107. 'span',
  108. { 'class': prefixCls + '-icon' },
  109. [stepNumber]
  110. );
  111. }
  112. return iconNode;
  113. }
  114. },
  115. render: function render() {
  116. var _classString;
  117. var h = arguments[0];
  118. var _getOptionProps2 = (0, _propsUtil.getOptionProps)(this),
  119. prefixCls = _getOptionProps2.prefixCls,
  120. itemWidth = _getOptionProps2.itemWidth,
  121. active = _getOptionProps2.active,
  122. _getOptionProps2$stat = _getOptionProps2.status,
  123. status = _getOptionProps2$stat === undefined ? 'wait' : _getOptionProps2$stat,
  124. tailContent = _getOptionProps2.tailContent,
  125. adjustMarginRight = _getOptionProps2.adjustMarginRight,
  126. disabled = _getOptionProps2.disabled;
  127. var title = (0, _propsUtil.getComponentFromProp)(this, 'title');
  128. var subTitle = (0, _propsUtil.getComponentFromProp)(this, 'subTitle');
  129. var description = (0, _propsUtil.getComponentFromProp)(this, 'description');
  130. var classString = (_classString = {}, (0, _defineProperty3['default'])(_classString, prefixCls + '-item', true), (0, _defineProperty3['default'])(_classString, prefixCls + '-item-' + status, true), (0, _defineProperty3['default'])(_classString, prefixCls + '-item-custom', (0, _propsUtil.getComponentFromProp)(this, 'icon')), (0, _defineProperty3['default'])(_classString, prefixCls + '-item-active', active), (0, _defineProperty3['default'])(_classString, prefixCls + '-item-disabled', disabled === true), _classString);
  131. var stepProps = {
  132. 'class': classString,
  133. on: (0, _propsUtil.getListeners)(this)
  134. };
  135. var stepItemStyle = {};
  136. if (itemWidth) {
  137. stepItemStyle.width = itemWidth;
  138. }
  139. if (adjustMarginRight) {
  140. stepItemStyle.marginRight = adjustMarginRight;
  141. }
  142. var listeners = (0, _propsUtil.getListeners)(this);
  143. var accessibilityProps = {
  144. attrs: {},
  145. on: {
  146. click: listeners.click || noop
  147. }
  148. };
  149. if (listeners.stepClick && !disabled) {
  150. accessibilityProps.attrs.role = 'button';
  151. accessibilityProps.attrs.tabIndex = 0;
  152. accessibilityProps.on.click = this.onClick;
  153. }
  154. return h(
  155. 'div',
  156. (0, _babelHelperVueJsxMergeProps2['default'])([stepProps, { style: stepItemStyle }]),
  157. [h(
  158. 'div',
  159. (0, _babelHelperVueJsxMergeProps2['default'])([accessibilityProps, { 'class': prefixCls + '-item-container' }]),
  160. [h(
  161. 'div',
  162. { 'class': prefixCls + '-item-tail' },
  163. [tailContent]
  164. ), h(
  165. 'div',
  166. { 'class': prefixCls + '-item-icon' },
  167. [this.renderIconNode()]
  168. ), h(
  169. 'div',
  170. { 'class': prefixCls + '-item-content' },
  171. [h(
  172. 'div',
  173. { 'class': prefixCls + '-item-title' },
  174. [title, subTitle && h(
  175. 'div',
  176. {
  177. attrs: { title: subTitle },
  178. 'class': prefixCls + '-item-subtitle' },
  179. [subTitle]
  180. )]
  181. ), description && h(
  182. 'div',
  183. { 'class': prefixCls + '-item-description' },
  184. [description]
  185. )]
  186. )]
  187. )]
  188. );
  189. }
  190. };