import PropTypes from '../_util/vue-types'
import ScrollNumber from './ScrollNumber'
import classNames from 'classnames'
import { initDefaultProps, filterEmpty } from '../_util/props-util'
import getTransitionProps from '../_util/getTransitionProps'
export const BadgeProps = {
/** Number to show in badge */
count: PropTypes.oneOfType([PropTypes.number, PropTypes.string, null]),
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({}),
}
export default {
name: 'ABadge',
props: initDefaultProps(BadgeProps, {
prefixCls: 'ant-badge',
scrollNumberPrefixCls: 'ant-scroll-number',
count: null,
showZero: false,
dot: false,
overflowCount: 99,
}),
render () {
const {
count,
showZero,
prefixCls,
scrollNumberPrefixCls,
overflowCount,
dot,
status,
text,
offset,
$slots,
numberStyle,
} = this
let displayCount = count > overflowCount ? `${overflowCount}+` : count
const isZero = displayCount === '0' || displayCount === 0
const isDot = (dot && !isZero) || status
// dot mode don't need count
if (isDot) {
displayCount = ''
}
const children = filterEmpty($slots.default)
const isEmpty = displayCount === null || displayCount === undefined || displayCount === ''
const hidden = (isEmpty || (isZero && !showZero)) && !isDot
const statusCls = classNames({
[`${prefixCls}-status-dot`]: !!status,
[`${prefixCls}-status-${status}`]: !!status,
})
const scrollNumberCls = classNames({
[`${prefixCls}-dot`]: isDot,
[`${prefixCls}-count`]: !isDot,
[`${prefixCls}-multiple-words`]: !isDot && count && count.toString && count.toString().length > 1,
[`${prefixCls}-status-${status}`]: !!status,
})
const badgeCls = classNames(prefixCls, {
[`${prefixCls}-status`]: !!status,
[`${prefixCls}-not-a-wrapper`]: !children.length,
})
const styleWithOffset = offset ? {
marginTop: offset[0],
marginLeft: offset[1],
...numberStyle,
} : numberStyle
//
if (!children.length && status) {
return (
{text}
)
}
const scrollNumber = hidden ? null : (
)
const statusText = (hidden || !text) ? null : (
{text}
)
const transitionProps = getTransitionProps(children.length ? `${prefixCls}-zoom` : '')
return (
{children}
{scrollNumber}
{statusText}
)
},
}