es-grid-template/lib/table-component/header/TableHead.js

es-grid-template

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _useContext = require("../useContext");
var _TableHeadCell = _interopRequireDefault(require("./TableHeadCell2"));
var _TableHeadGroupCell = _interopRequireDefault(require("./TableHeadGroupCell"));
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const TableHead = ({
  columnVirtualizer,
  table
}) => {
  const {
    prefix,
    onRowHeaderStyles
  } = (0, _react.useContext)(_useContext.TableContext);
  const headerGroups = table.getFlatHeaders();
  const leafColumns = table.getVisibleFlatColumns();
  const headerDepth = table.getHeaderGroups().length;
  const rowStyles = typeof onRowHeaderStyles === 'function' ? onRowHeaderStyles() : onRowHeaderStyles;
  return /*#__PURE__*/_react.default.createElement("div", {
    className: `${prefix}-grid-thead`,
    style: {
      ...rowStyles,
      display: 'grid',
      position: 'sticky',
      top: 0,
      zIndex: 1,
      gridTemplateColumns: `${table.getVisibleLeafColumns().map(n => `${n.getSize()}fr`).join(" ")}`
    }
  }, leafColumns.map(column => {
    const depth = column.depth ?? 0;

    // const colSpan = column.columns.length || 1;
    const colSpan = column.getFlatColumns().filter(col => col.getIsVisible() && col.columns.length < 1).length;
    // const colSpan = getVisibleChildCount(column);

    const rowSpan = column.columns?.length > 0 ? 1 : headerDepth - depth;
    const header = headerGroups.find(it => it.id === column.id || it.column.id === column.id && it.subHeaders.length > 0);
    // const groupHeader = headerGroups.find((it) => it.column.id === column.id && it.subHeaders.length >= 2)

    if (header?.subHeaders && header.subHeaders.length >= 2) {
      return /*#__PURE__*/_react.default.createElement(_TableHeadGroupCell.default, {
        key: column.id,
        depth: depth,
        column: column,
        header: header,
        table: table,
        columnVirtualizer: columnVirtualizer,
        colSpan: colSpan,
        rowSpan: rowSpan
      });
    } else {
      return /*#__PURE__*/_react.default.createElement(_TableHeadCell.default, {
        key: column.id,
        depth: depth,
        column: column,
        header: header,
        table: table,
        columnVirtualizer: columnVirtualizer
        // rowHeaderVirtualizer={rowHeaderVirtualizer}
        ,
        colSpan: colSpan,
        rowSpan: rowSpan
      });
    }

    // if (header) {
    //   return (
    //     <TableHeadCell2
    //       key={column.id}
    //       depth={depth}
    //       column={column}
    //       header={header as any}
    //       table={table}
    //       columnVirtualizer={columnVirtualizer}
    //       // rowHeaderVirtualizer={rowHeaderVirtualizer}
    //       colSpan={colSpan}
    //       rowSpan={rowSpan}
    //     />
    //   )
    // }

    // return (
    //   <div
    //     key={col.id}
    //     className="th p-2 border font-bold flex items-center justify-center"
    //     style={{
    //       // width: col.getSize(),
    //       minWidth: col.getSize(),
    //       gridRow: `${depth + 1} / span ${rowSpan}`,

    //       gridColumn: `span ${colSpan}`,
    //     }}
    //   >
    //     aaaaa
    //     {/* {flexRender(col.columnDef.header, header.getContext())} */}
    //   </div>
    // );
  }));
};
var _default = exports.default = TableHead;