181 lines
6.1 KiB
Java
181 lines
6.1 KiB
Java
import _extends from 'babel-runtime/helpers/extends';
|
|
import _defineProperty from 'babel-runtime/helpers/defineProperty';
|
|
import PropTypes from '../_util/vue-types';
|
|
import BaseMixin from '../_util/BaseMixin';
|
|
import debounce from 'lodash/debounce';
|
|
import isFlexSupported from '../_util/isFlexSupported';
|
|
import { filterEmpty, getEvents, getPropsData, getListeners } from '../_util/props-util';
|
|
import { cloneElement } from '../_util/vnode';
|
|
|
|
export default {
|
|
name: 'Steps',
|
|
mixins: [BaseMixin],
|
|
props: {
|
|
type: PropTypes.string.def('default'),
|
|
prefixCls: PropTypes.string.def('rc-steps'),
|
|
iconPrefix: PropTypes.string.def('rc'),
|
|
direction: PropTypes.string.def('horizontal'),
|
|
labelPlacement: PropTypes.string.def('horizontal'),
|
|
status: PropTypes.string.def('process'),
|
|
size: PropTypes.string.def(''),
|
|
progressDot: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
|
|
initial: PropTypes.number.def(0),
|
|
current: PropTypes.number.def(0),
|
|
icons: PropTypes.shape({
|
|
finish: PropTypes.any,
|
|
error: PropTypes.any
|
|
}).loose
|
|
},
|
|
data: function data() {
|
|
this.calcStepOffsetWidth = debounce(this.calcStepOffsetWidth, 150);
|
|
return {
|
|
flexSupported: true,
|
|
lastStepOffsetWidth: 0
|
|
};
|
|
},
|
|
mounted: function mounted() {
|
|
var _this = this;
|
|
|
|
this.$nextTick(function () {
|
|
_this.calcStepOffsetWidth();
|
|
if (!isFlexSupported()) {
|
|
_this.setState({
|
|
flexSupported: false
|
|
});
|
|
}
|
|
});
|
|
},
|
|
updated: function updated() {
|
|
var _this2 = this;
|
|
|
|
this.$nextTick(function () {
|
|
_this2.calcStepOffsetWidth();
|
|
});
|
|
},
|
|
beforeDestroy: function beforeDestroy() {
|
|
if (this.calcTimeout) {
|
|
clearTimeout(this.calcTimeout);
|
|
}
|
|
if (this.calcStepOffsetWidth && this.calcStepOffsetWidth.cancel) {
|
|
this.calcStepOffsetWidth.cancel();
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
onStepClick: function onStepClick(next) {
|
|
var current = this.$props.current;
|
|
|
|
if (current !== next) {
|
|
this.$emit('change', next);
|
|
}
|
|
},
|
|
calcStepOffsetWidth: function calcStepOffsetWidth() {
|
|
var _this3 = this;
|
|
|
|
if (isFlexSupported()) {
|
|
return;
|
|
}
|
|
var lastStepOffsetWidth = this.$data.lastStepOffsetWidth;
|
|
// Just for IE9
|
|
|
|
var domNode = this.$refs.vcStepsRef;
|
|
if (domNode.children.length > 0) {
|
|
if (this.calcTimeout) {
|
|
clearTimeout(this.calcTimeout);
|
|
}
|
|
this.calcTimeout = setTimeout(function () {
|
|
// +1 for fit edge bug of digit width, like 35.4px
|
|
var offsetWidth = (domNode.lastChild.offsetWidth || 0) + 1;
|
|
// Reduce shake bug
|
|
if (lastStepOffsetWidth === offsetWidth || Math.abs(lastStepOffsetWidth - offsetWidth) <= 3) {
|
|
return;
|
|
}
|
|
_this3.setState({ lastStepOffsetWidth: offsetWidth });
|
|
});
|
|
}
|
|
}
|
|
},
|
|
render: function render() {
|
|
var _classString,
|
|
_this4 = this;
|
|
|
|
var h = arguments[0];
|
|
var prefixCls = this.prefixCls,
|
|
direction = this.direction,
|
|
type = this.type,
|
|
labelPlacement = this.labelPlacement,
|
|
iconPrefix = this.iconPrefix,
|
|
status = this.status,
|
|
size = this.size,
|
|
current = this.current,
|
|
$scopedSlots = this.$scopedSlots,
|
|
initial = this.initial,
|
|
icons = this.icons;
|
|
|
|
var isNav = type === 'navigation';
|
|
var progressDot = this.progressDot;
|
|
if (progressDot === undefined) {
|
|
progressDot = $scopedSlots.progressDot;
|
|
}
|
|
var lastStepOffsetWidth = this.lastStepOffsetWidth,
|
|
flexSupported = this.flexSupported;
|
|
|
|
var filteredChildren = filterEmpty(this.$slots['default']);
|
|
var lastIndex = filteredChildren.length - 1;
|
|
var adjustedlabelPlacement = progressDot ? 'vertical' : labelPlacement;
|
|
var classString = (_classString = {}, _defineProperty(_classString, prefixCls, true), _defineProperty(_classString, prefixCls + '-' + direction, true), _defineProperty(_classString, prefixCls + '-' + size, size), _defineProperty(_classString, prefixCls + '-label-' + adjustedlabelPlacement, direction === 'horizontal'), _defineProperty(_classString, prefixCls + '-dot', !!progressDot), _defineProperty(_classString, prefixCls + '-navigation', isNav), _defineProperty(_classString, prefixCls + '-flex-not-supported', !flexSupported), _classString);
|
|
var listeners = getListeners(this);
|
|
var stepsProps = {
|
|
'class': classString,
|
|
ref: 'vcStepsRef',
|
|
on: listeners
|
|
};
|
|
return h(
|
|
'div',
|
|
stepsProps,
|
|
[filteredChildren.map(function (child, index) {
|
|
var childProps = getPropsData(child);
|
|
var stepNumber = initial + index;
|
|
var stepProps = {
|
|
props: _extends({
|
|
stepNumber: '' + (stepNumber + 1),
|
|
stepIndex: stepNumber,
|
|
prefixCls: prefixCls,
|
|
iconPrefix: iconPrefix,
|
|
progressDot: _this4.progressDot,
|
|
icons: icons
|
|
}, childProps),
|
|
on: getEvents(child),
|
|
scopedSlots: $scopedSlots
|
|
};
|
|
if (listeners.change) {
|
|
stepProps.on.stepClick = _this4.onStepClick;
|
|
}
|
|
if (!flexSupported && direction !== 'vertical') {
|
|
if (isNav) {
|
|
stepProps.props.itemWidth = 100 / (lastIndex + 1) + '%';
|
|
stepProps.props.adjustMarginRight = 0;
|
|
} else if (index !== lastIndex) {
|
|
stepProps.props.itemWidth = 100 / lastIndex + '%';
|
|
stepProps.props.adjustMarginRight = -Math.round(lastStepOffsetWidth / lastIndex + 1) + 'px';
|
|
}
|
|
}
|
|
// fix tail color
|
|
if (status === 'error' && index === current - 1) {
|
|
stepProps['class'] = prefixCls + '-next-error';
|
|
}
|
|
if (!childProps.status) {
|
|
if (stepNumber === current) {
|
|
stepProps.props.status = status;
|
|
} else if (stepNumber < current) {
|
|
stepProps.props.status = 'finish';
|
|
} else {
|
|
stepProps.props.status = 'wait';
|
|
}
|
|
}
|
|
stepProps.props.active = stepNumber === current;
|
|
return cloneElement(child, stepProps);
|
|
})]
|
|
);
|
|
}
|
|
}; |