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

React DataTable component based on Rtdui components

'use client';
import { jsxs, jsx } from 'react/jsx-runtime';
import clsx from 'clsx';
import { useDrop } from 'react-dnd';
import { CloseButton } from '@rtdui/core';

function GroupDropArea(props) {
  const { table, enableGrouping, className } = props;
  const { getState } = table;
  const { grouping } = getState();
  const [, dropRef] = useDrop({
    accept: "column",
    canDrop(item, monitor) {
      return enableGrouping;
    },
    drop: (item) => {
      item.toggleGrouping();
    }
  });
  const handleCloseClick = (columnId) => {
    const column = table.getColumn(columnId);
    column.toggleGrouping();
  };
  return enableGrouping ? /* @__PURE__ */ jsxs(
    "div",
    {
      ref: dropRef,
      className: clsx("w-full h-full flex items-center gap-1", className),
      children: [
        grouping.map((columnId) => {
          return /* @__PURE__ */ jsxs(
            "div",
            {
              className: "rounded-full bg-base-200 flex items-center pl-3 pr-1 mr-1",
              children: [
                columnId,
                /* @__PURE__ */ jsx(CloseButton, { size: "xs", onClick: () => handleCloseClick(columnId) })
              ]
            },
            columnId
          );
        }),
        /* @__PURE__ */ jsx("div", { className: "flex-1", children: "\u62D6\u62C9\u5217\u5934\u5230\u6B64\u8FDB\u884C\u5206\u7EC4" })
      ]
    }
  ) : null;
}

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