@rtdui/datatable/cjs/DataTable/GroupDropArea.cjs

React DataTable component based on Rtdui components

'use client';
'use strict';

var jsxRuntime = require('react/jsx-runtime');
var clsx = require('clsx');
var reactDnd = require('react-dnd');
var core = require('@rtdui/core');

function GroupDropArea(props) {
  const { table, enableGrouping, className } = props;
  const { getState } = table;
  const { grouping } = getState();
  const [, dropRef] = reactDnd.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__ */ jsxRuntime.jsxs(
    "div",
    {
      ref: dropRef,
      className: clsx("w-full h-full flex items-center gap-1", className),
      children: [
        grouping.map((columnId) => {
          return /* @__PURE__ */ jsxRuntime.jsxs(
            "div",
            {
              className: "rounded-full bg-base-200 flex items-center pl-3 pr-1 mr-1",
              children: [
                columnId,
                /* @__PURE__ */ jsxRuntime.jsx(core.CloseButton, { size: "xs", onClick: () => handleCloseClick(columnId) })
              ]
            },
            columnId
          );
        }),
        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: "\u62D6\u62C9\u5217\u5934\u5230\u6B64\u8FDB\u884C\u5206\u7EC4" })
      ]
    }
  ) : null;
}

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