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: lazy motion forward ref issue (#2611)

Browse Source 
* fix(modal): lazy motion forward ref issue

* fix(popover): lazy motion forward ref issue

* feat(changeset): fixed lazy motion forwardRef issue
This commit is contained in:
աӄա 2024-03-31 02:03:54 +08:00 committed by GitHub
parent cf0d4e471e
commit 8761168d34
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 74 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.changeset/spicy-coats-exist.md Normal file
View File

@ -0,0 +1,6 @@
---
"@nextui-org/modal": patch
"@nextui-org/popover": patch
---
Fixed lazy motion forwardRef issue

53
packages/components/modal/src/modal-content.tsx
View File

@ -1,7 +1,7 @@
import type {AriaDialogProps} from "@react-aria/dialog";
import type {HTMLMotionProps} from "framer-motion";
import {cloneElement, isValidElement, ReactNode, useMemo} from "react";
import {cloneElement, isValidElement, ReactNode, useMemo, useCallback, ReactElement} from "react";
import {forwardRef} from "@nextui-org/system";
import {DismissButton} from "@react-aria/overlays";
import {TRANSITION_VARIANTS} from "@nextui-org/framer-transitions";
@ -90,27 +90,42 @@ const ModalContent = forwardRef<"div", ModalContentProps, KeysToOmit>((props, _)
);
}, [backdrop, disableAnimation, getBackdropProps]);
const RemoveScrollWrapper = useCallback(
({children}: {children: ReactElement}) => {
return (
<RemoveScroll forwardProps enabled={shouldBlockScroll && isOpen} removeScrollBar={false}>
{children}
</RemoveScroll>
);
},
[shouldBlockScroll, isOpen],
);
const contents = disableAnimation ? (
<RemoveScrollWrapper>
<div className={slots.wrapper({class: classNames?.wrapper})}>{content}</div>
</RemoveScrollWrapper>
) : (
<LazyMotion features={domAnimation}>
<RemoveScrollWrapper>
<m.div
animate="enter"
className={slots.wrapper({class: classNames?.wrapper})}
exit="exit"
initial="exit"
variants={scaleInOut}
{...motionProps}
>
{content}
</m.div>
</RemoveScrollWrapper>
</LazyMotion>
);
return (
<div tabIndex={-1}>
{backdropContent}
<RemoveScroll forwardProps enabled={shouldBlockScroll && isOpen} removeScrollBar={false}>
{disableAnimation ? (
<div className={slots.wrapper({class: classNames?.wrapper})}>{content}</div>
) : (
<LazyMotion features={domAnimation}>
<m.div
animate="enter"
className={slots.wrapper({class: classNames?.wrapper})}
exit="exit"
initial="exit"
variants={scaleInOut}
{...motionProps}
>
{content}
</m.div>
</LazyMotion>
)}
</RemoveScroll>
{contents}
</div>
);
});

55
packages/components/popover/src/popover-content.tsx
View File

@ -1,7 +1,7 @@
import type {AriaDialogProps} from "@react-aria/dialog";
import type {HTMLMotionProps} from "framer-motion";
import {DOMAttributes, ReactNode, useMemo, useRef} from "react";
import {DOMAttributes, ReactNode, useMemo, useRef, useCallback, ReactElement} from "react";
import {forwardRef} from "@nextui-org/system";
import {DismissButton} from "@react-aria/overlays";
import {TRANSITION_VARIANTS} from "@nextui-org/framer-transitions";
@ -81,29 +81,42 @@ const PopoverContent = forwardRef<"div", PopoverContentProps>((props, _) => {
);
}, [backdrop, disableAnimation, getBackdropProps]);
const RemoveScrollWrapper = useCallback(
({children}: {children: ReactElement}) => {
return (
<RemoveScroll forwardProps enabled={shouldBlockScroll && isOpen} removeScrollBar={false}>
{children}
</RemoveScroll>
);
},
[shouldBlockScroll, isOpen],
);
const contents = disableAnimation ? (
<RemoveScrollWrapper>{content}</RemoveScrollWrapper>
) : (
<LazyMotion features={domAnimation}>
<RemoveScrollWrapper>
<m.div
animate="enter"
exit="exit"
initial="initial"
style={{
...getTransformOrigins(placement === "center" ? "top" : placement),
}}
variants={TRANSITION_VARIANTS.scaleSpringOpacity}
{...motionProps}
>
{content}
</m.div>
</RemoveScrollWrapper>
</LazyMotion>
);
return (
<div {...getPopoverProps()}>
{backdropContent}
<RemoveScroll forwardProps enabled={shouldBlockScroll && isOpen} removeScrollBar={false}>
{disableAnimation ? (
content
) : (
<LazyMotion features={domAnimation}>
<m.div
animate="enter"
exit="exit"
initial="initial"
style={{
...getTransformOrigins(placement === "center" ? "top" : placement),
}}
variants={TRANSITION_VARIANTS.scaleSpringOpacity}
{...motionProps}
>
{content}
</m.div>
</LazyMotion>
)}
</RemoveScroll>
{contents}
</div>
);
});