fix: Avatar doesn't scale when display is none

ant-design · Sep 2, 2020 · f2ec3a0 · f2ec3a0
1 parent 71f726a
commit f2ec3a0
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 42 deletions.
diff --git a/components/avatar/__tests__/__snapshots__/Avatar.test.js.snap b/components/avatar/__tests__/__snapshots__/Avatar.test.js.snap
@@ -97,18 +97,22 @@ exports[`Avatar Render should show image on success after a failure state 1`] =
     className="ant-avatar ant-avatar-circle"
     style={Object {}}
   >
-    <span
-      className="ant-avatar-string"
-      style={
-        Object {
-          "WebkitTransform": "scale(0.72) translateX(-50%)",
-          "msTransform": "scale(0.72) translateX(-50%)",
-          "transform": "scale(0.72) translateX(-50%)",
-        }
-      }
+    <ResizeObserver
+      onResize={[Function]}
     >
-      Fallback
-    </span>
+      <span
+        className="ant-avatar-string"
+        style={
+          Object {
+            "WebkitTransform": "scale(1) translateX(-50%)",
+            "msTransform": "scale(1) translateX(-50%)",
+            "transform": "scale(1) translateX(-50%)",
+          }
+        }
+      >
+        Fallback
+      </span>
+    </ResizeObserver>
   </span>
 </Avatar>
 `;

diff --git a/components/avatar/avatar.tsx b/components/avatar/avatar.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import classNames from 'classnames';
+import ResizeObserver from 'rc-resize-observer';
 
 import { ConfigContext } from '../config-provider';
 import devWarning from '../_util/devWarning';
@@ -41,9 +42,6 @@ const InternalAvatar: React.ForwardRefRenderFunction<unknown, AvatarProps> = (pr
 
   const avatarNodeMergeRef = composeRef(ref, avatarNodeRef);
 
-  let lastChildrenWidth: number;
-  let lastNodeWidth: number;
-
   const { getPrefixCls } = React.useContext(ConfigContext);
 
   const setScaleParam = () => {
@@ -52,19 +50,12 @@ const InternalAvatar: React.ForwardRefRenderFunction<unknown, AvatarProps> = (pr
     }
     const childrenWidth = avatarChildrenRef.current.offsetWidth; // offsetWidth avoid affecting be transform scale
     const nodeWidth = avatarNodeRef.current.offsetWidth;
-    const { gap = 4 } = props;
     // denominator is 0 is no meaning
-    if (
-      childrenWidth !== 0 &&
-      nodeWidth !== 0 &&
-      (lastChildrenWidth !== childrenWidth || lastNodeWidth !== nodeWidth)
-    ) {
-      lastChildrenWidth = childrenWidth;
-      lastNodeWidth = nodeWidth;
-    }
-
-    if (gap * 2 < nodeWidth) {
-      setScale(nodeWidth - gap * 2 < childrenWidth ? (nodeWidth - gap * 2) / childrenWidth : 1);
+    if (childrenWidth !== 0 && nodeWidth !== 0) {
+      const { gap = 4 } = props;
+      if (gap * 2 < nodeWidth) {
+        setScale(nodeWidth - gap * 2 < childrenWidth ? (nodeWidth - gap * 2) / childrenWidth : 1);
+      }
     }
   };
 
@@ -79,13 +70,7 @@ const InternalAvatar: React.ForwardRefRenderFunction<unknown, AvatarProps> = (pr
 
   React.useEffect(() => {
     setScaleParam();
-  }, [props.children, props.gap, props.size]);
-
-  React.useEffect(() => {
-    if (props.children) {
-      setScaleParam();
-    }
-  }, [isImgExist]);
+  }, [props.gap]);
 
   const handleImgLoadError = () => {
     const { onError } = props;
@@ -161,15 +146,17 @@ const InternalAvatar: React.ForwardRefRenderFunction<unknown, AvatarProps> = (pr
         : {};
 
     childrenToRender = (
-      <span
-        className={`${prefixCls}-string`}
-        ref={(node: HTMLElement) => {
-          avatarChildrenRef.current = node;
-        }}
-        style={{ ...sizeChildrenStyle, ...childrenStyle }}
-      >
-        {children}
-      </span>
+      <ResizeObserver onResize={setScaleParam}>
+        <span
+          className={`${prefixCls}-string`}
+          ref={(node: HTMLElement) => {
+            avatarChildrenRef.current = node;
+          }}
+          style={{ ...sizeChildrenStyle, ...childrenStyle }}
+        >
+          {children}
+        </span>
+      </ResizeObserver>
     );
   } else {
     childrenToRender = (