ant-design-vue/components/vc-steps/Steps.vue

<script>
import PropTypes from '../_util/vue-types'
import BaseMixin from '../_util/BaseMixin'
import debounce from 'lodash/debounce'
import isFlexSupported from '../_util/isFlexSupported'
import {
  getOptionProps,
  filterEmpty,
  getEvents,
  getPropsData,
} from '../_util/props-util'
import { cloneElement } from '../_util/vnode'

export default {
  name: 'Steps',
  mixins: [BaseMixin],
  props: {
    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,
    ]),
    current: PropTypes.number.def(0),
  },
  data () {
    this.calcStepOffsetWidth = debounce(this.calcStepOffsetWidth, 150)
    return {
      flexSupported: true,
      lastStepOffsetWidth: 0,
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.calcStepOffsetWidth()
      if (!isFlexSupported()) {
        this.setState({
          flexSupported: false,
        })
      }
    })
  },
  updated () {
    this.$nextTick(() => {
      this.calcStepOffsetWidth()
    })
  },
  beforeDestroy () {
    if (this.calcTimeout) {
      clearTimeout(this.calcTimeout)
    }
    if (this.calcStepOffsetWidth && this.calcStepOffsetWidth.cancel) {
      this.calcStepOffsetWidth.cancel()
    }
  },
  methods: {
    calcStepOffsetWidth () {
      if (isFlexSupported()) {
        return
      }
      // Just for IE9
      const domNode = this.$refs.vcStepsRef
      if (domNode.children.length > 0) {
        if (this.calcTimeout) {
          clearTimeout(this.calcTimeout)
        }
        this.calcTimeout = setTimeout(() => {
        // +1 for fit edge bug of digit width, like 35.4px
          const lastStepOffsetWidth = (domNode.lastChild.offsetWidth || 0) + 1
          // Reduce shake bug
          if (this.lastStepOffsetWidth === lastStepOffsetWidth ||
            Math.abs(this.lastStepOffsetWidth - lastStepOffsetWidth) <= 3) {
            return
          }
          this.setState({ lastStepOffsetWidth })
        })
      }
    },
  },
  render () {
    const {
      prefixCls, direction,
      labelPlacement, iconPrefix, status, size, current, $scopedSlots,
    } = this
    let progressDot = this.progressDot
    if (progressDot === undefined) {
      progressDot = $scopedSlots.progressDot
    }
    const { lastStepOffsetWidth, flexSupported } = this
    const filteredChildren = filterEmpty(this.$slots.default)
    const lastIndex = filteredChildren.length - 1
    const adjustedlabelPlacement = progressDot ? 'vertical' : labelPlacement
    const classString = {
      [prefixCls]: true,
      [`${prefixCls}-${direction}`]: true,
      [`${prefixCls}-${size}`]: size,
      [`${prefixCls}-label-${adjustedlabelPlacement}`]: direction === 'horizontal',
      [`${prefixCls}-dot`]: !!progressDot,
    }
    const stepsProps = {
      class: classString,
      ref: 'vcStepsRef',
      on: this.$listeners,
    }
    return (
      <div {...stepsProps}>
        {
          filteredChildren.map((child, index) => {
            const childProps = getPropsData(child)
            const stepProps = {
              props: {
                stepNumber: `${index + 1}`,
                prefixCls,
                iconPrefix,
                progressDot: this.progressDot,
                ...childProps,
              },
              on: getEvents(child),
              scopedSlots: $scopedSlots,
            }
            if (!flexSupported && direction !== 'vertical' && index !== lastIndex) {
              stepProps.props.itemWidth = `${100 / lastIndex}%`
              stepProps.props.adjustMarginRight = -Math.round(lastStepOffsetWidth / lastIndex + 1)
            }
            // fix tail color
            if (status === 'error' && index === current - 1) {
              stepProps.class = `${prefixCls}-next-error`
            }
            if (!childProps.status) {
              if (index === current) {
                stepProps.props.status = status
              } else if (index < current) {
                stepProps.props.status = 'finish'
              } else {
                stepProps.props.status = 'wait'
              }
            }
            return cloneElement(child, stepProps)
          })
        }
      </div>
    )
  },
}
</script>