archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

fix(avatar): avoid passing disableAnimation prop to a DOM element (#3111)

Browse Source 
* fix(avatar): avoid passing `disableAnimation` prop to a DOM element

* refactor(avatar): use filterDOMProps approach

* chore(avatar): remove to type import

* chore(avatar): change to shouldFilterDOMProps
This commit is contained in:
աӄա 2024-05-31 10:14:41 +08:00 committed by GitHub
parent 685995a125
commit cdbc6514f8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/hungry-garlics-kiss.md Normal file
View File

@ -0,0 +1,5 @@
---
"@nextui-org/avatar": patch
---
avoid passing `disableAnimation` prop to a DOM element (#3109)

19
packages/components/avatar/src/use-avatar.ts
View File

@ -1,11 +1,11 @@
import type {AvatarSlots, AvatarVariantProps, SlotsToClasses} from "@nextui-org/theme"; import type {AvatarSlots, AvatarVariantProps, SlotsToClasses} from "@nextui-org/theme";
import type {DOMElement, DOMAttributes, HTMLNextUIProps, PropGetter} from "@nextui-org/system";
import {avatar} from "@nextui-org/theme"; import {avatar} from "@nextui-org/theme";
import {HTMLNextUIProps, PropGetter, useProviderContext} from "@nextui-org/system"; import {useProviderContext} from "@nextui-org/system";
import {mergeProps} from "@react-aria/utils"; 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 {clsx, safeText, dataAttr} from "@nextui-org/shared-utils";
import {ReactRef} from "@nextui-org/react-utils";
import {useFocusRing} from "@react-aria/focus"; import {useFocusRing} from "@react-aria/focus";
import {useMemo, useCallback} from "react"; import {useMemo, useCallback} from "react";
import {useImage} from "@nextui-org/use-image"; import {useImage} from "@nextui-org/use-image";
@ -141,6 +141,8 @@ export function useAvatar(originalProps: UseAvatarProps = {}) {
const isImgLoaded = imageStatus === "loaded"; const isImgLoaded = imageStatus === "loaded";
const shouldFilterDOMProps = typeof ImgComponent === "string";
/** /**
* Fallback avatar applies under 2 conditions: * Fallback avatar applies under 2 conditions:
* - If `src` was passed and the image has not loaded or failed to load * - If `src` was passed and the image has not loaded or failed to load
@ -199,12 +201,17 @@ export function useAvatar(originalProps: UseAvatarProps = {}) {
(props = {}) => ({ (props = {}) => ({
ref: imgRef, ref: imgRef,
src: src, src: src,
disableAnimation,
"data-loaded": dataAttr(isImgLoaded), "data-loaded": dataAttr(isImgLoaded),
className: slots.img({class: classNames?.img}), className: slots.img({class: classNames?.img}),
...mergeProps(imgProps, props), ...mergeProps(
imgProps,
props,
filterDOMProps({disableAnimation} as DOMAttributes<DOMElement>, {
enabled: shouldFilterDOMProps,
}),
),
}), }),
[slots, isImgLoaded, imgProps, disableAnimation, src, imgRef], [slots, isImgLoaded, imgProps, disableAnimation, src, imgRef, shouldFilterDOMProps],
); );
return { return {