mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-12-15 09:21:25 +08:00
202 lines
6.1 KiB
Vue
202 lines
6.1 KiB
Vue
import PropTypes from '../_util/vue-types';
|
|
import ScrollNumber from './ScrollNumber';
|
|
import classNames from 'classnames';
|
|
import { initDefaultProps, filterEmpty, getComponentFromProp } from '../_util/props-util';
|
|
import { cloneElement } from '../_util/vnode';
|
|
import getTransitionProps from '../_util/getTransitionProps';
|
|
import isNumeric from '../_util/isNumeric';
|
|
import { ConfigConsumerProps } from '../config-provider';
|
|
|
|
export const BadgeProps = {
|
|
/** Number to show in badge */
|
|
count: PropTypes.any,
|
|
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({}),
|
|
title: PropTypes.string,
|
|
};
|
|
|
|
export default {
|
|
name: 'ABadge',
|
|
props: initDefaultProps(BadgeProps, {
|
|
showZero: false,
|
|
dot: false,
|
|
overflowCount: 99,
|
|
}),
|
|
inject: {
|
|
configProvider: { default: () => ({}) },
|
|
},
|
|
methods: {
|
|
getBadgeClassName(prefixCls) {
|
|
const { 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();
|
|
},
|
|
|
|
getScrollNumberTitle() {
|
|
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(prefixCls) {
|
|
const { 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(prefixCls, scrollNumberPrefixCls) {
|
|
const { 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.getScrollNumberTitle()}
|
|
style={this.getStyleWithOffset()}
|
|
key="scrollNumber"
|
|
/>
|
|
);
|
|
},
|
|
},
|
|
|
|
render() {
|
|
const {
|
|
prefixCls: customizePrefixCls,
|
|
scrollNumberPrefixCls: customizeScrollNumberPrefixCls,
|
|
status,
|
|
text,
|
|
$slots,
|
|
} = this;
|
|
|
|
const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
|
|
const prefixCls = getPrefixCls('badge', customizePrefixCls);
|
|
const scrollNumberPrefixCls = getPrefixCls('scroll-number', customizeScrollNumberPrefixCls);
|
|
|
|
const children = filterEmpty($slots.default);
|
|
let count = getComponentFromProp(this, 'count');
|
|
if (Array.isArray(count)) {
|
|
count = count[0];
|
|
}
|
|
this.badgeCount = count;
|
|
const scrollNumber = this.renderBadgeNumber(prefixCls, scrollNumberPrefixCls);
|
|
const statusText = this.renderStatusText(prefixCls);
|
|
const statusCls = classNames({
|
|
[`${prefixCls}-status-dot`]: !!status,
|
|
[`${prefixCls}-status-${status}`]: !!status,
|
|
});
|
|
|
|
// <Badge status="success" />
|
|
if (!children.length && status) {
|
|
return (
|
|
<span
|
|
{...{ on: this.$listeners }}
|
|
class={this.getBadgeClassName(prefixCls)}
|
|
style={this.getStyleWithOffset()}
|
|
>
|
|
<span class={statusCls} />
|
|
<span class={`${prefixCls}-status-text`}>{text}</span>
|
|
</span>
|
|
);
|
|
}
|
|
|
|
const transitionProps = getTransitionProps(children.length ? `${prefixCls}-zoom` : '');
|
|
|
|
return (
|
|
<span {...{ on: this.$listeners }} class={this.getBadgeClassName(prefixCls)}>
|
|
{children}
|
|
<transition {...transitionProps}>{scrollNumber}</transition>
|
|
{statusText}
|
|
</span>
|
|
);
|
|
},
|
|
};
|