Merge pull request #80 from boredland/patch-1

✨ Allow rendering user-defined progress-text in `Pagination`
markteekman · Apr 22, 2024 · 29dab24 · 29dab24
2 parents 7f69634 + 217fd6b
commit 29dab24
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 4 deletions.
diff --git a/Pagination.astro b/Pagination.astro
@@ -10,6 +10,7 @@ interface Props {
   lastPage?: RouteString
   currentPage?: string | number
   totalPages?: NumericalString | number
+  renderProgress?: ({ currentPage, totalPages }: { currentPage: string | number; totalPages: string | number }) => string
 }
 
 const {
@@ -19,7 +20,10 @@ const {
   lastPage = '#',
   currentPage = '1',
   totalPages = '12',
+  renderProgress = ({ currentPage, totalPages }) => `Page ${currentPage} of ${totalPages}`
 } = Astro.props
+
+const progress = renderProgress({ currentPage, totalPages });
 ---
 
 <nav class="pagination" aria-label="Pagination">
@@ -113,7 +117,7 @@ const {
       }
     </li>
     <li>
-      <span>Page {currentPage} of {totalPages}</span>
+      <span>{progress}</span>
     </li>
     <li>
       {

diff --git a/package-lock.json b/package-lock.json
diff --git a/types/index.d.ts b/types/index.d.ts
@@ -126,7 +126,8 @@ export const Notification: Notification
  * @param _props.nextPage - Falsy value = disabled link icon | `<a href={nextPage}>` route string such "/blog/2" - default: "#"
  * @param _props.lastPage - Falsy value = disabled link icon | `<a href={lastPage}>` route string such "/blog/20" - default: "#"
  * @param _props.currentPage - `<span>Page {currentPage} of {totalPages}</span>` - Default: '1'
- * @param _props.totalPages - `<span>Page {currentPage} of {totalPages}</span>` - Default: '12
+ * @param _props.totalPages - `<span>Page {currentPage} of {totalPages}</span>` - Default: '12'
+ * @param _props.renderProgress - `Function rendering the progress. Defaults to the string "Page {currentPage} of {totalPages}"`
  */
 type Pagination = typeof import('../index.js').Pagination
 export const Pagination: Pagination