refactor(avatar): use filterDOMProps approach

heroui-inc · May 29, 2024 · d482b61 · d482b61
1 parent b4e5d85
commit d482b61
Showing 1 changed file with 24 additions and 23 deletions.
diff --git a/packages/components/avatar/src/use-avatar.ts b/packages/components/avatar/src/use-avatar.ts
@@ -1,11 +1,16 @@
 import type {AvatarSlots, AvatarVariantProps, SlotsToClasses} from "@nextui-org/theme";
 
 import {avatar} from "@nextui-org/theme";
-import {HTMLNextUIProps, PropGetter, useProviderContext} from "@nextui-org/system";
+import {
+  DOMAttributes,
+  DOMElement,
+  HTMLNextUIProps,
+  PropGetter,
+  useProviderContext,
+} from "@nextui-org/system";
 import {mergeProps} from "@react-aria/utils";
-import {useDOMRef} from "@nextui-org/react-utils";
+import {ReactRef, useDOMRef, filterDOMProps} from "@nextui-org/react-utils";
 import {clsx, safeText, dataAttr} from "@nextui-org/shared-utils";
-import {ReactRef} from "@nextui-org/react-utils";
 import {useFocusRing} from "@react-aria/focus";
 import {useMemo, useCallback} from "react";
 import {useImage} from "@nextui-org/use-image";
@@ -141,6 +146,8 @@ export function useAvatar(originalProps: UseAvatarProps = {}) {
 
   const isImgLoaded = imageStatus === "loaded";
 
+  const shouldFilterDOMProps = typeof ImgComponent === "string";
+
   /**
    * Fallback avatar applies under 2 conditions:
    * - If `src` was passed and the image has not loaded or failed to load
@@ -196,26 +203,20 @@ export function useAvatar(originalProps: UseAvatarProps = {}) {
   );
 
   const getImageProps = useCallback<PropGetter>(
-    (props = {}) => {
-      let allowDisableAnimation = false;
-
-      if (
-        typeof ImgComponent !== "string" &&
-        (ImgComponent as any)?.render?.displayName === "NextUI.Image"
-      ) {
-        allowDisableAnimation = true;
-      }
-
-      return {
-        ref: imgRef,
-        src: src,
-        ...(allowDisableAnimation && {disableAnimation}),
-        "data-loaded": dataAttr(isImgLoaded),
-        className: slots.img({class: classNames?.img}),
-        ...mergeProps(imgProps, props),
-      };
-    },
-    [slots, isImgLoaded, imgProps, disableAnimation, src, imgRef],
+    (props = {}) => ({
+      ref: imgRef,
+      src: src,
+      "data-loaded": dataAttr(isImgLoaded),
+      className: slots.img({class: classNames?.img}),
+      ...mergeProps(
+        imgProps,
+        props,
+        filterDOMProps({disableAnimation} as DOMAttributes<DOMElement>, {
+          enabled: shouldFilterDOMProps,
+        }),
+      ),
+    }),
+    [slots, isImgLoaded, imgProps, disableAnimation, src, imgRef, filterDOMProps],
   );
 
   return {