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);