2018-03-19 02:16:27 +00:00
|
|
|
|
2018-03-09 09:50:33 +00:00
|
|
|
import PropTypes from '../_util/vue-types'
|
2017-11-16 10:29:02 +00:00
|
|
|
import ScrollNumber from './ScrollNumber'
|
2018-03-09 09:50:33 +00:00
|
|
|
import classNames from 'classnames'
|
2019-01-03 12:46:53 +00:00
|
|
|
import { initDefaultProps, filterEmpty, getComponentFromProp } from '../_util/props-util'
|
|
|
|
import { cloneElement } from '../_util/vnode'
|
2018-03-09 09:50:33 +00:00
|
|
|
import getTransitionProps from '../_util/getTransitionProps'
|
2019-01-03 12:46:53 +00:00
|
|
|
import isNumeric from '../_util/isNumeric'
|
2018-03-09 09:50:33 +00:00
|
|
|
|
|
|
|
export const BadgeProps = {
|
|
|
|
/** Number to show in badge */
|
2019-01-03 12:46:53 +00:00
|
|
|
count: PropTypes.any,
|
2018-03-09 09:50:33 +00:00
|
|
|
showZero: PropTypes.bool,
|
|
|
|
/** Max count to show */
|
|
|
|
overflowCount: PropTypes.number,
|
|
|
|
/** whether to show red dot without number */
|
|
|
|
dot: PropTypes.bool,
|
|
|
|
prefixCls: PropTypes.string,
|
|
|
|
scrollNumberPrefixCls: PropTypes.string,
|
|
|
|
status: PropTypes.oneOf(['success', 'processing', 'default', 'error', 'warning']),
|
|
|
|
text: PropTypes.string,
|
|
|
|
offset: PropTypes.array,
|
|
|
|
numberStyle: PropTypes.object.def({}),
|
2018-09-05 13:28:54 +00:00
|
|
|
title: PropTypes.string,
|
2018-03-09 09:50:33 +00:00
|
|
|
}
|
2017-11-16 10:29:02 +00:00
|
|
|
|
|
|
|
export default {
|
2018-04-08 13:17:20 +00:00
|
|
|
name: 'ABadge',
|
2018-03-09 09:50:33 +00:00
|
|
|
props: initDefaultProps(BadgeProps, {
|
|
|
|
prefixCls: 'ant-badge',
|
|
|
|
scrollNumberPrefixCls: 'ant-scroll-number',
|
|
|
|
showZero: false,
|
|
|
|
dot: false,
|
|
|
|
overflowCount: 99,
|
|
|
|
}),
|
2019-01-03 12:46:53 +00:00
|
|
|
methods: {
|
|
|
|
getBadgeClassName () {
|
|
|
|
const { prefixCls, status } = this.$props
|
|
|
|
const children = filterEmpty(this.$slots.default)
|
|
|
|
return classNames(prefixCls, {
|
|
|
|
[`${prefixCls}-status`]: !!status,
|
|
|
|
[`${prefixCls}-not-a-wrapper`]: !children.length,
|
|
|
|
})
|
|
|
|
},
|
|
|
|
|
|
|
|
isZero () {
|
|
|
|
const numberedDispayCount = this.getNumberedDispayCount()
|
|
|
|
return numberedDispayCount === '0' || numberedDispayCount === 0
|
|
|
|
},
|
|
|
|
|
|
|
|
isDot () {
|
|
|
|
const { dot, status } = this.$props
|
|
|
|
const isZero = this.isZero()
|
|
|
|
return (dot && !isZero) || status
|
|
|
|
},
|
|
|
|
|
|
|
|
isHidden () {
|
|
|
|
const { showZero } = this.$props
|
|
|
|
const displayCount = this.getDispayCount()
|
|
|
|
const isZero = this.isZero()
|
|
|
|
const isDot = this.isDot()
|
|
|
|
const isEmpty = displayCount === null || displayCount === undefined || displayCount === ''
|
|
|
|
return (isEmpty || (isZero && !showZero)) && !isDot
|
|
|
|
},
|
|
|
|
|
|
|
|
getNumberedDispayCount () {
|
|
|
|
const { overflowCount } = this.$props
|
|
|
|
const count = this.badgeCount
|
|
|
|
const displayCount =
|
|
|
|
count > overflowCount ? `${overflowCount}+` : count
|
|
|
|
return displayCount
|
|
|
|
},
|
|
|
|
|
|
|
|
getDispayCount () {
|
|
|
|
const isDot = this.isDot()
|
|
|
|
// dot mode don't need count
|
|
|
|
if (isDot) {
|
|
|
|
return ''
|
|
|
|
}
|
|
|
|
return this.getNumberedDispayCount()
|
|
|
|
},
|
|
|
|
|
|
|
|
getScollNumberTitle () {
|
|
|
|
const { title } = this.$props
|
|
|
|
const count = this.badgeCount
|
|
|
|
if (title) {
|
|
|
|
return title
|
|
|
|
}
|
|
|
|
return typeof count === 'string' || typeof count === 'number' ? count : undefined
|
|
|
|
},
|
|
|
|
|
|
|
|
getStyleWithOffset () {
|
|
|
|
const { offset, numberStyle } = this.$props
|
|
|
|
return offset
|
|
|
|
? {
|
|
|
|
right: `${-parseInt(offset[0], 10)}px`,
|
|
|
|
marginTop: isNumeric(offset[1]) ? `${offset[1]}px` : offset[1],
|
|
|
|
...numberStyle,
|
|
|
|
}
|
|
|
|
: numberStyle
|
|
|
|
},
|
|
|
|
|
|
|
|
renderStatusText () {
|
|
|
|
const { prefixCls, text } = this.$props
|
|
|
|
const hidden = this.isHidden()
|
|
|
|
return hidden || !text ? null : <span class={`${prefixCls}-status-text`}>{text}</span>
|
|
|
|
},
|
|
|
|
|
|
|
|
renderDispayComponent () {
|
|
|
|
const count = this.badgeCount
|
|
|
|
const customNode = count
|
|
|
|
if (!customNode || typeof customNode !== 'object') {
|
|
|
|
return undefined
|
|
|
|
}
|
|
|
|
return cloneElement(customNode, {
|
|
|
|
style: this.getStyleWithOffset(),
|
|
|
|
})
|
|
|
|
},
|
|
|
|
|
|
|
|
renderBadgeNumber () {
|
|
|
|
const { prefixCls, scrollNumberPrefixCls, status } = this.$props
|
|
|
|
const count = this.badgeCount
|
|
|
|
const displayCount = this.getDispayCount()
|
|
|
|
const isDot = this.isDot()
|
|
|
|
const hidden = this.isHidden()
|
|
|
|
|
|
|
|
const scrollNumberCls = {
|
|
|
|
[`${prefixCls}-dot`]: isDot,
|
|
|
|
[`${prefixCls}-count`]: !isDot,
|
|
|
|
[`${prefixCls}-multiple-words`]:
|
|
|
|
!isDot && count && count.toString && count.toString().length > 1,
|
|
|
|
[`${prefixCls}-status-${status}`]: !!status,
|
|
|
|
}
|
|
|
|
|
|
|
|
return hidden ? null : (
|
|
|
|
<ScrollNumber
|
|
|
|
prefixCls={scrollNumberPrefixCls}
|
|
|
|
data-show={!hidden}
|
|
|
|
v-show={!hidden}
|
|
|
|
className={scrollNumberCls}
|
|
|
|
count={displayCount}
|
|
|
|
displayComponent={this.renderDispayComponent()} // <Badge status="success" count={<Icon type="xxx" />}></Badge>
|
|
|
|
title={this.getScollNumberTitle()}
|
|
|
|
style={this.getStyleWithOffset()}
|
|
|
|
key='scrollNumber'
|
|
|
|
/>
|
|
|
|
)
|
|
|
|
},
|
|
|
|
},
|
2018-03-09 09:50:33 +00:00
|
|
|
|
|
|
|
render () {
|
|
|
|
const {
|
|
|
|
prefixCls,
|
|
|
|
status,
|
|
|
|
text,
|
|
|
|
$slots,
|
|
|
|
} = this
|
|
|
|
const children = filterEmpty($slots.default)
|
2019-01-03 12:46:53 +00:00
|
|
|
let count = getComponentFromProp(this, 'count')
|
|
|
|
if (Array.isArray(count)) {
|
|
|
|
count = count[0]
|
|
|
|
}
|
|
|
|
this.badgeCount = count
|
|
|
|
const scrollNumber = this.renderBadgeNumber()
|
|
|
|
const statusText = this.renderStatusText()
|
2018-03-09 09:50:33 +00:00
|
|
|
const statusCls = classNames({
|
|
|
|
[`${prefixCls}-status-dot`]: !!status,
|
|
|
|
[`${prefixCls}-status-${status}`]: !!status,
|
|
|
|
})
|
|
|
|
|
2019-01-03 12:46:53 +00:00
|
|
|
// <Badge status="success" />
|
2018-03-09 09:50:33 +00:00
|
|
|
if (!children.length && status) {
|
|
|
|
return (
|
2019-01-03 12:46:53 +00:00
|
|
|
<span
|
|
|
|
{...{ on: this.$listeners }}
|
|
|
|
class={this.getBadgeClassName()}
|
|
|
|
style={this.getStyleWithOffset()}
|
|
|
|
>
|
2018-03-09 09:50:33 +00:00
|
|
|
<span class={statusCls} />
|
|
|
|
<span class={`${prefixCls}-status-text`}>{text}</span>
|
|
|
|
</span>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
const transitionProps = getTransitionProps(children.length ? `${prefixCls}-zoom` : '')
|
|
|
|
|
2019-01-03 12:46:53 +00:00
|
|
|
return (<span {...{ on: this.$listeners }} class={this.getBadgeClassName()}>
|
2018-03-09 09:50:33 +00:00
|
|
|
{children}
|
|
|
|
<transition {...transitionProps}>
|
|
|
|
{scrollNumber}
|
|
|
|
</transition>
|
|
|
|
{statusText}
|
|
|
|
</span>)
|
2017-11-16 10:29:02 +00:00
|
|
|
},
|
|
|
|
}
|
2018-03-09 09:50:33 +00:00
|
|
|
|