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

es-grid-template

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _sortable = require("@dnd-kit/sortable");
var _react = _interopRequireDefault(require("react"));
var _useContext = require("../useContext");
var _TableHeadCell = _interopRequireDefault(require("./TableHeadCell"));
const TableHeadRow = ({
  table,
  headerGroup,
  columnVirtualizer
}) => {
  const {
    prefix,
    onRowHeaderStyles
  } = _react.default.useContext(_useContext.TableContext);
  const columnOrder = table.getState().columnOrder;
  const rowStyles = typeof onRowHeaderStyles === 'function' ? onRowHeaderStyles() : onRowHeaderStyles;
  return /*#__PURE__*/_react.default.createElement("div", {
    key: headerGroup.id
    // ref={el => {
    //   if (el) rowHeaderVirtualizer.measureElement(el)
    // }}
    ,

    "data-index": headerGroup.id,
    className: `${prefix}-grid-row ${prefix}-grid-header`,
    style: {
      ...rowStyles,
      width: '100%'
    }
  }, /*#__PURE__*/_react.default.createElement(_sortable.SortableContext, {
    items: columnOrder,
    strategy: _sortable.horizontalListSortingStrategy
  }, headerGroup.headers.map(header => {
    const columnRelativeDepth = header.depth - header.column.depth;
    if (columnRelativeDepth > 1) {
      return null;
    }
    let rowSpan = 1;
    if (header.isPlaceholder) {
      const leafs = header.getLeafHeaders();
      rowSpan = leafs[leafs.length - 1].depth - header.depth;
    }
    return /*#__PURE__*/_react.default.createElement(_TableHeadCell.default, {
      key: header.id,
      header: header,
      table: table,
      columnVirtualizer: columnVirtualizer,
      colSpan: header.colSpan,
      rowSpan: rowSpan
    });
  })));
};
var _default = exports.default = TableHeadRow;