@purpurds/table 8.3.1 → 8.4.0

package/src/table-column-header-cell.tsx

@@ -1,4 +1,6 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useRef } from "react";
+import { type UniqueIdentifier } from "@dnd-kit/core";
+import { useSortable } from "@dnd-kit/sortable";
 import { Button } from "@purpurds/button";
 import { Checkbox, type CheckedState } from "@purpurds/checkbox";
 import { IconArrowDown } from "@purpurds/icon/arrow-down";
@@ -18,9 +20,15 @@ import {
 } from "@tanstack/react-table";
 import c from "classnames/bind";
 
+import { DragIndicatorCircle } from "./drag-indicator-circle";
 import styles from "./table.module.scss";
+import { TableColumnDragHandle, useDragHandle } from "./use-drag-handle.hook";
+import { useDragIndicatorPosition } from "./use-drag-indicator-position.hook";
+import { useDropIndicator } from "./use-drop-indicator.hook";
+import { useElementVisibility } from "./use-element-visibility.hook";
 import useTruncatedTooltip from "./use-truncated-hook";
 import { pxToRemString } from "./utils/unit-conversions";
+
 const cx = c.bind(styles);
 
 export type SortingEnabledProps = {
@@ -33,6 +41,16 @@ export type SortingDisabledProps = {
   sortingAriaLabels?: never;
 };
 
+export type ColumnDragEnabledProps = {
+  enableColumnDrag: true;
+  columnDragAriaLabel: string;
+};
+
+export type ColumnDragDisabledProps = {
+  enableColumnDrag?: false;
+  columnDragAriaLabel?: never;
+};
+
 export type TableColumnHeaderCellProps<TData> = {
   className?: string;
   stickyColumn: boolean;
@@ -41,7 +59,12 @@ export type TableColumnHeaderCellProps<TData> = {
   tanstackTable: Table<TData>;
   isScrolled?: boolean;
   showBorder?: boolean;
-} & (SortingEnabledProps | SortingDisabledProps);
+  sortableId?: string;
+  activeId?: UniqueIdentifier | null;
+  overlayActive?: boolean;
+  tableHasFilters: boolean;
+} & (SortingEnabledProps | SortingDisabledProps) &
+  (ColumnDragEnabledProps | ColumnDragDisabledProps);
 
 export type SortingAriaLabels = {
   desc: string;
@@ -63,35 +86,35 @@ export const TableColumnHeaderCell = <TData extends RowData>({
   tanstackTable,
   isScrolled,
   showBorder,
+  enableColumnDrag,
+  sortableId,
+  activeId,
+  overlayActive,
+  columnDragAriaLabel,
+  tableHasFilters,
 }: TableColumnHeaderCellProps<TData>) => {
+  const headerRef = useRef<HTMLTableCellElement | null>(null);
+
+  const { attributes, listeners, setNodeRef, isSorting } = useSortable({
+    id: sortableId || header.id,
+    disabled: !enableColumnDrag || activeId !== null,
+  });
+
+  const { mouseDownActive, handleMouseDown } = useDragHandle();
+  const isActiveColumn = activeId === header.id || sortableId === activeId;
+  const draggingActive = (overlayActive || isSorting || mouseDownActive) && isActiveColumn;
+  const isCheckBox = header.column.id === "row-selection" || header.id === "row-selection";
+  const isRadiobutton = header.column.id === "row-radio" || header.id === "row-radio";
   const canSort = enableSorting && header.column.getCanSort();
-  const hasFilter = header.column.getCanFilter();
-  const isCheckBox = header.column.columnDef.meta?.cellType === "rowSelection";
-  const isRadiobutton = header.column.columnDef.meta?.cellType === "rowToggle";
-  const [isVisible, setIsVisible] = useState(false);
-  const elementRef = useRef<HTMLTableCellElement>(null);
-
-  useEffect(() => {
-    const currentElement = elementRef.current;
-    if (!currentElement) {
-      return;
-    }
+  const hasFilter = header.column.columnDef.meta?.filterVariant !== undefined && tableHasFilters;
 
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        setIsVisible(entry.isIntersecting);
-      },
-      { threshold: 1 }
-    );
-
-    observer.observe(currentElement);
+  const dropIndicatorPosition = useDropIndicator({
+    itemId: header.id,
+    sortableId,
+    enableDrag: !!enableColumnDrag,
+  });
 
-    return () => {
-      if (currentElement) {
-        observer.unobserve(currentElement);
-      }
-    };
-  }, []);
+  const isVisible = useElementVisibility(headerRef, 1);
 
   const getSortingDirection = (sortingDirection: SortDirection | false) => {
     switch (sortingDirection) {
@@ -116,47 +139,95 @@ export const TableColumnHeaderCell = <TData extends RowData>({
       ? `${header.column.columnDef.header}`
       : undefined;
 
+  const setRefs = (node: HTMLTableCellElement | null) => {
+    headerRef.current = node;
+    if (setNodeRef) {
+      setNodeRef(node);
+    }
+  };
+
+  const circleIndicatorPosition = useDragIndicatorPosition({
+    elementRef: headerRef,
+    dropIndicatorPosition,
+  });
+
   return (
-    <th
-      ref={elementRef}
-      className={cx(className, rootClassName, {
-        [`${rootClassName}__checkbox`]: isCheckBox,
-        [`${rootClassName}__sticky-column`]: stickyColumn,
-        [`${rootClassName}__sticky-header`]: stickyHeaders,
-        [`${rootClassName}__sticky-column__with-sticky-border`]: isScrolled && showBorder,
-        [`${rootClassName}__first-header-visible`]: isFirstColumn && isVisible,
-        [`${rootClassName}__last-header-visible`]: isLastColumn && isVisible,
-        [`${rootClassName}__border-radius-first-cell`]: isFirstColumn,
-        [`${rootClassName}__border-radius-last-cell`]: isLastColumn,
-      })}
-      style={{
-        // If column resizing is enabled Don't use column.getSize() on every header and every data cell. Instead, calculate all column widths once upfront, memoized! https://tanstack.com/table/latest/docs/guide/column-sizing#column-sizing-guide
-        maxWidth: widthInRemString,
-        minWidth: widthInRemString,
-      }}
-      scope="col"
-      aria-sort={getSortingDirection(header.column.getIsSorted())}
-      aria-label={ariaLabel}
-    >
-      <div className={cx(`${rootClassName}__content`)}>
-        <div className={cx(`${rootClassName}__title`)}>
-          <HeaderContent
-            header={header}
-            tanstackTable={tanstackTable}
-            canSort={canSort}
-            isCheckBox={isCheckBox}
-            isRadiobutton={isRadiobutton}
-            sortingAriaLabels={sortingAriaLabels}
+    <>
+      {circleIndicatorPosition && (
+        <DragIndicatorCircle
+          top={circleIndicatorPosition.top}
+          left={circleIndicatorPosition.left}
+          container={circleIndicatorPosition.container}
+        />
+      )}
+      <th
+        ref={setRefs}
+        className={cx(className, rootClassName, {
+          [`${rootClassName}__checkbox`]: isCheckBox,
+          [`${rootClassName}__sticky-column`]: stickyColumn,
+          [`${rootClassName}__sticky-header`]: stickyHeaders,
+          [`${rootClassName}__sticky-column__with-sticky-border`]: isScrolled && showBorder,
+          [`${rootClassName}__first-header-visible`]: isFirstColumn && isVisible,
+          [`${rootClassName}__last-header-visible`]: isLastColumn && isVisible,
+          [`${rootClassName}__border-radius-first-cell`]: isFirstColumn && !overlayActive,
+          [`${rootClassName}__border-radius-last-cell`]: isLastColumn && !overlayActive,
+          [`${rootClassName}__draggable`]: enableColumnDrag,
+          [`${rootClassName}__column-drag-enabled`]: enableColumnDrag,
+          [`${rootClassName}__dragging`]: draggingActive && !overlayActive,
+          [`${rootClassName}--drop-indicator-before`]: dropIndicatorPosition === "before",
+          [`${rootClassName}--drop-indicator-after`]: dropIndicatorPosition === "after",
+        })}
+        style={{
+          width: isCheckBox || isRadiobutton ? widthInRemString : undefined,
+        }}
+        scope="col"
+        aria-sort={getSortingDirection(header.column.getIsSorted())}
+        aria-label={ariaLabel}
+        {...(enableColumnDrag
+          ? { ...attributes, ...listeners, id: `header-${sortableId || header.id}` }
+          : {})}
+      >
+        {enableColumnDrag && (
+          <TableColumnDragHandle
+            onMouseDown={handleMouseDown}
+            overlayActive={overlayActive}
+            isFirstColumn={isFirstColumn}
+            isLastColumn={isLastColumn}
+            columnDragAriaLabel={columnDragAriaLabel}
           />
-        </div>
+        )}
 
-        {hasFilter && !isCheckBox && (
-          <div className={cx(`${rootClassName}__filter-wrapper`)}>
-            <Filter header={header} />
+        <div
+          className={cx(`${rootClassName}__inner`)}
+          style={{
+            maxWidth: widthInRemString,
+            minWidth: widthInRemString,
+          }}
+        >
+          <div className={cx(`${rootClassName}__content`)}>
+            <div className={cx(`${rootClassName}__title`)}>
+              <HeaderContent
+                header={header}
+                tanstackTable={tanstackTable}
+                canSort={canSort}
+                isCheckBox={isCheckBox}
+                isRadiobutton={isRadiobutton}
+                sortingAriaLabels={sortingAriaLabels}
+              />
+            </div>
+            {hasFilter && !isCheckBox && (
+              <div className={cx(`${rootClassName}__filter-wrapper`)}>
+                <Filter header={header} />
+              </div>
+            )}
+            {/* Placeholder element for columns without filters when table has filters. Its only used within the drag overlay */}
+            {tableHasFilters && !hasFilter && !isCheckBox && !isRadiobutton && overlayActive && (
+              <div className={cx(`${rootClassName}__filter-placeholder`)}></div>
+            )}
           </div>
-        )}
-      </div>
-    </th>
+        </div>
+      </th>
+    </>
   );
 };