chore: modifying the animations

heroui-inc · Dec 30, 2024 · 5530248 · 5530248
1 parent 4c36049
commit 5530248
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 25 deletions.
diff --git a/apps/docs/tailwind.config.js b/apps/docs/tailwind.config.js
@@ -69,6 +69,9 @@ module.exports = {
         "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
         "gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
       },
+      spacing: {
+        'toast-gap': 'var(--toast-gap)',
+      },
       typography: (theme) => ({
         DEFAULT: {
           css: {

diff --git a/packages/components/toast/src/toast-region.tsx b/packages/components/toast/src/toast-region.tsx
@@ -41,6 +41,14 @@ export function ToastRegion<T extends ToastProps>({
   };
   const positionStyle = position ? positionStyles[position] : positionStyles["right-bottom"];
 
+  const toasts = document.querySelectorAll<HTMLElement>("[data-toast]");
+  let height = 0;
+
+  for (let i = toasts.length - 1; i >= 0; i--) {
+    toasts[i].style.setProperty(`--toast-gap`, `${height}px`);
+    height = height + toasts[i].offsetHeight;
+  }
+
   return createPortal(
     <div
       {...mergeProps(regionProps, hoverProps)}

diff --git a/packages/components/toast/src/toast.tsx b/packages/components/toast/src/toast.tsx
@@ -8,7 +8,7 @@ import {
   WarningIcon,
 } from "@nextui-org/shared-icons";
 import {motion, AnimatePresence} from "framer-motion";
-import {cloneElement, isValidElement, useEffect, useState} from "react";
+import {cloneElement, isValidElement} from "react";
 import {clsx} from "@nextui-org/shared-utils";
 
 import {UseToastProps, useToast} from "./use-toast";
@@ -53,16 +53,6 @@ const Toast = forwardRef<"div", ToastProps>((props, ref) => {
     ref,
   });
 
-  const [toastHeight, setToastHeight] = useState(0);
-
-  useEffect(() => {
-    if (domRef.current) {
-      const {height} = domRef.current.getBoundingClientRect();
-
-      setToastHeight(height);
-    }
-  }, []);
-
   const toastVariants = position.includes("bottom")
     ? {
         hidden: {opacity: 0, y: 50},
@@ -119,15 +109,31 @@ const Toast = forwardRef<"div", ToastProps>((props, ref) => {
   );
 
   const positionStyles: Record<string, string> = {
-    "right-bottom": "bottom-0 right-0 w-max",
-    "left-bottom": "bottom-0 left-0 w-max",
+    "right-bottom": "bottom-0 right-0 max-auto w-max",
+    "left-bottom": "bottom-0 left-0 mx-auto w-max",
     "center-bottom": "bottom-0 left-0 right-0 mx-auto w-max",
-    "right-top": "top-0 right-0 w-max",
-    "left-top": "top-0 left-0 w-max",
+    "right-top": "top-0 right-0 max-auto w-max",
+    "left-top": "top-0 left-0 mx-auto w-max",
     "center-top": "top-0 left-0 right-0 mx-auto w-max",
   };
   const positionStyle = position ? positionStyles[position] : positionStyles["right-bottom"];
   const multiplier = position.includes("top") ? -1 : 1;
+  let gap = 0;
+  let currentHeight = 0;
+
+  if (domRef.current) {
+    const styles = getComputedStyle(domRef.current);
+
+    gap = parseFloat(styles.getPropertyValue("--toast-gap")) || 0;
+    currentHeight = domRef.current.offsetHeight || 0;
+  }
+
+  const toasts = document.querySelectorAll<HTMLElement>("[data-toast]");
+  let height = 0;
+
+  if (toasts.length > 0) {
+    height = toasts[toasts.length - 1].offsetHeight;
+  }
 
   return (
     <>
@@ -139,9 +145,11 @@ const Toast = forwardRef<"div", ToastProps>((props, ref) => {
             animate={{
               opacity: 1,
               y: isRegionHovered
-                ? (1 + index - total) * (toastHeight + 5) * multiplier
-                : (0 - (total - 1 - index) * 15) * multiplier,
-              scale: isRegionHovered ? 1 : 1 - (total - 1 - index) * 0.1,
+                ? (-gap + 4 * (1 + index - total)) * multiplier
+                : total - 1 - index === 0
+                ? 0
+                : (currentHeight * (1 - 0.1 * (total - 1 - index)) - height) * multiplier,
+              scaleX: isRegionHovered ? 1 : 1 - (total - 1 - index) * 0.1,
             }}
             className={clsx("absolute", positionStyle)}
             drag={position.includes("center") ? "y" : "x"}

diff --git a/packages/components/toast/src/use-toast.ts b/packages/components/toast/src/use-toast.ts
@@ -213,6 +213,7 @@ export function useToast<T extends ToastProps>(originalProps: UseToastProps<T>)
       },
       "data-has-title": dataAttr(!isEmpty(title)),
       "data-has-description": dataAttr(!isEmpty(description)),
+      "data-toast": true,
       ...mergeProps(props, otherProps, toastProps),
     }),
     [slots, classNames, toastProps],

diff --git a/packages/components/toast/stories/toast.stories.tsx b/packages/components/toast/stories/toast.stories.tsx
@@ -179,7 +179,6 @@ const CustomToastComponent = (args) => {
                 "relative before:content-[''] before:absolute before:z-10",
                 "before:left-0 before:top-[-1px] before:bottom-[-1px] before:w-1",
                 "rounded-l-none border-l-0",
-                "min-w-[350px]",
                 "rounded-md",
                 "flex flex-col items-start",
                 colorMap[color],
@@ -284,5 +283,8 @@ export const WithEndContent = {
 };
 
 export const CustomStyles = {
+  args: {
+    disableAnimation: true,
+  },
   render: CustomToastTemplate,
 };
diff --git a/packages/core/theme/src/components/toast.ts b/packages/core/theme/src/components/toast.ts
@@ -16,8 +16,8 @@ const toast = tv({
       "my-1",
       "sm:mx-4",
       "sm:my-4",
-      "max-w-[542px]",
-      "rounded-md",
+      "w-[210px] sm:w-[270px] md:w-[300px]",
+      "min-h-4",
       "text-white",
       "shadow-inner",
     ],
@@ -39,14 +39,10 @@ const toast = tv({
         description: "text-xs font-light",
       },
       md: {
-        icon: "w-6 h-6",
-        base: "p-4",
         title: "text-sm font-semibold",
         description: "text-xs font-light",
       },
       lg: {
-        icon: "w-8 h-8",
-        base: "p-4",
         title: "text-md font-semibold",
         description: "text-sm font-light",
       },