@netdata/netdata-ui
Version:
netdata UI kit
202 lines (201 loc) • 9.01 kB
JavaScript
"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 _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
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); }
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 = _extends({}, (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);
(0, _provider.useTableState)(rerenderSelector);
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: table.getLeftLeafHeaders()[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: table.getCenterLeafHeaders()[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: table.getRightLeafHeaders()[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
})));
});