1 | import _extends from 'babel-runtime/helpers/extends';
|
2 | import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
|
3 | import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
|
4 | import _inherits from 'babel-runtime/helpers/inherits';
|
5 |
|
6 | var _class, _temp;
|
7 |
|
8 | import ReactDOM from 'react-dom';
|
9 | import React, { Component } from 'react';
|
10 | import PropTypes from 'prop-types';
|
11 | import classNames from 'classnames';
|
12 | import ResizeObserver from 'resize-observer-polyfill';
|
13 | import Icon from '../../icon';
|
14 | import Progress from '../../progress';
|
15 | import ConfigProvider from '../../config-provider';
|
16 | import { support, events, dom, obj } from '../../util';
|
17 |
|
18 |
|
19 | var StepItem = (_temp = _class = function (_Component) {
|
20 | _inherits(StepItem, _Component);
|
21 |
|
22 | function StepItem(props) {
|
23 | _classCallCheck(this, StepItem);
|
24 |
|
25 | var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
26 |
|
27 | _this.onClick = function () {
|
28 | var _this$props = _this.props,
|
29 | index = _this$props.index,
|
30 | disabled = _this$props.disabled,
|
31 | readOnly = _this$props.readOnly,
|
32 | animation = _this$props.animation;
|
33 |
|
34 | if (disabled || readOnly) {
|
35 | return false;
|
36 | }
|
37 |
|
38 | if (animation && _this.stepNode) {
|
39 | dom.hasClass(_this.stepNode, 'clicked') ? dom.removeClass(_this.stepNode, 'clicked') : dom.addClass(_this.stepNode, 'clicked');
|
40 | }
|
41 | _this.props.onClick(index);
|
42 | };
|
43 |
|
44 | _this.removeClickedCls = _this.removeClickedCls.bind(_this);
|
45 | _this._refHandlerCreator = _this._refHandlerCreator.bind(_this);
|
46 | _this.resize = _this.resize.bind(_this);
|
47 | _this.ro = new ResizeObserver(function () {
|
48 | var _this$props2 = _this.props,
|
49 | shape = _this$props2.shape,
|
50 | direction = _this$props2.direction,
|
51 | onResize = _this$props2.onResize;
|
52 |
|
53 | if (!_this.body || shape === 'arrow') {
|
54 | return;
|
55 | }
|
56 | if (direction === 'vertical' || direction === 'ver') {
|
57 | _this.resize();
|
58 | } else {
|
59 | onResize && onResize();
|
60 | }
|
61 | });
|
62 | return _this;
|
63 | }
|
64 |
|
65 | StepItem.prototype.componentDidMount = function componentDidMount() {
|
66 | var _props = this.props,
|
67 | shape = _props.shape,
|
68 | direction = _props.direction,
|
69 | labelPlacement = _props.labelPlacement,
|
70 | index = _props.index,
|
71 | total = _props.total,
|
72 | stretch = _props.stretch;
|
73 |
|
74 | this.body && this.ro.observe(ReactDOM.findDOMNode(this.body));
|
75 | if (shape === 'arrow') {
|
76 | return;
|
77 | }
|
78 | if (direction === 'vertical' || direction === 'ver') {
|
79 | this.resize();
|
80 | this.forceUpdate();
|
81 | this.eventHandler = events.on(window, 'resize', this.resize);
|
82 | } else if ((direction === 'horizontal' || direction === 'hoz') && (labelPlacement === 'horizontal' || labelPlacement === 'hoz') && index !== total - 1) {
|
83 |
|
84 | this.adjustTail();
|
85 | }
|
86 | if (stretch && (direction === 'horizontal' || direction === 'hoz')) {
|
87 | this.adjustItemWidth();
|
88 | }
|
89 | };
|
90 |
|
91 | StepItem.prototype.componentDidUpdate = function componentDidUpdate() {
|
92 | var _this2 = this;
|
93 |
|
94 | var _props2 = this.props,
|
95 | shape = _props2.shape,
|
96 | direction = _props2.direction,
|
97 | labelPlacement = _props2.labelPlacement,
|
98 | index = _props2.index,
|
99 | total = _props2.total,
|
100 | rtl = _props2.rtl,
|
101 | stretch = _props2.stretch;
|
102 |
|
103 | if (shape === 'arrow') {
|
104 | return;
|
105 | }
|
106 | var resetTailStyle = function resetTailStyle() {
|
107 | dom.setStyle(_this2.tail, {
|
108 | width: '',
|
109 | top: '',
|
110 | height: ''
|
111 | });
|
112 | };
|
113 |
|
114 | if (direction === 'vertical' || direction === 'ver') {
|
115 | this.resize();
|
116 | } else if (direction === 'horizontal' || direction === 'hoz') {
|
117 | var _dom$setStyle;
|
118 |
|
119 | var pos = rtl ? 'right' : 'left';
|
120 | dom.setStyle(this.body, (_dom$setStyle = {
|
121 | width: ''
|
122 | }, _dom$setStyle[pos] = '', _dom$setStyle));
|
123 | if (shape === 'circle' && (labelPlacement === 'horizontal' || labelPlacement === 'hoz') && index !== total - 1) {
|
124 |
|
125 | this.adjustTail();
|
126 | } else {
|
127 | resetTailStyle();
|
128 | }
|
129 | if (stretch) {
|
130 | this.adjustItemWidth();
|
131 | }
|
132 | } else if (index !== total - 1) {
|
133 | resetTailStyle();
|
134 | }
|
135 | };
|
136 |
|
137 | StepItem.prototype.componentWillUnmount = function componentWillUnmount() {
|
138 | this.eventHandler && this.eventHandler.off();
|
139 | };
|
140 |
|
141 | StepItem.prototype.adjustItemWidth = function adjustItemWidth() {
|
142 | var _props3 = this.props,
|
143 | index = _props3.index,
|
144 | total = _props3.total,
|
145 | labelPlacement = _props3.labelPlacement;
|
146 |
|
147 | var lastNodeWidth = labelPlacement === 'horizontal' || labelPlacement === 'hoz' ? this.container.offsetWidth + this.body.offsetWidth : this.title.offsetWidth;
|
148 | var width = total - 1 !== index ? 'calc((100% - ' + lastNodeWidth + 'px)/' + (total - 1) + ')' : 'auto';
|
149 | dom.setStyle(this.step, {
|
150 | width: width
|
151 | });
|
152 | };
|
153 |
|
154 | StepItem.prototype.adjustTail = function adjustTail() {
|
155 | var width = this.container.offsetWidth + this.title.offsetWidth;
|
156 | dom.setStyle(this.tail, {
|
157 | width: 'calc(100% - ' + width + 'px)',
|
158 | top: dom.getStyle(this.container, 'height') / 2 + 'px'
|
159 | });
|
160 | };
|
161 |
|
162 | StepItem.prototype.resize = function resize() {
|
163 | var direction = this.props.direction;
|
164 |
|
165 | if (direction === 'vertical' || direction === 'ver') {
|
166 | var stepWidth = dom.getStyle(this.step, 'width');
|
167 | var stepHozWhitespace = dom.getNodeHozWhitespace(this.step.parentNode);
|
168 | var stepBodyHozWhitespace = dom.getNodeHozWhitespace(this.body);
|
169 | var rtl = this.props.rtl;
|
170 |
|
171 | rtl ? this.body.style.right = stepWidth + 'px' : this.body.style.left = stepWidth + 'px';
|
172 | dom.setStyle(this.body, {
|
173 | width: dom.getStyle(this.step.parentNode.parentNode, 'width') - stepWidth - stepHozWhitespace - stepBodyHozWhitespace
|
174 | });
|
175 | dom.setStyle(this.tail, 'height', dom.getStyle(this.body, 'height') - dom.getStyle(this.container, 'height'));
|
176 | }
|
177 | };
|
178 |
|
179 | StepItem.prototype._getNode = function _getNode() {
|
180 | var _props4 = this.props,
|
181 | prefix = _props4.prefix,
|
182 | index = _props4.index,
|
183 | status = _props4.status,
|
184 | icon = _props4.icon,
|
185 | shape = _props4.shape,
|
186 | percent = _props4.percent,
|
187 | itemRender = _props4.itemRender;
|
188 |
|
189 | var nodeElement = icon;
|
190 | if (shape === 'dot') {
|
191 | nodeElement = icon ? React.createElement(Icon, { type: icon }) : React.createElement(
|
192 | 'div',
|
193 | { className: prefix + 'step-item-node-dot' },
|
194 | ' '
|
195 | );
|
196 | } else if (shape === 'circle' && percent) {
|
197 | nodeElement = React.createElement(Progress, { shape: 'circle', percent: percent, className: prefix + 'step-item-progress' });
|
198 | } else if (shape === 'circle' && !!itemRender && typeof itemRender === 'function') {
|
199 | nodeElement = null;
|
200 | } else {
|
201 | nodeElement = React.createElement(
|
202 | 'div',
|
203 | { className: prefix + 'step-item-node-circle' },
|
204 | icon ? React.createElement(Icon, { type: icon }) : this._itemRender(index, status)
|
205 | );
|
206 | }
|
207 |
|
208 | return nodeElement;
|
209 | };
|
210 |
|
211 | StepItem.prototype.getNode = function getNode(args) {
|
212 | var _props5 = this.props,
|
213 | prefix = _props5.prefix,
|
214 | itemRender = _props5.itemRender,
|
215 | index = _props5.index,
|
216 | status = _props5.status,
|
217 | title = _props5.title,
|
218 | content = _props5.content,
|
219 | shape = _props5.shape;
|
220 | var others = args.others,
|
221 | stepCls = args.stepCls,
|
222 | overlayCls = args.overlayCls;
|
223 |
|
224 | var nodeElement = this._getNode();
|
225 | var containerStyle = shape === 'dot' && { fontSize: 'initial' } || {};
|
226 | var finalNodeElement = React.createElement(
|
227 | 'div',
|
228 | {
|
229 | className: prefix + 'step-item-container',
|
230 | style: containerStyle,
|
231 | ref: this._refHandlerCreator('container')
|
232 | },
|
233 | React.createElement(
|
234 | 'div',
|
235 | { className: prefix + 'step-item-node-placeholder', onClick: this.onClick },
|
236 | React.createElement(
|
237 | 'div',
|
238 | {
|
239 | className: prefix + 'step-item-node',
|
240 | ref: this._refHandlerCreator('stepNode'),
|
241 | onTransitionEnd: this.removeClickedCls
|
242 | },
|
243 | nodeElement
|
244 | )
|
245 | )
|
246 | );
|
247 |
|
248 | if (!nodeElement) {
|
249 |
|
250 | finalNodeElement = React.createElement(
|
251 | 'div',
|
252 | {
|
253 | className: prefix + 'step-item-container',
|
254 | style: containerStyle,
|
255 | ref: this._refHandlerCreator('container')
|
256 | },
|
257 | React.createElement(
|
258 | 'div',
|
259 | { className: prefix + 'step-item-node-placeholder', onClick: this.onClick },
|
260 | itemRender(index, status, title, content)
|
261 | )
|
262 | );
|
263 | }
|
264 | if (shape !== 'arrow') {
|
265 | delete others.tabIndex;
|
266 | delete others['aria-current'];
|
267 | }
|
268 |
|
269 | return React.createElement(
|
270 | 'li',
|
271 | _extends({}, others, { style: this.getStyle(), className: stepCls, ref: this._refHandlerCreator('step') }),
|
272 | finalNodeElement,
|
273 | React.createElement(
|
274 | 'div',
|
275 | {
|
276 | className: prefix + 'step-item-body',
|
277 | ref: this._refHandlerCreator('body'),
|
278 | tabIndex: this.props.tabIndex,
|
279 | 'aria-current': this.props['aria-current']
|
280 | },
|
281 | React.createElement(
|
282 | 'div',
|
283 | { className: prefix + 'step-item-title', ref: this._refHandlerCreator('title') },
|
284 | title
|
285 | ),
|
286 | React.createElement(
|
287 | 'div',
|
288 | { className: prefix + 'step-item-content' },
|
289 | content
|
290 | )
|
291 | ),
|
292 | React.createElement(
|
293 | 'div',
|
294 | { className: prefix + 'step-item-tail', ref: this._refHandlerCreator('tail') },
|
295 | React.createElement(
|
296 | 'div',
|
297 | { className: prefix + 'step-item-tail-underlay' },
|
298 | React.createElement('div', { className: prefix + 'step-item-tail-overlay', style: overlayCls })
|
299 | )
|
300 | )
|
301 | );
|
302 | };
|
303 |
|
304 | StepItem.prototype.getStyle = function getStyle() {
|
305 | var _props6 = this.props,
|
306 | parentWidth = _props6.parentWidth,
|
307 | parentHeight = _props6.parentHeight,
|
308 | direction = _props6.direction,
|
309 | total = _props6.total,
|
310 | index = _props6.index,
|
311 | shape = _props6.shape;
|
312 |
|
313 | var width = 'auto';
|
314 |
|
315 | if (Number(parentWidth) && Number(parentHeight)) {
|
316 | if (!support.flex && shape === 'arrow') {
|
317 | width = Math.floor(parentWidth / total - parentHeight / 2 - parentHeight / 8);
|
318 | }
|
319 | }
|
320 | if (shape !== 'arrow' && (direction === 'horizontal' || direction === 'hoz')) {
|
321 | width = total - 1 !== index ? Math.floor(100 / total) + '%' : 'auto';
|
322 | }
|
323 | return {
|
324 | width: width
|
325 | };
|
326 | };
|
327 |
|
328 | StepItem.prototype.removeClickedCls = function removeClickedCls() {
|
329 | var animation = this.props.animation;
|
330 |
|
331 | if (animation && this.stepNode && dom.hasClass(this.stepNode, 'clicked')) {
|
332 | dom.removeClass(this.stepNode, 'clicked');
|
333 | }
|
334 | };
|
335 |
|
336 |
|
337 |
|
338 |
|
339 | StepItem.prototype._itemRender = function _itemRender(index, status) {
|
340 | var itemRender = this.props.itemRender;
|
341 |
|
342 | if (itemRender) {
|
343 | return itemRender(index, status);
|
344 | }
|
345 | return status === 'finish' ? React.createElement(Icon, { type: 'select' }) : index + 1;
|
346 | };
|
347 |
|
348 | StepItem.prototype._refHandlerCreator = function _refHandlerCreator(refName) {
|
349 | var self = this;
|
350 | return function (ref) {
|
351 | self[refName] = ref;
|
352 | };
|
353 | };
|
354 |
|
355 | StepItem.prototype.render = function render() {
|
356 | var _classNames;
|
357 |
|
358 |
|
359 | var _props7 = this.props,
|
360 | prefix = _props7.prefix,
|
361 | locale = _props7.locale,
|
362 | className = _props7.className,
|
363 | status = _props7.status,
|
364 | title = _props7.title,
|
365 | icon = _props7.icon,
|
366 | index = _props7.index,
|
367 | total = _props7.total,
|
368 | shape = _props7.shape,
|
369 | content = _props7.content,
|
370 | direction = _props7.direction,
|
371 | disabled = _props7.disabled,
|
372 | onClick = _props7.onClick,
|
373 | readOnly = _props7.readOnly,
|
374 | animation = _props7.animation,
|
375 | parentHeight = _props7.parentHeight,
|
376 | itemRender = _props7.itemRender,
|
377 | parentWidth = _props7.parentWidth,
|
378 | labelPlacement = _props7.labelPlacement,
|
379 | rtl = _props7.rtl,
|
380 | onResize = _props7.onResize;
|
381 |
|
382 |
|
383 | var others = obj.pickOthers(StepItem.propTypes, this.props);
|
384 |
|
385 | var stepCls = classNames((_classNames = {}, _classNames[prefix + 'step-item'] = true, _classNames[prefix + 'step-item-' + status] = status, _classNames[prefix + 'step-item-first'] = index === 0, _classNames[prefix + 'step-item-last'] = index === total - 1, _classNames[prefix + 'step-item-disabled'] = disabled, _classNames[prefix + 'step-item-read-only'] = readOnly, _classNames[className] = className, _classNames));
|
386 |
|
387 | var overlayCls = status === 'finish' ? { width: '100%' } : null;
|
388 | var arrowElement = React.createElement(
|
389 | 'li',
|
390 | _extends({}, others, { style: this.getStyle(), className: stepCls, onClick: this.onClick }),
|
391 | React.createElement(
|
392 | 'div',
|
393 | { className: prefix + 'step-item-container' },
|
394 | React.createElement(
|
395 | 'div',
|
396 | { className: prefix + 'step-item-title' },
|
397 | title
|
398 | )
|
399 | )
|
400 | );
|
401 | var otherElement = this.getNode({ others: others, stepCls: stepCls, overlayCls: overlayCls });
|
402 |
|
403 | return shape === 'arrow' ? arrowElement : otherElement;
|
404 | };
|
405 |
|
406 | return StepItem;
|
407 | }(Component), _class.propTypes = _extends({}, ConfigProvider.propTypes, {
|
408 | prefix: PropTypes.string,
|
409 | rtl: PropTypes.bool,
|
410 | |
411 |
|
412 |
|
413 | status: PropTypes.oneOf(['wait', 'process', 'finish']),
|
414 | |
415 |
|
416 |
|
417 | title: PropTypes.node,
|
418 | direction: PropTypes.oneOf(['hoz', 'ver']),
|
419 | labelPlacement: PropTypes.oneOf(['hoz', 'ver']),
|
420 | shape: PropTypes.oneOf(['circle', 'arrow', 'dot']),
|
421 | |
422 |
|
423 |
|
424 | icon: PropTypes.string,
|
425 | |
426 |
|
427 |
|
428 | content: PropTypes.node,
|
429 | |
430 |
|
431 |
|
432 |
|
433 |
|
434 |
|
435 | itemRender: PropTypes.func,
|
436 | |
437 |
|
438 |
|
439 | percent: PropTypes.number,
|
440 | index: PropTypes.number,
|
441 | total: PropTypes.number,
|
442 | animation: PropTypes.bool,
|
443 | |
444 |
|
445 |
|
446 | disabled: PropTypes.bool,
|
447 | parentWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
448 | parentHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
449 | |
450 |
|
451 |
|
452 |
|
453 | onClick: PropTypes.func,
|
454 | |
455 |
|
456 |
|
457 | className: PropTypes.string,
|
458 | readOnly: PropTypes.bool,
|
459 | onResize: PropTypes.func,
|
460 | stretch: PropTypes.bool
|
461 | }), _class.defaultProps = {
|
462 | shape: 'circle',
|
463 | index: 0,
|
464 | total: 1,
|
465 | onClick: function onClick() {},
|
466 | stretch: false
|
467 | }, _temp);
|
468 | StepItem.displayName = 'StepItem';
|
469 |
|
470 | export default ConfigProvider.config(StepItem); |
\ | No newline at end of file |