@rtdui/datatable/esm/DataTable/HeaderCell.mjs

React DataTable component based on Rtdui components

'use client';
import { jsxs, jsx } from 'react/jsx-runtime';
import clsx from 'clsx';
import { IconTriangleFilled, IconTriangleInvertedFilled } from '@tabler/icons-react';
import { flexRender } from '@tanstack/react-table';
import { useDrag, useDrop } from 'react-dnd';
import { shouldElevation } from './utils/shouldElevation.mjs';
import { shouldIgnoreSticky } from './utils/shouldIgnoreSticky.mjs';
import { reorderColumn } from './utils/reorderColumn.mjs';
import { FilterEditor } from './FilterEditor.mjs';

function HeaderCell(props) {
  const {
    header,
    table,
    enableColumnReorder,
    enableColumnResizing,
    showHeader,
    debouncedWait,
    scrollingTrigger
  } = props;
  const { getState, setColumnOrder } = table;
  const { columnOrder } = getState();
  const { column } = header;
  const canDragDrop = enableColumnReorder && !header.isPlaceholder && !column.getIsPinned() && column.columns.length === 0;
  const [{ isDragging }, dragRef, previewRef] = useDrag({
    collect: (monitor) => ({
      isDragging: monitor.isDragging()
    }),
    canDrag: (moniter) => {
      return canDragDrop;
    },
    item: () => column,
    type: "column"
  });
  const [{ isOver, isRight }, dropRef] = useDrop({
    accept: "column",
    drop: (item) => {
      const newColumnOrder = reorderColumn(item.id, column.id, columnOrder);
      setColumnOrder(newColumnOrder);
    },
    canDrop: (item, monitor) => {
      return canDragDrop;
    },
    collect: (monitor) => ({
      isOver: monitor.isOver(),
      isRight: (monitor.getDifferenceFromInitialOffset()?.x ?? 0) > 0
    })
  });
  const isSticky = column.getIsPinned() && !shouldIgnoreSticky(header);
  return /* @__PURE__ */ jsxs(
    "th",
    {
      ref: dropRef,
      className: clsx({
        // 只有最后一个冻结列应用突起样式
        elevation: shouldElevation(table, column, scrollingTrigger) && !shouldIgnoreSticky(header),
        "opacity-50": isDragging,
        placeholder: header.isPlaceholder,
        "py-px": !showHeader
      }),
      colSpan: header.colSpan > 1 ? header.colSpan : void 0,
      style: {
        transform: isOver ? `translateX(${isRight ? -4 : 4}px)` : void 0,
        // width: header.getSize(),
        position: isSticky ? "sticky" : "relative",
        left: isSticky ? header.getStart("left") : void 0,
        zIndex: isSticky ? 1 : void 0
      },
      children: [
        header.isPlaceholder ? null : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
          showHeader && /* @__PURE__ */ jsxs(
            "div",
            {
              ref: dragRef,
              className: clsx(
                "select-none flex items-center justify-center relative",
                {
                  "cursor-pointer": canDragDrop
                }
              ),
              onClick: column.getToggleSortingHandler(),
              children: [
                flexRender(column.columnDef.header, header.getContext()),
                {
                  asc: /* @__PURE__ */ jsxs("span", { className: "text-info flex items-center ml-1", children: [
                    /* @__PURE__ */ jsx(
                      IconTriangleFilled,
                      {
                        size: 10,
                        className: "inline fill-info"
                      }
                    ),
                    table.getState().sorting.length > 1 && column.getSortIndex() >= 0 && /* @__PURE__ */ jsx("sub", { children: column.getSortIndex() + 1 })
                  ] }),
                  desc: /* @__PURE__ */ jsxs("span", { className: "text-info flex items-center ml-1", children: [
                    /* @__PURE__ */ jsx(
                      IconTriangleInvertedFilled,
                      {
                        size: 10,
                        className: "inline fill-info"
                      }
                    ),
                    table.getState().sorting.length > 1 && column.getSortIndex() >= 0 && /* @__PURE__ */ jsx("sub", { children: column.getSortIndex() + 1 })
                  ] })
                }[column.getIsSorted()] ?? null
              ]
            }
          ),
          column.getCanFilter() && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
            FilterEditor,
            {
              column,
              table,
              debouncedWait
            }
          ) })
        ] }),
        enableColumnResizing && /* @__PURE__ */ jsx(
          "div",
          {
            onMouseDown: header.getResizeHandler(),
            onTouchStart: header.getResizeHandler(),
            className: clsx("resizer", column.getIsResizing() && "resizing")
          }
        )
      ]
    }
  );
}

export { HeaderCell };
//# sourceMappingURL=HeaderCell.mjs.map