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

fix(Toast/Component/Toaster): apply withServerSideDocument on Toaster

Browse Source
This commit is contained in:
p-sw 2024-07-12 01:47:38 +09:00
parent 508d58fa71
commit 2f9e155cbe
1 changed files with 60 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
packages/react/components/Toast/Component.tsx
View File

@ -1,4 +1,4 @@
import { type VariantProps, vcn } from "@pswui-lib"; import { type VariantProps, vcn, withServerSideDocument } from "@pswui-lib";
import React, { useEffect, useId, useRef } from "react"; import React, { useEffect, useId, useRef } from "react";
import ReactDOM from "react-dom"; import ReactDOM from "react-dom";
@ -145,69 +145,71 @@ interface ToasterProps
muteDuplicationWarning?: boolean; muteDuplicationWarning?: boolean;
} }
const Toaster = React.forwardRef<HTMLDivElement, ToasterProps>((props, ref) => { const Toaster = withServerSideDocument(
const id = useId(); React.forwardRef<HTMLDivElement, ToasterProps>((props, ref) => {
const [variantProps, otherPropsCompressed] = const id = useId();
resolveToasterVariantProps(props); const [variantProps, otherPropsCompressed] =
const { defaultOption, muteDuplicationWarning, ...otherPropsExtracted } = resolveToasterVariantProps(props);
otherPropsCompressed; const { defaultOption, muteDuplicationWarning, ...otherPropsExtracted } =
otherPropsCompressed;
const [toastList, setToastList] = React.useState<typeof toasts>(toasts); const [toastList, setToastList] = React.useState<typeof toasts>(toasts);
const internalRef = useRef<HTMLDivElement | null>(null); const internalRef = useRef<HTMLDivElement | null>(null);
useEffect(() => { useEffect(() => {
return subscribe(() => { return subscribe(() => {
setToastList(getSnapshot()); setToastList(getSnapshot());
}); });
}, []); }, []);
const option = React.useMemo(() => { const option = React.useMemo(() => {
return { return {
...defaultToastOption, ...defaultToastOption,
...defaultOption, ...defaultOption,
}; };
}, [defaultOption]); }, [defaultOption]);
const toasterInstance = document.querySelector("div[data-toaster-root]"); const toasterInstance = document.querySelector("div[data-toaster-root]");
if (toasterInstance && id !== toasterInstance.id) { if (toasterInstance && id !== toasterInstance.id) {
if (process.env.NODE_ENV === "development" && !muteDuplicationWarning) { if (process.env.NODE_ENV === "development" && !muteDuplicationWarning) {
console.warn( console.warn(
"Multiple Toaster instances detected. Only one Toaster is allowed.", "Multiple Toaster instances detected. Only one Toaster is allowed.",
); );
}
return null;
} }
return null;
}
return ( return (
<> <>
{ReactDOM.createPortal( {ReactDOM.createPortal(
<div <div
{...otherPropsExtracted} {...otherPropsExtracted}
data-toaster-root={true} data-toaster-root={true}
className={toasterVariant(variantProps)} className={toasterVariant(variantProps)}
ref={(el) => { ref={(el) => {
internalRef.current = el; internalRef.current = el;
if (typeof ref === "function") { if (typeof ref === "function") {
ref(el); ref(el);
} else if (ref) { } else if (ref) {
ref.current = el; ref.current = el;
} }
}} }}
id={id} id={id}
> >
{Object.entries(toastList).map(([id]) => ( {Object.entries(toastList).map(([id]) => (
<ToastTemplate <ToastTemplate
key={id} key={id}
id={id as `${number}`} id={id as `${number}`}
globalOption={option} globalOption={option}
/> />
))} ))}
</div>, </div>,
document.body, document.body,
)} )}
</> </>
); );
}); }),
);
Toaster.displayName = "Toaster"; Toaster.displayName = "Toaster";
export { Toaster }; export { Toaster };