fix(pagination): remove useTask

Author: fabiobiondi

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

@@ -99,88 +99,6 @@ export default component$(() => {
           label="hidePrevButton"
         />
       </div>
-
-      {/*
-
-      <Pagination
-        activeClass="bg-red-500"
-        pages={20} page={10} onPaging$={() => console.log('pippo')}/>
-
-          <h2>Interactive Demo</h2>
-
-        <Pagination
-          pages={pages.value}
-          page={page.value}
-          onPaging$={(newValue: number) => {
-            page.value = newValue;
-          }}
-          showFirstButton={showFirstButton.value}
-          showLastButton={showLastButton.value}
-          hideNextButton={hideNextButton.value}
-          hidePrevButton={hidePrevButton.value}
-          siblingCount={siblingCount.value}
-          boundaryCount={boundaryCount.value}
-        />*/}
-      {/*
-
-      <h2>Size</h2>
-      <div class="flex flex-col gap-8">
-        <Pagination pages={5} page={1} size="xs" />
-        <Pagination pages={5} page={1} size="sm" />
-        <Pagination pages={5} page={1} size="md" />
-        <Pagination pages={5} page={1} size="lg" />
-      </div>
-
-      <h2>Variants</h2>
-      <div class="flex flex-col gap-8">
-        <Pagination pages={5} page={1} />
-        <Pagination pages={5} page={1} variant="primary" />
-        <Pagination pages={5} page={1} variant="secondary" />
-        <Pagination pages={5} page={1} variant="accent" />
-        <Pagination pages={5} page={1} variant="disabled" />
-        <Pagination pages={5} page={1} variant="success" />
-        <Pagination pages={5} page={1} variant="error" />
-        <Pagination pages={5} page={1} variant="info" />
-        <Pagination pages={5} page={1} variant="link" />
-        <Pagination pages={5} page={1} variant="warning" />
-      </div>
-
-      <h2>Outline</h2>
-      <div class="flex flex-col gap-8">
-        <Pagination pages={5} page={1} outline />
-      </div>
-
-      <h2>Square</h2>
-      <div class="flex flex-col gap-8">
-        <Pagination pages={5} page={1} square />
-      </div>
-
-      <h2>Disabled</h2>
-      <div class="flex flex-col gap-8">
-        <Pagination pages={5} page={1} disabled={true} />
-      </div>
-
-      <h2>Custom styles and labels</h2>
-
-      <div class="flex flex-col gap-8">
-        <Pagination
-          pages={pages.value}
-          page={page.value}
-          onPaging$={(newValue: number) => {
-            page.value = newValue;
-          }}
-          showFirstButton={showFirstButton.value}
-          showLastButton={showLastButton.value}
-          hideNextButton={hideNextButton.value}
-          hidePrevButton={hidePrevButton.value}
-          siblingCount={siblingCount.value}
-          boundaryCount={boundaryCount.value}
-          activeClass="!bg-cyan-800"
-          defaultClass="bg-cyan-500"
-          labels={{ prev: '⬅️', next: '➡️', first: 'START', last: 'END' }}
-        />
-      </div>
-      */}
     </div>
   );
 });

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

@@ -1,11 +1,6 @@
 import { usePagination } from './use-pagination';
 import type { PropFunction } from '@builder.io/qwik';
-import { component$, Slot, useSignal, useTask$ } from '@builder.io/qwik';
-
-/**
- * TODO
- * disabled: enable/disable paginator
- */
+import { component$, Slot } from '@builder.io/qwik';
 
 type ArrowLabels = {
   previous: string;
@@ -39,6 +34,8 @@ export const Pagination = component$<PaginationProps>((props) => {
     totalPages,
     onPageChange$,
     // configuration
+    siblingCount,
+    boundaryCount,
     hidePrevButton = false,
     hideNextButton = false,
     disabled = false,
@@ -54,25 +51,15 @@ export const Pagination = component$<PaginationProps>((props) => {
     dividerClass,
   } = props;
 
-  const visibleItems = useSignal<(string | number)[]>([]);
   const isPrevButtonVisible = () => !hidePrevButton && selectedPage > 1;
   const isNextButtonVisible = () => !hideNextButton && selectedPage !== totalPages;
 
-  useTask$(({ track }) => {
-    track(() => [
-      props.selectedPage,
-      props.totalPages,
-      props.siblingCount,
-      props.boundaryCount,
-    ]);
-
-    visibleItems.value = usePagination(
-      props.totalPages,
-      props.selectedPage,
-      props.siblingCount || 1,
-      props.boundaryCount || 1,
-    );
-  });
+  const visibleItems = usePagination(
+    totalPages,
+    selectedPage,
+    siblingCount || 1,
+    boundaryCount || 1,
+  );
 
   return (
     <nav
@@ -105,7 +92,7 @@ export const Pagination = component$<PaginationProps>((props) => {
       )}
 
       {/* Button List */}
-      {visibleItems.value.map((item: string | number, index: number) => {
+      {visibleItems.map((item: string | number, index: number) => {
         return (
           <span key={index}>
             {typeof item === 'string' ? (

packages/kit-headless/src/components/pagination/use-pagination.ts

@@ -1,13 +1,11 @@
-// example: usePagination(20, 6, 1, 1);
-
 export function usePagination(
-  count: number,
-  defaultPage: number,
+  totalPages: number,
+  selectedPage: number,
   siblingCount = 1,
   boundaryCount = 1,
 ) {
-  const pageCount = Math.min(count, Math.max(1, count));
-  const page = Math.min(Math.max(1, defaultPage), pageCount);
+  const pageCount = Math.min(totalPages, Math.max(1, totalPages));
+  const page = Math.min(Math.max(1, selectedPage), pageCount);
 
   const range = (start: number, end: number) =>
     Array.from({ length: end - start + 1 }, (_, i) => start + i);