🐛 Fix Badge offset not working when count is ReactNode

close #13694

components/badge/ScrollNumber.tsx

@@ -164,7 +164,10 @@ export default class ScrollNumber extends Component<ScrollNumberProps, ScrollNum
     }
     if (displayComponent) {
       return React.cloneElement(displayComponent, {
-        className: `${prefixCls}-custom-component`,
+        className: classNames(
+          `${prefixCls}-custom-component`,
+          displayComponent.props && displayComponent.props.className,
+        ),
       });
     }
     return createElement(component as any, newProps, this.renderNumberElement());

components/badge/__tests__/__snapshots__/index.test.js.snap

@@ -2185,3 +2185,18 @@ exports[`Badge should render when count is changed 5`] = `
   </span>
 </Badge>
 `;
+
+exports[`Badge should support offset when count is a ReactNode 1`] = `
+<span
+  class="ant-badge"
+>
+  <a
+    class="head-example"
+    href="#"
+  />
+  <span
+    class="ant-scroll-number-custom-component custom"
+    style="right:-10px;margin-top:20px;color:#f5222d"
+  />
+</span>
+`;

components/badge/__tests__/index.test.js

@@ -72,4 +72,14 @@ describe('Badge', () => {
     );
     expect(wrapper).toMatchSnapshot();
   });
+
+  // https://github.com/ant-design/ant-design/issues/13694
+  it('should support offset when count is a ReactNode', () => {
+    const wrapper = render(
+      <Badge count={<span className="custom" style={{ color: '#f5222d' }} />} offset={[10, 20]}>
+        <a href="#" className="head-example" />
+      </Badge>,
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
 });

components/badge/index.tsx

@@ -112,7 +112,16 @@ export default class Badge extends React.Component<BadgeProps, any> {
 
   renderDispayComponent() {
     const { count } = this.props;
-    return count && typeof count === 'object' ? (count as React.ReactElement<any>) : undefined;
+    const customNode = count as React.ReactElement<any>;
+    if (!customNode || typeof customNode !== 'object') {
+      return undefined;
+    }
+    return React.cloneElement(customNode, {
+      style: {
+        ...this.getStyleWithOffset(),
+        ...(customNode.props && customNode.props.style),
+      },
+    });
   }
 
   renderBadgeNumber() {
@@ -130,8 +139,6 @@ export default class Badge extends React.Component<BadgeProps, any> {
       [`${prefixCls}-status-${status}`]: !!status,
     });
 
-    const styleWithOffset = this.getStyleWithOffset();
-
     return hidden ? null : (
       <ScrollNumber
         prefixCls={scrollNumberPrefixCls}
@@ -140,7 +147,7 @@ export default class Badge extends React.Component<BadgeProps, any> {
         count={displayCount}
         displayComponent={this.renderDispayComponent()} // <Badge status="success" count={<Icon type="xxx" />}></Badge>
         title={this.getScollNumberTitle()}
-        style={styleWithOffset}
+        style={this.getStyleWithOffset()}
         key="scrollNumber"
       />
     );
@@ -172,12 +179,10 @@ export default class Badge extends React.Component<BadgeProps, any> {
       [`${prefixCls}-status-${status}`]: !!status,
     });
 
-    const styleWithOffset = this.getStyleWithOffset();
-
     // <Badge status="success" />
     if (!children && status) {
       return (
-        <span {...restProps} className={this.getBadgeClassName()} style={styleWithOffset}>
+        <span {...restProps} className={this.getBadgeClassName()} style={this.getStyleWithOffset()}>
           <span className={statusCls} />
           <span className={`${prefixCls}-status-text`}>{text}</span>
         </span>