ant-design-vue/components/vc-steps/Step.jsx

127 lines
3.9 KiB
Vue
Raw Normal View History

2018-03-19 10:16:27 +08:00
2018-03-07 10:50:11 +08:00
import PropTypes from '../_util/vue-types'
2018-03-11 12:48:04 +08:00
import { getOptionProps, getComponentFromProp } from '../_util/props-util'
2018-03-07 10:50:11 +08:00
function isString (str) {
return typeof str === 'string'
}
export default {
name: 'Step',
props: {
prefixCls: PropTypes.string,
wrapperStyle: PropTypes.object,
2018-03-11 12:48:04 +08:00
itemWidth: PropTypes.string,
2018-03-07 10:50:11 +08:00
status: PropTypes.string,
iconPrefix: PropTypes.string,
2018-12-15 22:11:21 +08:00
icon: PropTypes.any,
2018-03-11 12:48:04 +08:00
adjustMarginRight: PropTypes.string,
2018-03-07 10:50:11 +08:00
stepNumber: PropTypes.string,
description: PropTypes.any,
title: PropTypes.any,
progressDot: PropTypes.oneOfType([
PropTypes.bool,
PropTypes.func,
]),
tailContent: PropTypes.any,
2018-11-09 17:51:56 +08:00
icons: PropTypes.shape({
finish: PropTypes.any,
error: PropTypes.any,
}).loose,
2018-03-07 10:50:11 +08:00
},
methods: {
renderIconNode () {
const {
2018-03-13 10:19:00 +08:00
prefixCls, stepNumber, status,
2018-11-09 17:51:56 +08:00
iconPrefix, icons,
2018-03-07 10:50:11 +08:00
} = getOptionProps(this)
2018-03-13 10:19:00 +08:00
let progressDot = this.progressDot
if (progressDot === undefined) {
progressDot = this.$scopedSlots.progressDot
}
2018-03-11 12:48:04 +08:00
const icon = getComponentFromProp(this, 'icon')
const title = getComponentFromProp(this, 'title')
const description = getComponentFromProp(this, 'description')
2018-03-07 10:50:11 +08:00
let iconNode
const iconClassName = {
[`${prefixCls}-icon`]: true,
[`${iconPrefix}icon`]: true,
[`${iconPrefix}icon-${icon}`]: icon && isString(icon),
2018-11-09 17:51:56 +08:00
[`${iconPrefix}icon-check`]: !icon && status === 'finish' && (icons && !icons.finish),
[`${iconPrefix}icon-close`]: !icon && status === 'error' && (icons && !icons.error),
2018-03-07 10:50:11 +08:00
}
const iconDot = <span class={`${prefixCls}-icon-dot`}></span>
// `progressDot` enjoy the highest priority
if (progressDot) {
if (typeof progressDot === 'function') {
iconNode = (
<span class={`${prefixCls}-icon`}>
2018-03-13 10:19:00 +08:00
{progressDot({ index: stepNumber - 1, status, title, description, prefixCls })}
2018-03-07 10:50:11 +08:00
</span>
)
} else {
iconNode = <span class={`${prefixCls}-icon`}>{iconDot}</span>
}
} else if (icon && !isString(icon)) {
iconNode = <span class={`${prefixCls}-icon`}>{icon}</span>
2018-11-09 17:51:56 +08:00
} else if (icons && icons.finish && status === 'finish') {
2018-11-14 20:43:20 +08:00
iconNode = <span class={`${prefixCls}-icon`}>{icons.finish}</span>
2018-11-09 17:51:56 +08:00
} else if (icons && icons.error && status === 'error') {
2018-11-14 20:43:20 +08:00
iconNode = <span class={`${prefixCls}-icon`}>{icons.error}</span>
2018-03-07 10:50:11 +08:00
} else if (icon || status === 'finish' || status === 'error') {
iconNode = <span class={iconClassName} />
} else {
iconNode = <span class={`${prefixCls}-icon`}>{stepNumber}</span>
}
return iconNode
},
},
render () {
const {
2018-03-11 12:48:04 +08:00
prefixCls, itemWidth,
2018-12-15 16:06:00 +08:00
status = 'wait', tailContent,
2018-03-11 12:48:04 +08:00
adjustMarginRight,
2018-03-07 10:50:11 +08:00
} = getOptionProps(this)
2018-03-13 10:16:06 +08:00
const title = getComponentFromProp(this, 'title')
const description = getComponentFromProp(this, 'description')
2018-03-10 20:46:57 +08:00
2018-03-07 10:50:11 +08:00
const classString = {
[`${prefixCls}-item`]: true,
[`${prefixCls}-item-${status}`]: true,
2018-12-15 16:06:00 +08:00
[`${prefixCls}-item-custom`]: getComponentFromProp(this, 'icon'),
2018-03-07 10:50:11 +08:00
}
const stepProps = {
class: classString,
on: this.$listeners,
}
2018-03-11 12:48:04 +08:00
const stepItemStyle = {}
if (itemWidth) {
stepItemStyle.width = itemWidth
}
if (adjustMarginRight) {
stepItemStyle.marginRight = adjustMarginRight
}
2018-03-07 10:50:11 +08:00
return (
<div
{...stepProps}
2018-03-11 12:48:04 +08:00
style={stepItemStyle}
2018-03-07 10:50:11 +08:00
>
<div class={`${prefixCls}-item-tail`}>
{tailContent}
</div>
<div class={`${prefixCls}-item-icon`}>
{this.renderIconNode()}
</div>
<div class={`${prefixCls}-item-content`}>
<div class={`${prefixCls}-item-title`}>
{title}
</div>
{description && <div class={`${prefixCls}-item-description`}>{description}</div>}
</div>
</div>
)
},
}
2018-03-19 10:16:27 +08:00