diff --git a/components/back-top/index.jsx b/components/back-top/index.jsx index 990bc7680..9f9c7302b 100644 --- a/components/back-top/index.jsx +++ b/components/back-top/index.jsx @@ -4,6 +4,7 @@ import addEventListener from '../_util/Dom/addEventListener'; import getScroll from '../_util/getScroll'; import BaseMixin from '../_util/BaseMixin'; import getTransitionProps from '../_util/getTransitionProps'; +import { ConfigConsumerProps } from '../config-provider'; const easeInOutCubic = (t, b, c, d) => { const cc = c - b; @@ -24,6 +25,7 @@ const BackTopProps = { // onClick?: React.MouseEventHandler; target: PropTypes.func, prefixCls: PropTypes.string, + // visible: PropTypes.bool, // Only for test. Don't use it. }; const BackTop = { @@ -33,13 +35,15 @@ const BackTop = { ...BackTopProps, visibilityHeight: PropTypes.number.def(400), }, + inject: { + configProvider: { default: () => ({}) }, + }, data() { this.scrollEvent = null; return { visible: false, }; }, - mounted() { this.$nextTick(() => { const getTarget = this.target || getDefaultTarget; @@ -101,7 +105,10 @@ const BackTop = { }, render() { - const { prefixCls = 'ant-back-top', $slots, $listeners } = this; + const { prefixCls: customizePrefixCls, $slots, $listeners } = this; + + const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls; + const prefixCls = getPrefixCls('back-top', customizePrefixCls); const defaultElement = (
diff --git a/components/badge/Badge.jsx b/components/badge/Badge.jsx index 139f3432c..068b9065d 100644 --- a/components/badge/Badge.jsx +++ b/components/badge/Badge.jsx @@ -5,6 +5,7 @@ import { initDefaultProps, filterEmpty, getComponentFromProp } from '../_util/pr 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 */ @@ -26,15 +27,16 @@ export const BadgeProps = { export default { name: 'ABadge', props: initDefaultProps(BadgeProps, { - prefixCls: 'ant-badge', - scrollNumberPrefixCls: 'ant-scroll-number', showZero: false, dot: false, overflowCount: 99, }), + inject: { + configProvider: { default: () => ({}) }, + }, methods: { - getBadgeClassName() { - const { prefixCls, status } = this.$props; + getBadgeClassName(prefixCls) { + const { status } = this.$props; const children = filterEmpty(this.$slots.default); return classNames(prefixCls, { [`${prefixCls}-status`]: !!status, @@ -78,7 +80,7 @@ export default { return this.getNumberedDispayCount(); }, - getScollNumberTitle() { + getScrollNumberTitle() { const { title } = this.$props; const count = this.badgeCount; if (title) { @@ -98,8 +100,8 @@ export default { : numberStyle; }, - renderStatusText() { - const { prefixCls, text } = this.$props; + renderStatusText(prefixCls) { + const { text } = this.$props; const hidden = this.isHidden(); return hidden || !text ? null : {text}; }, @@ -115,8 +117,8 @@ export default { }); }, - renderBadgeNumber() { - const { prefixCls, scrollNumberPrefixCls, status } = this.$props; + renderBadgeNumber(prefixCls, scrollNumberPrefixCls) { + const { status } = this.$props; const count = this.badgeCount; const displayCount = this.getDispayCount(); const isDot = this.isDot(); @@ -138,7 +140,7 @@ export default { className={scrollNumberCls} count={displayCount} displayComponent={this.renderDispayComponent()} // }> - title={this.getScollNumberTitle()} + title={this.getScrollNumberTitle()} style={this.getStyleWithOffset()} key="scrollNumber" /> @@ -147,15 +149,26 @@ export default { }, render() { - const { prefixCls, status, text, $slots } = this; + 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(); - const statusText = this.renderStatusText(); + const scrollNumber = this.renderBadgeNumber(prefixCls, scrollNumberPrefixCls); + const statusText = this.renderStatusText(prefixCls); const statusCls = classNames({ [`${prefixCls}-status-dot`]: !!status, [`${prefixCls}-status-${status}`]: !!status, @@ -166,7 +179,7 @@ export default { return ( @@ -178,7 +191,7 @@ export default { const transitionProps = getTransitionProps(children.length ? `${prefixCls}-zoom` : ''); return ( - + {children} {scrollNumber} {statusText} diff --git a/components/badge/ScrollNumber.jsx b/components/badge/ScrollNumber.jsx index 3c8c390fe..4bab678e8 100644 --- a/components/badge/ScrollNumber.jsx +++ b/components/badge/ScrollNumber.jsx @@ -4,6 +4,7 @@ import BaseMixin from '../_util/BaseMixin'; import { getStyle } from '../_util/props-util'; import omit from 'omit.js'; import { cloneElement } from '../_util/vnode'; +import { ConfigConsumerProps } from '../config-provider'; function getNumberArray(num) { return num @@ -16,7 +17,7 @@ function getNumberArray(num) { } const ScrollNumberProps = { - prefixCls: PropTypes.string.def('ant-scroll-number'), + prefixCls: PropTypes.string, count: PropTypes.any, component: PropTypes.string, title: PropTypes.oneOfType([PropTypes.number, PropTypes.string, null]), @@ -27,6 +28,9 @@ const ScrollNumberProps = { export default { mixins: [BaseMixin], props: ScrollNumberProps, + inject: { + configProvider: { default: () => ({}) }, + }, data() { return { animateStarted: true, @@ -93,7 +97,7 @@ export default { return childrenToReturn; }, - renderCurrentNumber(num, i) { + renderCurrentNumber(prefixCls, num, i) { const position = this.getPositionByNum(num, i); const removeTransition = this.animateStarted || getNumberArray(this.lastCount)[i] === undefined; @@ -104,25 +108,33 @@ export default { transform: `translateY(${-position * 100}%)`, }; return ( - + {this.renderNumberList(position)} ); }, - renderNumberElement() { + renderNumberElement(prefixCls) { const { sCount } = this; - if (!sCount || isNaN(sCount)) { - return sCount; - } - return getNumberArray(sCount) - .map((num, i) => this.renderCurrentNumber(num, i)) + if (sCount && Number(sCount) % 1 === 0) { + return getNumberArray(sCount) + .map((num, i) => this.renderCurrentNumber(prefixCls, num, i)) .reverse(); + } + return sCount; }, }, render() { - const { prefixCls, title, component: Tag = 'sup', displayComponent, className } = this; + const { + prefixCls: customizePrefixCls, + title, + component: Tag = 'sup', + displayComponent, + className, + } = this; + const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls; + const prefixCls = getPrefixCls('scroll-number', customizePrefixCls); if (displayComponent) { return cloneElement(displayComponent, { class: `${prefixCls}-custom-component`, @@ -148,6 +160,6 @@ export default { newProps.style.boxShadow = `0 0 0 1px ${style.borderColor} inset`; } - return {this.renderNumberElement()}; + return {this.renderNumberElement(prefixCls)}; }, }; diff --git a/components/badge/__tests__/__snapshots__/index.test.js.snap b/components/badge/__tests__/__snapshots__/index.test.js.snap index 6b1a98696..63783d156 100644 --- a/components/badge/__tests__/__snapshots__/index.test.js.snap +++ b/components/badge/__tests__/__snapshots__/index.test.js.snap @@ -1,5 +1,9 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Badge badge should support float number 1`] = `"3.5"`; + +exports[`Badge badge should support float number 2`] = `3.5`; + exports[`Badge should be compatible with borderColor style 1`] = `

0

1

2

3

4

5

6

7

8

9

0

1

2

3

4

5

6

7

8

9

0

1

2

3

4

5

6

7

8

9

`; exports[`Badge should render when count is changed 1`] = `

0

1

2

3

4

5

6

7

8

9

0

1

2

3

4

5

6

7

8

9

0

1

2

3

4

5

6

7

8

9

0

1

2

3

4

5

6

7

8

9

0

1

2

3

4

5

6

7

8

9

0

1

2

3

4

5

6

7

8

9

`; diff --git a/components/badge/__tests__/index.test.js b/components/badge/__tests__/index.test.js index c93b418eb..8768a4e0f 100644 --- a/components/badge/__tests__/index.test.js +++ b/components/badge/__tests__/index.test.js @@ -1,4 +1,5 @@ import { mount } from '@vue/test-utils'; +import { render } from '@vue/server-test-utils'; import Badge from '../index'; import { asyncExpect } from '@/tests/utils'; @@ -11,6 +12,20 @@ describe('Badge', () => { }); expect(badge.findAll('.ant-card-multiple-words').length).toBe(0); }); + it('badge should support float number', () => { + let wrapper = render({ + render() { + return ; + }, + }); + expect(wrapper.text()).toMatchSnapshot(); + wrapper = mount({ + render() { + return ; + }, + }); + expect(wrapper.html()).toMatchSnapshot(); + }); it('badge dot not showing count == 0', () => { const badge = mount({ render() {