feat(pagination): allow to hide next and previous buttons

Author: fabiobiondi

apps/website/src/routes/docs/headless/(components)/pagination/examples.tsx

@@ -1,10 +1,12 @@
+import HidePrevNextButtons from '@/apps/website/src/routes/docs/headless/(components)/pagination/examples/hidePrevNextButtons';
 import { JSXNode, component$ } from '@builder.io/qwik';
 import { PreviewCodeExampleTabs } from '../../../_components/preview-code-example/preview-code-example-tabs';
 
 import Basic from './examples/basic';
 import Interactive from './examples/interactive';
 import basicCode from './examples/basic?raw';
 import interactiveCode from './examples/interactive?raw';
+import hidePrevNextButtonsCode from './examples/hidePrevNextButtons?raw';
 
 export type Example = {
   component: JSXNode;
@@ -21,6 +23,10 @@ export const examples: Record<string, Example> = {
     component: <Interactive />,
     code: interactiveCode,
   },
+  hidePrevNextButtons: {
+    component: <HidePrevNextButtons />,
+    code: hidePrevNextButtonsCode,
+  },
 };
 
 export type ShowExampleProps = {

apps/website/src/routes/docs/headless/(components)/pagination/examples/hidePrevNextButtons.tsx

@@ -0,0 +1,21 @@
+import { component$, useSignal } from '@builder.io/qwik';
+import { Pagination } from '@qwik-ui/headless';
+
+export default component$(() => {
+  const selectedPage = useSignal(1);
+  const totalPages = useSignal(10);
+
+  return (
+    <div class="mt-4 flex flex-col gap-6">
+      <Pagination
+        selectedPage={selectedPage.value}
+        totalPages={totalPages.value}
+        onPageChange$={(page) => {
+          selectedPage.value = page;
+        }}
+        hidePrevButton={true}
+        hideNextButton={true}
+      />
+    </div>
+  );
+});

apps/website/src/routes/docs/headless/(components)/pagination/examples/interactive.tsx

@@ -6,8 +6,8 @@ export default component$(() => {
   const selectedPage = useSignal(1);
   const totalPages = useSignal(10);
 
-  const hideNextButton = useSignal(true);
-  const hidePrevButton = useSignal(true);
+  const hideNextButton = useSignal(false);
+  const hidePrevButton = useSignal(false);
   const siblingCount = useSignal(1);
   const boundaryCount = useSignal(1);
 
@@ -24,6 +24,8 @@ export default component$(() => {
         defaultClass="border-2 border-sky-400 p-4"
         selectedClass="border-2 border-red-500 bg-red-500 p-4"
         dividerClass="p-4"
+        hidePrevButton={hidePrevButton.value}
+        hideNextButton={hideNextButton.value}
         gap={'10px'}
       >
         <span q:slot="prefix">👈</span>

apps/website/src/routes/docs/headless/(components)/pagination/index.mdx

@@ -29,3 +29,7 @@ import testImage from '../../../../../../public/images/test-image.png'
 ## Basic Example
 
 <ShowExample example="basic" />
+
+## Hide Next/Prev Buttons
+
+<ShowExample example="hidePrevNextButtons" />

packages/kit-headless/src/components/pagination/pagination.tsx

@@ -1,30 +1,28 @@
 import { usePagination } from '@/packages/kit-headless/src/components/pagination/use-pagination';
 import type { PropFunction } from '@builder.io/qwik';
-import { component$, Slot, useSignal, useTask$ } from '@builder.io/qwik';
+import { component$, Slot, useSignal, useTask$, useVisibleTask$ } from '@builder.io/qwik';
 
 /**
  * TODO
  * show / hide PREV / NEXT buttons
  * customArrowTexts: { previous: '...', next: '... }
  * disabled: enable/disable paginator
  *
- * FLUFFY THEME
- * size: 'sm' | 'md' | 'lg'
- * variant: 'primary' | 'secondary' | ...
- * outline
- * square
  */
 
 export interface PaginationProps {
-  class?: string;
   selectedPage: number;
   totalPages: number;
   onPageChange$: PropFunction<(page: number) => void>;
 
   // configuration
   siblingCount?: number;
   boundaryCount?: number;
+  hidePrevButton?: boolean;
+  hideNextButton?: boolean;
+
   // styles
+  class?: string;
   gap?: number | string;
   defaultClass?: string;
   selectedClass?: string;
@@ -33,16 +31,20 @@ export interface PaginationProps {
 
 export const Pagination = component$<PaginationProps>(
   ({
-    class: _class,
     selectedPage,
     totalPages,
     onPageChange$,
+
+    siblingCount = 1,
+    boundaryCount = 1,
+    hidePrevButton = false,
+    hideNextButton = false,
+
+    class: _class,
     gap = '10px',
     defaultClass,
     selectedClass,
     dividerClass,
-    siblingCount = 1,
-    boundaryCount = 1,
   }) => {
     const visibleItems = useSignal<(string | number)[]>([]);
 
@@ -53,6 +55,9 @@ export const Pagination = component$<PaginationProps>(
       boundaryCount,
     );
 
+    const isPrevButtonVisible = () => !hidePrevButton && selectedPage > 1;
+    const isNextButtonVisible = () => !hideNextButton && selectedPage !== totalPages;
+
     return (
       <nav
         role="navigation"
@@ -61,20 +66,21 @@ export const Pagination = component$<PaginationProps>(
         style={{ display: 'flex', alignItems: 'center', gap: gap }}
       >
         {/* PREV BUTTON */}
-        <button
-          type="button"
-          aria-label={'prevAriaLabel'}
-          disabled={selectedPage <= 1}
-          onClick$={() => {
-            if (selectedPage > 1) {
-              onPageChange$(selectedPage - 1);
-            }
-          }}
-        >
-          <Slot name="prefix" />
-          <span>PREV</span>
-        </button>
-
+        {isPrevButtonVisible() && (
+          <button
+            type="button"
+            aria-label={'prevAriaLabel'}
+            disabled={selectedPage <= 1}
+            onClick$={() => {
+              if (selectedPage > 1) {
+                onPageChange$(selectedPage - 1);
+              }
+            }}
+          >
+            <Slot name="prefix" />
+            <span>PREV</span>
+          </button>
+        )}
         {visibleItems.value.map((item: string | number, index: number) => {
           return (
             <span key={index}>
@@ -98,19 +104,21 @@ export const Pagination = component$<PaginationProps>(
         })}
 
         {/* NEXT BUTTON */}
-        <button
-          type="button"
-          aria-label={'nextAriaLabel'}
-          disabled={selectedPage >= totalPages}
-          onClick$={() => {
-            if (selectedPage < totalPages) {
-              onPageChange$(selectedPage + 1);
-            }
-          }}
-        >
-          <span>NEXT</span>
-          <Slot name="suffix" />
-        </button>
+        {isNextButtonVisible() && (
+          <button
+            type="button"
+            aria-label={'nextAriaLabel'}
+            disabled={selectedPage >= totalPages}
+            onClick$={() => {
+              if (selectedPage < totalPages) {
+                onPageChange$(selectedPage + 1);
+              }
+            }}
+          >
+            <span>NEXT</span>
+            <Slot name="suffix" />
+          </button>
+        )}
       </nav>
     );
   },