function SortableColumnHeader()

in src/components/CompareResults/TableHeader.tsx [198:250]

• 35 lines of code
• 6 McCabe index (conditional complexity)

function SortableColumnHeader({
  name,
  displayLabel,
  sortDirection,
  onToggle,
}: SortableColumnHeaderProps) {
  const buttonAriaLabel = sortDirection
    ? `${name} (Currently sorted by this column. Click to change)`
    : `${name} (Click to sort by this column)`;

  function onButtonClick() {
    let newSortDirection: typeof sortDirection;
    switch (sortDirection) {
      case 'desc':
        newSortDirection = 'asc';
        break;
      case 'asc':
        newSortDirection = null;
        break;
      default:
        newSortDirection = 'desc';
    }

    onToggle(newSortDirection);
  }

  // MUI sets a minWidth of 40px using 2 classes, it's not appropriate for icons and difficult to override without !important.
  const inlineStyle = displayLabel
    ? { padding: '6px 12px', fontSize: '16px' }
    : { padding: 0, minWidth: '24px !important', fontSize: '16px' };
  // Have some margin between the icon and the text, and some less margin at the
  // start, but only when there's some actual text.
  const inlineIconStyle = displayLabel
    ? { marginInlineEnd: 1, marginInlineStart: -0.5 }
    : null;

  return (
    <Button
      color='tableHeaderButton'
      aria-label={buttonAriaLabel}
      size='small'
      onClick={onButtonClick}
      sx={inlineStyle}
    >
      <SortDirectionIcon
        columnName={name}
        sortDirection={sortDirection}
        sx={inlineIconStyle}
      />
      {displayLabel ? name : null}
    </Button>
  );
}