feat: update badge

pull/2539/head
tanjinzhou 2020-07-07 15:43:02 +08:00
parent 469702da3e
commit 11d700ca9d
3 changed files with 29 additions and 67 deletions

View File

@ -2,17 +2,12 @@ import PropTypes from '../_util/vue-types';
import ScrollNumber from './ScrollNumber'; import ScrollNumber from './ScrollNumber';
import { PresetColorTypes } from '../_util/colors'; import { PresetColorTypes } from '../_util/colors';
import classNames from 'classnames'; import classNames from 'classnames';
import { import { initDefaultProps, getComponent, getSlot } from '../_util/props-util';
initDefaultProps,
filterEmpty,
getComponentFromProp,
getListeners,
} from '../_util/props-util';
import { cloneElement } from '../_util/vnode'; import { cloneElement } from '../_util/vnode';
import getTransitionProps from '../_util/getTransitionProps'; import getTransitionProps from '../_util/getTransitionProps';
import isNumeric from '../_util/isNumeric'; import isNumeric from '../_util/isNumeric';
import { ConfigConsumerProps } from '../config-provider'; import { ConfigConsumerProps } from '../config-provider';
import { inject } from 'vue'; import { inject, Transition } from 'vue';
const BadgeProps = { const BadgeProps = {
/** Number to show in badge */ /** Number to show in badge */
@ -82,8 +77,7 @@ export default {
} }
: { ...numberStyle }; : { ...numberStyle };
}, },
getBadgeClassName(prefixCls) { getBadgeClassName(prefixCls, children) {
const children = filterEmpty(this.$slots.default && this.$slots.default());
const hasStatus = this.hasStatus(); const hasStatus = this.hasStatus();
return classNames(prefixCls, { return classNames(prefixCls, {
[`${prefixCls}-status`]: hasStatus, [`${prefixCls}-status`]: hasStatus,
@ -127,9 +121,13 @@ export default {
if (!customNode || typeof customNode !== 'object') { if (!customNode || typeof customNode !== 'object') {
return undefined; return undefined;
} }
return cloneElement(customNode, { return cloneElement(
style: this.getStyleWithOffset(), customNode,
}); {
style: this.getStyleWithOffset(),
},
false,
);
}, },
renderBadgeNumber(prefixCls, scrollNumberPrefixCls) { renderBadgeNumber(prefixCls, scrollNumberPrefixCls) {
@ -158,8 +156,8 @@ export default {
<ScrollNumber <ScrollNumber
prefixCls={scrollNumberPrefixCls} prefixCls={scrollNumberPrefixCls}
data-show={!hidden} data-show={!hidden}
v-show={!hidden} vShow={!hidden}
className={scrollNumberCls} class={scrollNumberCls}
count={displayCount} count={displayCount}
displayComponent={this.renderDispayComponent()} displayComponent={this.renderDispayComponent()}
title={this.getScrollNumberTitle()} title={this.getScrollNumberTitle()}
@ -177,15 +175,14 @@ export default {
status, status,
text, text,
color, color,
$slots,
} = this; } = this;
const getPrefixCls = this.configProvider.getPrefixCls; const getPrefixCls = this.configProvider.getPrefixCls;
const prefixCls = getPrefixCls('badge', customizePrefixCls); const prefixCls = getPrefixCls('badge', customizePrefixCls);
const scrollNumberPrefixCls = getPrefixCls('scroll-number', customizeScrollNumberPrefixCls); const scrollNumberPrefixCls = getPrefixCls('scroll-number', customizeScrollNumberPrefixCls);
const children = filterEmpty($slots.default && $slots.default()); const children = getSlot(this);
let count = getComponentFromProp(this, 'count'); let count = getComponent(this, 'count');
if (Array.isArray(count)) { if (Array.isArray(count)) {
count = count[0]; count = count[0];
} }
@ -206,11 +203,7 @@ export default {
const styleWithOffset = this.getStyleWithOffset(); const styleWithOffset = this.getStyleWithOffset();
const statusTextColor = styleWithOffset && styleWithOffset.color; const statusTextColor = styleWithOffset && styleWithOffset.color;
return ( return (
<span <span class={this.getBadgeClassName(prefixCls, children)} style={styleWithOffset}>
{...{ on: getListeners(this) }}
class={this.getBadgeClassName(prefixCls)}
style={styleWithOffset}
>
<span class={statusCls} style={statusStyle} /> <span class={statusCls} style={statusStyle} />
<span style={{ color: statusTextColor }} class={`${prefixCls}-status-text`}> <span style={{ color: statusTextColor }} class={`${prefixCls}-status-text`}>
{text} {text}
@ -222,9 +215,9 @@ export default {
const transitionProps = getTransitionProps(children.length ? `${prefixCls}-zoom` : ''); const transitionProps = getTransitionProps(children.length ? `${prefixCls}-zoom` : '');
return ( return (
<span {...{ on: getListeners(this) }} class={this.getBadgeClassName(prefixCls)}> <span class={this.getBadgeClassName(prefixCls, children)}>
{children} {children}
<transition {...transitionProps}>{scrollNumber}</transition> <Transition {...transitionProps}>{scrollNumber}</Transition>
{statusText} {statusText}
</span> </span>
); );

View File

@ -1,11 +1,11 @@
import classNames from 'classnames'; import classNames from 'classnames';
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
import BaseMixin from '../_util/BaseMixin'; import BaseMixin from '../_util/BaseMixin';
import { getStyle } from '../_util/props-util';
import omit from 'omit.js'; import omit from 'omit.js';
import { cloneElement } from '../_util/vnode'; import { cloneElement } from '../_util/vnode';
import { ConfigConsumerProps } from '../config-provider'; import { ConfigConsumerProps } from '../config-provider';
import { inject } from 'vue'; import { inject } from 'vue';
import syncWatch from '../_util/syncWatch';
function getNumberArray(num) { function getNumberArray(num) {
return num return num
@ -26,11 +26,12 @@ const ScrollNumberProps = {
component: PropTypes.string, component: PropTypes.string,
title: PropTypes.oneOfType([PropTypes.number, PropTypes.string, null]), title: PropTypes.oneOfType([PropTypes.number, PropTypes.string, null]),
displayComponent: PropTypes.any, displayComponent: PropTypes.any,
className: PropTypes.object,
}; };
export default { export default {
name: 'ScrollNumber',
mixins: [BaseMixin], mixins: [BaseMixin],
inheritAttrs: false,
props: ScrollNumberProps, props: ScrollNumberProps,
setup() { setup() {
return { return {
@ -38,18 +39,19 @@ export default {
}; };
}, },
data() { data() {
this.lastCount = undefined;
return { return {
animateStarted: true, animateStarted: true,
sCount: this.count, sCount: this.count,
}; };
}, },
watch: { watch: {
count() { count: syncWatch(function() {
this.lastCount = this.sCount; this.lastCount = this.sCount;
this.setState({ this.setState({
animateStarted: true, animateStarted: true,
}); });
}, }),
}, },
updated() { updated() {
const { animateStarted, count } = this; const { animateStarted, count } = this;
@ -157,31 +159,22 @@ export default {
}, },
render() { render() {
const { const { prefixCls: customizePrefixCls, title, component: Tag = 'sup', displayComponent } = this;
prefixCls: customizePrefixCls,
title,
component: Tag = 'sup',
displayComponent,
className,
} = this;
const getPrefixCls = this.configProvider.getPrefixCls; const getPrefixCls = this.configProvider.getPrefixCls;
const prefixCls = getPrefixCls('scroll-number', customizePrefixCls); const prefixCls = getPrefixCls('scroll-number', customizePrefixCls);
const { class: className, style = {} } = this.$attrs;
if (displayComponent) { if (displayComponent) {
return cloneElement(displayComponent, { return cloneElement(displayComponent, {
class: `${prefixCls}-custom-component`, class: `${prefixCls}-custom-component`,
}); });
} }
const style = getStyle(this, true);
// fix https://fb.me/react-unknown-prop // fix https://fb.me/react-unknown-prop
const restProps = omit(this.$props, ['count', 'component', 'prefixCls', 'displayComponent']); const restProps = omit(this.$props, ['count', 'component', 'prefixCls', 'displayComponent']);
const tempStyle = { ...style };
const newProps = { const newProps = {
props: { ...restProps,
...restProps, title,
}, style: tempStyle,
attrs: {
title,
},
style,
class: classNames(prefixCls, className), class: classNames(prefixCls, className),
}; };
// allow specify the border // allow specify the border

View File

@ -1,24 +0,0 @@
## API
```html
<a-badge :count="5">
<a href="#" class="head-example" />
</a-badge>
```
```html
<a-badge :count="5" />
```
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| color | Customize Badge dot color | string | - | 1.5.0 |
| count | Number to show in badge | number\|string \| slot | | |
| dot | Whether to display a red dot instead of `count` | boolean | `false` | |
| offset | set offset of the badge dot, like [x, y] | [number\|string, number\|string] | - | |
| overflowCount | Max count to show | number | 99 | |
| showZero | Whether to show badge when `count` is zero | boolean | `false` | |
| status | Set Badge as a status dot | `success` \| `processing` \| `default` \| `error` \| `warning` | `''` | |
| text | If `status` is set, `text` sets the display text of the status `dot` | string | `''` | |
| numberStyle | sets the display style of the status `dot` | object | '' | |
| title | Text to show when hovering over the badge | string | `count` | |