@bigbinary/neetoui 8.3.17 → 8.3.18

package/dist/cjs/Table.js

@@ -22,7 +22,7 @@ var useQueryParams = require('./useQueryParams-l5fJJYCR.js');
 var Button = require('./Button.js');
 var Callout = require('./Callout.js');
 var Typography = require('./Typography.js');
-var useRestoreScrollPosition = require('./useRestoreScrollPosition-Ck_b0Nh4.js');
+var useRestoreScrollPosition = require('./useRestoreScrollPosition-ByQwrqTS.js');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var Popover = require('./Popover.js');
 var reactResizable = require('react-resizable');
@@ -208,6 +208,7 @@ var TitleWithInfoIcon = function TitleWithInfoIcon(_ref) {
     style: "body2"
   }, description))));
 };
+var TitleWithInfoIcon$1 = /*#__PURE__*/React.memo(TitleWithInfoIcon);
 
 var _excluded$4 = ["children", "isSortable", "isAddEnabled", "sortedInfo", "onSort", "isHidable", "isDeletable", "isFixedColumn", "isColumnFreezeEnabled", "onColumnHide", "onAddColumn", "onColumnDelete", "onColumnFreeze", "onMoreActionClick", "column", "moreActions"];
 var CellContent = function CellContent(_ref) {
@@ -262,6 +263,7 @@ var CellContent = function CellContent(_ref) {
     isHidable: isColumnHidable
   })));
 };
