@netdata/netdata-ui/dist/es6/components/table/body/header/index.js

netdata UI kit

var _excluded = ["id", "headers", "testPrefix", "rowReverse"],
  _excluded2 = ["groups", "size", "side", "flex"],
  _excluded3 = ["table", "testPrefix"];
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
import React, { memo } from "react";
import Flex from "../../../templates/flex";
import { useTableState } from "../../provider";
import Cell from "./cell";
var rerenderSelector = function rerenderSelector(state) {
  return {
    sizing: state.columnSizing,
    expanded: state.expanded,
    columnVisibility: state.columnVisibility,
    selectedRows: state.selectedRows,
    grouping: state.grouping
  };
};
var _HeaderGroup = function HeaderGroup(_ref) {
  var id = _ref.id,
    headers = _ref.headers,
    testPrefix = _ref.testPrefix,
    rowReverse = _ref.rowReverse,
    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
  return /*#__PURE__*/React.createElement(Flex, {
    id: id,
    "data-testid": "netdata-table-headRow" + testPrefix,
    flex: true,
    background: "tableRowBg2",
    rowReverse: rowReverse
  }, headers.map(function (header, index) {
    return /*#__PURE__*/React.createElement(Cell, _extends({
      key: header.id,
      index: index
    }, rest, {
      header: header,
      testPrefix: testPrefix,
      hasSubheaders: !!header.subHeaders.length
    }), !!header.subHeaders.length && /*#__PURE__*/React.createElement(_HeaderGroup, _extends({
      headers: header.subHeaders,
      id: header.id,
      key: header.id
    }, rest, {
      isSubheader: true
    })));
  }));
};
var HeaderGroups = function HeaderGroups(_ref2) {
  var groups = _ref2.groups,
    size = _ref2.size,
    side = _ref2.side,
    _ref2$flex = _ref2.flex,
    flex = _ref2$flex === void 0 ? "grow" : _ref2$flex,
    rest = _objectWithoutPropertiesLoose(_ref2, _excluded2);
  if (!groups[0].headers.length) return null;
  return /*#__PURE__*/React.createElement(Flex, _extends({
    position: side ? "sticky" : "relative"
  }, side === "right" ? {
    right: 0,
    border: {
      side: "left"
    }
  } : {
    left: 0,
    border: {
      side: "right"
    }
  }, {
    zIndex: side ? 11 : undefined,
    width: size + "px",
    flex: flex,
    column: true
  }), /*#__PURE__*/React.createElement(_HeaderGroup, _extends({
    headers: groups[0].headers,
    id: groups[0].id,
    key: groups[0].id
  }, rest)));
};
var BodyHeader = /*#__PURE__*/memo(function (_ref3) {
  var table = _ref3.table,
    testPrefix = _ref3.testPrefix,
    rest = _objectWithoutPropertiesLoose(_ref3, _excluded3);
  useTableState(rerenderSelector);
  return /*#__PURE__*/React.createElement(Flex, {
    "data-testid": "netdata-table-head" + testPrefix,
    flex: true,
    border: {
      size: "1px",
      type: "solid",
      side: "bottom",
      color: "border"
    }
  }, /*#__PURE__*/React.createElement(HeaderGroups, _extends({
    groups: table.getLeftHeaderGroups(),
    side: "left",
    size: table.getLeftTotalSize(),
    testPrefix: testPrefix
  }, rest, {
    flex: false,
    table: table
  })), /*#__PURE__*/React.createElement(HeaderGroups, _extends({
    groups: table.getCenterHeaderGroups(),
    size: table.getCenterTotalSize(),
    testPrefix: testPrefix
  }, rest, {
    table: table
  })), /*#__PURE__*/React.createElement(HeaderGroups, _extends({
    groups: table.getRightHeaderGroups(),
    side: "right",
    size: table.getRightTotalSize(),
    testPrefix: testPrefix
  }, rest, {
    flex: false,
    table: table,
    rowReverse: true
  })));
});
export default BodyHeader;