@bigbinary/neetoui 8.3.17 → 8.3.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/DatePicker.js +2 -2
- package/dist/Table.js +166 -74
- package/dist/Table.js.map +1 -1
- package/dist/TimePicker.js +2 -2
- package/dist/cjs/DatePicker.js +2 -2
- package/dist/cjs/Table.js +167 -75
- package/dist/cjs/Table.js.map +1 -1
- package/dist/cjs/TimePicker.js +2 -2
- package/dist/cjs/{index-CieE5GK9.js → index-Be_yfDyM.js} +2 -2
- package/dist/cjs/{index-CieE5GK9.js.map → index-Be_yfDyM.js.map} +1 -1
- package/dist/cjs/index.js +2 -2
- package/dist/cjs/{useRestoreScrollPosition-Ck_b0Nh4.js → useRestoreScrollPosition-ByQwrqTS.js} +9 -2
- package/dist/cjs/useRestoreScrollPosition-ByQwrqTS.js.map +1 -0
- package/dist/{index-ffKXwGCh.js → index-DqcLcdQ2.js} +2 -2
- package/dist/{index-ffKXwGCh.js.map → index-DqcLcdQ2.js.map} +1 -1
- package/dist/index.js +2 -2
- package/dist/{useRestoreScrollPosition-B3J6xSHt.js → useRestoreScrollPosition-9jPpcAT1.js} +6 -2
- package/dist/useRestoreScrollPosition-9jPpcAT1.js.map +1 -0
- package/package.json +1 -1
- package/types/Table.d.ts +1 -0
- package/dist/cjs/useRestoreScrollPosition-Ck_b0Nh4.js.map +0 -1
- package/dist/useRestoreScrollPosition-B3J6xSHt.js.map +0 -1
package/dist/DatePicker.js
CHANGED
|
@@ -26,7 +26,7 @@ import 'react-i18next';
|
|
|
26
26
|
import './useRecentlyUsedColors-CJe4G0Xs.js';
|
|
27
27
|
import './Dropdown.js';
|
|
28
28
|
import './index-BCP3m_SF.js';
|
|
29
|
-
export { D as default } from './index-
|
|
29
|
+
export { D as default } from './index-DqcLcdQ2.js';
|
|
30
30
|
import './Input.js';
|
|
31
31
|
import './Label.js';
|
|
32
32
|
import './MultiEmailInput.js';
|
|
@@ -62,7 +62,7 @@ import './Switch.js';
|
|
|
62
62
|
import './Tab.js';
|
|
63
63
|
import 'antd/lib/table';
|
|
64
64
|
import 'react-drag-listview';
|
|
65
|
-
import './useRestoreScrollPosition-
|
|
65
|
+
import './useRestoreScrollPosition-9jPpcAT1.js';
|
|
66
66
|
import 'react-resizable';
|
|
67
67
|
import './Tag.js';
|
|
68
68
|
import './Toastr.js';
|
package/dist/Table.js
CHANGED
|
@@ -20,7 +20,7 @@ import { u as useQueryParams } from './useQueryParams-b60CHFUx.js';
|
|
|
20
20
|
import Button from './Button.js';
|
|
21
21
|
import Callout from './Callout.js';
|
|
22
22
|
import Typography from './Typography.js';
|
|
23
|
-
import { T as TABLE_SORT_ORDERS, U as URL_SORT_ORDERS, H as HeaderCellMenu, C as COLUMN_FIXED_VALUES, S as SELECT_ALL_ROWS_CALLOUT_MOBILE_HEIGHT,
|
|
23
|
+
import { T as TABLE_SORT_ORDERS, U as URL_SORT_ORDERS, H as HeaderCellMenu, a as TABLE_PAGINATION_HEIGHT, b as TABLE_ROW_HEIGHT, C as COLUMN_FIXED_VALUES, S as SELECT_ALL_ROWS_CALLOUT_MOBILE_HEIGHT, c as SELECT_ALL_ROWS_CALLOUT_DESKTOP_HEIGHT, u as useRestoreScrollPosition, d as TABLE_DEFAULT_HEADER_HEIGHT } from './useRestoreScrollPosition-9jPpcAT1.js';
|
|
24
24
|
import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
|
|
25
25
|
import Popover from './Popover.js';
|
|
26
26
|
import { Resizable } from 'react-resizable';
|
|
@@ -206,6 +206,7 @@ var TitleWithInfoIcon = function TitleWithInfoIcon(_ref) {
|
|
|
206
206
|
style: "body2"
|
|
207
207
|
}, description))));
|
|
208
208
|
};
|
|
209
|
+
var TitleWithInfoIcon$1 = /*#__PURE__*/React__default.memo(TitleWithInfoIcon);
|
|
209
210
|
|
|
210
211
|
var _excluded$4 = ["children", "isSortable", "isAddEnabled", "sortedInfo", "onSort", "isHidable", "isDeletable", "isFixedColumn", "isColumnFreezeEnabled", "onColumnHide", "onAddColumn", "onColumnDelete", "onColumnFreeze", "onMoreActionClick", "column", "moreActions"];
|
|
211
212
|
var CellContent = function CellContent(_ref) {
|
|
@@ -260,6 +261,7 @@ var CellContent = function CellContent(_ref) {
|
|
|
260
261
|
isHidable: isColumnHidable
|
|
261
262
|
})));
|
|
262
263
|
};
|
|
264
|
+
var CellContent$1 = /*#__PURE__*/React__default.memo(CellContent);
|
|
263
265
|
|
|
264
266
|
var _excluded$3 = ["onResize", "width", "onResizeStop", "className"];
|
|
265
267
|
var HeaderCell = function HeaderCell(props) {
|
|
@@ -269,7 +271,7 @@ var HeaderCell = function HeaderCell(props) {
|
|
|
269
271
|
className = props.className,
|
|
270
272
|
restProps = _objectWithoutProperties(props, _excluded$3);
|
|
271
273
|
if (!width) {
|
|
272
|
-
return /*#__PURE__*/React__default.createElement(CellContent, _extends({}, restProps, {
|
|
274
|
+
return /*#__PURE__*/React__default.createElement(CellContent$1, _extends({}, restProps, {
|
|
273
275
|
className: classnames(className, "drag-handler")
|
|
274
276
|
}));
|
|
275
277
|
}
|
|
@@ -290,10 +292,11 @@ var HeaderCell = function HeaderCell(props) {
|
|
|
290
292
|
onResizeStart: function onResizeStart(e) {
|
|
291
293
|
e.preventDefault();
|
|
292
294
|
}
|
|
293
|
-
}, /*#__PURE__*/React__default.createElement(CellContent, _extends({}, restProps, {
|
|
295
|
+
}, /*#__PURE__*/React__default.createElement(CellContent$1, _extends({}, restProps, {
|
|
294
296
|
className: classnames(className, "drag-handler")
|
|
295
297
|
})));
|
|
296
298
|
};
|
|
299
|
+
var HeaderCell$1 = /*#__PURE__*/React__default.memo(HeaderCell);
|
|
297
300
|
|
|
298
301
|
var _excluded$2 = ["onResize", "width", "onResizeStop", "onResizeStart"];
|
|
299
302
|
var ResizableHeaderCell = function ResizableHeaderCell(props) {
|
|
@@ -307,7 +310,7 @@ var ResizableHeaderCell = function ResizableHeaderCell(props) {
|
|
|
307
310
|
isResizing = _useState2[0],
|
|
308
311
|
setIsResizing = _useState2[1];
|
|
309
312
|
if (!width) {
|
|
310
|
-
return /*#__PURE__*/React__default.createElement(CellContent, restProps);
|
|
313
|
+
return /*#__PURE__*/React__default.createElement(CellContent$1, restProps);
|
|
311
314
|
}
|
|
312
315
|
return /*#__PURE__*/React__default.createElement(Resizable, _defineProperty({
|
|
313
316
|
onResize: onResize,
|
|
@@ -335,14 +338,15 @@ var ResizableHeaderCell = function ResizableHeaderCell(props) {
|
|
|
335
338
|
}, "onResizeStop", function onResizeStop(e, data) {
|
|
336
339
|
setIsResizing(false);
|
|
337
340
|
_onResizeStop === null || _onResizeStop === void 0 || _onResizeStop(e, data);
|
|
338
|
-
}), /*#__PURE__*/React__default.createElement(CellContent, restProps));
|
|
341
|
+
}), /*#__PURE__*/React__default.createElement(CellContent$1, restProps));
|
|
339
342
|
};
|
|
343
|
+
var ResizableHeaderCell$1 = /*#__PURE__*/React__default.memo(ResizableHeaderCell);
|
|
340
344
|
|
|
341
345
|
var _excluded$1 = ["className"];
|
|
342
346
|
var ReorderableHeaderCell = function ReorderableHeaderCell(_ref) {
|
|
343
347
|
var className = _ref.className,
|
|
344
348
|
props = _objectWithoutProperties(_ref, _excluded$1);
|
|
345
|
-
return /*#__PURE__*/React__default.createElement(CellContent, _extends({}, props, {
|
|
349
|
+
return /*#__PURE__*/React__default.createElement(CellContent$1, _extends({}, props, {
|
|
346
350
|
className: classnames(className, "drag-handler")
|
|
347
351
|
}));
|
|
348
352
|
};
|
|
@@ -362,16 +366,16 @@ var getHeaderCell = function getHeaderCell(_ref) {
|
|
|
362
366
|
var enableColumnResize = _ref.enableColumnResize,
|
|
363
367
|
enableColumnReorder = _ref.enableColumnReorder;
|
|
364
368
|
if (enableColumnReorder && enableColumnResize) return {
|
|
365
|
-
cell: HeaderCell
|
|
369
|
+
cell: HeaderCell$1
|
|
366
370
|
};
|
|
367
371
|
if (enableColumnResize) return {
|
|
368
|
-
cell: ResizableHeaderCell
|
|
372
|
+
cell: ResizableHeaderCell$1
|
|
369
373
|
};
|
|
370
374
|
if (enableColumnReorder) return {
|
|
371
375
|
cell: ReorderableHeaderCell
|
|
372
376
|
};
|
|
373
377
|
return {
|
|
374
|
-
cell: CellContent
|
|
378
|
+
cell: CellContent$1
|
|
375
379
|
};
|
|
376
380
|
};
|
|
377
381
|
var isIncludedIn = function isIncludedIn(array1, array2) {
|
|
@@ -423,6 +427,11 @@ var getSortField = function getSortField(field) {
|
|
|
423
427
|
}
|
|
424
428
|
return camelToSnakeCase(field);
|
|
425
429
|
};
|
|
430
|
+
var calculateRowsPerPage = function calculateRowsPerPage() {
|
|
431
|
+
var viewportHeight = window.innerHeight;
|
|
432
|
+
var rowsPerPage = Math.floor((viewportHeight - TABLE_PAGINATION_HEIGHT) / TABLE_ROW_HEIGHT * 3);
|
|
433
|
+
return Math.ceil(rowsPerPage / 10) * 10;
|
|
434
|
+
};
|
|
426
435
|
|
|
427
436
|
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; }
|
|
428
437
|
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; }
|
|
@@ -488,7 +497,7 @@ var useResizableColumns = function useResizableColumns(_ref) {
|
|
|
488
497
|
sortOrder: getColumnSortOrder(col, sortedInfo),
|
|
489
498
|
fixed: fixed,
|
|
490
499
|
title: col.description ? function (props) {
|
|
491
|
-
return /*#__PURE__*/React__default.createElement(TitleWithInfoIcon, _extends({}, props, {
|
|
500
|
+
return /*#__PURE__*/React__default.createElement(TitleWithInfoIcon$1, _extends({}, props, {
|
|
492
501
|
description: col.description,
|
|
493
502
|
title: col.title
|
|
494
503
|
}));
|
|
@@ -588,6 +597,63 @@ var useColumns = function useColumns(_ref) {
|
|
|
588
597
|
};
|
|
589
598
|
};
|
|
590
599
|
|
|
600
|
+
var useScroll = function useScroll(_ref) {
|
|
601
|
+
var fixedHeight = _ref.fixedHeight,
|
|
602
|
+
enableColumnReorder = _ref.enableColumnReorder,
|
|
603
|
+
loading = _ref.loading,
|
|
604
|
+
otherProps = _ref.otherProps,
|
|
605
|
+
rowData = _ref.rowData,
|
|
606
|
+
pageSize = _ref.pageSize,
|
|
607
|
+
shouldShowSelectAllRowsCallout = _ref.shouldShowSelectAllRowsCallout,
|
|
608
|
+
shouldShowAllRowsSelectedCallout = _ref.shouldShowAllRowsSelectedCallout,
|
|
609
|
+
headerHeight = _ref.headerHeight;
|
|
610
|
+
var _useState = useState(0),
|
|
611
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
612
|
+
containerHeight = _useState2[0],
|
|
613
|
+
setContainerHeight = _useState2[1];
|
|
614
|
+
var resizeObserver = useRef(new ResizeObserver(function (_ref2) {
|
|
615
|
+
var _ref3 = _slicedToArray(_ref2, 1),
|
|
616
|
+
entry = _ref3[0];
|
|
617
|
+
return setContainerHeight(entry.contentRect.height);
|
|
618
|
+
}));
|
|
619
|
+
var scrollRef = useRef(null);
|
|
620
|
+
var tableRef = useCallback(function (table) {
|
|
621
|
+
scrollRef.current = table;
|
|
622
|
+
if (!fixedHeight) return;
|
|
623
|
+
var observer = resizeObserver.current;
|
|
624
|
+
if (table !== null) {
|
|
625
|
+
var _table$parentNode;
|
|
626
|
+
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;
|
|
627
|
+
observer.observe(targetNode);
|
|
628
|
+
} else if (observer) {
|
|
629
|
+
observer.disconnect();
|
|
630
|
+
}
|
|
631
|
+
}, [resizeObserver.current, fixedHeight, enableColumnReorder]);
|
|
632
|
+
var _useRestoreScrollPosi = useRestoreScrollPosition({
|
|
633
|
+
tableRef: tableRef,
|
|
634
|
+
scrollRef: scrollRef,
|
|
635
|
+
loading: loading
|
|
636
|
+
}),
|
|
637
|
+
handleScroll = _useRestoreScrollPosi.handleScroll;
|
|
638
|
+
var calculateTableContainerHeight = function calculateTableContainerHeight() {
|
|
639
|
+
var isPaginationVisible = otherProps.pagination !== false && rowData.length > pageSize;
|
|
640
|
+
var selectAllRowsCalloutHeight = 0;
|
|
641
|
+
if (shouldShowSelectAllRowsCallout || shouldShowAllRowsSelectedCallout) {
|
|
642
|
+
selectAllRowsCalloutHeight = getSelectAllRowsCalloutHeight();
|
|
643
|
+
}
|
|
644
|
+
return containerHeight - headerHeight - (isPaginationVisible ? TABLE_PAGINATION_HEIGHT : 0) - selectAllRowsCalloutHeight;
|
|
645
|
+
};
|
|
646
|
+
return {
|
|
647
|
+
tableRef: tableRef,
|
|
648
|
+
tableContainerRef: null,
|
|
649
|
+
handleScroll: handleScroll,
|
|
650
|
+
calculatedScroll: {
|
|
651
|
+
x: "max-content",
|
|
652
|
+
y: calculateTableContainerHeight()
|
|
653
|
+
}
|
|
654
|
+
};
|
|
655
|
+
};
|
|
656
|
+
|
|
591
657
|
var useTableSort = function useTableSort() {
|
|
592
658
|
var queryParams = useQueryParams();
|
|
593
659
|
var _useState = useState(function () {
|
|
@@ -616,12 +682,58 @@ var useTableSort = function useTableSort() {
|
|
|
616
682
|
};
|
|
617
683
|
};
|
|
618
684
|
|
|
619
|
-
var
|
|
685
|
+
var useVirtualScroll = function useVirtualScroll(_ref) {
|
|
686
|
+
var otherProps = _ref.otherProps,
|
|
687
|
+
rowData = _ref.rowData,
|
|
688
|
+
pageSize = _ref.pageSize,
|
|
689
|
+
shouldShowSelectAllRowsCallout = _ref.shouldShowSelectAllRowsCallout,
|
|
690
|
+
shouldShowAllRowsSelectedCallout = _ref.shouldShowAllRowsSelectedCallout,
|
|
691
|
+
headerHeight = _ref.headerHeight;
|
|
692
|
+
var _useState = useState({
|
|
693
|
+
top: 0,
|
|
694
|
+
left: 0
|
|
695
|
+
}),
|
|
696
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
697
|
+
containerRect = _useState2[0],
|
|
698
|
+
setContainerRect = _useState2[1];
|
|
699
|
+
var tableContainerRef = useRef(null);
|
|
700
|
+
useEffect(function () {
|
|
701
|
+
var updateContainerRect = function updateContainerRect() {
|
|
702
|
+
if (!tableContainerRef.current) return;
|
|
703
|
+
var rect = tableContainerRef.current.getBoundingClientRect();
|
|
704
|
+
setContainerRect(rect);
|
|
705
|
+
};
|
|
706
|
+
updateContainerRect();
|
|
707
|
+
window.addEventListener("scroll", updateContainerRect);
|
|
708
|
+
window.addEventListener("resize", updateContainerRect);
|
|
709
|
+
return function () {
|
|
710
|
+
window.removeEventListener("scroll", updateContainerRect);
|
|
711
|
+
window.removeEventListener("resize", updateContainerRect);
|
|
712
|
+
};
|
|
713
|
+
}, []);
|
|
714
|
+
var calculateTableContainerHeight = function calculateTableContainerHeight() {
|
|
715
|
+
var isPaginationVisible = otherProps.pagination !== false && rowData.length > pageSize;
|
|
716
|
+
var selectAllRowsCalloutHeight = 0;
|
|
717
|
+
if (shouldShowSelectAllRowsCallout || shouldShowAllRowsSelectedCallout) {
|
|
718
|
+
selectAllRowsCalloutHeight = getSelectAllRowsCalloutHeight();
|
|
719
|
+
}
|
|
720
|
+
var containerHeight = window.innerHeight - containerRect.top;
|
|
721
|
+
return containerHeight - headerHeight - (isPaginationVisible ? TABLE_PAGINATION_HEIGHT : 0) - selectAllRowsCalloutHeight;
|
|
722
|
+
};
|
|
723
|
+
return {
|
|
724
|
+
tableRef: null,
|
|
725
|
+
tableContainerRef: tableContainerRef,
|
|
726
|
+
handleScroll: noop,
|
|
727
|
+
calculatedScroll: {
|
|
728
|
+
x: window.innerWidth - (containerRect === null || containerRect === void 0 ? void 0 : containerRect.left),
|
|
729
|
+
y: calculateTableContainerHeight()
|
|
730
|
+
}
|
|
731
|
+
};
|
|
732
|
+
};
|
|
733
|
+
|
|
734
|
+
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"];
|
|
620
735
|
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; }
|
|
621
736
|
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; }
|
|
622
|
-
var TABLE_PAGINATION_HEIGHT = 64;
|
|
623
|
-
var TABLE_DEFAULT_HEADER_HEIGHT = 40;
|
|
624
|
-
var TABLE_ROW_HEIGHT = 52;
|
|
625
737
|
var Table = function Table(_ref) {
|
|
626
738
|
var _ref$allowRowClick = _ref.allowRowClick,
|
|
627
739
|
allowRowClick = _ref$allowRowClick === void 0 ? true : _ref$allowRowClick,
|
|
@@ -677,29 +789,27 @@ var Table = function Table(_ref) {
|
|
|
677
789
|
onMoreActionClick = _ref.onMoreActionClick,
|
|
678
790
|
bulkSelectAllRowsProps = _ref.bulkSelectAllRowsProps,
|
|
679
791
|
localStorageKeyPrefix = _ref.localStorageKeyPrefix,
|
|
792
|
+
_ref$virtual = _ref.virtual,
|
|
793
|
+
virtual = _ref$virtual === void 0 ? false : _ref$virtual,
|
|
680
794
|
otherProps = _objectWithoutProperties(_ref, _excluded);
|
|
681
795
|
var _useTranslation = useTranslation(),
|
|
682
796
|
i18n = _useTranslation.i18n;
|
|
683
|
-
var _useState = useState(
|
|
797
|
+
var _useState = useState(TABLE_DEFAULT_HEADER_HEIGHT),
|
|
684
798
|
_useState2 = _slicedToArray(_useState, 2),
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
var _useState3 = useState(
|
|
799
|
+
headerHeight = _useState2[0],
|
|
800
|
+
setHeaderHeight = _useState2[1];
|
|
801
|
+
var _useState3 = useState(columnData),
|
|
688
802
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
var _useState5 = useState(
|
|
803
|
+
columns = _useState4[0],
|
|
804
|
+
setColumns = _useState4[1];
|
|
805
|
+
var _useState5 = useState(false),
|
|
692
806
|
_useState6 = _slicedToArray(_useState5, 2),
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
var _useState7 = useState(
|
|
807
|
+
bulkSelectedAllRows = _useState6[0],
|
|
808
|
+
setBulkSelectedAllRows = _useState6[1];
|
|
809
|
+
var _useState7 = useState({}),
|
|
696
810
|
_useState8 = _slicedToArray(_useState7, 2),
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
var _useState9 = useState({}),
|
|
700
|
-
_useState10 = _slicedToArray(_useState9, 2),
|
|
701
|
-
columnChanges = _useState10[0],
|
|
702
|
-
setColumnChanges = _useState10[1];
|
|
811
|
+
columnChanges = _useState8[0],
|
|
812
|
+
setColumnChanges = _useState8[1];
|
|
703
813
|
var _useTableSort = useTableSort(),
|
|
704
814
|
handleTableSortChange = _useTableSort.handleTableChange,
|
|
705
815
|
sortedInfo = _useTableSort.sortedInfo,
|
|
@@ -710,30 +820,6 @@ var Table = function Table(_ref) {
|
|
|
710
820
|
var history = useHistory();
|
|
711
821
|
var headerRef = useRef();
|
|
712
822
|
var tableOnChangeProps = useRef({});
|
|
713
|
-
var resizeObserver = useRef(new ResizeObserver(function (_ref3) {
|
|
714
|
-
var _ref4 = _slicedToArray(_ref3, 1),
|
|
715
|
-
entry = _ref4[0];
|
|
716
|
-
return setContainerHeight(entry.contentRect.height);
|
|
717
|
-
}));
|
|
718
|
-
var scrollRef = useRef(null);
|
|
719
|
-
var tableRef = useCallback(function (table) {
|
|
720
|
-
scrollRef.current = table;
|
|
721
|
-
if (!fixedHeight) return;
|
|
722
|
-
var observer = resizeObserver.current;
|
|
723
|
-
if (table !== null) {
|
|
724
|
-
var _table$parentNode;
|
|
725
|
-
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;
|
|
726
|
-
observer.observe(targetNode);
|
|
727
|
-
} else if (observer) {
|
|
728
|
-
observer.disconnect();
|
|
729
|
-
}
|
|
730
|
-
}, [resizeObserver.current, fixedHeight, enableColumnReorder]);
|
|
731
|
-
var _useRestoreScrollPosi = useRestoreScrollPosition({
|
|
732
|
-
tableRef: tableRef,
|
|
733
|
-
scrollRef: scrollRef,
|
|
734
|
-
loading: loading
|
|
735
|
-
}),
|
|
736
|
-
handleScroll = _useRestoreScrollPosi.handleScroll;
|
|
737
823
|
useTimeout(function () {
|
|
738
824
|
var headerHeight = headerRef.current ? headerRef.current.offsetHeight : TABLE_DEFAULT_HEADER_HEIGHT;
|
|
739
825
|
setHeaderHeight(headerHeight);
|
|
@@ -800,6 +886,22 @@ var Table = function Table(_ref) {
|
|
|
800
886
|
}, [selectedRowKeys, rowKey, rowData, totalCount, bulkSelectedAllRows]);
|
|
801
887
|
var shouldShowSelectAllRowsCallout = bulkSelectAllRowsProps && showBulkSelectionCallout;
|
|
802
888
|
var shouldShowAllRowsSelectedCallout = bulkSelectAllRowsProps && bulkSelectedAllRows;
|
|
889
|
+
var pageSize = shouldDynamicallyRenderRowSize ? calculateRowsPerPage() : paginationProps.pageSize || defaultPageSize;
|
|
890
|
+
var _ref3 = (virtual ? useVirtualScroll : useScroll)({
|
|
891
|
+
fixedHeight: fixedHeight,
|
|
892
|
+
enableColumnReorder: enableColumnReorder,
|
|
893
|
+
loading: loading,
|
|
894
|
+
otherProps: otherProps,
|
|
895
|
+
rowData: rowData,
|
|
896
|
+
pageSize: pageSize,
|
|
897
|
+
shouldShowSelectAllRowsCallout: shouldShowSelectAllRowsCallout,
|
|
898
|
+
shouldShowAllRowsSelectedCallout: shouldShowAllRowsSelectedCallout,
|
|
899
|
+
headerHeight: headerHeight
|
|
900
|
+
}),
|
|
901
|
+
tableRef = _ref3.tableRef,
|
|
902
|
+
tableContainerRef = _ref3.tableContainerRef,
|
|
903
|
+
handleScroll = _ref3.handleScroll,
|
|
904
|
+
calculatedScroll = _ref3.calculatedScroll;
|
|
803
905
|
var handleRowChange = function handleRowChange(selectedRowKeys, selectedRows) {
|
|
804
906
|
var tableWrapper = document.querySelector('[data-testid="table-wrapper"]');
|
|
805
907
|
if (selectedRowKeys.length !== defaultPageSize) {
|
|
@@ -813,7 +915,8 @@ var Table = function Table(_ref) {
|
|
|
813
915
|
};
|
|
814
916
|
var rowSelectionProps = rowSelection ? _objectSpread(_objectSpread({
|
|
815
917
|
type: "checkbox",
|
|
816
|
-
preserveSelectedRowKeys: true
|
|
918
|
+
preserveSelectedRowKeys: true,
|
|
919
|
+
columnWidth: 48
|
|
817
920
|
}, rowSelection), {}, {
|
|
818
921
|
onChange: handleRowChange,
|
|
819
922
|
selectedRowKeys: selectedRowKeys
|
|
@@ -835,20 +938,6 @@ var Table = function Table(_ref) {
|
|
|
835
938
|
enableColumnReorder: enableColumnReorder
|
|
836
939
|
})
|
|
837
940
|
});
|
|
838
|
-
var calculateRowsPerPage = function calculateRowsPerPage() {
|
|
839
|
-
var viewportHeight = window.innerHeight;
|
|
840
|
-
var rowsPerPage = Math.floor((viewportHeight - TABLE_PAGINATION_HEIGHT) / TABLE_ROW_HEIGHT * 3);
|
|
841
|
-
return Math.ceil(rowsPerPage / 10) * 10;
|
|
842
|
-
};
|
|
843
|
-
var pageSize = shouldDynamicallyRenderRowSize ? calculateRowsPerPage() : paginationProps.pageSize || defaultPageSize;
|
|
844
|
-
var calculateTableContainerHeight = function calculateTableContainerHeight() {
|
|
845
|
-
var isPaginationVisible = otherProps.pagination !== false && rowData.length > pageSize;
|
|
846
|
-
var selectAllRowsCalloutHeight = 0;
|
|
847
|
-
if (shouldShowSelectAllRowsCallout || shouldShowAllRowsSelectedCallout) {
|
|
848
|
-
selectAllRowsCalloutHeight = getSelectAllRowsCalloutHeight();
|
|
849
|
-
}
|
|
850
|
-
return containerHeight - headerHeight - (isPaginationVisible ? TABLE_PAGINATION_HEIGHT : 0) - selectAllRowsCalloutHeight;
|
|
851
|
-
};
|
|
852
941
|
var calculatePageSizeOptions = function calculatePageSizeOptions() {
|
|
853
942
|
return dynamicArray(5, function (index) {
|
|
854
943
|
return (index + 1) * pageSize;
|
|
@@ -959,6 +1048,7 @@ var Table = function Table(_ref) {
|
|
|
959
1048
|
bordered: bordered,
|
|
960
1049
|
locale: locale,
|
|
961
1050
|
rowKey: rowKey,
|
|
1051
|
+
virtual: virtual,
|
|
962
1052
|
columns: sortedColumns,
|
|
963
1053
|
components: componentOverrides,
|
|
964
1054
|
dataSource: rowData,
|
|
@@ -968,6 +1058,7 @@ var Table = function Table(_ref) {
|
|
|
968
1058
|
},
|
|
969
1059
|
ref: tableRef,
|
|
970
1060
|
rowSelection: rowSelectionProps,
|
|
1061
|
+
scroll: _objectSpread(_objectSpread({}, calculatedScroll), scroll),
|
|
971
1062
|
showSorterTooltip: false,
|
|
972
1063
|
pagination: _objectSpread(_objectSpread({
|
|
973
1064
|
hideOnSinglePage: true
|
|
@@ -983,10 +1074,6 @@ var Table = function Table(_ref) {
|
|
|
983
1074
|
rowClassName: classnames("neeto-ui-table--row", {
|
|
984
1075
|
"neeto-ui-table--row_hover": allowRowClick
|
|
985
1076
|
}, [className]),
|
|
986
|
-
scroll: _objectSpread({
|
|
987
|
-
x: "max-content",
|
|
988
|
-
y: calculateTableContainerHeight()
|
|
989
|
-
}, scroll),
|
|
990
1077
|
onChange: handleTableChange,
|
|
991
1078
|
onScroll: handleScroll,
|
|
992
1079
|
onHeaderRow: function onHeaderRow() {
|
|
@@ -1007,7 +1094,12 @@ var Table = function Table(_ref) {
|
|
|
1007
1094
|
}
|
|
1008
1095
|
}, otherProps)));
|
|
1009
1096
|
};
|
|
1010
|
-
|
|
1097
|
+
var renderTableVirtual = function renderTableVirtual() {
|
|
1098
|
+
return virtual ? /*#__PURE__*/React__default.createElement("div", {
|
|
1099
|
+
ref: tableContainerRef
|
|
1100
|
+
}, renderTable()) : renderTable();
|
|
1101
|
+
};
|
|
1102
|
+
return enableColumnReorder ? /*#__PURE__*/React__default.createElement(ReactDragListView.DragColumn, dragProps, renderTableVirtual()) : renderTableVirtual();
|
|
1011
1103
|
};
|
|
1012
1104
|
|
|
1013
1105
|
export { Table as default };
|