HeaderCell.tsx

import { memo, useRef, useState } from 'react';
import { flushSync } from 'react-dom';
import { css } from 'ecij';

import { useRovingTabIndex } from './hooks';
import {
  clampColumnWidth,
  getCellClassname,
  getCellStyle,
  getHeaderCellRowSpan,
  getHeaderCellStyle,
  getLeftRightKey,
  isCtrlKeyHeldDown,
  stopPropagation
} from './utils';
import type { CalculatedColumn, Direction, Position, ResizedWidth, SortDirection } from './types';

const cellSortableClassname = css`
  @layer rdg.HeaderCell {
    cursor: pointer;
  }
`;

const cellResizable = css`
  @layer rdg.HeaderCell {
    touch-action: none;
  }
`;

const cellResizableClassname = `rdg-cell-resizable ${cellResizable}`;

const resizeHandle = css`
  @layer rdg.HeaderCell {
    cursor: col-resize;
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    inset-block-end: 0;
    inline-size: 10px;
  }
`;

const resizeHandleClassname = `rdg-resize-handle ${resizeHandle}`;

const cellDraggableClassname = 'rdg-cell-draggable';

const cellDraggingOrOver = css`
  @layer rdg.HeaderCell {
    background-color: var(--rdg-header-draggable-background-color);
  }
`;

const cellDraggingClassname = `rdg-cell-dragging ${cellDraggingOrOver}`;

const cellOverClassname = `rdg-cell-drag-over ${cellDraggingOrOver}`;

const dragImageClassname = css`
  @layer rdg.HeaderCell {
    border-radius: 4px;
    width: fit-content;
    outline: 2px solid hsl(207, 100%, 50%);
    outline-offset: -2px;
  }
`;

export interface HeaderCellProps<R, SR> {
  column: CalculatedColumn<R, SR>;
  colSpan: number | undefined;
  rowIdx: number;
  isCellActive: boolean;
  sortDirection: SortDirection | undefined;
  priority: number | undefined;
  onSort: (column: CalculatedColumn<R, SR>, ctrlClick: boolean) => void;
  onColumnResize: (column: CalculatedColumn<R, SR>, width: ResizedWidth) => void;
  onColumnResizeEnd: () => void;
  onColumnsReorder: ((sourceColumnKey: string, targetColumnKey: string) => void) | undefined | null;
  setPosition: (position: Position) => void;
  shouldFocusGrid: boolean;
  direction: Direction;
  draggedColumnKey: string | undefined;
  setDraggedColumnKey: (draggedColumnKey: string | undefined) => void;
}

function HeaderCell<R, SR>({
  column,
  colSpan,
  rowIdx,
  isCellActive,
  sortDirection,
  priority,
  onSort,
  onColumnResize,
  onColumnResizeEnd,
  onColumnsReorder,
  setPosition,
  shouldFocusGrid,
  direction,
  draggedColumnKey,
  setDraggedColumnKey
}: HeaderCellProps<R, SR>) {
  const [isOver, setIsOver] = useState(false);
  const dragImageRef = useRef<HTMLDivElement>(null);
  const isDragging = draggedColumnKey === column.key;
  const rowSpan = getHeaderCellRowSpan(column, rowIdx);
  // set the tabIndex to 0 when there is no active cell so grid can receive focus
  const { tabIndex, childTabIndex, onFocus } = useRovingTabIndex(shouldFocusGrid || isCellActive);
  const ariaSort =
    sortDirection && !priority ? (sortDirection === 'ASC' ? 'ascending' : 'descending') : undefined;
  const { sortable, resizable, draggable } = column;

  const className = getCellClassname(
    column,
    column.headerCellClass,
    sortable && cellSortableClassname,
    resizable && cellResizableClassname,
    draggable && cellDraggableClassname,
    isDragging && cellDraggingClassname,
    isOver && cellOverClassname
  );

  function handleFocus(event: React.FocusEvent<HTMLDivElement>) {
    onFocus?.(event);
    if (shouldFocusGrid) {
      // Select the first header cell if there is no active cell
      setPosition({ idx: 0, rowIdx });
    }
  }

  function onMouseDown() {
    setPosition({ idx: column.idx, rowIdx });
  }

  function onClick(event: React.MouseEvent<HTMLSpanElement>) {
    if (sortable) {
      onSort(column, event.ctrlKey || event.metaKey);
    }
  }

  function onKeyDown(event: React.KeyboardEvent<HTMLSpanElement>) {
    const { key } = event;
    if (sortable && (key === ' ' || key === 'Enter')) {
      // prevent scrolling
      event.preventDefault();
      onSort(column, event.ctrlKey || event.metaKey);
    } else if (
      resizable &&
      isCtrlKeyHeldDown(event) &&
      (key === 'ArrowLeft' || key === 'ArrowRight')
    ) {
      // prevent navigation
      // TODO: check if we can use `preventDefault` instead
      event.stopPropagation();
      const { width } = event.currentTarget.getBoundingClientRect();
      const { leftKey } = getLeftRightKey(direction);
      const offset = key === leftKey ? -10 : 10;
      const newWidth = clampColumnWidth(width + offset, column);
      if (newWidth !== width) {
        onColumnResize(column, newWidth);
      }
    }
  }

  function onDragStart(event: React.DragEvent<HTMLDivElement>) {
    // need flushSync to make sure the drag image is rendered before the drag starts
    flushSync(() => {
      setDraggedColumnKey(column.key);
    });
    event.dataTransfer.setDragImage(dragImageRef.current!, 0, 0);
    event.dataTransfer.dropEffect = 'move';
  }

  function onDragEnd() {
    setDraggedColumnKey(undefined);
  }

  function onDragOver(event: React.DragEvent<HTMLDivElement>) {
    // prevent default to allow drop
    event.preventDefault();
    event.dataTransfer.dropEffect = 'move';
  }

  function onDrop(event: React.DragEvent<HTMLDivElement>) {
    setIsOver(false);
    // prevent the browser from redirecting in some cases
    event.preventDefault();
    onColumnsReorder?.(draggedColumnKey!, column.key);
  }

  function onDragEnter(event: React.DragEvent<HTMLDivElement>) {
    if (isEventPertinent(event)) {
      setIsOver(true);
    }
  }

  function onDragLeave(event: React.DragEvent<HTMLDivElement>) {
    if (isEventPertinent(event)) {
      setIsOver(false);
    }
  }

  let dragTargetProps: React.ComponentProps<'div'> | undefined;
  let dropTargetProps: React.ComponentProps<'div'> | undefined;
  if (draggable) {
    dragTargetProps = {
      draggable: true,
      onDragStart,
      onDragEnd
    };

    if (draggedColumnKey !== undefined && draggedColumnKey !== column.key) {
      dropTargetProps = {
        onDragOver,
        onDragEnter,
        onDragLeave,
        onDrop
      };
    }
  }

  const style: React.CSSProperties = {
    ...getHeaderCellStyle(column, rowIdx, rowSpan),
    ...getCellStyle(column, colSpan)
  };

  const content = column.renderHeaderCell({
    column,
    sortDirection,
    priority,
    tabIndex: childTabIndex
  });

  return (
    <>
      {isDragging && (
        <div
          ref={dragImageRef}
          style={style}
          className={getCellClassname(column, column.headerCellClass, dragImageClassname)}
        >
          {content}
        </div>
      )}
      <div
        role="columnheader"
        aria-colindex={column.idx + 1}
        aria-colspan={colSpan}
        aria-rowspan={rowSpan}
        aria-selected={isCellActive}
        aria-sort={ariaSort}
        tabIndex={tabIndex}
        className={className}
        style={style}
        onMouseDown={onMouseDown}
        onFocus={handleFocus}
        onClick={onClick}
        onKeyDown={onKeyDown}
        {...dragTargetProps}
        {...dropTargetProps}
      >
        {content}

        {resizable && (
          <ResizeHandle
            direction={direction}
            column={column}
            onColumnResize={onColumnResize}
            onColumnResizeEnd={onColumnResizeEnd}
          />
        )}
      </div>
    </>
  );
}

