feat: update back-top && badge

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<any>;
   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 = (
       <div class={`${prefixCls}-content`}>

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() {
+    getBadgeClassName(prefixCls) {
-      const { prefixCls, status } = this.$props;
+      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() {
+    renderStatusText(prefixCls) {
-      const { prefixCls, text } = this.$props;
+      const { text } = this.$props;
       const hidden = this.isHidden();
       return hidden || !text ? null : <span class={`${prefixCls}-status-text`}>{text}</span>;
     },
@@ -115,8 +117,8 @@ export default {
       });
     },
 
-    renderBadgeNumber() {
+    renderBadgeNumber(prefixCls, scrollNumberPrefixCls) {
-      const { prefixCls, scrollNumberPrefixCls, status } = this.$props;
+      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()} // <Badge status="success" count={<Icon type="xxx" />}></Badge>
-          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 scrollNumber = this.renderBadgeNumber(prefixCls, scrollNumberPrefixCls);
-    const statusText = this.renderStatusText();
+    const statusText = this.renderStatusText(prefixCls);
     const statusCls = classNames({
       [`${prefixCls}-status-dot`]: !!status,
       [`${prefixCls}-status-${status}`]: !!status,
@@ -166,7 +179,7 @@ export default {
       return (
         <span
           {...{ on: this.$listeners }}
-          class={this.getBadgeClassName()}
+          class={this.getBadgeClassName(prefixCls)}
           style={this.getStyleWithOffset()}
         >
           <span class={statusCls} />
@@ -178,7 +191,7 @@ export default {
     const transitionProps = getTransitionProps(children.length ? `${prefixCls}-zoom` : '');
 
     return (
-      <span {...{ on: this.$listeners }} class={this.getBadgeClassName()}>
+      <span {...{ on: this.$listeners }} class={this.getBadgeClassName(prefixCls)}>
         {children}
         <transition {...transitionProps}>{scrollNumber}</transition>
         {statusText}

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 (
-        <span class={`${this.prefixCls}-only`} style={style} key={i}>
+        <span class={`${prefixCls}-only`} style={style} key={i}>
           {this.renderNumberList(position)}
         </span>
       );
     },
 
-    renderNumberElement() {
+    renderNumberElement(prefixCls) {
       const { sCount } = this;
-      if (!sCount || isNaN(sCount)) {
+      if (sCount && Number(sCount) % 1 === 0) {
-        return sCount;
+        return getNumberArray(sCount)
-      }
+        .map((num, i) => this.renderCurrentNumber(prefixCls, num, i))
-      return getNumberArray(sCount)
-        .map((num, i) => this.renderCurrentNumber(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 <Tag {...newProps}>{this.renderNumberElement()}</Tag>;
+    return <Tag {...newProps}>{this.renderNumberElement(prefixCls)}</Tag>;
   },
 };

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`] = `<span class="ant-badge ant-badge-not-a-wrapper"><sup title="3.5" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" data-show="true">3.5</sup></span>`;
+
 exports[`Badge should be compatible with borderColor style 1`] = `<span class="ant-badge ant-badge-not-a-wrapper" style="background-color: rgb(255, 255, 255); color: rgb(153, 153, 153); border-color: #d9d9d9;"><sup title="4" class="ant-scroll-number ant-badge-count" data-show="true"><span class="ant-scroll-number-only" style="transition: none; transform: translateY(-1400%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="current">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span></sup></span>`;
 
 exports[`Badge should render when count is changed 1`] = `<span class="ant-badge ant-badge-not-a-wrapper"><sup title="10" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" data-show="true"><span class="ant-scroll-number-only" style="transition: none; transform: translateY(-2100%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="current">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span><span class="ant-scroll-number-only" style="transform: translateY(-2000%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="current">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span></sup></span>`;

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 <Badge count={3.5} />;
+      },
+    });
+    expect(wrapper.text()).toMatchSnapshot();
+    wrapper = mount({
+      render() {
+        return <Badge count={3.5} />;
+      },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
   it('badge dot not showing count == 0', () => {
     const badge = mount({
       render() {