@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';

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

export function useCatalogTableHeaderCellActions<T extends BaseEntity>({
  column,
  currentSortOption,
  handleSortClick,
  isColumnSorted,
}: CatalogTableHeaderCellActionsProps<T>) {
  const sortKey = column.sortKey;
  const isUpActive = Boolean(
    sortKey &&
    (currentSortOption ? currentSortOption === sortKey : isColumnSorted(sortKey, 'desc')),
  );
  const isDownActive = Boolean(
    sortKey &&
    (currentSortOption ? currentSortOption === `-${sortKey}` : isColumnSorted(sortKey, 'asc')),
  );

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

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

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