+var CellContent$1 = /*#__PURE__*/React.memo(CellContent);
 
 var _excluded$3 = ["onResize", "width", "onResizeStop", "className"];
 var HeaderCell = function HeaderCell(props) {
@@ -271,7 +273,7 @@ var HeaderCell = function HeaderCell(props) {
     className = props.className,
     restProps = _objectWithoutProperties(props, _excluded$3);
   if (!width) {
-    return /*#__PURE__*/React.createElement(CellContent, _extends({}, restProps, {
+    return /*#__PURE__*/React.createElement(CellContent$1, _extends({}, restProps, {
       className: classnames(className, "drag-handler")
     }));
   }
@@ -292,10 +294,11 @@ var HeaderCell = function HeaderCell(props) {
     onResizeStart: function onResizeStart(e) {
       e.preventDefault();
     }
-  }, /*#__PURE__*/React.createElement(CellContent, _extends({}, restProps, {
+  }, /*#__PURE__*/React.createElement(CellContent$1, _extends({}, restProps, {
     className: classnames(className, "drag-handler")
   })));
 };
+var HeaderCell$1 = /*#__PURE__*/React.memo(HeaderCell);
 
 var _excluded$2 = ["onResize", "width", "onResizeStop", "onResizeStart"];
 var ResizableHeaderCell = function ResizableHeaderCell(props) {
@@ -309,7 +312,7 @@ var ResizableHeaderCell = function ResizableHeaderCell(props) {
     isResizing = _useState2[0],
     setIsResizing = _useState2[1];
   if (!width) {
-    return /*#__PURE__*/React.createElement(CellContent, restProps);
+    return /*#__PURE__*/React.createElement(CellContent$1, restProps);
   }
   return /*#__PURE__*/React.createElement(reactResizable.Resizable, _defineProperty({
     onResize: onResize,
@@ -337,14 +340,15 @@ var ResizableHeaderCell = function ResizableHeaderCell(props) {
   }, "onResizeStop", function onResizeStop(e, data) {
     setIsResizing(false);
     _onResizeStop === null || _onResizeStop === void 0 || _onResizeStop(e, data);
-  }), /*#__PURE__*/React.createElement(CellContent, restProps));
+  }), /*#__PURE__*/React.createElement(CellContent$1, restProps));
 };
+var ResizableHeaderCell$1 = /*#__PURE__*/React.memo(ResizableHeaderCell);
 
 var _excluded$1 = ["className"];
 var ReorderableHeaderCell = function ReorderableHeaderCell(_ref) {
   var className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded$1);
-  return /*#__PURE__*/React.createElement(CellContent, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(CellContent$1, _extends({}, props, {
     className: classnames(className, "drag-handler")
   }));
 };
@@ -364,16 +368,16 @@ var getHeaderCell = function getHeaderCell(_ref) {
   var enableColumnResize = _ref.enableColumnResize,
     enableColumnReorder = _ref.enableColumnReorder;
   if (enableColumnReorder && enableColumnResize) return {
-    cell: HeaderCell
+    cell: HeaderCell$1
   };
   if (enableColumnResize) return {
-    cell: ResizableHeaderCell
+    cell: ResizableHeaderCell$1
   };
   if (enableColumnReorder) return {
     cell: ReorderableHeaderCell
   };
   return {
-    cell: CellContent
+    cell: CellContent$1
   };
 };
 var isIncludedIn = function isIncludedIn(array1, array2) {
@@ -425,6 +429,11 @@ var getSortField = function getSortField(field) {
   }
   return neetoCist.camelToSnakeCase(field);
 };
+var calculateRowsPerPage = function calculateRowsPerPage() {
+  var viewportHeight = window.innerHeight;
+  var rowsPerPage = Math.floor((viewportHeight - useRestoreScrollPosition.TABLE_PAGINATION_HEIGHT) / useRestoreScrollPosition.TABLE_ROW_HEIGHT * 3);
+  return Math.ceil(rowsPerPage / 10) * 10;
+};
 
 function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -490,7 +499,7 @@ var useResizableColumns = function useResizableColumns(_ref) {
         sortOrder: getColumnSortOrder(col, sortedInfo),
         fixed: fixed,
         title: col.description ? function (props) {
-          return /*#__PURE__*/React.createElement(TitleWithInfoIcon, _extends({}, props, {
+          return /*#__PURE__*/React.createElement(TitleWithInfoIcon$1, _extends({}, props, {
             description: col.description,
             title: col.title
           }));
@@ -590,6 +599,63 @@ var useColumns = function useColumns(_ref) {
   };
 };
 
+var useScroll = function useScroll(_ref) {
+  var fixedHeight = _ref.fixedHeight,
+    enableColumnReorder = _ref.enableColumnReorder,
+    loading = _ref.loading,
+    otherProps = _ref.otherProps,
+    rowData = _ref.rowData,
+    pageSize = _ref.pageSize,
+    shouldShowSelectAllRowsCallout = _ref.shouldShowSelectAllRowsCallout,
+    shouldShowAllRowsSelectedCallout = _ref.shouldShowAllRowsSelectedCallout,
+    headerHeight = _ref.headerHeight;
+  var _useState = React.useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    containerHeight = _useState2[0],
+    setContainerHeight = _useState2[1];
+  var resizeObserver = React.useRef(new ResizeObserver(function (_ref2) {
+    var _ref3 = _slicedToArray(_ref2, 1),
+      entry = _ref3[0];
+    return setContainerHeight(entry.contentRect.height);
+  }));
+  var scrollRef = React.useRef(null);
+  var tableRef = React.useCallback(function (table) {
+    scrollRef.current = table;
+    if (!fixedHeight) return;
+    var observer = resizeObserver.current;
+    if (table !== null) {
+      var _table$parentNode;
+      var targetNode = enableColumnReorder ? table === null || table === void 0 || (_table$parentNode = table.parentNode) === null || _table$parentNode === void 0 ? void 0 : _table$parentNode.parentNode : table === null || table === void 0 ? void 0 : table.parentNode;
+      observer.observe(targetNode);
+    } else if (observer) {
+      observer.disconnect();
+    }
+  }, [resizeObserver.current, fixedHeight, enableColumnReorder]);
+  var _useRestoreScrollPosi = useRestoreScrollPosition.useRestoreScrollPosition({
+      tableRef: tableRef,
+      scrollRef: scrollRef,
+      loading: loading
+    }),
+    handleScroll = _useRestoreScrollPosi.handleScroll;
+  var calculateTableContainerHeight = function calculateTableContainerHeight() {
+    var isPaginationVisible = otherProps.pagination !== false && rowData.length > pageSize;
+    var selectAllRowsCalloutHeight = 0;
+    if (shouldShowSelectAllRowsCallout || shouldShowAllRowsSelectedCallout) {
+      selectAllRowsCalloutHeight = getSelectAllRowsCalloutHeight();
+    }
+    return containerHeight - headerHeight - (isPaginationVisible ? useRestoreScrollPosition.TABLE_PAGINATION_HEIGHT : 0) - selectAllRowsCalloutHeight;
+  };
+  return {
+    tableRef: tableRef,
+    tableContainerRef: null,
+    handleScroll: handleScroll,
+    calculatedScroll: {
+      x: "max-content",
+      y: calculateTableContainerHeight()
+    }
+  };
+};
+
 var useTableSort = function useTableSort() {
   var queryParams = useQueryParams.useQueryParams();
   var _useState = React.useState(function () {
@@ -618,12 +684,58 @@ var useTableSort = function useTableSort() {
   };
 };
 
-var _excluded = ["allowRowClick", "enableColumnResize", "enableColumnReorder", "enableColumnFreeze", "enableAddColumn", "className", "columnData", "currentPageNumber", "defaultPageSize", "handlePageChange", "loading", "onRowClick", "onRowSelect", "rowData", "totalCount", "selectedRowKeys", "fixedHeight", "paginationProps", "rowKey", "scroll", "rowSelection", "shouldDynamicallyRenderRowSize", "bordered", "onColumnUpdate", "components", "onColumnHide", "onColumnAdd", "onColumnDelete", "onChange", "onMoreActionClick", "bulkSelectAllRowsProps", "localStorageKeyPrefix"];
+var useVirtualScroll = function useVirtualScroll(_ref) {
+  var otherProps = _ref.otherProps,
+    rowData = _ref.rowData,
+    pageSize = _ref.pageSize,
+    shouldShowSelectAllRowsCallout = _ref.shouldShowSelectAllRowsCallout,
+    shouldShowAllRowsSelectedCallout = _ref.shouldShowAllRowsSelectedCallout,
+    headerHeight = _ref.headerHeight;
+  var _useState = React.useState({
+      top: 0,
+      left: 0
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    containerRect = _useState2[0],
+    setContainerRect = _useState2[1];
+  var tableContainerRef = React.useRef(null);
+  React.useEffect(function () {
+    var updateContainerRect = function updateContainerRect() {
+      if (!tableContainerRef.current) return;
+      var rect = tableContainerRef.current.getBoundingClientRect();
+      setContainerRect(rect);
+    };
+    updateContainerRect();
+    window.addEventListener("scroll", updateContainerRect);
+    window.addEventListener("resize", updateContainerRect);
+    return function () {
+      window.removeEventListener("scroll", updateContainerRect);
+      window.removeEventListener("resize", updateContainerRect);
+    };
+  }, []);
+  var calculateTableContainerHeight = function calculateTableContainerHeight() {
+    var isPaginationVisible = otherProps.pagination !== false && rowData.length > pageSize;
+    var selectAllRowsCalloutHeight = 0;
+    if (shouldShowSelectAllRowsCallout || shouldShowAllRowsSelectedCallout) {
+      selectAllRowsCalloutHeight = getSelectAllRowsCalloutHeight();
+    }
+    var containerHeight = window.innerHeight - containerRect.top;
+    return containerHeight - headerHeight - (isPaginationVisible ? useRestoreScrollPosition.TABLE_PAGINATION_HEIGHT : 0) - selectAllRowsCalloutHeight;
+  };
+  return {
+    tableRef: null,
+    tableContainerRef: tableContainerRef,
+    handleScroll: neetoCist.noop,
+    calculatedScroll: {
+      x: window.innerWidth - (containerRect === null || containerRect === void 0 ? void 0 : containerRect.left),
+      y: calculateTableContainerHeight()
+    }
+  };
+};
+
+var _excluded = ["allowRowClick", "enableColumnResize", "enableColumnReorder", "enableColumnFreeze", "enableAddColumn", "className", "columnData", "currentPageNumber", "defaultPageSize", "handlePageChange", "loading", "onRowClick", "onRowSelect", "rowData", "totalCount", "selectedRowKeys", "fixedHeight", "paginationProps", "rowKey", "scroll", "rowSelection", "shouldDynamicallyRenderRowSize", "bordered", "onColumnUpdate", "components", "onColumnHide", "onColumnAdd", "onColumnDelete", "onChange", "onMoreActionClick", "bulkSelectAllRowsProps", "localStorageKeyPrefix", "virtual"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var TABLE_PAGINATION_HEIGHT = 64;
-var TABLE_DEFAULT_HEADER_HEIGHT = 40;
-var TABLE_ROW_HEIGHT = 52;
 var Table = function Table(_ref) {
   var _ref$allowRowClick = _ref.allowRowClick,
     allowRowClick = _ref$allowRowClick === void 0 ? true : _ref$allowRowClick,
@@ -679,29 +791,27 @@ var Table = function Table(_ref) {
     onMoreActionClick = _ref.onMoreActionClick,
     bulkSelectAllRowsProps = _ref.bulkSelectAllRowsProps,
     localStorageKeyPrefix = _ref.localStorageKeyPrefix,
+    _ref$virtual = _ref.virtual,
+    virtual = _ref$virtual === void 0 ? false : _ref$virtual,
     otherProps = _objectWithoutProperties(_ref, _excluded);
   var _useTranslation = reactI18next.useTranslation(),
     i18n = _useTranslation.i18n;
-  var _useState = React.useState(null),
+  var _useState = React.useState(useRestoreScrollPosition.TABLE_DEFAULT_HEADER_HEIGHT),
     _useState2 = _slicedToArray(_useState, 2),
-    containerHeight = _useState2[0],
-    setContainerHeight = _useState2[1];
-  var _useState3 = React.useState(TABLE_DEFAULT_HEADER_HEIGHT),
+    headerHeight = _useState2[0],
+    setHeaderHeight = _useState2[1];
+  var _useState3 = React.useState(columnData),
     _useState4 = _slicedToArray(_useState3, 2),
-    headerHeight = _useState4[0],
-    setHeaderHeight = _useState4[1];
-  var _useState5 = React.useState(columnData),
+    columns = _useState4[0],
+    setColumns = _useState4[1];
+  var _useState5 = React.useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    columns = _useState6[0],
-    setColumns = _useState6[1];
-  var _useState7 = React.useState(false),
+    bulkSelectedAllRows = _useState6[0],
+    setBulkSelectedAllRows = _useState6[1];
+  var _useState7 = React.useState({}),
     _useState8 = _slicedToArray(_useState7, 2),
-    bulkSelectedAllRows = _useState8[0],
-    setBulkSelectedAllRows = _useState8[1];
-  var _useState9 = React.useState({}),
-    _useState10 = _slicedToArray(_useState9, 2),
-    columnChanges = _useState10[0],
-    setColumnChanges = _useState10[1];
+    columnChanges = _useState8[0],
+    setColumnChanges = _useState8[1];
   var _useTableSort = useTableSort(),
     handleTableSortChange = _useTableSort.handleTableChange,
     sortedInfo = _useTableSort.sortedInfo,
@@ -712,32 +822,8 @@ var Table = function Table(_ref) {
   var history = reactRouterDom.useHistory();
   var headerRef = React.useRef();
   var tableOnChangeProps = React.useRef({});
-  var resizeObserver = React.useRef(new ResizeObserver(function (_ref3) {
-    var _ref4 = _slicedToArray(_ref3, 1),
-      entry = _ref4[0];
-    return setContainerHeight(entry.contentRect.height);
-  }));
-  var scrollRef = React.useRef(null);
-  var tableRef = React.useCallback(function (table) {
-    scrollRef.current = table;
-    if (!fixedHeight) return;
-    var observer = resizeObserver.current;
-    if (table !== null) {
-      var _table$parentNode;
-      var targetNode = enableColumnReorder ? table === null || table === void 0 || (_table$parentNode = table.parentNode) === null || _table$parentNode === void 0 ? void 0 : _table$parentNode.parentNode : table === null || table === void 0 ? void 0 : table.parentNode;
-      observer.observe(targetNode);
-    } else if (observer) {
-      observer.disconnect();
-    }
-  }, [resizeObserver.current, fixedHeight, enableColumnReorder]);
-  var _useRestoreScrollPosi = useRestoreScrollPosition.useRestoreScrollPosition({
-      tableRef: tableRef,
-      scrollRef: scrollRef,
-      loading: loading
-    }),
-    handleScroll = _useRestoreScrollPosi.handleScroll;
   useTimeout(function () {
-    var headerHeight = headerRef.current ? headerRef.current.offsetHeight : TABLE_DEFAULT_HEADER_HEIGHT;
+    var headerHeight = headerRef.current ? headerRef.current.offsetHeight : useRestoreScrollPosition.TABLE_DEFAULT_HEADER_HEIGHT;
     setHeaderHeight(headerHeight);
   }, 10);
   var handleColumnUpdateWithChanges = function handleColumnUpdateWithChanges(updatedColumns) {
@@ -802,6 +888,22 @@ var Table = function Table(_ref) {
   }, [selectedRowKeys, rowKey, rowData, totalCount, bulkSelectedAllRows]);
   var shouldShowSelectAllRowsCallout = bulkSelectAllRowsProps && showBulkSelectionCallout;
   var shouldShowAllRowsSelectedCallout = bulkSelectAllRowsProps && bulkSelectedAllRows;
+  var pageSize = shouldDynamicallyRenderRowSize ? calculateRowsPerPage() : paginationProps.pageSize || defaultPageSize;
+  var _ref3 = (virtual ? useVirtualScroll : useScroll)({
+      fixedHeight: fixedHeight,
+      enableColumnReorder: enableColumnReorder,
+      loading: loading,
+      otherProps: otherProps,
+      rowData: rowData,
+      pageSize: pageSize,
+      shouldShowSelectAllRowsCallout: shouldShowSelectAllRowsCallout,
+      shouldShowAllRowsSelectedCallout: shouldShowAllRowsSelectedCallout,
+      headerHeight: headerHeight
+    }),
+    tableRef = _ref3.tableRef,
+    tableContainerRef = _ref3.tableContainerRef,
+    handleScroll = _ref3.handleScroll,
+    calculatedScroll = _ref3.calculatedScroll;
   var handleRowChange = function handleRowChange(selectedRowKeys, selectedRows) {
     var tableWrapper = document.querySelector('[data-testid="table-wrapper"]');
     if (selectedRowKeys.length !== defaultPageSize) {
@@ -815,7 +917,8 @@ var Table = function Table(_ref) {
   };
   var rowSelectionProps = rowSelection ? _objectSpread(_objectSpread({
     type: "checkbox",
-    preserveSelectedRowKeys: true
+    preserveSelectedRowKeys: true,
+    columnWidth: 48
   }, rowSelection), {}, {
     onChange: handleRowChange,
     selectedRowKeys: selectedRowKeys
@@ -837,20 +940,6 @@ var Table = function Table(_ref) {
       enableColumnReorder: enableColumnReorder
     })
   });
-  var calculateRowsPerPage = function calculateRowsPerPage() {
-    var viewportHeight = window.innerHeight;
-    var rowsPerPage = Math.floor((viewportHeight - TABLE_PAGINATION_HEIGHT) / TABLE_ROW_HEIGHT * 3);
-    return Math.ceil(rowsPerPage / 10) * 10;
-  };
-  var pageSize = shouldDynamicallyRenderRowSize ? calculateRowsPerPage() : paginationProps.pageSize || defaultPageSize;
-  var calculateTableContainerHeight = function calculateTableContainerHeight() {
-    var isPaginationVisible = otherProps.pagination !== false && rowData.length > pageSize;
-    var selectAllRowsCalloutHeight = 0;
-    if (shouldShowSelectAllRowsCallout || shouldShowAllRowsSelectedCallout) {
-      selectAllRowsCalloutHeight = getSelectAllRowsCalloutHeight();
-    }
-    return containerHeight - headerHeight - (isPaginationVisible ? TABLE_PAGINATION_HEIGHT : 0) - selectAllRowsCalloutHeight;
-  };
   var calculatePageSizeOptions = function calculatePageSizeOptions() {
     return neetoCist.dynamicArray(5, function (index) {
       return (index + 1) * pageSize;
@@ -961,6 +1050,7 @@ var Table = function Table(_ref) {
       bordered: bordered,
       locale: locale,
       rowKey: rowKey,
+      virtual: virtual,
       columns: sortedColumns,
       components: componentOverrides,
       dataSource: rowData,
@@ -970,6 +1060,7 @@ var Table = function Table(_ref) {
       },
       ref: tableRef,
       rowSelection: rowSelectionProps,
+      scroll: _objectSpread(_objectSpread({}, calculatedScroll), scroll),
       showSorterTooltip: false,
       pagination: _objectSpread(_objectSpread({
         hideOnSinglePage: true
@@ -985,10 +1076,6 @@ var Table = function Table(_ref) {
       rowClassName: classnames("neeto-ui-table--row", {
         "neeto-ui-table--row_hover": allowRowClick
       }, [className]),
-      scroll: _objectSpread({
-        x: "max-content",
-        y: calculateTableContainerHeight()
-      }, scroll),
       onChange: handleTableChange,
       onScroll: handleScroll,
       onHeaderRow: function onHeaderRow() {
@@ -1009,7 +1096,12 @@ var Table = function Table(_ref) {
       }
     }, otherProps)));
   };
-  return enableColumnReorder ? /*#__PURE__*/React.createElement(ReactDragListView.DragColumn, dragProps, renderTable()) : renderTable();
+  var renderTableVirtual = function renderTableVirtual() {
+    return virtual ? /*#__PURE__*/React.createElement("div", {
+      ref: tableContainerRef
+    }, renderTable()) : renderTable();
+  };
+  return enableColumnReorder ? /*#__PURE__*/React.createElement(ReactDragListView.DragColumn, dragProps, renderTableVirtual()) : renderTableVirtual();
 };
 
 module.exports = Table;