ant-design-vue/components/badge/Badge.jsx

115 lines
3.3 KiB
Vue
Raw Normal View History

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'
import { initDefaultProps, filterEmpty } from '../_util/props-util'
import getTransitionProps from '../_util/getTransitionProps'
export const BadgeProps = {
/** Number to show in badge */
2018-03-10 05:34:26 +00:00
count: PropTypes.oneOfType([PropTypes.number, PropTypes.string, null]),
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({}),
}
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',
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
2018-04-09 09:01:34 +00:00
const isZero = displayCount === '0' || displayCount === 0
const isDot = (dot && !isZero) || status
2018-03-09 09:50:33 +00:00
// dot mode don't need count
if (isDot) {
displayCount = ''
2017-11-16 10:29:02 +00:00
}
2018-03-09 09:50:33 +00:00
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,
2018-04-09 09:01:34 +00:00
[`${prefixCls}-multiple-words`]: !isDot && count && count.toString && count.toString().length > 1,
2018-03-09 09:50:33 +00:00
[`${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
// <Badge status="success" />
if (!children.length && status) {
return (
<span class={badgeCls} style={styleWithOffset}>
<span class={statusCls} />
<span class={`${prefixCls}-status-text`}>{text}</span>
</span>
)
}
const scrollNumber = hidden ? null : (
<ScrollNumber
prefixCls={scrollNumberPrefixCls}
v-show={!hidden}
class={scrollNumberCls}
count={displayCount}
title={count}
style={styleWithOffset}
/>
)
const statusText = (hidden || !text) ? null : (
<span class={`${prefixCls}-status-text`}>{text}</span>
)
const transitionProps = getTransitionProps(children.length ? `${prefixCls}-zoom` : '')
return (<span class={badgeCls}>
{children}
<transition {...transitionProps}>
{scrollNumber}
</transition>
{statusText}
</span>)
2017-11-16 10:29:02 +00:00
},
}
2018-03-09 09:50:33 +00:00