✨ Allow dot paginations to be created without pages prop

Frontendland · Sep 20, 2024 · 60eeddd · 60eeddd
1 parent c3e491f
commit 60eeddd
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 6 deletions.
diff --git a/src/components/Pagination/Pagination.astro b/src/components/Pagination/Pagination.astro
@@ -41,6 +41,13 @@ const calculatedCurrentPage = currentPage
 const calculatedTotalPages = totalPages
     || pages?.length
     || 0
+
+const generatedPages = pages?.length
+    ? pages
+    : Array(totalPages || 0).fill(0).map((_, index) => ({
+        ...(index === 0 && { active: true }),
+        label: index + 1
+    }))
 ---
 
 <ul
@@ -51,7 +58,7 @@ const calculatedTotalPages = totalPages
 >
     {type === 'dots' ? (
         <Fragment>
-            {pages?.map(page => (
+            {generatedPages?.map(page => (
                 <li>
                     <button
                         data-active={page.active ? 'true' : undefined}

diff --git a/src/components/Pagination/Pagination.svelte b/src/components/Pagination/Pagination.svelte
@@ -37,6 +37,13 @@
         || pages?.length
         || 0
 
+    const generatedPages = pages?.length
+        ? pages
+        : Array(totalPages || 0).fill(0).map((_, index) => ({
+            ...(index === 0 && { active: true }),
+            label: index + 1
+        }))
+
     const paginate = (to: string | number) => {
         if (to === 'prev') {
             calculatedCurrentPage = calculatedCurrentPage - 1
@@ -54,14 +61,14 @@
         })
     }
 
-    let calculatedCurrentPage = currentPage
+    $: calculatedCurrentPage = currentPage
         || (pages?.findIndex(page => page.active) || -1) + 1
         || 1
 </script>
 
 <ul class={classes}>
-    {#if type === 'dots' && pages?.length}
-        {#each pages as _, index}
+    {#if type === 'dots' && generatedPages?.length}
+        {#each generatedPages as _, index}
             <li>
                 <button
                     data-active={calculatedCurrentPage === index + 1 ? 'true' : null}

diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import type { ReactPaginationProps } from './pagination'
 
 import Button from '../Button/Button.tsx'
@@ -45,6 +45,13 @@ const Pagination = ({
         || pages?.length
         || 0
 
+    const generatedPages = pages?.length
+        ? pages
+        : Array(totalPages || 0).fill(0).map((_, index) => ({
+            ...(index === 0 && { active: true }),
+            label: index + 1
+        }))
+
     const paginate = (to: string | number) => {
         let currentPage = calculatedCurrentPage
 
@@ -66,11 +73,17 @@ const Pagination = ({
         })
     }
 
+    useEffect(() => {
+        if (currentPage) {
+            setCalculatedCurrentPage(currentPage)
+        }
+    }, [currentPage])
+
     return (
         <ul className={classes}>
             {type === 'dots' ? (
                 <React.Fragment>
-                    {pages?.map((_, index) => (
+                    {generatedPages?.map((_, index) => (
                         <li key={index}>
                             <button
                                 data-active={calculatedCurrentPage === index + 1 ? 'true' : null}