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

feat: make sure toast is rendered as born first

Browse Source
This commit is contained in:
p-sw 2024-08-07 19:19:27 +09:00
parent 371453b544
commit a90cec770c
1 changed files with 12 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -46,9 +46,16 @@ const ToastTemplate = ({
React.useEffect(() => { React.useEffect(() => {
if (toastData.life === "born") { if (toastData.life === "born") {
requestAnimationFrame(() => { requestAnimationFrame(function untilBorn() {
// To make sure that the toast is rendered as "born" state /*
// and then change to "normal" state To confirm that the toast is rendered as "born" state and then change to "normal" state
This way will make sure born -> normal stage transition animation will work.
*/
const elm = document.querySelector(
`div[data-toaster-root] > div[data-toast-id="${id}"][data-toast-lifecycle="born"]`,
);
if (!elm) return requestAnimationFrame(untilBorn);
toasts[id] = { toasts[id] = {
...toasts[id], ...toasts[id],
life: "normal", life: "normal",
@ -83,6 +90,8 @@ const ToastTemplate = ({
life: toastData.life, life: toastData.life,
})} })}
ref={ref} ref={ref}
data-toast-id={id}
data-toast-lifecycle={toastData.life}
> >
{toastData.closeButton && ( {toastData.closeButton && (
<button <button