@rtdui/datatable/cjs/DataTable/HeaderCell.cjs

React DataTable component based on Rtdui components

'use client';
'use strict';

var jsxRuntime = require('react/jsx-runtime');
var clsx = require('clsx');
var iconsReact = require('@tabler/icons-react');
var reactTable = require('@tanstack/react-table');
var reactDnd = require('react-dnd');
var shouldElevation = require('./utils/shouldElevation.cjs');
var shouldIgnoreSticky = require('./utils/shouldIgnoreSticky.cjs');
var reorderColumn = require('./utils/reorderColumn.cjs');
var FilterEditor = require('./FilterEditor.cjs');

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] = reactDnd.useDrag({
    collect: (monitor) => ({
      isDragging: monitor.isDragging()
    }),
    canDrag: (moniter) => {
      return canDragDrop;
    },
    item: () => column,
    type: "column"
  });
  const [{ isOver, isRight }, dropRef] = reactDnd.useDrop({
    accept: "column",
    drop: (item) => {
      const newColumnOrder = reorderColumn.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.shouldIgnoreSticky(header);
  return /* @__PURE__ */ jsxRuntime.jsxs(
    "th",
    {
      ref: dropRef,
      className: clsx({
        // 只有最后一个冻结列应用突起样式
        elevation: shouldElevation.shouldElevation(table, column, scrollingTrigger) && !shouldIgnoreSticky.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
          showHeader && /* @__PURE__ */ jsxRuntime.jsxs(
            "div",
            {
              ref: dragRef,
              className: clsx(
                "select-none flex items-center justify-center relative",
                {
                  "cursor-pointer": canDragDrop
                }
              ),
              onClick: column.getToggleSortingHandler(),
              children: [
                reactTable.flexRender(column.columnDef.header, header.getContext()),
                {
                  asc: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-info flex items-center ml-1", children: [
                    /* @__PURE__ */ jsxRuntime.jsx(
                      iconsReact.IconTriangleFilled,
                      {
                        size: 10,
                        className: "inline fill-info"
                      }
                    ),
                    table.getState().sorting.length > 1 && column.getSortIndex() >= 0 && /* @__PURE__ */ jsxRuntime.jsx("sub", { children: column.getSortIndex() + 1 })
                  ] }),
                  desc: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-info flex items-center ml-1", children: [
                    /* @__PURE__ */ jsxRuntime.jsx(
                      iconsReact.IconTriangleInvertedFilled,
                      {
                        size: 10,
                        className: "inline fill-info"
                      }
                    ),
                    table.getState().sorting.length > 1 && column.getSortIndex() >= 0 && /* @__PURE__ */ jsxRuntime.jsx("sub", { children: column.getSortIndex() + 1 })
                  ] })
                }[column.getIsSorted()] ?? null
              ]
            }
          ),
          column.getCanFilter() && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
            FilterEditor.FilterEditor,
            {
              column,
              table,
              debouncedWait
            }
          ) })
        ] }),
        enableColumnResizing && /* @__PURE__ */ jsxRuntime.jsx(
          "div",
          {
            onMouseDown: header.getResizeHandler(),
            onTouchStart: header.getResizeHandler(),
            className: clsx("resizer", column.getIsResizing() && "resizing")
          }
        )
      ]
    }
  );
}

exports.HeaderCell = HeaderCell;
//# sourceMappingURL=HeaderCell.cjs.map