123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181 |
- 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);
- })]
- );
- }
- };
|