@netdata/netdata-ui/dist/components/table/body/row.js

netdata UI kit

"use strict";

exports.__esModule = true;
exports["default"] = void 0;
var _react = _interopRequireWildcard(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _flex = _interopRequireDefault(require("../../templates/flex"));
var _theme = require("../../../theme");
var _provider = require("../provider");
var _excluded = ["disableClickRow", "onClickRow", "row", "table", "testPrefix", "testPrefixCallback", "zIndex", "onHoverCell", "renderSubComponent", "GroupRow"];
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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 && {}.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; }
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; }
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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
var CellGroup = function CellGroup(_ref) {
  var cell = _ref.cell,
    row = _ref.row,
    header = _ref.header,
    testPrefix = _ref.testPrefix,
    coloredSortedColumn = _ref.coloredSortedColumn;
  var column = cell.column;
  var tableMeta = (0, _react.useMemo)(function () {
    return typeof column.columnDef.tableMeta === "function" ? column.columnDef.tableMeta({}, column, row.index) : column.columnDef.tableMeta;
  }, [column.columnDef.tableMeta, column, row.index]);
  var meta = (0, _react.useMemo)(function () {
    return typeof column.columnDef.meta === "function" ? column.columnDef.meta({}, column, row.index) : column.columnDef.meta;
  }, [column.columnDef.meta, column, row.index]);
  var cellStyles = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, (tableMeta == null ? void 0 : tableMeta.styles) || {}), (meta == null ? void 0 : meta.styles) || {}), (tableMeta == null ? void 0 : tableMeta.cellStyles) || {}), (meta == null ? void 0 : meta.cellStyles) || {});
  return /*#__PURE__*/_react["default"].createElement(_flex["default"], _extends({
    flex: !column.columnDef.fullWidth && (column.columnDef.notFlex || column.getCanResize()) ? false : header.colSpan,
    width: column.getSize() + "px",
    position: "relative",
    "data-testid": "netdata-table-cell-" + cell.column.columnDef.id + testPrefix,
    overflow: "hidden"
  }, cell.column.getCanSort() && coloredSortedColumn && !!cell.column.getIsSorted() && {
    background: "columnHighlight",
    backgroundOpacity: row.index % 2 === 0 ? "0.2" : "0.4"
  }, {
    padding: [1.5, 2]
  }, cellStyles), /*#__PURE__*/_react["default"].createElement(_flex["default"], {
    flex: true,
    width: "100%",
    alignItems: cell.column.columnDef.align || "start"
  }, /*#__PURE__*/_react["default"].createElement(cell.column.columnDef.cell, cell.getContext())));
};
var rerenderSelector = function rerenderSelector(state) {
  var _state$allColumns;
  return {
    sizing: state.columnSizing,
    expanded: state.expanded,
    columnVisibility: state.columnVisibility,
    selectedRows: state.selectedRows,
    allColumns: (_state$allColumns = state.allColumns) == null ? void 0 : _state$allColumns.length
  };
};
var StyledRow = (0, _styledComponents["default"])(_flex["default"]).withConfig({
  displayName: "row__StyledRow",
  componentId: "sc-ucur4d-0"
})(["&:hover .row-content{background:", ";}"], (0, _theme.getColor)("tableRowBgHover"));
var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
  var _row$original;
  var disableClickRow = _ref2.disableClickRow,
    onClickRow = _ref2.onClickRow,
    row = _ref2.row,
    table = _ref2.table,
    testPrefix = _ref2.testPrefix,
    testPrefixCallback = _ref2.testPrefixCallback,
    zIndex = _ref2.zIndex,
    onHoverCell = _ref2.onHoverCell,
    renderSubComponent = _ref2.renderSubComponent,
    GroupRow = _ref2.GroupRow,
    rest = _objectWithoutPropertiesLoose(_ref2, _excluded);
  var _useTableState = (0, _provider.useTableState)(rerenderSelector),
    columnVisibility = _useTableState.columnVisibility;
  var leftHeaders = (0, _react.useMemo)(function () {
    return table.getLeftLeafHeaders();
  }, [table, columnVisibility]);
  var centerHeaders = (0, _react.useMemo)(function () {
    return table.getCenterLeafHeaders();
  }, [table, columnVisibility]);
  var rightHeaders = (0, _react.useMemo)(function () {
    return table.getRightLeafHeaders();
  }, [table, columnVisibility]);
  var isClickable = (0, _react.useMemo)(function () {
    if (typeof onClickRow !== "function") return false;
    return disableClickRow ? !disableClickRow({
      data: row.original,
      table: table,
      fullRow: row
    }) : true;
  }, [row, onClickRow]);
  return /*#__PURE__*/_react["default"].createElement(StyledRow, {
    "data-testid": "netdata-table-row" + testPrefix + (testPrefixCallback ? "-" + testPrefixCallback(row.original) : ""),
    "data-id": ((_row$original = row.original) == null ? void 0 : _row$original.id) || row.id,
    onClick: (0, _react.useCallback)(function (e) {
      e.stopPropagation();
      if (row.getCanExpand()) {
        row.getToggleExpandedHandler()(e);
      } else if (isClickable) {
        onClickRow({
          data: row.original,
          table: table,
          fullRow: row
        }, e);
      }
      setTimeout(function () {
        var _e$target;
        return e == null || (_e$target = e.target) == null || _e$target.scrollIntoView == null ? void 0 : _e$target.scrollIntoView({
          behavior: "auto",
          block: "nearest"
        });
      });
    }, [isClickable, row, onClickRow]),
    cursor: isClickable ? "pointer" : "default",
    onMouseEnter: function onMouseEnter() {
      return onHoverCell == null ? void 0 : onHoverCell({
        row: row.index
      });
    },
    onMouseLeave: function onMouseLeave() {
      return onHoverCell == null ? void 0 : onHoverCell({
        row: null
      });
    },
    flex: true,
    column: true,
    background: "tableRowBg",
    _hover: {
      background: "tableRowBgHover"
    },
    border: {
      side: "bottom"
    }
  }, !!GroupRow && !!row.original.isGroup ? /*#__PURE__*/_react["default"].createElement(GroupRow, _extends({
    row: row
  }, row.original)) : /*#__PURE__*/_react["default"].createElement(_flex["default"], {
    flex: true
  }, !!row.getLeftVisibleCells().length && /*#__PURE__*/_react["default"].createElement(_flex["default"], {
    position: "sticky",
    left: 0,
    border: {
      side: "right"
    },
    zIndex: zIndex || 10,
    basis: table.getLeftTotalSize() + "px",
    flex: false,
    background: "tableRowBg",
    _hover: {
      background: "tableRowBgHover"
    },
    className: "row-content"
  }, row.getLeftVisibleCells().map(function (cell, index) {
    return /*#__PURE__*/_react["default"].createElement(CellGroup, _extends({
      cell: cell,
      row: row,
      key: cell.id,
      testPrefix: testPrefix,
      header: leftHeaders[index]
    }, rest));
  })), /*#__PURE__*/_react["default"].createElement(_flex["default"], {
    width: table.getCenterTotalSize() + "px",
    flex: "grow",
    background: "tableRowBg",
    _hover: {
      background: "tableRowBgHover"
    },
    className: "row-content"
  }, /*#__PURE__*/_react["default"].createElement(_flex["default"], {
    flex: true
  }, row.getCenterVisibleCells().map(function (cell, index) {
    return /*#__PURE__*/_react["default"].createElement(CellGroup, _extends({
      cell: cell,
      row: row,
      key: cell.id,
      testPrefix: testPrefix,
      header: centerHeaders[index]
    }, rest));
  }))), !!row.getRightVisibleCells().length && /*#__PURE__*/_react["default"].createElement(_flex["default"], {
    position: "sticky",
    right: 0,
    border: {
      side: "left"
    },
    zIndex: zIndex || 10,
    basis: table.getRightTotalSize() + "px",
    flex: false,
    background: "tableRowBg",
    _hover: {
      background: "tableRowBgHover"
    },
    rowReverse: true,
    className: "row-content"
  }, row.getRightVisibleCells().map(function (cell, index) {
    return /*#__PURE__*/_react["default"].createElement(CellGroup, _extends({
      cell: cell,
      row: row,
      key: cell.id,
      testPrefix: testPrefix,
      header: rightHeaders[index]
    }, rest));
  }))), renderSubComponent && row.getIsExpanded() && !row.getIsGrouped() && /*#__PURE__*/_react["default"].createElement(_flex["default"], {
    flex: true,
    "data-testid": "netdata-table-sub-row" + testPrefix + (testPrefixCallback ? "-" + testPrefixCallback(row.original) : ""),
    onClick: function onClick(e) {
      return e.stopPropagation();
    }
  }, renderSubComponent({
    data: row.original,
    table: table,
    fullRow: row
  })));
});