@vuu-ui/vuu-table 0.13.6 → 0.13.8
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/cjs/index.js +5236 -61
- package/cjs/index.js.map +1 -1
- package/esm/index.js +5205 -26
- package/esm/index.js.map +1 -1
- package/package.json +10 -10
- package/types/Table.d.ts +0 -1
- package/types/column-resizing/ColumnResizer.d.ts +6 -1
- package/types/column-resizing/useTableColumnResize.d.ts +3 -3
- package/types/header-cell/GroupHeaderCell.d.ts +2 -1
- package/types/header-cell/HeaderCell.d.ts +1 -1
- package/types/table-dom-utils.d.ts +1 -0
- package/types/table-header/TableHeader.d.ts +2 -2
- package/types/table-header/useTableHeader.d.ts +11 -7
- package/types/useTable.d.ts +2 -2
- package/cjs/CellFocusState.js +0 -45
- package/cjs/CellFocusState.js.map +0 -1
- package/cjs/Row.css.js +0 -6
- package/cjs/Row.css.js.map +0 -1
- package/cjs/Row.js +0 -151
- package/cjs/Row.js.map +0 -1
- package/cjs/Table.css.js +0 -6
- package/cjs/Table.css.js.map +0 -1
- package/cjs/Table.js +0 -433
- package/cjs/Table.js.map +0 -1
- package/cjs/VirtualColSpan.js +0 -19
- package/cjs/VirtualColSpan.js.map +0 -1
- package/cjs/bulk-edit/BulkEditDialog.js +0 -57
- package/cjs/bulk-edit/BulkEditDialog.js.map +0 -1
- package/cjs/bulk-edit/BulkEditPanel.css.js +0 -6
- package/cjs/bulk-edit/BulkEditPanel.css.js.map +0 -1
- package/cjs/bulk-edit/BulkEditPanel.js +0 -72
- package/cjs/bulk-edit/BulkEditPanel.js.map +0 -1
- package/cjs/bulk-edit/BulkEditRow.css.js +0 -6
- package/cjs/bulk-edit/BulkEditRow.css.js.map +0 -1
- package/cjs/bulk-edit/BulkEditRow.js +0 -81
- package/cjs/bulk-edit/BulkEditRow.js.map +0 -1
- package/cjs/bulk-edit/useBulkEditPanel.js +0 -101
- package/cjs/bulk-edit/useBulkEditPanel.js.map +0 -1
- package/cjs/bulk-edit/useBulkEditRow.js +0 -144
- package/cjs/bulk-edit/useBulkEditRow.js.map +0 -1
- package/cjs/cell-block/CellBlock.css.js +0 -6
- package/cjs/cell-block/CellBlock.css.js.map +0 -1
- package/cjs/cell-block/CellBlock.js +0 -45
- package/cjs/cell-block/CellBlock.js.map +0 -1
- package/cjs/cell-block/cellblock-utils.js +0 -125
- package/cjs/cell-block/cellblock-utils.js.map +0 -1
- package/cjs/cell-block/useCellBlockSelection.js +0 -254
- package/cjs/cell-block/useCellBlockSelection.js.map +0 -1
- package/cjs/cell-renderers/checkbox-cell/CheckboxCell.css.js +0 -6
- package/cjs/cell-renderers/checkbox-cell/CheckboxCell.css.js.map +0 -1
- package/cjs/cell-renderers/checkbox-cell/CheckboxCell.js +0 -68
- package/cjs/cell-renderers/checkbox-cell/CheckboxCell.js.map +0 -1
- package/cjs/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.css.js +0 -6
- package/cjs/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.css.js.map +0 -1
- package/cjs/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.js +0 -33
- package/cjs/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.js.map +0 -1
- package/cjs/cell-renderers/input-cell/InputCell.css.js +0 -6
- package/cjs/cell-renderers/input-cell/InputCell.css.js.map +0 -1
- package/cjs/cell-renderers/input-cell/InputCell.js +0 -52
- package/cjs/cell-renderers/input-cell/InputCell.js.map +0 -1
- package/cjs/cell-renderers/toggle-cell/ToggleCell.css.js +0 -6
- package/cjs/cell-renderers/toggle-cell/ToggleCell.css.js.map +0 -1
- package/cjs/cell-renderers/toggle-cell/ToggleCell.js +0 -67
- package/cjs/cell-renderers/toggle-cell/ToggleCell.js.map +0 -1
- package/cjs/column-header-pill/ColumnHeaderPill.css.js +0 -6
- package/cjs/column-header-pill/ColumnHeaderPill.css.js.map +0 -1
- package/cjs/column-header-pill/ColumnHeaderPill.js +0 -53
- package/cjs/column-header-pill/ColumnHeaderPill.js.map +0 -1
- package/cjs/column-header-pill/GroupColumnPill.css.js +0 -6
- package/cjs/column-header-pill/GroupColumnPill.css.js.map +0 -1
- package/cjs/column-header-pill/GroupColumnPill.js +0 -29
- package/cjs/column-header-pill/GroupColumnPill.js.map +0 -1
- package/cjs/column-header-pill/SortIndicator.css.js +0 -6
- package/cjs/column-header-pill/SortIndicator.css.js.map +0 -1
- package/cjs/column-header-pill/SortIndicator.js +0 -27
- package/cjs/column-header-pill/SortIndicator.js.map +0 -1
- package/cjs/column-resizing/ColumnResizer.css.js +0 -6
- package/cjs/column-resizing/ColumnResizer.css.js.map +0 -1
- package/cjs/column-resizing/ColumnResizer.js +0 -72
- package/cjs/column-resizing/ColumnResizer.js.map +0 -1
- package/cjs/column-resizing/useTableColumnResize.js +0 -55
- package/cjs/column-resizing/useTableColumnResize.js.map +0 -1
- package/cjs/header-cell/GroupHeaderCell.css.js +0 -6
- package/cjs/header-cell/GroupHeaderCell.css.js.map +0 -1
- package/cjs/header-cell/GroupHeaderCell.js +0 -127
- package/cjs/header-cell/GroupHeaderCell.js.map +0 -1
- package/cjs/header-cell/HeaderCell.css.js +0 -6
- package/cjs/header-cell/HeaderCell.css.js.map +0 -1
- package/cjs/header-cell/HeaderCell.js +0 -107
- package/cjs/header-cell/HeaderCell.js.map +0 -1
- package/cjs/pagination/PaginationControl.css.js +0 -6
- package/cjs/pagination/PaginationControl.css.js.map +0 -1
- package/cjs/pagination/PaginationControl.js +0 -38
- package/cjs/pagination/PaginationControl.js.map +0 -1
- package/cjs/pagination/usePagination.js +0 -36
- package/cjs/pagination/usePagination.js.map +0 -1
- package/cjs/table-cell/TableCell.css.js +0 -6
- package/cjs/table-cell/TableCell.css.js.map +0 -1
- package/cjs/table-cell/TableCell.js +0 -95
- package/cjs/table-cell/TableCell.js.map +0 -1
- package/cjs/table-cell/TableGroupCell.css.js +0 -6
- package/cjs/table-cell/TableGroupCell.css.js.map +0 -1
- package/cjs/table-cell/TableGroupCell.js +0 -66
- package/cjs/table-cell/TableGroupCell.js.map +0 -1
- package/cjs/table-config.js +0 -35
- package/cjs/table-config.js.map +0 -1
- package/cjs/table-dom-utils.js +0 -198
- package/cjs/table-dom-utils.js.map +0 -1
- package/cjs/table-header/HeaderProvider.js +0 -18
- package/cjs/table-header/HeaderProvider.js.map +0 -1
- package/cjs/table-header/TableHeader.js +0 -154
- package/cjs/table-header/TableHeader.js.map +0 -1
- package/cjs/table-header/useTableHeader.js +0 -87
- package/cjs/table-header/useTableHeader.js.map +0 -1
- package/cjs/useCell.js +0 -28
- package/cjs/useCell.js.map +0 -1
- package/cjs/useCellEditing.js +0 -79
- package/cjs/useCellEditing.js.map +0 -1
- package/cjs/useCellFocus.js +0 -115
- package/cjs/useCellFocus.js.map +0 -1
- package/cjs/useControlledTableNavigation.js +0 -46
- package/cjs/useControlledTableNavigation.js.map +0 -1
- package/cjs/useDataSource.js +0 -146
- package/cjs/useDataSource.js.map +0 -1
- package/cjs/useEditableCell.js +0 -32
- package/cjs/useEditableCell.js.map +0 -1
- package/cjs/useHighlighting.js +0 -33
- package/cjs/useHighlighting.js.map +0 -1
- package/cjs/useKeyboardNavigation.js +0 -318
- package/cjs/useKeyboardNavigation.js.map +0 -1
- package/cjs/useMeasuredHeight.js +0 -41
- package/cjs/useMeasuredHeight.js.map +0 -1
- package/cjs/useRowClassNameGenerators.js +0 -34
- package/cjs/useRowClassNameGenerators.js.map +0 -1
- package/cjs/useSelection.js +0 -74
- package/cjs/useSelection.js.map +0 -1
- package/cjs/useTable.js +0 -714
- package/cjs/useTable.js.map +0 -1
- package/cjs/useTableContextMenu.js +0 -59
- package/cjs/useTableContextMenu.js.map +0 -1
- package/cjs/useTableModel.js +0 -383
- package/cjs/useTableModel.js.map +0 -1
- package/cjs/useTableScroll.js +0 -446
- package/cjs/useTableScroll.js.map +0 -1
- package/cjs/useTableViewport.js +0 -137
- package/cjs/useTableViewport.js.map +0 -1
- package/esm/CellFocusState.js +0 -43
- package/esm/CellFocusState.js.map +0 -1
- package/esm/Row.css.js +0 -4
- package/esm/Row.css.js.map +0 -1
- package/esm/Row.js +0 -148
- package/esm/Row.js.map +0 -1
- package/esm/Table.css.js +0 -4
- package/esm/Table.css.js.map +0 -1
- package/esm/Table.js +0 -431
- package/esm/Table.js.map +0 -1
- package/esm/VirtualColSpan.js +0 -17
- package/esm/VirtualColSpan.js.map +0 -1
- package/esm/bulk-edit/BulkEditDialog.js +0 -55
- package/esm/bulk-edit/BulkEditDialog.js.map +0 -1
- package/esm/bulk-edit/BulkEditPanel.css.js +0 -4
- package/esm/bulk-edit/BulkEditPanel.css.js.map +0 -1
- package/esm/bulk-edit/BulkEditPanel.js +0 -70
- package/esm/bulk-edit/BulkEditPanel.js.map +0 -1
- package/esm/bulk-edit/BulkEditRow.css.js +0 -4
- package/esm/bulk-edit/BulkEditRow.css.js.map +0 -1
- package/esm/bulk-edit/BulkEditRow.js +0 -79
- package/esm/bulk-edit/BulkEditRow.js.map +0 -1
- package/esm/bulk-edit/useBulkEditPanel.js +0 -99
- package/esm/bulk-edit/useBulkEditPanel.js.map +0 -1
- package/esm/bulk-edit/useBulkEditRow.js +0 -142
- package/esm/bulk-edit/useBulkEditRow.js.map +0 -1
- package/esm/cell-block/CellBlock.css.js +0 -4
- package/esm/cell-block/CellBlock.css.js.map +0 -1
- package/esm/cell-block/CellBlock.js +0 -43
- package/esm/cell-block/CellBlock.js.map +0 -1
- package/esm/cell-block/cellblock-utils.js +0 -116
- package/esm/cell-block/cellblock-utils.js.map +0 -1
- package/esm/cell-block/useCellBlockSelection.js +0 -252
- package/esm/cell-block/useCellBlockSelection.js.map +0 -1
- package/esm/cell-renderers/checkbox-cell/CheckboxCell.css.js +0 -4
- package/esm/cell-renderers/checkbox-cell/CheckboxCell.css.js.map +0 -1
- package/esm/cell-renderers/checkbox-cell/CheckboxCell.js +0 -66
- package/esm/cell-renderers/checkbox-cell/CheckboxCell.js.map +0 -1
- package/esm/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.css.js +0 -4
- package/esm/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.css.js.map +0 -1
- package/esm/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.js +0 -31
- package/esm/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.js.map +0 -1
- package/esm/cell-renderers/input-cell/InputCell.css.js +0 -4
- package/esm/cell-renderers/input-cell/InputCell.css.js.map +0 -1
- package/esm/cell-renderers/input-cell/InputCell.js +0 -50
- package/esm/cell-renderers/input-cell/InputCell.js.map +0 -1
- package/esm/cell-renderers/toggle-cell/ToggleCell.css.js +0 -4
- package/esm/cell-renderers/toggle-cell/ToggleCell.css.js.map +0 -1
- package/esm/cell-renderers/toggle-cell/ToggleCell.js +0 -65
- package/esm/cell-renderers/toggle-cell/ToggleCell.js.map +0 -1
- package/esm/column-header-pill/ColumnHeaderPill.css.js +0 -4
- package/esm/column-header-pill/ColumnHeaderPill.css.js.map +0 -1
- package/esm/column-header-pill/ColumnHeaderPill.js +0 -51
- package/esm/column-header-pill/ColumnHeaderPill.js.map +0 -1
- package/esm/column-header-pill/GroupColumnPill.css.js +0 -4
- package/esm/column-header-pill/GroupColumnPill.css.js.map +0 -1
- package/esm/column-header-pill/GroupColumnPill.js +0 -27
- package/esm/column-header-pill/GroupColumnPill.js.map +0 -1
- package/esm/column-header-pill/SortIndicator.css.js +0 -4
- package/esm/column-header-pill/SortIndicator.css.js.map +0 -1
- package/esm/column-header-pill/SortIndicator.js +0 -25
- package/esm/column-header-pill/SortIndicator.js.map +0 -1
- package/esm/column-resizing/ColumnResizer.css.js +0 -4
- package/esm/column-resizing/ColumnResizer.css.js.map +0 -1
- package/esm/column-resizing/ColumnResizer.js +0 -70
- package/esm/column-resizing/ColumnResizer.js.map +0 -1
- package/esm/column-resizing/useTableColumnResize.js +0 -53
- package/esm/column-resizing/useTableColumnResize.js.map +0 -1
- package/esm/header-cell/GroupHeaderCell.css.js +0 -4
- package/esm/header-cell/GroupHeaderCell.css.js.map +0 -1
- package/esm/header-cell/GroupHeaderCell.js +0 -125
- package/esm/header-cell/GroupHeaderCell.js.map +0 -1
- package/esm/header-cell/HeaderCell.css.js +0 -4
- package/esm/header-cell/HeaderCell.css.js.map +0 -1
- package/esm/header-cell/HeaderCell.js +0 -105
- package/esm/header-cell/HeaderCell.js.map +0 -1
- package/esm/pagination/PaginationControl.css.js +0 -4
- package/esm/pagination/PaginationControl.css.js.map +0 -1
- package/esm/pagination/PaginationControl.js +0 -36
- package/esm/pagination/PaginationControl.js.map +0 -1
- package/esm/pagination/usePagination.js +0 -34
- package/esm/pagination/usePagination.js.map +0 -1
- package/esm/table-cell/TableCell.css.js +0 -4
- package/esm/table-cell/TableCell.css.js.map +0 -1
- package/esm/table-cell/TableCell.js +0 -93
- package/esm/table-cell/TableCell.js.map +0 -1
- package/esm/table-cell/TableGroupCell.css.js +0 -4
- package/esm/table-cell/TableGroupCell.css.js.map +0 -1
- package/esm/table-cell/TableGroupCell.js +0 -64
- package/esm/table-cell/TableGroupCell.js.map +0 -1
- package/esm/table-config.js +0 -33
- package/esm/table-config.js.map +0 -1
- package/esm/table-dom-utils.js +0 -181
- package/esm/table-dom-utils.js.map +0 -1
- package/esm/table-header/HeaderProvider.js +0 -15
- package/esm/table-header/HeaderProvider.js.map +0 -1
- package/esm/table-header/TableHeader.js +0 -152
- package/esm/table-header/TableHeader.js.map +0 -1
- package/esm/table-header/useTableHeader.js +0 -85
- package/esm/table-header/useTableHeader.js.map +0 -1
- package/esm/useCell.js +0 -26
- package/esm/useCell.js.map +0 -1
- package/esm/useCellEditing.js +0 -77
- package/esm/useCellEditing.js.map +0 -1
- package/esm/useCellFocus.js +0 -113
- package/esm/useCellFocus.js.map +0 -1
- package/esm/useControlledTableNavigation.js +0 -43
- package/esm/useControlledTableNavigation.js.map +0 -1
- package/esm/useDataSource.js +0 -144
- package/esm/useDataSource.js.map +0 -1
- package/esm/useEditableCell.js +0 -30
- package/esm/useEditableCell.js.map +0 -1
- package/esm/useHighlighting.js +0 -31
- package/esm/useHighlighting.js.map +0 -1
- package/esm/useKeyboardNavigation.js +0 -314
- package/esm/useKeyboardNavigation.js.map +0 -1
- package/esm/useMeasuredHeight.js +0 -39
- package/esm/useMeasuredHeight.js.map +0 -1
- package/esm/useRowClassNameGenerators.js +0 -32
- package/esm/useRowClassNameGenerators.js.map +0 -1
- package/esm/useSelection.js +0 -72
- package/esm/useSelection.js.map +0 -1
- package/esm/useTable.js +0 -712
- package/esm/useTable.js.map +0 -1
- package/esm/useTableContextMenu.js +0 -56
- package/esm/useTableContextMenu.js.map +0 -1
- package/esm/useTableModel.js +0 -381
- package/esm/useTableModel.js.map +0 -1
- package/esm/useTableScroll.js +0 -443
- package/esm/useTableScroll.js.map +0 -1
- package/esm/useTableViewport.js +0 -135
- package/esm/useTableViewport.js.map +0 -1
package/cjs/useTableScroll.js
DELETED
|
@@ -1,446 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
4
|
-
var react = require('react');
|
|
5
|
-
var tableDomUtils = require('./table-dom-utils.js');
|
|
6
|
-
|
|
7
|
-
const SCROLL_MOVE_CHECK_THRESHOLD = 100;
|
|
8
|
-
const HORIZONTAL_SCROLL_BUFFER = 200;
|
|
9
|
-
const getMaxScroll = (container) => {
|
|
10
|
-
const { clientHeight, clientWidth, scrollHeight, scrollWidth } = container;
|
|
11
|
-
return [scrollWidth - clientWidth, scrollHeight - clientHeight];
|
|
12
|
-
};
|
|
13
|
-
const getScrollDirection = (prevScrollPositions, scrollPos) => {
|
|
14
|
-
if (prevScrollPositions === void 0) {
|
|
15
|
-
return void 0;
|
|
16
|
-
} else {
|
|
17
|
-
const { scrollTop: prevTop } = prevScrollPositions;
|
|
18
|
-
return scrollPos > prevTop ? "fwd" : "bwd";
|
|
19
|
-
}
|
|
20
|
-
};
|
|
21
|
-
const getPctScroll = (container, currentScrollPos) => {
|
|
22
|
-
const {
|
|
23
|
-
clientHeight,
|
|
24
|
-
clientWidth,
|
|
25
|
-
scrollHeight,
|
|
26
|
-
scrollLeft,
|
|
27
|
-
scrollTop,
|
|
28
|
-
scrollWidth
|
|
29
|
-
} = container;
|
|
30
|
-
const maxScrollLeft = scrollWidth - clientWidth;
|
|
31
|
-
const pctScrollLeft = scrollLeft / (scrollWidth - clientWidth);
|
|
32
|
-
const maxScrollTop = scrollHeight - clientHeight;
|
|
33
|
-
let pctScrollTop = scrollTop / (scrollHeight - clientHeight);
|
|
34
|
-
const scrollDirection = getScrollDirection(currentScrollPos, scrollTop);
|
|
35
|
-
if (scrollDirection === "fwd" && pctScrollTop > 0.99) {
|
|
36
|
-
pctScrollTop = 1;
|
|
37
|
-
} else if (scrollDirection === "bwd" && pctScrollTop < 0.02) {
|
|
38
|
-
pctScrollTop = 0;
|
|
39
|
-
}
|
|
40
|
-
return [
|
|
41
|
-
scrollLeft,
|
|
42
|
-
pctScrollLeft,
|
|
43
|
-
maxScrollLeft,
|
|
44
|
-
scrollTop,
|
|
45
|
-
pctScrollTop,
|
|
46
|
-
maxScrollTop
|
|
47
|
-
];
|
|
48
|
-
};
|
|
49
|
-
const noScrolling = {
|
|
50
|
-
scrollToIndex: () => void 0,
|
|
51
|
-
scrollToKey: () => void 0
|
|
52
|
-
};
|
|
53
|
-
const useCallbackRef = ({
|
|
54
|
-
onAttach,
|
|
55
|
-
onDetach
|
|
56
|
-
}) => {
|
|
57
|
-
const ref = react.useRef(null);
|
|
58
|
-
const callbackRef = react.useCallback(
|
|
59
|
-
(el) => {
|
|
60
|
-
if (el) {
|
|
61
|
-
ref.current = el;
|
|
62
|
-
onAttach?.(el);
|
|
63
|
-
} else if (ref.current) {
|
|
64
|
-
const { current: originalRef } = ref;
|
|
65
|
-
ref.current = el;
|
|
66
|
-
onDetach?.(originalRef);
|
|
67
|
-
}
|
|
68
|
-
},
|
|
69
|
-
[onAttach, onDetach]
|
|
70
|
-
);
|
|
71
|
-
return callbackRef;
|
|
72
|
-
};
|
|
73
|
-
const useTableScroll = ({
|
|
74
|
-
cellFocusStateRef,
|
|
75
|
-
columns,
|
|
76
|
-
focusCell,
|
|
77
|
-
getRowAtPosition,
|
|
78
|
-
onHorizontalScroll,
|
|
79
|
-
onVerticalScroll,
|
|
80
|
-
onVerticalScrollInSitu,
|
|
81
|
-
rowHeight,
|
|
82
|
-
scrollingApiRef,
|
|
83
|
-
setRange,
|
|
84
|
-
viewportMeasurements
|
|
85
|
-
}) => {
|
|
86
|
-
const firstRowRef = react.useRef(0);
|
|
87
|
-
const rowHeightRef = react.useRef(rowHeight);
|
|
88
|
-
const contentContainerScrolledRef = react.useRef(false);
|
|
89
|
-
const contentContainerPosRef = react.useRef({
|
|
90
|
-
scrollTop: 0,
|
|
91
|
-
scrollLeft: 0
|
|
92
|
-
});
|
|
93
|
-
const scrollbarContainerScrolledRef = react.useRef(false);
|
|
94
|
-
const scrollbarContainerPosRef = react.useRef({
|
|
95
|
-
scrollTop: 0,
|
|
96
|
-
scrollLeft: 0
|
|
97
|
-
});
|
|
98
|
-
const scrollbarContainerRef = react.useRef(null);
|
|
99
|
-
const contentContainerRef = react.useRef(null);
|
|
100
|
-
const lastHorizontalScrollCheckPoint = react.useRef(0);
|
|
101
|
-
const {
|
|
102
|
-
appliedPageSize,
|
|
103
|
-
isVirtualScroll,
|
|
104
|
-
rowCount: viewportRowCount,
|
|
105
|
-
totalHeaderHeight,
|
|
106
|
-
usesMeasuredHeaderHeight,
|
|
107
|
-
viewportBodyHeight,
|
|
108
|
-
viewportWidth
|
|
109
|
-
} = viewportMeasurements;
|
|
110
|
-
const columnsWithinViewportRef = react.useRef([]);
|
|
111
|
-
const [, forceRefresh] = react.useState({});
|
|
112
|
-
const preSpanRef = react.useRef(0);
|
|
113
|
-
react.useMemo(() => {
|
|
114
|
-
const [visibleColumns, offset] = vuuUtils.getColumnsInViewport(
|
|
115
|
-
columns,
|
|
116
|
-
contentContainerPosRef.current.scrollLeft,
|
|
117
|
-
contentContainerPosRef.current.scrollLeft + viewportWidth + HORIZONTAL_SCROLL_BUFFER
|
|
118
|
-
);
|
|
119
|
-
preSpanRef.current = offset;
|
|
120
|
-
columnsWithinViewportRef.current = visibleColumns;
|
|
121
|
-
}, [viewportWidth, columns]);
|
|
122
|
-
const handleHorizontalScroll = react.useCallback(
|
|
123
|
-
(scrollLeft) => {
|
|
124
|
-
contentContainerPosRef.current.scrollLeft = scrollLeft;
|
|
125
|
-
onHorizontalScroll?.(scrollLeft);
|
|
126
|
-
if (Math.abs(scrollLeft - lastHorizontalScrollCheckPoint.current) > SCROLL_MOVE_CHECK_THRESHOLD) {
|
|
127
|
-
lastHorizontalScrollCheckPoint.current = scrollLeft;
|
|
128
|
-
const [visibleColumns, pre] = vuuUtils.getColumnsInViewport(
|
|
129
|
-
columns,
|
|
130
|
-
scrollLeft,
|
|
131
|
-
scrollLeft + viewportWidth + HORIZONTAL_SCROLL_BUFFER
|
|
132
|
-
);
|
|
133
|
-
if (vuuUtils.itemsChanged(columnsWithinViewportRef.current, visibleColumns)) {
|
|
134
|
-
preSpanRef.current = pre;
|
|
135
|
-
columnsWithinViewportRef.current = visibleColumns;
|
|
136
|
-
forceRefresh({});
|
|
137
|
-
}
|
|
138
|
-
}
|
|
139
|
-
},
|
|
140
|
-
[columns, onHorizontalScroll, viewportWidth]
|
|
141
|
-
);
|
|
142
|
-
const handleVerticalScroll = react.useCallback(
|
|
143
|
-
(scrollTop, pctScrollTop) => {
|
|
144
|
-
contentContainerPosRef.current.scrollTop = scrollTop;
|
|
145
|
-
const { current: prevFirstRow } = firstRowRef;
|
|
146
|
-
onVerticalScroll?.(scrollTop, pctScrollTop);
|
|
147
|
-
const firstRow = getRowAtPosition(scrollTop);
|
|
148
|
-
if (firstRow !== prevFirstRow) {
|
|
149
|
-
firstRowRef.current = firstRow;
|
|
150
|
-
const lastRow = firstRow + viewportRowCount;
|
|
151
|
-
setRange({ from: firstRow, to: lastRow });
|
|
152
|
-
const { current: focusState } = cellFocusStateRef;
|
|
153
|
-
if (focusState.cellPos) {
|
|
154
|
-
const prevLastRow = prevFirstRow + viewportRowCount;
|
|
155
|
-
const [row] = focusState.cellPos;
|
|
156
|
-
const wasInViewport = row >= prevFirstRow && row < prevLastRow;
|
|
157
|
-
const isInViewport = row >= firstRow && row < lastRow;
|
|
158
|
-
if (wasInViewport && !isInViewport) {
|
|
159
|
-
focusState.placeholderEl?.focus({ preventScroll: true });
|
|
160
|
-
focusState.outsideViewport = row < firstRow ? "above" : "below";
|
|
161
|
-
} else if (isInViewport && !wasInViewport) {
|
|
162
|
-
focusState.outsideViewport = false;
|
|
163
|
-
focusCell?.(focusState.cellPos);
|
|
164
|
-
}
|
|
165
|
-
}
|
|
166
|
-
}
|
|
167
|
-
onVerticalScrollInSitu?.(0);
|
|
168
|
-
},
|
|
169
|
-
[
|
|
170
|
-
cellFocusStateRef,
|
|
171
|
-
focusCell,
|
|
172
|
-
getRowAtPosition,
|
|
173
|
-
onVerticalScroll,
|
|
174
|
-
onVerticalScrollInSitu,
|
|
175
|
-
setRange,
|
|
176
|
-
viewportRowCount
|
|
177
|
-
]
|
|
178
|
-
);
|
|
179
|
-
const handleScrollbarContainerScroll = react.useCallback(() => {
|
|
180
|
-
const { current: contentContainer } = contentContainerRef;
|
|
181
|
-
const { current: scrollbarContainer } = scrollbarContainerRef;
|
|
182
|
-
const { current: contentContainerScrolled } = contentContainerScrolledRef;
|
|
183
|
-
const { current: scrollPos } = scrollbarContainerPosRef;
|
|
184
|
-
if (contentContainerScrolled) {
|
|
185
|
-
contentContainerScrolledRef.current = false;
|
|
186
|
-
} else if (contentContainer && scrollbarContainer) {
|
|
187
|
-
scrollbarContainerScrolledRef.current = true;
|
|
188
|
-
const [scrollLeft, pctScrollLeft, , scrollTop, pctScrollTop] = getPctScroll(scrollbarContainer, scrollPos);
|
|
189
|
-
scrollPos.scrollLeft = scrollLeft;
|
|
190
|
-
scrollPos.scrollTop = scrollTop;
|
|
191
|
-
const [maxScrollLeft, maxScrollTop] = getMaxScroll(scrollbarContainer);
|
|
192
|
-
const contentScrollLeft = Math.round(pctScrollLeft * maxScrollLeft);
|
|
193
|
-
const contentScrollTop = pctScrollTop * maxScrollTop;
|
|
194
|
-
contentContainer.scrollTo({
|
|
195
|
-
left: contentScrollLeft,
|
|
196
|
-
top: contentScrollTop,
|
|
197
|
-
behavior: "auto"
|
|
198
|
-
});
|
|
199
|
-
}
|
|
200
|
-
onVerticalScrollInSitu?.(0);
|
|
201
|
-
}, [onVerticalScrollInSitu]);
|
|
202
|
-
const handleContentContainerScroll = react.useCallback(() => {
|
|
203
|
-
const { current: scrollbarContainerScrolled } = scrollbarContainerScrolledRef;
|
|
204
|
-
const { current: contentContainer } = contentContainerRef;
|
|
205
|
-
const { current: scrollbarContainer } = scrollbarContainerRef;
|
|
206
|
-
const { current: scrollPos } = contentContainerPosRef;
|
|
207
|
-
if (contentContainer && scrollbarContainer) {
|
|
208
|
-
const [
|
|
209
|
-
scrollLeft,
|
|
210
|
-
pctScrollLeft,
|
|
211
|
-
maxScrollLeft,
|
|
212
|
-
scrollTop,
|
|
213
|
-
pctScrollTop,
|
|
214
|
-
maxScrollTop
|
|
215
|
-
] = getPctScroll(contentContainer);
|
|
216
|
-
contentContainerScrolledRef.current = true;
|
|
217
|
-
if (scrollbarContainerScrolled) {
|
|
218
|
-
scrollbarContainerScrolledRef.current = false;
|
|
219
|
-
} else {
|
|
220
|
-
scrollbarContainer.scrollLeft = Math.round(
|
|
221
|
-
pctScrollLeft * maxScrollLeft
|
|
222
|
-
);
|
|
223
|
-
scrollbarContainer.scrollTop = pctScrollTop * maxScrollTop;
|
|
224
|
-
}
|
|
225
|
-
if (scrollPos.scrollTop !== scrollTop) {
|
|
226
|
-
handleVerticalScroll(scrollTop, pctScrollTop);
|
|
227
|
-
}
|
|
228
|
-
if (scrollPos.scrollLeft !== scrollLeft) {
|
|
229
|
-
handleHorizontalScroll(scrollLeft);
|
|
230
|
-
}
|
|
231
|
-
}
|
|
232
|
-
}, [handleVerticalScroll, handleHorizontalScroll]);
|
|
233
|
-
const handleAttachScrollbarContainer = react.useCallback(
|
|
234
|
-
(el) => {
|
|
235
|
-
scrollbarContainerRef.current = el;
|
|
236
|
-
el.addEventListener("scroll", handleScrollbarContainerScroll, {
|
|
237
|
-
passive: true
|
|
238
|
-
});
|
|
239
|
-
},
|
|
240
|
-
[handleScrollbarContainerScroll]
|
|
241
|
-
);
|
|
242
|
-
const handleDetachScrollbarContainer = react.useCallback(
|
|
243
|
-
(el) => {
|
|
244
|
-
scrollbarContainerRef.current = null;
|
|
245
|
-
el.removeEventListener("scroll", handleScrollbarContainerScroll);
|
|
246
|
-
},
|
|
247
|
-
[handleScrollbarContainerScroll]
|
|
248
|
-
);
|
|
249
|
-
const handleAttachContentContainer = react.useCallback(
|
|
250
|
-
(el) => {
|
|
251
|
-
contentContainerRef.current = el;
|
|
252
|
-
el.addEventListener("scroll", handleContentContainerScroll, {
|
|
253
|
-
passive: true
|
|
254
|
-
});
|
|
255
|
-
},
|
|
256
|
-
[handleContentContainerScroll]
|
|
257
|
-
);
|
|
258
|
-
const handleDetachContentContainer = react.useCallback(
|
|
259
|
-
(el) => {
|
|
260
|
-
contentContainerRef.current = null;
|
|
261
|
-
el.removeEventListener("scroll", handleContentContainerScroll);
|
|
262
|
-
},
|
|
263
|
-
[handleContentContainerScroll]
|
|
264
|
-
);
|
|
265
|
-
const contentContainerCallbackRef = useCallbackRef({
|
|
266
|
-
onAttach: handleAttachContentContainer,
|
|
267
|
-
onDetach: handleDetachContentContainer
|
|
268
|
-
});
|
|
269
|
-
const scrollbarContainerCallbackRef = useCallbackRef({
|
|
270
|
-
onAttach: handleAttachScrollbarContainer,
|
|
271
|
-
onDetach: handleDetachScrollbarContainer
|
|
272
|
-
});
|
|
273
|
-
const requestScroll = react.useCallback(
|
|
274
|
-
(scrollRequest) => {
|
|
275
|
-
const { current: contentContainer } = contentContainerRef;
|
|
276
|
-
if (contentContainer) {
|
|
277
|
-
const [maxScrollLeft, maxScrollTop] = getMaxScroll(contentContainer);
|
|
278
|
-
const { scrollLeft, scrollTop } = contentContainer;
|
|
279
|
-
contentContainerScrolledRef.current = false;
|
|
280
|
-
switch (scrollRequest.type) {
|
|
281
|
-
case "scroll-top":
|
|
282
|
-
{
|
|
283
|
-
contentContainer.scrollTo({
|
|
284
|
-
top: scrollRequest.scrollPos,
|
|
285
|
-
left: scrollLeft,
|
|
286
|
-
behavior: "instant"
|
|
287
|
-
});
|
|
288
|
-
}
|
|
289
|
-
break;
|
|
290
|
-
case "scroll-bottom":
|
|
291
|
-
{
|
|
292
|
-
contentContainer.scrollTo({
|
|
293
|
-
top: scrollRequest.scrollPos - (viewportBodyHeight - 2 * rowHeight),
|
|
294
|
-
left: scrollLeft,
|
|
295
|
-
behavior: "instant"
|
|
296
|
-
});
|
|
297
|
-
}
|
|
298
|
-
break;
|
|
299
|
-
case "scroll-row":
|
|
300
|
-
{
|
|
301
|
-
const activeRow = tableDomUtils.getRowElementByAriaIndex(
|
|
302
|
-
contentContainer,
|
|
303
|
-
scrollRequest.rowIndex
|
|
304
|
-
);
|
|
305
|
-
if (activeRow !== null) {
|
|
306
|
-
const [direction, distance] = tableDomUtils.howFarIsRowOutsideViewport(
|
|
307
|
-
activeRow,
|
|
308
|
-
totalHeaderHeight
|
|
309
|
-
);
|
|
310
|
-
if (direction && distance) {
|
|
311
|
-
if (isVirtualScroll) {
|
|
312
|
-
const offset = direction === "down" ? 1 : -1;
|
|
313
|
-
onVerticalScrollInSitu?.(offset);
|
|
314
|
-
const firstRow = firstRowRef.current + offset;
|
|
315
|
-
firstRowRef.current = firstRow;
|
|
316
|
-
setRange({
|
|
317
|
-
from: firstRow,
|
|
318
|
-
to: firstRow + viewportRowCount
|
|
319
|
-
});
|
|
320
|
-
} else {
|
|
321
|
-
let newScrollLeft = scrollLeft;
|
|
322
|
-
let newScrollTop = scrollTop;
|
|
323
|
-
if (direction === "up" || direction === "down") {
|
|
324
|
-
newScrollTop = Math.min(
|
|
325
|
-
Math.max(0, scrollTop + distance),
|
|
326
|
-
maxScrollTop
|
|
327
|
-
);
|
|
328
|
-
} else {
|
|
329
|
-
newScrollLeft = Math.min(
|
|
330
|
-
Math.max(0, scrollLeft + distance),
|
|
331
|
-
maxScrollLeft
|
|
332
|
-
);
|
|
333
|
-
}
|
|
334
|
-
contentContainer.scrollTo({
|
|
335
|
-
top: newScrollTop,
|
|
336
|
-
left: newScrollLeft,
|
|
337
|
-
// avoid behaviour: 'smooth', doesn't work correctly
|
|
338
|
-
behavior: "instant"
|
|
339
|
-
});
|
|
340
|
-
}
|
|
341
|
-
}
|
|
342
|
-
}
|
|
343
|
-
}
|
|
344
|
-
break;
|
|
345
|
-
case "scroll-page":
|
|
346
|
-
{
|
|
347
|
-
const { direction } = scrollRequest;
|
|
348
|
-
if (isVirtualScroll) {
|
|
349
|
-
const offset = direction === "down" ? viewportRowCount : -viewportRowCount;
|
|
350
|
-
onVerticalScrollInSitu?.(offset);
|
|
351
|
-
const firstRow = firstRowRef.current + offset;
|
|
352
|
-
firstRowRef.current = firstRow;
|
|
353
|
-
setRange({ from: firstRow, to: firstRow + viewportRowCount });
|
|
354
|
-
} else {
|
|
355
|
-
const scrollBy = direction === "down" ? appliedPageSize : -appliedPageSize;
|
|
356
|
-
const newScrollTop = Math.min(
|
|
357
|
-
Math.max(0, scrollTop + scrollBy),
|
|
358
|
-
maxScrollTop
|
|
359
|
-
);
|
|
360
|
-
contentContainer.scrollTo({
|
|
361
|
-
top: newScrollTop,
|
|
362
|
-
left: scrollLeft,
|
|
363
|
-
behavior: "auto"
|
|
364
|
-
});
|
|
365
|
-
}
|
|
366
|
-
}
|
|
367
|
-
break;
|
|
368
|
-
case "scroll-end":
|
|
369
|
-
{
|
|
370
|
-
const { direction } = scrollRequest;
|
|
371
|
-
const scrollTo = direction === "end" ? maxScrollTop : 0;
|
|
372
|
-
contentContainer.scrollTo({
|
|
373
|
-
top: scrollTo,
|
|
374
|
-
left: contentContainer.scrollLeft,
|
|
375
|
-
behavior: "auto"
|
|
376
|
-
});
|
|
377
|
-
}
|
|
378
|
-
break;
|
|
379
|
-
default:
|
|
380
|
-
console.warn(`unexpected scroll request ${scrollRequest["type"]}`);
|
|
381
|
-
}
|
|
382
|
-
}
|
|
383
|
-
},
|
|
384
|
-
[
|
|
385
|
-
appliedPageSize,
|
|
386
|
-
isVirtualScroll,
|
|
387
|
-
onVerticalScrollInSitu,
|
|
388
|
-
rowHeight,
|
|
389
|
-
setRange,
|
|
390
|
-
totalHeaderHeight,
|
|
391
|
-
viewportBodyHeight,
|
|
392
|
-
viewportRowCount
|
|
393
|
-
]
|
|
394
|
-
);
|
|
395
|
-
const scrollHandles = react.useMemo(
|
|
396
|
-
// TODO not complete yet
|
|
397
|
-
() => ({
|
|
398
|
-
scrollToIndex: (rowIndex) => {
|
|
399
|
-
if (scrollbarContainerRef.current) {
|
|
400
|
-
const scrollPos = (rowIndex - 30) * 20;
|
|
401
|
-
scrollbarContainerRef.current.scrollTop = scrollPos;
|
|
402
|
-
}
|
|
403
|
-
},
|
|
404
|
-
scrollToKey: (rowKey) => {
|
|
405
|
-
console.log(`scrollToKey ${rowKey}`);
|
|
406
|
-
}
|
|
407
|
-
}),
|
|
408
|
-
[]
|
|
409
|
-
);
|
|
410
|
-
react.useImperativeHandle(scrollingApiRef, () => {
|
|
411
|
-
if (scrollbarContainerRef.current) {
|
|
412
|
-
return scrollHandles;
|
|
413
|
-
} else {
|
|
414
|
-
return noScrolling;
|
|
415
|
-
}
|
|
416
|
-
}, [scrollHandles]);
|
|
417
|
-
react.useEffect(() => {
|
|
418
|
-
if (rowHeight !== rowHeightRef.current) {
|
|
419
|
-
rowHeightRef.current = rowHeight;
|
|
420
|
-
if (contentContainerPosRef.current.scrollTop > 0) {
|
|
421
|
-
if (contentContainerRef.current) {
|
|
422
|
-
contentContainerRef.current.scrollTop = 0;
|
|
423
|
-
}
|
|
424
|
-
}
|
|
425
|
-
} else if (usesMeasuredHeaderHeight) {
|
|
426
|
-
const { current: from } = firstRowRef;
|
|
427
|
-
const rowRange = { from, to: from + viewportRowCount };
|
|
428
|
-
setRange(rowRange);
|
|
429
|
-
}
|
|
430
|
-
}, [rowHeight, setRange, usesMeasuredHeaderHeight, viewportRowCount]);
|
|
431
|
-
return {
|
|
432
|
-
columnsWithinViewport: columnsWithinViewportRef.current,
|
|
433
|
-
/** Ref to be assigned to ScrollbarContainer */
|
|
434
|
-
scrollbarContainerRef: scrollbarContainerCallbackRef,
|
|
435
|
-
/** Ref to be assigned to ContentContainer */
|
|
436
|
-
contentContainerRef: contentContainerCallbackRef,
|
|
437
|
-
/** Scroll the table */
|
|
438
|
-
requestScroll,
|
|
439
|
-
/** number of leading columns not rendered because of virtualization */
|
|
440
|
-
virtualColSpan: preSpanRef.current
|
|
441
|
-
};
|
|
442
|
-
};
|
|
443
|
-
|
|
444
|
-
exports.noScrolling = noScrolling;
|
|
445
|
-
exports.useTableScroll = useTableScroll;
|
|
446
|
-
//# sourceMappingURL=useTableScroll.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useTableScroll.js","sources":["../src/useTableScroll.ts"],"sourcesContent":["import {\n getColumnsInViewport,\n itemsChanged,\n RowAtPositionFunc,\n} from \"@vuu-ui/vuu-utils\";\nimport type { VuuRange } from \"@vuu-ui/vuu-protocol-types\";\nimport {\n ForwardedRef,\n MutableRefObject,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport type { ViewportMeasurements } from \"./useTableViewport\";\nimport {\n getRowElementByAriaIndex,\n howFarIsRowOutsideViewport,\n} from \"./table-dom-utils\";\nimport type { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { FocusCell } from \"./useCellFocus\";\nimport { ICellFocusState } from \"./CellFocusState\";\n\nexport type ScrollDirectionVertical = \"up\" | \"down\";\nexport type ScrollDirectionHorizontal = \"left\" | \"right\";\nexport type ScrollDirection =\n | ScrollDirectionVertical\n | ScrollDirectionHorizontal;\n\n/**\n * scroll into view the row at given pixel offset.\n */\nexport interface ScrollRequestPosition {\n scrollPos: number;\n type: \"scroll-top\" | \"scroll-bottom\";\n}\n\n/**\n * scroll into view the row at given row index posiiton.\n */\nexport interface ScrollRequestRow {\n rowIndex: number;\n type: \"scroll-row\";\n}\nexport interface ScrollRequestEnd {\n type: \"scroll-end\";\n direction: \"home\" | \"end\";\n}\n\nexport interface ScrollRequestPage {\n type: \"scroll-page\";\n direction: ScrollDirectionVertical;\n}\n\nexport type ScrollRequest =\n | ScrollRequestPage\n | ScrollRequestEnd\n | ScrollRequestRow\n | ScrollRequestPosition;\n\nexport type ScrollRequestHandler = (request: ScrollRequest) => void;\n\nexport interface ScrollingAPI {\n scrollToIndex: (itemIndex: number) => void;\n scrollToKey: (rowKey: string) => void;\n}\n\n/** How far we allow horizontal scroll movement before we recheck the rendered columns */\nconst SCROLL_MOVE_CHECK_THRESHOLD = 100;\n\n/** The buffer size in pixels that we allow for rendering columns just outside the viewport */\nconst HORIZONTAL_SCROLL_BUFFER = 200;\n\n/**\n * Return the maximum scroll positions for gioven container\n * @param container\n * @returns [maxScrollLeft, maxScrollTop]\n */\nconst getMaxScroll = (container: HTMLElement) => {\n const { clientHeight, clientWidth, scrollHeight, scrollWidth } = container;\n return [scrollWidth - clientWidth, scrollHeight - clientHeight];\n};\n\nconst getScrollDirection = (\n prevScrollPositions: ScrollPos | undefined,\n scrollPos: number,\n) => {\n if (prevScrollPositions === undefined) {\n return undefined;\n } else {\n const { scrollTop: prevTop } = prevScrollPositions;\n return scrollPos > prevTop ? \"fwd\" : \"bwd\";\n }\n};\n\nconst getPctScroll = (container: HTMLElement, currentScrollPos?: ScrollPos) => {\n const {\n clientHeight,\n clientWidth,\n scrollHeight,\n scrollLeft,\n scrollTop,\n scrollWidth,\n } = container;\n\n const maxScrollLeft = scrollWidth - clientWidth;\n const pctScrollLeft = scrollLeft / (scrollWidth - clientWidth);\n const maxScrollTop = scrollHeight - clientHeight;\n let pctScrollTop = scrollTop / (scrollHeight - clientHeight);\n\n const scrollDirection = getScrollDirection(currentScrollPos, scrollTop);\n\n if (scrollDirection === \"fwd\" && pctScrollTop > 0.99) {\n pctScrollTop = 1;\n } else if (scrollDirection === \"bwd\" && pctScrollTop < 0.02) {\n pctScrollTop = 0;\n }\n\n return [\n scrollLeft,\n pctScrollLeft,\n maxScrollLeft,\n scrollTop,\n pctScrollTop,\n maxScrollTop,\n ];\n};\n\nexport const noScrolling: ScrollingAPI = {\n scrollToIndex: () => undefined,\n scrollToKey: () => undefined,\n};\n\ninterface CallbackRefHookProps<T = HTMLElement> {\n onAttach?: (el: T) => void;\n onDetach: (el: T) => void;\n label?: string;\n}\n\nconst useCallbackRef = <T = HTMLElement>({\n onAttach,\n onDetach,\n}: CallbackRefHookProps<T>) => {\n const ref = useRef<T | null>(null);\n const callbackRef = useCallback(\n (el: T | null) => {\n if (el) {\n ref.current = el;\n onAttach?.(el);\n } else if (ref.current) {\n const { current: originalRef } = ref;\n ref.current = el;\n onDetach?.(originalRef);\n }\n },\n [onAttach, onDetach],\n );\n return callbackRef;\n};\n\ntype ScrollPos = {\n scrollLeft: number;\n scrollTop: number;\n};\n\nexport interface TableScrollHookProps {\n cellFocusStateRef: MutableRefObject<ICellFocusState>;\n columns: RuntimeColumnDescriptor[];\n focusCell?: FocusCell;\n getRowAtPosition: RowAtPositionFunc;\n onHorizontalScroll?: (scrollLeft: number) => void;\n onVerticalScroll?: (scrollTop: number, pctScrollTop: number) => void;\n /**\n * When we have a virtualized scroll container, keyboard navigation is\n * performed `in situ`. We shift the range of rows rendered within the\n * viewport, whithout actually moving the scroll position\n */\n onVerticalScrollInSitu?: (rowIndexOffsetCount: number) => void;\n rowHeight: number;\n scrollingApiRef?: ForwardedRef<ScrollingAPI>;\n setRange: (range: VuuRange) => void;\n showPaginationControls?: boolean;\n viewportMeasurements: ViewportMeasurements;\n}\n\nexport const useTableScroll = ({\n cellFocusStateRef,\n columns,\n focusCell,\n getRowAtPosition,\n onHorizontalScroll,\n onVerticalScroll,\n onVerticalScrollInSitu,\n rowHeight,\n scrollingApiRef,\n setRange,\n viewportMeasurements,\n}: TableScrollHookProps) => {\n const firstRowRef = useRef<number>(0);\n const rowHeightRef = useRef(rowHeight);\n const contentContainerScrolledRef = useRef(false);\n const contentContainerPosRef = useRef<ScrollPos>({\n scrollTop: 0,\n scrollLeft: 0,\n });\n const scrollbarContainerScrolledRef = useRef(false);\n const scrollbarContainerPosRef = useRef<ScrollPos>({\n scrollTop: 0,\n scrollLeft: 0,\n });\n const scrollbarContainerRef = useRef<HTMLDivElement | null>(null);\n const contentContainerRef = useRef<HTMLDivElement | null>(null);\n const lastHorizontalScrollCheckPoint = useRef(0);\n\n const {\n appliedPageSize,\n isVirtualScroll,\n rowCount: viewportRowCount,\n totalHeaderHeight,\n usesMeasuredHeaderHeight,\n viewportBodyHeight,\n viewportWidth,\n } = viewportMeasurements;\n\n const columnsWithinViewportRef = useRef<RuntimeColumnDescriptor[]>([]);\n const [, forceRefresh] = useState({});\n\n const preSpanRef = useRef(0);\n\n useMemo(() => {\n const [visibleColumns, offset] = getColumnsInViewport(\n columns,\n contentContainerPosRef.current.scrollLeft,\n contentContainerPosRef.current.scrollLeft +\n viewportWidth +\n HORIZONTAL_SCROLL_BUFFER,\n );\n preSpanRef.current = offset;\n columnsWithinViewportRef.current = visibleColumns;\n }, [viewportWidth, columns]);\n\n const handleHorizontalScroll = useCallback(\n (scrollLeft: number) => {\n contentContainerPosRef.current.scrollLeft = scrollLeft;\n onHorizontalScroll?.(scrollLeft);\n\n if (\n Math.abs(scrollLeft - lastHorizontalScrollCheckPoint.current) >\n SCROLL_MOVE_CHECK_THRESHOLD\n ) {\n lastHorizontalScrollCheckPoint.current = scrollLeft;\n\n const [visibleColumns, pre] = getColumnsInViewport(\n columns,\n scrollLeft,\n scrollLeft + viewportWidth + HORIZONTAL_SCROLL_BUFFER,\n );\n\n if (itemsChanged(columnsWithinViewportRef.current, visibleColumns)) {\n preSpanRef.current = pre;\n columnsWithinViewportRef.current = visibleColumns;\n forceRefresh({});\n }\n }\n },\n [columns, onHorizontalScroll, viewportWidth],\n );\n const handleVerticalScroll = useCallback(\n (scrollTop: number, pctScrollTop: number) => {\n contentContainerPosRef.current.scrollTop = scrollTop;\n const { current: prevFirstRow } = firstRowRef;\n\n onVerticalScroll?.(scrollTop, pctScrollTop);\n const firstRow = getRowAtPosition(scrollTop);\n if (firstRow !== prevFirstRow) {\n firstRowRef.current = firstRow;\n const lastRow = firstRow + viewportRowCount;\n setRange({ from: firstRow, to: lastRow });\n\n // If we've scrolled the focused cell out of view, we need to remove\n // focus from it. The row element will be recycled and used as the\n // render target for a different DataRow, we do not want the focus\n // state of the cell to be preserved.\n // Conversely, if we scroll the focussed cell back into the viewport,\n // we must re-apply focus to it. We use the placeholder cell for this.\n const { current: focusState } = cellFocusStateRef;\n if (focusState.cellPos) {\n const prevLastRow = prevFirstRow + viewportRowCount;\n const [row] = focusState.cellPos;\n const wasInViewport = row >= prevFirstRow && row < prevLastRow;\n const isInViewport = row >= firstRow && row < lastRow;\n\n if (wasInViewport && !isInViewport) {\n focusState.placeholderEl?.focus({ preventScroll: true });\n focusState.outsideViewport = row < firstRow ? \"above\" : \"below\";\n } else if (isInViewport && !wasInViewport) {\n focusState.outsideViewport = false;\n focusCell?.(focusState.cellPos);\n }\n }\n }\n onVerticalScrollInSitu?.(0);\n },\n [\n cellFocusStateRef,\n focusCell,\n getRowAtPosition,\n onVerticalScroll,\n onVerticalScrollInSitu,\n setRange,\n viewportRowCount,\n ],\n );\n\n const handleScrollbarContainerScroll = useCallback(() => {\n const { current: contentContainer } = contentContainerRef;\n const { current: scrollbarContainer } = scrollbarContainerRef;\n const { current: contentContainerScrolled } = contentContainerScrolledRef;\n const { current: scrollPos } = scrollbarContainerPosRef;\n\n if (contentContainerScrolled) {\n contentContainerScrolledRef.current = false;\n } else if (contentContainer && scrollbarContainer) {\n scrollbarContainerScrolledRef.current = true;\n const [scrollLeft, pctScrollLeft, , scrollTop, pctScrollTop] =\n getPctScroll(scrollbarContainer, scrollPos);\n\n scrollPos.scrollLeft = scrollLeft;\n scrollPos.scrollTop = scrollTop;\n\n const [maxScrollLeft, maxScrollTop] = getMaxScroll(scrollbarContainer);\n const contentScrollLeft = Math.round(pctScrollLeft * maxScrollLeft);\n const contentScrollTop = pctScrollTop * maxScrollTop;\n\n contentContainer.scrollTo({\n left: contentScrollLeft,\n top: contentScrollTop,\n behavior: \"auto\",\n });\n }\n onVerticalScrollInSitu?.(0);\n }, [onVerticalScrollInSitu]);\n\n const handleContentContainerScroll = useCallback(() => {\n const { current: scrollbarContainerScrolled } =\n scrollbarContainerScrolledRef;\n const { current: contentContainer } = contentContainerRef;\n const { current: scrollbarContainer } = scrollbarContainerRef;\n const { current: scrollPos } = contentContainerPosRef;\n if (contentContainer && scrollbarContainer) {\n const [\n scrollLeft,\n pctScrollLeft,\n maxScrollLeft,\n scrollTop,\n pctScrollTop,\n maxScrollTop,\n ] = getPctScroll(contentContainer);\n\n contentContainerScrolledRef.current = true;\n\n if (scrollbarContainerScrolled) {\n scrollbarContainerScrolledRef.current = false;\n } else {\n scrollbarContainer.scrollLeft = Math.round(\n pctScrollLeft * maxScrollLeft,\n );\n scrollbarContainer.scrollTop = pctScrollTop * maxScrollTop;\n }\n\n if (scrollPos.scrollTop !== scrollTop) {\n handleVerticalScroll(scrollTop, pctScrollTop);\n }\n if (scrollPos.scrollLeft !== scrollLeft) {\n handleHorizontalScroll(scrollLeft);\n }\n }\n }, [handleVerticalScroll, handleHorizontalScroll]);\n\n const handleAttachScrollbarContainer = useCallback(\n (el: HTMLDivElement) => {\n scrollbarContainerRef.current = el;\n el.addEventListener(\"scroll\", handleScrollbarContainerScroll, {\n passive: true,\n });\n },\n [handleScrollbarContainerScroll],\n );\n\n const handleDetachScrollbarContainer = useCallback(\n (el: HTMLDivElement) => {\n scrollbarContainerRef.current = null;\n el.removeEventListener(\"scroll\", handleScrollbarContainerScroll);\n },\n [handleScrollbarContainerScroll],\n );\n\n const handleAttachContentContainer = useCallback(\n (el: HTMLDivElement) => {\n contentContainerRef.current = el;\n el.addEventListener(\"scroll\", handleContentContainerScroll, {\n passive: true,\n });\n },\n [handleContentContainerScroll],\n );\n\n const handleDetachContentContainer = useCallback(\n (el: HTMLDivElement) => {\n contentContainerRef.current = null;\n el.removeEventListener(\"scroll\", handleContentContainerScroll);\n },\n [handleContentContainerScroll],\n );\n\n const contentContainerCallbackRef = useCallbackRef({\n onAttach: handleAttachContentContainer,\n onDetach: handleDetachContentContainer,\n });\n\n const scrollbarContainerCallbackRef = useCallbackRef({\n onAttach: handleAttachScrollbarContainer,\n onDetach: handleDetachScrollbarContainer,\n });\n\n const requestScroll: ScrollRequestHandler = useCallback(\n (scrollRequest) => {\n const { current: contentContainer } = contentContainerRef;\n if (contentContainer) {\n const [maxScrollLeft, maxScrollTop] = getMaxScroll(contentContainer);\n const { scrollLeft, scrollTop } = contentContainer;\n contentContainerScrolledRef.current = false;\n switch (scrollRequest.type) {\n case \"scroll-top\":\n {\n contentContainer.scrollTo({\n top: scrollRequest.scrollPos,\n left: scrollLeft,\n behavior: \"instant\",\n });\n }\n break;\n case \"scroll-bottom\":\n {\n contentContainer.scrollTo({\n top:\n scrollRequest.scrollPos -\n (viewportBodyHeight - 2 * rowHeight),\n left: scrollLeft,\n behavior: \"instant\",\n });\n }\n break;\n case \"scroll-row\":\n {\n const activeRow = getRowElementByAriaIndex(\n contentContainer,\n scrollRequest.rowIndex,\n );\n\n if (activeRow !== null) {\n const [direction, distance] = howFarIsRowOutsideViewport(\n activeRow,\n totalHeaderHeight,\n );\n if (direction && distance) {\n if (isVirtualScroll) {\n const offset = direction === \"down\" ? 1 : -1;\n onVerticalScrollInSitu?.(offset);\n const firstRow = firstRowRef.current + offset;\n firstRowRef.current = firstRow;\n setRange({\n from: firstRow,\n to: firstRow + viewportRowCount,\n });\n } else {\n let newScrollLeft = scrollLeft;\n let newScrollTop = scrollTop;\n if (direction === \"up\" || direction === \"down\") {\n newScrollTop = Math.min(\n Math.max(0, scrollTop + distance),\n maxScrollTop,\n );\n } else {\n newScrollLeft = Math.min(\n Math.max(0, scrollLeft + distance),\n maxScrollLeft,\n );\n }\n contentContainer.scrollTo({\n top: newScrollTop,\n left: newScrollLeft,\n // avoid behaviour: 'smooth', doesn't work correctly\n behavior: \"instant\",\n });\n }\n }\n }\n }\n break;\n case \"scroll-page\":\n {\n const { direction } = scrollRequest;\n if (isVirtualScroll) {\n const offset =\n direction === \"down\" ? viewportRowCount : -viewportRowCount;\n onVerticalScrollInSitu?.(offset);\n const firstRow = firstRowRef.current + offset;\n firstRowRef.current = firstRow;\n setRange({ from: firstRow, to: firstRow + viewportRowCount });\n } else {\n const scrollBy =\n direction === \"down\" ? appliedPageSize : -appliedPageSize;\n const newScrollTop = Math.min(\n Math.max(0, scrollTop + scrollBy),\n maxScrollTop,\n );\n contentContainer.scrollTo({\n top: newScrollTop,\n left: scrollLeft,\n behavior: \"auto\",\n });\n }\n }\n break;\n case \"scroll-end\":\n {\n const { direction } = scrollRequest;\n const scrollTo = direction === \"end\" ? maxScrollTop : 0;\n contentContainer.scrollTo({\n top: scrollTo,\n left: contentContainer.scrollLeft,\n behavior: \"auto\",\n });\n }\n break;\n default:\n console.warn(`unexpected scroll request ${scrollRequest[\"type\"]}`);\n }\n }\n },\n [\n appliedPageSize,\n isVirtualScroll,\n onVerticalScrollInSitu,\n rowHeight,\n setRange,\n totalHeaderHeight,\n viewportBodyHeight,\n viewportRowCount,\n ],\n );\n\n const scrollHandles: ScrollingAPI = useMemo(\n // TODO not complete yet\n () => ({\n scrollToIndex: (rowIndex: number) => {\n if (scrollbarContainerRef.current) {\n // TODO hardcoded rowHeight\n const scrollPos = (rowIndex - 30) * 20;\n scrollbarContainerRef.current.scrollTop = scrollPos;\n }\n },\n scrollToKey: (rowKey: string) => {\n console.log(`scrollToKey ${rowKey}`);\n },\n }),\n [],\n );\n\n useImperativeHandle(scrollingApiRef, () => {\n if (scrollbarContainerRef.current) {\n return scrollHandles;\n } else {\n return noScrolling;\n }\n }, [scrollHandles]);\n\n useEffect(() => {\n if (rowHeight !== rowHeightRef.current) {\n rowHeightRef.current = rowHeight;\n if (contentContainerPosRef.current.scrollTop > 0) {\n if (contentContainerRef.current) {\n contentContainerRef.current.scrollTop = 0;\n }\n }\n } else if (usesMeasuredHeaderHeight) {\n const { current: from } = firstRowRef;\n const rowRange = { from, to: from + viewportRowCount };\n setRange(rowRange);\n }\n }, [rowHeight, setRange, usesMeasuredHeaderHeight, viewportRowCount]);\n\n return {\n columnsWithinViewport: columnsWithinViewportRef.current,\n /** Ref to be assigned to ScrollbarContainer */\n scrollbarContainerRef: scrollbarContainerCallbackRef,\n /** Ref to be assigned to ContentContainer */\n contentContainerRef: contentContainerCallbackRef,\n /** Scroll the table */\n requestScroll,\n /** number of leading columns not rendered because of virtualization */\n virtualColSpan: preSpanRef.current,\n };\n};\n"],"names":["useRef","useCallback","useState","useMemo","getColumnsInViewport","itemsChanged","getRowElementByAriaIndex","howFarIsRowOutsideViewport","useImperativeHandle","useEffect"],"mappings":"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"}
|
package/cjs/useTableViewport.js
DELETED
|
@@ -1,137 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
4
|
-
var react = require('react');
|
|
5
|
-
|
|
6
|
-
const MAX_PIXEL_HEIGHT = 1e7;
|
|
7
|
-
const UNMEASURED_VIEWPORT = {
|
|
8
|
-
appliedPageSize: 0,
|
|
9
|
-
contentHeight: 0,
|
|
10
|
-
contentWidth: 0,
|
|
11
|
-
getRowAtPosition: () => -1,
|
|
12
|
-
getRowOffset: () => -1,
|
|
13
|
-
horizontalScrollbarHeight: 0,
|
|
14
|
-
isVirtualScroll: false,
|
|
15
|
-
pinnedWidthLeft: 0,
|
|
16
|
-
pinnedWidthRight: 0,
|
|
17
|
-
rowCount: 0,
|
|
18
|
-
setInSituRowOffset: () => void 0,
|
|
19
|
-
setScrollTop: () => void 0,
|
|
20
|
-
totalHeaderHeight: 0,
|
|
21
|
-
usesMeasuredHeaderHeight: false,
|
|
22
|
-
verticalScrollbarWidth: 0,
|
|
23
|
-
viewportBodyHeight: 0,
|
|
24
|
-
viewportWidth: 0
|
|
25
|
-
};
|
|
26
|
-
const getViewportHeightProps = (rowCount, rowHeight, size, showPaginationControls = false) => {
|
|
27
|
-
if (showPaginationControls) {
|
|
28
|
-
return {
|
|
29
|
-
pixelContentHeight: size.height,
|
|
30
|
-
virtualContentHeight: size.height,
|
|
31
|
-
virtualisedExtent: 0
|
|
32
|
-
};
|
|
33
|
-
} else {
|
|
34
|
-
const virtualContentHeight = rowCount * rowHeight;
|
|
35
|
-
const pixelContentHeight = Math.min(virtualContentHeight, MAX_PIXEL_HEIGHT);
|
|
36
|
-
const virtualisedExtent = virtualContentHeight - pixelContentHeight;
|
|
37
|
-
return {
|
|
38
|
-
pixelContentHeight,
|
|
39
|
-
virtualContentHeight,
|
|
40
|
-
virtualisedExtent
|
|
41
|
-
};
|
|
42
|
-
}
|
|
43
|
-
};
|
|
44
|
-
const useTableViewport = ({
|
|
45
|
-
columns,
|
|
46
|
-
headerHeight,
|
|
47
|
-
rowCount,
|
|
48
|
-
rowHeight,
|
|
49
|
-
selectionEndSize = 4,
|
|
50
|
-
showPaginationControls,
|
|
51
|
-
size
|
|
52
|
-
}) => {
|
|
53
|
-
const inSituRowOffsetRef = react.useRef(0);
|
|
54
|
-
const pctScrollTopRef = react.useRef(0);
|
|
55
|
-
const { virtualContentHeight, pixelContentHeight, virtualisedExtent } = getViewportHeightProps(rowCount, rowHeight, size, showPaginationControls);
|
|
56
|
-
const { pinnedWidthLeft, pinnedWidthRight, unpinnedWidth } = react.useMemo(
|
|
57
|
-
() => vuuUtils.measurePinnedColumns(columns, selectionEndSize),
|
|
58
|
-
[columns, selectionEndSize]
|
|
59
|
-
);
|
|
60
|
-
const [getRowOffset, getRowAtPosition, isVirtualScroll] = react.useMemo(() => {
|
|
61
|
-
if (virtualisedExtent) {
|
|
62
|
-
const [_getRowOffset, getRowAtPosition2, _isVirtual] = vuuUtils.virtualRowPositioning(rowHeight, virtualisedExtent, pctScrollTopRef);
|
|
63
|
-
const getOffset = (row) => {
|
|
64
|
-
return _getRowOffset(row, inSituRowOffsetRef.current);
|
|
65
|
-
};
|
|
66
|
-
return [getOffset, getRowAtPosition2, _isVirtual];
|
|
67
|
-
} else {
|
|
68
|
-
return vuuUtils.actualRowPositioning(rowHeight);
|
|
69
|
-
}
|
|
70
|
-
}, [virtualisedExtent, rowHeight]);
|
|
71
|
-
const setScrollTop = react.useCallback((_, scrollPct) => {
|
|
72
|
-
pctScrollTopRef.current = scrollPct;
|
|
73
|
-
}, []);
|
|
74
|
-
const setInSituRowOffset = react.useCallback((rowIndexOffset) => {
|
|
75
|
-
if (rowIndexOffset === 0) {
|
|
76
|
-
inSituRowOffsetRef.current = 0;
|
|
77
|
-
} else {
|
|
78
|
-
inSituRowOffsetRef.current = Math.max(
|
|
79
|
-
0,
|
|
80
|
-
inSituRowOffsetRef.current + rowIndexOffset
|
|
81
|
-
);
|
|
82
|
-
}
|
|
83
|
-
}, []);
|
|
84
|
-
return react.useMemo(() => {
|
|
85
|
-
if (size) {
|
|
86
|
-
const scrollbarSize = 10;
|
|
87
|
-
const contentWidth = pinnedWidthLeft + unpinnedWidth + pinnedWidthRight;
|
|
88
|
-
const horizontalScrollbarHeight = contentWidth > size.width ? scrollbarSize : 0;
|
|
89
|
-
const measuredHeaderHeight = headerHeight === -1 ? 0 : headerHeight;
|
|
90
|
-
const visibleRows = showPaginationControls ? Math.floor((pixelContentHeight - headerHeight) / rowHeight) : (size.height - headerHeight) / rowHeight;
|
|
91
|
-
const count = Number.isInteger(visibleRows) ? visibleRows : Math.ceil(visibleRows);
|
|
92
|
-
const viewportBodyHeight = size.height - measuredHeaderHeight;
|
|
93
|
-
const verticalScrollbarWidth = showPaginationControls ? 0 : pixelContentHeight > viewportBodyHeight ? scrollbarSize : 0;
|
|
94
|
-
const appliedPageSize = count * rowHeight * (pixelContentHeight / virtualContentHeight);
|
|
95
|
-
const viewportWidth = size.width;
|
|
96
|
-
return {
|
|
97
|
-
usesMeasuredHeaderHeight: headerHeight !== -1,
|
|
98
|
-
appliedPageSize,
|
|
99
|
-
contentHeight: pixelContentHeight,
|
|
100
|
-
contentWidth,
|
|
101
|
-
getRowAtPosition,
|
|
102
|
-
getRowOffset,
|
|
103
|
-
isVirtualScroll,
|
|
104
|
-
horizontalScrollbarHeight,
|
|
105
|
-
pinnedWidthLeft,
|
|
106
|
-
pinnedWidthRight,
|
|
107
|
-
rowCount: count,
|
|
108
|
-
setInSituRowOffset,
|
|
109
|
-
setScrollTop,
|
|
110
|
-
totalHeaderHeight: headerHeight,
|
|
111
|
-
verticalScrollbarWidth,
|
|
112
|
-
viewportBodyHeight,
|
|
113
|
-
viewportWidth
|
|
114
|
-
};
|
|
115
|
-
} else {
|
|
116
|
-
return UNMEASURED_VIEWPORT;
|
|
117
|
-
}
|
|
118
|
-
}, [
|
|
119
|
-
size,
|
|
120
|
-
pinnedWidthLeft,
|
|
121
|
-
unpinnedWidth,
|
|
122
|
-
pinnedWidthRight,
|
|
123
|
-
headerHeight,
|
|
124
|
-
rowHeight,
|
|
125
|
-
showPaginationControls,
|
|
126
|
-
pixelContentHeight,
|
|
127
|
-
virtualContentHeight,
|
|
128
|
-
getRowAtPosition,
|
|
129
|
-
getRowOffset,
|
|
130
|
-
isVirtualScroll,
|
|
131
|
-
setInSituRowOffset,
|
|
132
|
-
setScrollTop
|
|
133
|
-
]);
|
|
134
|
-
};
|
|
135
|
-
|
|
136
|
-
exports.useTableViewport = useTableViewport;
|
|
137
|
-
//# sourceMappingURL=useTableViewport.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useTableViewport.js","sources":["../src/useTableViewport.ts"],"sourcesContent":["/**\n * This hook measures and calculates the values needed to manage layout\n * and virtualisation of the table. This includes measurements required\n * to support pinned columns.\n */\nimport { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { MeasuredSize } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n actualRowPositioning,\n measurePinnedColumns,\n RowAtPositionFunc,\n RowOffsetFunc,\n RowPositioning,\n virtualRowPositioning,\n} from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useMemo, useRef } from \"react\";\n\nexport interface TableViewportHookProps {\n columns: RuntimeColumnDescriptor[];\n headerHeight: number;\n rowCount: number;\n rowHeight: number;\n /**\n * this is the solid left/right `border` rendered on the selection block\n */\n selectionEndSize?: number;\n showPaginationControls?: boolean;\n size: MeasuredSize;\n}\n\nexport interface ViewportMeasurements {\n appliedPageSize: number;\n contentHeight: number;\n horizontalScrollbarHeight: number;\n isVirtualScroll: boolean;\n pinnedWidthLeft: number;\n pinnedWidthRight: number;\n rowCount: number;\n contentWidth: number;\n totalHeaderHeight: number;\n usesMeasuredHeaderHeight: boolean;\n verticalScrollbarWidth: number;\n viewportBodyHeight: number;\n viewportWidth: number;\n}\n\nexport interface TableViewportHookResult extends ViewportMeasurements {\n getRowAtPosition: RowAtPositionFunc;\n getRowOffset: RowOffsetFunc;\n setInSituRowOffset: (rowIndexOffset: number) => void;\n setScrollTop: (scrollTop: number, scrollPct: number) => void;\n}\n\n// Too simplistic, it depends on rowHeight\nconst MAX_PIXEL_HEIGHT = 10_000_000;\n\nconst UNMEASURED_VIEWPORT: TableViewportHookResult = {\n appliedPageSize: 0,\n contentHeight: 0,\n contentWidth: 0,\n getRowAtPosition: () => -1,\n getRowOffset: () => -1,\n horizontalScrollbarHeight: 0,\n isVirtualScroll: false,\n pinnedWidthLeft: 0,\n pinnedWidthRight: 0,\n rowCount: 0,\n setInSituRowOffset: () => undefined,\n setScrollTop: () => undefined,\n totalHeaderHeight: 0,\n usesMeasuredHeaderHeight: false,\n verticalScrollbarWidth: 0,\n viewportBodyHeight: 0,\n viewportWidth: 0,\n};\n\nconst getViewportHeightProps = (\n rowCount: number,\n rowHeight: number,\n size: MeasuredSize,\n showPaginationControls = false,\n) => {\n if (showPaginationControls) {\n return {\n pixelContentHeight: size.height,\n virtualContentHeight: size.height,\n virtualisedExtent: 0,\n };\n } else {\n const virtualContentHeight = rowCount * rowHeight;\n const pixelContentHeight = Math.min(virtualContentHeight, MAX_PIXEL_HEIGHT);\n const virtualisedExtent = virtualContentHeight - pixelContentHeight;\n return {\n pixelContentHeight,\n virtualContentHeight,\n virtualisedExtent,\n };\n }\n};\n\nexport const useTableViewport = ({\n columns,\n headerHeight,\n rowCount,\n rowHeight,\n selectionEndSize = 4,\n showPaginationControls,\n size,\n}: TableViewportHookProps): TableViewportHookResult => {\n const inSituRowOffsetRef = useRef(0);\n const pctScrollTopRef = useRef(0);\n\n const { virtualContentHeight, pixelContentHeight, virtualisedExtent } =\n getViewportHeightProps(rowCount, rowHeight, size, showPaginationControls);\n\n const { pinnedWidthLeft, pinnedWidthRight, unpinnedWidth } = useMemo(\n () => measurePinnedColumns(columns, selectionEndSize),\n [columns, selectionEndSize],\n );\n\n const [getRowOffset, getRowAtPosition, isVirtualScroll] =\n useMemo<RowPositioning>(() => {\n if (virtualisedExtent) {\n const [_getRowOffset, getRowAtPosition, _isVirtual] =\n virtualRowPositioning(rowHeight, virtualisedExtent, pctScrollTopRef);\n const getOffset: RowOffsetFunc = (row) => {\n return _getRowOffset(row, inSituRowOffsetRef.current);\n };\n return [getOffset, getRowAtPosition, _isVirtual];\n } else {\n return actualRowPositioning(rowHeight);\n }\n }, [virtualisedExtent, rowHeight]);\n\n const setScrollTop = useCallback((_: number, scrollPct: number) => {\n pctScrollTopRef.current = scrollPct;\n }, []);\n\n /**\n * The inSituRowOffset is used to simulate scrolling through a very large dataset\n * without actually moving the scroll position. It is triggered by keyboard\n * navigation. A simulated scroll operation will always be of one or more rows.\n * A value of zero is a request to reset the offset.\n */\n const setInSituRowOffset = useCallback((rowIndexOffset: number) => {\n if (rowIndexOffset === 0) {\n inSituRowOffsetRef.current = 0;\n } else {\n inSituRowOffsetRef.current = Math.max(\n 0,\n inSituRowOffsetRef.current + rowIndexOffset,\n );\n }\n }, []);\n\n return useMemo(() => {\n if (size) {\n // TODO determine this at runtime\n const scrollbarSize = 10;\n const contentWidth = pinnedWidthLeft + unpinnedWidth + pinnedWidthRight;\n const horizontalScrollbarHeight =\n contentWidth > size.width ? scrollbarSize : 0;\n const measuredHeaderHeight = headerHeight === -1 ? 0 : headerHeight;\n const visibleRows = showPaginationControls\n ? Math.floor((pixelContentHeight - headerHeight) / rowHeight)\n : (size.height - headerHeight) / rowHeight;\n const count = Number.isInteger(visibleRows)\n ? visibleRows\n : Math.ceil(visibleRows);\n const viewportBodyHeight = size.height - measuredHeaderHeight;\n const verticalScrollbarWidth = showPaginationControls\n ? 0\n : pixelContentHeight > viewportBodyHeight\n ? scrollbarSize\n : 0;\n\n const appliedPageSize =\n count * rowHeight * (pixelContentHeight / virtualContentHeight);\n\n const viewportWidth = size.width;\n\n return {\n usesMeasuredHeaderHeight: headerHeight !== -1,\n appliedPageSize,\n contentHeight: pixelContentHeight,\n contentWidth,\n getRowAtPosition,\n getRowOffset,\n isVirtualScroll,\n horizontalScrollbarHeight,\n pinnedWidthLeft,\n pinnedWidthRight,\n rowCount: count,\n setInSituRowOffset,\n setScrollTop,\n totalHeaderHeight: headerHeight,\n verticalScrollbarWidth,\n viewportBodyHeight,\n viewportWidth,\n };\n } else {\n return UNMEASURED_VIEWPORT;\n }\n }, [\n size,\n pinnedWidthLeft,\n unpinnedWidth,\n pinnedWidthRight,\n headerHeight,\n rowHeight,\n showPaginationControls,\n pixelContentHeight,\n virtualContentHeight,\n getRowAtPosition,\n getRowOffset,\n isVirtualScroll,\n setInSituRowOffset,\n setScrollTop,\n ]);\n};\n"],"names":["useRef","useMemo","measurePinnedColumns","getRowAtPosition","virtualRowPositioning","actualRowPositioning","useCallback"],"mappings":"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"}
|