export default memo(HeaderCell) as <R, SR>(props: HeaderCellProps<R, SR>) => React.JSX.Element;

interface ResizeHandleProps<R, SR> {
  direction: Direction;
  column: CalculatedColumn<R, SR>;
  onColumnResize: (column: CalculatedColumn<R, SR>, width: ResizedWidth) => void;
  onColumnResizeEnd: () => void;
}

function ResizeHandle<R, SR>({
  direction,
  column,
  onColumnResize,
  onColumnResizeEnd
}: ResizeHandleProps<R, SR>) {
  const resizingOffsetRef = useRef<number>(undefined);
  const isRtl = direction === 'rtl';

  function onPointerDown(event: React.PointerEvent<HTMLDivElement>) {
    if (event.pointerType === 'mouse' && event.button !== 0) {
      return;
    }

    // Fix column resizing on a draggable column in FF
    event.preventDefault();

    const { currentTarget, pointerId } = event;
    currentTarget.setPointerCapture(pointerId);
    const headerCell = currentTarget.parentElement!;
    const { right, left } = headerCell.getBoundingClientRect();
    resizingOffsetRef.current = isRtl ? event.clientX - left : right - event.clientX;
  }

  function onPointerMove(event: React.PointerEvent<HTMLDivElement>) {
    const offset = resizingOffsetRef.current;
    if (offset === undefined) return;
    const { width, right, left } = event.currentTarget.parentElement!.getBoundingClientRect();
    let newWidth = isRtl ? right + offset - event.clientX : event.clientX + offset - left;
    newWidth = clampColumnWidth(newWidth, column);
    if (width > 0 && newWidth !== width) {
      onColumnResize(column, newWidth);
    }
  }

  function onLostPointerCapture() {
    onColumnResizeEnd();
    resizingOffsetRef.current = undefined;
  }

  function onDoubleClick() {
    onColumnResize(column, 'max-content');
  }

  return (
    <div
      aria-hidden
      className={resizeHandleClassname}
      onClick={stopPropagation}
      onPointerDown={onPointerDown}
      onPointerMove={onPointerMove}
      // we are not using pointerup because it does not fire in some cases
      // pointer down -> alt+tab -> pointer up over another window -> pointerup event not fired
      onLostPointerCapture={onLostPointerCapture}
      onDoubleClick={onDoubleClick}
    />
  );
}

// only accept pertinent drag events:
// - ignore drag events going from the container to an element inside the container
// - ignore drag events going from an element inside the container to the container
function isEventPertinent(event: React.DragEvent) {
  const relatedTarget = event.relatedTarget as HTMLElement | null;

  return !event.currentTarget.contains(relatedTarget);
}