Function useSortingAndPagination

src/ui-solid-dom/SortedTablePaginator.tsx:18–78

(
  cellId: MaybeAccessor<Id | undefined>,
  descending: MaybeAccessor<boolean | undefined>,
  sortOnClick: MaybeAccessor<boolean | undefined>,
  offset: MaybeAccessor<number | undefined>,
  limit: MaybeAccessor<number | undefined>,
  total: MaybeAccessor<number>,
  paginator: MaybeAccessor<boolean | Component<SortedTablePaginatorProps>>,
  onChange: MaybeAccessor<((sortAndOffset: SortAndOffset) => void) | undefined>,
)

const RIGHT_ARROW = '\u2192';

export const useSortingAndPagination = (
  cellId: MaybeAccessor<Id | undefined>,
  descending: MaybeAccessor<boolean | undefined>,
  sortOnClick: MaybeAccessor<boolean | undefined>,
  offset: MaybeAccessor<number | undefined>,
  limit: MaybeAccessor<number | undefined>,
  total: MaybeAccessor<number>,
  paginator: MaybeAccessor<boolean | Component<SortedTablePaginatorProps>>,
  onChange: MaybeAccessor<((sortAndOffset: SortAndOffset) => void) | undefined>,
): [
  sortAndOffset: () => SortAndOffset,
  handleSort: HandleSort,
  paginatorComponent: (() => JSXElement) | undefined,
] => {
  const [sortAndOffset, setSortAndOffset] = createSignal<SortAndOffset>([
    getValue(cellId),
    !!getValue(descending),
    getValue(offset) ?? 0,
  ]);
  createEffect(() =>
    setSortAndOffset([
      getValue(cellId),
      !!getValue(descending),
      getValue(offset) ?? 0,
    ]),
  );
  const setStateAndChange = (sortAndOffset: SortAndOffset) => {
    setSortAndOffset(sortAndOffset);
    getValue(onChange)?.(sortAndOffset);
  };
  const handleSort = (cellId: Id | undefined) => {
    if (getValue(sortOnClick)) {
      const [currentCellId, currentDescending, currentOffset] = sortAndOffset();
      setStateAndChange([
        cellId,
        cellId == currentCellId ? !currentDescending : false,
        currentOffset,
      ]);
    }
  };
  const handleChangeOffset = (offset: number) => {
    const [currentCellId, currentDescending] = sortAndOffset();
    setStateAndChange([currentCellId, currentDescending, offset]);
  };
  const paginatorComponent = createMemo(() => {
    const resolvedPaginator = getValue(paginator);
    const [_, __, currentOffset] = sortAndOffset();
    const PaginatorComponent = isTrue(resolvedPaginator)
      ? SortedTablePaginator
      : (resolvedPaginator as Component<SortedTablePaginatorProps>);
    return isFalse(resolvedPaginator) ? null : (
      <PaginatorComponent
        offset={currentOffset}
        limit={getValue(limit)}
        total={getValue(total)}
        onChange={handleChangeOffset}
      />
    );