accessibilityHeaderCell.tsx 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. import type {ComponentProps, CSSProperties, ReactNode} from 'react';
  2. import {forwardRef} from 'react';
  3. import HeaderCell from 'sentry/components/replays/virtualizedGrid/headerCell';
  4. import type {Tooltip} from 'sentry/components/tooltip';
  5. import {t} from 'sentry/locale';
  6. import type useSortAccessibility from 'sentry/views/replays/detail/accessibility/useSortAccessibility';
  7. type SortConfig = ReturnType<typeof useSortAccessibility>['sortConfig'];
  8. type Props = {
  9. handleSort: ReturnType<typeof useSortAccessibility>['handleSort'];
  10. index: number;
  11. sortConfig: SortConfig;
  12. style: CSSProperties;
  13. };
  14. const COLUMNS: {
  15. field: SortConfig['by'];
  16. label: ReactNode;
  17. tooltipTitle?: ComponentProps<typeof Tooltip>['title'];
  18. }[] = [
  19. {
  20. field: 'impact',
  21. label: '',
  22. },
  23. {
  24. field: 'id',
  25. label: t('Type'),
  26. },
  27. {field: 'element', label: t('Element')},
  28. ];
  29. export const COLUMN_COUNT = COLUMNS.length;
  30. const AccessibilityHeaderCell = forwardRef<HTMLButtonElement, Props>(
  31. ({handleSort, index, sortConfig, style}: Props, ref) => {
  32. const {field, label, tooltipTitle} = COLUMNS[index];
  33. return (
  34. <HeaderCell
  35. ref={ref}
  36. handleSort={handleSort}
  37. field={field}
  38. label={label}
  39. tooltipTitle={tooltipTitle}
  40. sortConfig={sortConfig}
  41. style={style}
  42. />
  43. );
  44. }
  45. );
  46. export default AccessibilityHeaderCell;