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

197 lines
5.6 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'
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({}),
update to antd3.8.3 (#159) * refactor: align * feat: update align to 2.4.3 * feat: update trigger 2.5.4 * feat: update tooltip 3.7.2 * fix: align * feat: update vc-calendar to 9.6.2 * feat: update vc-checkbox to 2.1.5 * feat: update vc-dialog to 7.1.8 * feat: update vc-from to 2.2.1 * feat: update vc-notification to 3.1.1 * test: update snapshots * feat: update vc-tree to 1.12.6 * feat: update vc-table to 6.2.8 * feat: update vc-upload to 2.5.1 * feat: update vc-input-number to 4.0.12 * feat: update vc-tabs to 9.2.6 * refactor: vc-menu * refactor: update vc-menu to 7.0.5 * style: remove unused * feat: update pagination to 1.16.5 * feat: add vc-progress 2.2.5 tag * feat: add vc-rate 2.4.0 tag * feat: update vc-slider to 8.6.1 * fix: tooltip error * style: delete conosle * feat: update vc-steps to 3.1.1 * add vc-switch tag 1.6.0 * feat: update upload to 2.5.1 * fix: update vc-menu * fix: update store * fix: add ref dir * fix: trigger mock shouldComponentUpdate * fix: update vc-select * revert: trigger lazyrenderbox * fix: update vc-select * fix: update vc-select * fix: update vc-select * fix: update vc-menu * fix: update vc-slick ref * update style to 3.8.2 * test: update snapshots * update vc-select * update util & affix * feat: add drawer * fix: support title add slot mode * test: update affix test * update alert * update anchor * update snapshots * fix: doc and vc-drawer * update select & auto-complete * update back-top & grid * feractor: avatar * test: add drawer test * update badge * update button * update card * update divider * feat: update vc-tabs to 9.3.6 and tabs * add afterEnter callback * update form * fix: update drawer * test: update snapshots * update modal & notification * test: update snapshots * update message * update locale-provider * update dropdown * update layout popconfirm popover * update time-picker * update menu * update date-picker * docs: update input docs * update input * update snapshots * update table * update test snapshots * feat: update progress * update checkbox * feat: update spin * update radio * docs: slider steps timeline * update list * update transfer * update collapse * update cascader * update upload
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