p-sw/pswui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: unmount dialog from dom on closed

Browse Source
This commit is contained in:
p-sw 2024-08-07 18:58:53 +09:00
parent 8728df1f60
commit 4b6724ed90
2 changed files with 82 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
packages/react/components/Dialog/Component.tsx
View File

@ -1,12 +1,20 @@
import { Slot, type VariantProps, useDocument, vcn } from "@pswui-lib"; import {
import React, { type ReactNode, useId, useState } from "react"; Slot,
type VariantProps,
useAnimatedMount,
useDocument,
vcn,
} from "@pswui-lib";
import React, { type ReactNode, useId, useRef, useState } from "react";
import ReactDOM from "react-dom"; import ReactDOM from "react-dom";
import { import {
DialogContext, DialogContext,
type IDialogContext, type IDialogContext,
InnerDialogContext,
initialDialogContext, initialDialogContext,
useDialogContext, useDialogContext,
useInnerDialogContext,
} from "./Context"; } from "./Context";
/** /**
@ -81,40 +89,56 @@ interface DialogOverlay
const DialogOverlay = React.forwardRef<HTMLDivElement, DialogOverlay>( const DialogOverlay = React.forwardRef<HTMLDivElement, DialogOverlay>(
(props, ref) => { (props, ref) => {
const [{ opened, ids }, setContext] = useDialogContext(); const [{ opened, ids }, setContext] = useDialogContext();
const [variantProps, otherPropsCompressed] = resolveDialogOverlayVariant({ const [variantProps, otherPropsCompressed] =
...props, resolveDialogOverlayVariant(props);
opened,
});
const { children, closeOnClick, onClick, ...otherPropsExtracted } = const { children, closeOnClick, onClick, ...otherPropsExtracted } =
otherPropsCompressed; otherPropsCompressed;
const internalRef = useRef<HTMLDivElement | null>(null);
const { isMounted, isRendered } = useAnimatedMount(opened, internalRef);
const document = useDocument(); const document = useDocument();
if (!document) return null; if (!document) return null;
return ReactDOM.createPortal( return isMounted
<div ? ReactDOM.createPortal(
{...otherPropsExtracted} <div
id={ids.dialog} {...otherPropsExtracted}
ref={ref} id={ids.dialog}
className={dialogOverlayVariant(variantProps)} ref={(el) => {
onClick={(e) => { internalRef.current = el;
if (closeOnClick) { if (typeof ref === "function") {
setContext((p) => ({ ...p, opened: false })); ref(el);
} } else if (ref) {
onClick?.(e); ref.current = el;
}} }
> }}
<div className={dialogOverlayVariant({
className={ ...variantProps,
"w-screen max-w-full min-h-screen flex flex-col justify-center items-center" opened: isRendered,
} })}
> onClick={(e) => {
{/* Layer for overflow positioning */} if (closeOnClick) {
{children} setContext((p) => ({ ...p, opened: false }));
</div> }
</div>, onClick?.(e);
document.body, }}
); >
{/* Layer for overflow positioning */}
<div
className={
"w-screen max-w-full min-h-screen flex flex-col justify-center items-center"
}
>
<InnerDialogContext.Provider value={{ isMounted, isRendered }}>
{children}
</InnerDialogContext.Provider>
</div>
</div>,
document.body,
)
: null;
}, },
); );
DialogOverlay.displayName = "DialogOverlay"; DialogOverlay.displayName = "DialogOverlay";
@ -144,11 +168,10 @@ interface DialogContentProps
const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>( const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>(
(props, ref) => { (props, ref) => {
const [{ opened, ids }] = useDialogContext(); const [{ ids }] = useDialogContext();
const [variantProps, otherPropsCompressed] = resolveDialogContentVariant({ const [variantProps, otherPropsCompressed] =
...props, resolveDialogContentVariant(props);
opened, const { isRendered } = useInnerDialogContext();
});
const { children, onClick, ...otherPropsExtracted } = otherPropsCompressed; const { children, onClick, ...otherPropsExtracted } = otherPropsCompressed;
return ( return (
<div <div
@ -157,7 +180,10 @@ const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>(
role="dialog" role="dialog"
aria-labelledby={ids.title} aria-labelledby={ids.title}
aria-describedby={ids.description} aria-describedby={ids.description}
className={dialogContentVariant(variantProps)} className={dialogContentVariant({
...variantProps,
opened: isRendered,
})}
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
onClick?.(e); onClick?.(e);

20
packages/react/components/Dialog/Context.ts
View File

@ -38,3 +38,23 @@ export const DialogContext = createContext<
]); ]);
export const useDialogContext = () => useContext(DialogContext); export const useDialogContext = () => useContext(DialogContext);
/**
* ===================
* InnerDialogContext
* ===================
*/
export interface IInnerDialogContext {
isMounted: boolean;
isRendered: boolean;
}
export const initialInnerDialogContext: IInnerDialogContext = {
isMounted: false,
isRendered: false,
};
export const InnerDialogContext = createContext<IInnerDialogContext>(
initialInnerDialogContext,
);
export const useInnerDialogContext = () => useContext(InnerDialogContext);