fix: pagination issues second try

heroui-inc · Sep 8, 2023 · 6c1e834 · 6c1e834
1 parent a3be419
commit 6c1e834
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 30 deletions.
diff --git a/packages/components/pagination/src/use-pagination.ts b/packages/components/pagination/src/use-pagination.ts
@@ -175,42 +175,51 @@ export function usePagination(originalProps: UsePaginationProps) {
     }
   }
 
-  function scrollTo(value: number) {
+  function scrollTo(value: number, skipAnimation: boolean) {
     const map = getItemsRefMap();
 
     const node = map.get(value);
 
+    if (!node || !cursorRef.current) return;
+
     // clean up the previous cursor timer (if any)
     cursorTimer.current && clearTimeout(cursorTimer.current);
 
-    if (node) {
-      // scroll parent to the item
-      scrollIntoView(node, {
-        scrollMode: "always",
-        behavior: "smooth",
-        block: "start",
-        inline: "start",
-        boundary: domRef.current,
-      });
-
-      // get position of the item
-      const {offsetLeft} = node;
-
-      // move the cursor to the item
+    // scroll parent to the item
+    scrollIntoView(node, {
+      scrollMode: "always",
+      behavior: "smooth",
+      block: "start",
+      inline: "start",
+      boundary: domRef.current,
+    });
+
+    // get position of the item
+    const {offsetLeft} = node;
+
+    // only shows the animation when the page changes, not on intial render or layout shift
+    if (skipAnimation) {
+      cursorRef.current.setAttribute("data-moving", "false");
+      cursorRef.current.style.transform = `translateX(${offsetLeft}px) scale(1)`;
+
+      return;
+    }
+
+    // move the cursor to the item
+    cursorRef.current.setAttribute("data-moving", "true");
+    cursorRef.current.style.transform = `translateX(${offsetLeft}px) scale(1.1)`;
+
+    cursorTimer.current = setTimeout(() => {
+      // reset the scale of the cursor
       if (cursorRef.current) {
-        cursorRef.current.setAttribute("data-moving", "true");
-        cursorRef.current.style.transform = `translateX(${offsetLeft}px) scale(1.1)`;
+        cursorRef.current.style.transform = `translateX(${offsetLeft}px) scale(1)`;
       }
-
       cursorTimer.current = setTimeout(() => {
-        // reset the scale of the cursor
-        if (cursorRef.current) {
-          cursorRef.current.setAttribute("data-moving", "false");
-          cursorRef.current.style.transform = `translateX(${offsetLeft}px) scale(1)`;
-        }
+        // remove the data-moving attribute
+        cursorRef.current?.setAttribute("data-moving", "false");
         cursorTimer.current && clearTimeout(cursorTimer.current);
       }, CURSOR_TRANSITION_TIMEOUT);
-    }
+    }, CURSOR_TRANSITION_TIMEOUT);
   }
 
   const {range, activePage, setPage, previous, next, first, last} = useBasePagination({
@@ -223,15 +232,20 @@ export function usePagination(originalProps: UsePaginationProps) {
     onChange,
   });
 
+  const activePageRef = useRef(activePage);
+
   useEffect(() => {
     if (activePage && !originalProps.disableAnimation) {
-      scrollTo(activePage);
+      scrollTo(activePage, activePage === activePageRef.current);
     }
+    activePageRef.current = activePage;
   }, [
     activePage,
     originalProps.disableAnimation,
-    originalProps.isCompact,
     originalProps.disableCursorAnimation,
+    originalProps.dotsJump,
+    originalProps.isCompact,
+    originalProps.showControls,
   ]);
 
   const slots = useMemo(

diff --git a/packages/core/theme/src/components/pagination.ts b/packages/core/theme/src/components/pagination.ts
@@ -45,6 +45,7 @@ const pagination = tv({
       "left-0",
       "select-none",
       "touch-none",
+      "pointer-events-none",
       "z-20",
     ],
     forwardIcon:
@@ -135,7 +136,13 @@ const pagination = tv({
       },
       false: {
         item: ["data-[pressed=true]:scale-[0.97]", "transition-transform-background"],
-        cursor: ["transition-transform", "!duration-300"],
+        cursor: [
+          "data-[moving=true]:transition-transform",
+          "!data-[moving=true]:duration-300",
+          // this hides the cursor and only shows it once it has been moved to its initial position
+          "opacity-0",
+          "data-[moving]:opacity-100",
+        ],
       },
     },
   },
@@ -353,17 +360,28 @@ const pagination = tv({
     {
       slots: ["item", "prev", "next"],
       variant: "flat",
-      class: ["bg-default-100", "data-[hover=true]:bg-default-200", "active:bg-default-300"],
+      class: [
+        "bg-default-100",
+        "[&[data-hover=true]:not([data-active=true])]:bg-default-200",
+        "active:bg-default-300",
+      ],
     },
     {
       slots: ["item", "prev", "next"],
       variant: "faded",
-      class: ["bg-default-50", "data-[hover=true]:bg-default-100", "active:bg-default-200"],
+      class: [
+        "bg-default-50",
+        "[&[data-hover=true]:not([data-active=true])]:bg-default-100",
+        "active:bg-default-200",
+      ],
     },
     {
       slots: ["item", "prev", "next"],
       variant: "light",
-      class: ["data-[hover=true]:bg-default-100", "active:bg-default-200"],
+      class: [
+        "[&[data-hover=true]:not([data-active=true])]:bg-default-100",
+        "active:bg-default-200",
+      ],
     },
     // size
     {