@redocly/theme/src/core/hooks/catalog/use-catalog-table-header-cell-actions.ts

Shared UI components lib

import {
  BaseEntity,
  CatalogColumn,
} from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableView';

import { SortOption } from '../../types';

type CatalogTableHeaderCellActionsProps<T extends BaseEntity> = {
  column: CatalogColumn<T>;
  handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
  setSortOption: (sortOption: SortOption | null) => void;
  isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
};

export function useCatalogTableHeaderCellActions<T extends BaseEntity>({
  column,
  handleSortClick,
  setSortOption,
  isColumnSorted,
}: CatalogTableHeaderCellActionsProps<T>) {
  const sortKey = column.sortKey;
  const isUpActive = sortKey ? isColumnSorted(sortKey, 'desc') : false;
  const isDownActive = sortKey ? isColumnSorted(sortKey, 'asc') : false;

  const handleCellClick = (): void => {
    if (!column.sortable || !sortKey) return;

    if (isDownActive) {
      handleSortClick(sortKey, 'desc');
    } else if (isUpActive) {
      setSortOption(null);
    } else {
      handleSortClick(sortKey, 'asc');
    }
  };

  return { handleCellClick, sortKey, isUpActive, isDownActive };
}