update demo (#29089)

components/badge/ScrollNumber.tsx

@@ -38,6 +38,7 @@ function renderNumberList(position: number, className: string) {
 export interface ScrollNumberProps {
   prefixCls?: string;
   className?: string;
+  motionClassName?: string;
   count?: string | number | null;
   children?: React.ReactElement<HTMLElement>;
   component?: string;
@@ -56,6 +57,7 @@ const ScrollNumber: React.FC<ScrollNumberProps> = ({
   prefixCls: customizePrefixCls,
   count: customizeCount,
   className,
+  motionClassName,
   style,
   title,
   show,
@@ -124,7 +126,7 @@ const ScrollNumber: React.FC<ScrollNumberProps> = ({
     ...restProps,
     'data-show': show,
     style,
-    className: classNames(prefixCls, className),
+    className: classNames(prefixCls, className, motionClassName),
     title: title as string,
   };
 
@@ -173,7 +175,7 @@ const ScrollNumber: React.FC<ScrollNumberProps> = ({
   }
   if (children) {
     return cloneElement(children, oriProps => ({
-      className: classNames(`${prefixCls}-custom-component`, oriProps?.className),
+      className: classNames(`${prefixCls}-custom-component`, oriProps?.className, motionClassName),
     }));
   }
   return React.createElement(component as any, newProps, numberNode);

components/badge/demo/no-wrapper.md

@@ -17,6 +17,7 @@ Used in standalone when children is empty.
 
 ```jsx
 import { Badge, Space, Switch } from 'antd';
+import { ClockCircleOutlined } from '@ant-design/icons';
 
 const Demo = () => {
   const [show, setShow] = React.useState(true);
@@ -30,6 +31,7 @@ const Demo = () => {
         }}
       />
       <Badge count={show ? 25 : 0} />
+      <Badge count={show ? <ClockCircleOutlined style={{ color: '#f5222d' }} /> : 0} />
       <Badge count={show ? 4 : 0} className="site-badge-count-4" />
       <Badge
         className="site-badge-count-109"
@@ -45,8 +47,8 @@ ReactDOM.render(<Demo />, mountNode);
 
 ```css
 .site-badge-count-4 .ant-badge-count {
-  background-color: #fff;
   color: #999;
+  background-color: #fff;
   box-shadow: 0 0 0 1px #d9d9d9 inset;
 }
 ```

components/badge/index.tsx

@@ -76,6 +76,13 @@ const Badge: CompoundedComponent = ({
     return (isEmpty || (isZero && !showZero)) && !showAsDot;
   }, [mergedCount, isZero, showZero, showAsDot]);
 
+  // Count should be cache in case hidden change it
+  const countRef = useRef(count);
+  if (!isHidden) {
+    countRef.current = count;
+  }
+  const livingCount = countRef.current;
+
   // We need cache count since remove motion should not change count display
   const displayCountRef = useRef(mergedCount);
   if (!isHidden) {
@@ -111,7 +118,8 @@ const Badge: CompoundedComponent = ({
   // =============================== Render ===============================
   // >>> Title
   const titleNode =
-    title ?? (typeof count === 'string' || typeof count === 'number' ? count : undefined);
+    title ??
+    (typeof livingCount === 'string' || typeof livingCount === 'number' ? livingCount : undefined);
 
   // >>> Status Text
   const statusTextNode =
@@ -119,9 +127,9 @@ const Badge: CompoundedComponent = ({
 
   // >>> Display Component
   const displayNode =
-    !count || typeof count !== 'object'
+    !livingCount || typeof livingCount !== 'object'
       ? undefined
-      : cloneElement(count, oriProps => ({
+      : cloneElement(livingCount, oriProps => ({
           style: {
             ...mergedStyle,
             ...oriProps.style,
@@ -192,11 +200,14 @@ const Badge: CompoundedComponent = ({
             scrollNumberStyle.background = color;
           }
 
+          console.log('===>', isDot, scrollNumberCls);
+
           return (
             <ScrollNumber
               prefixCls={scrollNumberPrefixCls}
               show={!isHidden}
-              className={classNames(motionClassName, scrollNumberCls)}
+              motionClassName={motionClassName}
+              className={scrollNumberCls}
               count={displayCount}
               title={titleNode}
               style={scrollNumberStyle}

components/badge/style/index.less

@@ -148,6 +148,11 @@
       vertical-align: middle;
     }
 
+    .@{number-prefix-cls}-custom-component {
+      transform: none;
+    }
+
+    .@{number-prefix-cls}-custom-component,
     .@{ant-prefix}-scroll-number {
       position: relative;
       top: auto;