-
-
Notifications
You must be signed in to change notification settings - Fork 134
/
useMRT_Effects.ts
103 lines (93 loc) · 3.05 KB
/
useMRT_Effects.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
import { useEffect, useReducer, useRef } from 'react';
import {
type MRT_RowData,
type MRT_SortingState,
type MRT_TableInstance,
} from '../types';
import { getDefaultColumnOrderIds } from '../utils/displayColumn.utils';
import { getCanRankRows } from '../utils/row.utils';
export const useMRT_Effects = <TData extends MRT_RowData>(
table: MRT_TableInstance<TData>,
) => {
const {
getIsSomeRowsPinned,
getPrePaginationRowModel,
getState,
options: { enablePagination, enableRowPinning, rowCount },
} = table;
const {
columnOrder,
density,
globalFilter,
isFullScreen,
isLoading,
pagination,
showSkeletons,
sorting,
} = getState();
const totalColumnCount = table.options.columns.length;
const totalRowCount = rowCount ?? getPrePaginationRowModel().rows.length;
const rerender = useReducer(() => ({}), {})[1];
const initialBodyHeight = useRef<string>();
const previousTop = useRef<number>();
useEffect(() => {
if (typeof window !== 'undefined') {
initialBodyHeight.current = document.body.style.height;
}
}, []);
//hide scrollbars when table is in full screen mode, preserve body scroll position after full screen exit
useEffect(() => {
if (typeof window !== 'undefined') {
if (isFullScreen) {
previousTop.current = document.body.getBoundingClientRect().top; //save scroll position
document.body.style.height = '100dvh'; //hide page scrollbars when table is in full screen mode
} else {
document.body.style.height = initialBodyHeight.current as string;
if (!previousTop.current) return;
//restore scroll position
window.scrollTo({
behavior: 'instant',
top: -1 * (previousTop.current as number),
});
}
}
}, [isFullScreen]);
//recalculate column order when columns change or features are toggled on/off
useEffect(() => {
if (totalColumnCount !== columnOrder.length) {
table.setColumnOrder(getDefaultColumnOrderIds(table.options));
}
}, [totalColumnCount]);
//if page index is out of bounds, set it to the last page
useEffect(() => {
if (!enablePagination || isLoading || showSkeletons) return;
const { pageIndex, pageSize } = pagination;
const firstVisibleRowIndex = pageIndex * pageSize;
if (firstVisibleRowIndex >= totalRowCount) {
table.setPageIndex(Math.ceil(totalRowCount / pageSize) - 1);
}
}, [totalRowCount]);
//turn off sort when global filter is looking for ranked results
const appliedSort = useRef<MRT_SortingState>(sorting);
useEffect(() => {
if (sorting.length) {
appliedSort.current = sorting;
}
}, [sorting]);
useEffect(() => {
if (!getCanRankRows(table)) return;
if (globalFilter) {
table.setSorting([]);
} else {
table.setSorting(() => appliedSort.current || []);
}
}, [globalFilter]);
//fix pinned row top style when density changes
useEffect(() => {
if (enableRowPinning && getIsSomeRowsPinned()) {
setTimeout(() => {
rerender();
}, 150);
}
}, [density]);
};