Skip to content

Commit b6c31c5

Browse files
astandrikastandrik
committed
fix: parentRef -> scrollContainerRef
1 parent 98ce3eb commit b6c31c5

File tree

18 files changed

+75
-71
lines changed

18 files changed

+75
-71
lines changed

‎src/components/PaginatedTable/PaginatedTable.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export interface PaginatedTableProps<T, F> {
2929
columns: Column<T>[];
3030
getRowClassName?: GetRowClassName<T>;
3131
rowHeight?: number;
32-
parentRef: React.RefObject<HTMLElement>;
32+
scrollContainerRef: React.RefObject<HTMLElement>;
3333
tableContainerRef: React.RefObject<HTMLDivElement>;
3434
initialSortParams?: SortParams;
3535
onColumnsResize?: HandleTableColumnsResize;
@@ -51,7 +51,7 @@ export const PaginatedTable = <T, F>({
5151
columns,
5252
getRowClassName,
5353
rowHeight = DEFAULT_TABLE_ROW_HEIGHT,
54-
parentRef,
54+
scrollContainerRef,
5555
tableContainerRef,
5656
initialSortParams,
5757
onColumnsResize,
@@ -88,7 +88,7 @@ export const PaginatedTable = <T, F>({
8888
const tableRef = React.useRef<HTMLDivElement>(null);
8989

9090
const activeChunks = useScrollBasedChunks({
91-
parentRef,
91+
scrollContainerRef,
9292
tableRef,
9393
totalItems: foundEntities,
9494
rowHeight,
@@ -127,7 +127,7 @@ export const PaginatedTable = <T, F>({
127127
// The hook handles scrolling internally based on dependencies
128128
useTableScroll({
129129
tableContainerRef,
130-
parentRef,
130+
scrollContainerRef,
131131
dependencies: [rawFilters], // Add filters as a dependency to trigger scroll when they change
132132
});
133133

‎src/components/PaginatedTable/useScrollBasedChunks.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import React from 'react';
33
import {calculateElementOffsetTop, rafThrottle} from './utils';
44

55
interface UseScrollBasedChunksProps {
6-
parentRef: React.RefObject<HTMLElement>;
6+
scrollContainerRef: React.RefObject<HTMLElement>;
77
tableRef: React.RefObject<HTMLElement>;
88
totalItems: number;
99
rowHeight: number;
@@ -14,7 +14,7 @@ interface UseScrollBasedChunksProps {
1414
const DEFAULT_OVERSCAN_COUNT = 1;
1515

1616
export const useScrollBasedChunks = ({
17-
parentRef,
17+
scrollContainerRef,
1818
tableRef,
1919
totalItems,
2020
rowHeight,
@@ -32,7 +32,7 @@ export const useScrollBasedChunks = ({
3232
);
3333

3434
const calculateVisibleRange = React.useCallback(() => {
35-
const container = parentRef?.current;
35+
const container = scrollContainerRef?.current;
3636
const table = tableRef.current;
3737
if (!container || !table) {
3838
return null;
@@ -49,7 +49,7 @@ export const useScrollBasedChunks = ({
4949
Math.max(chunksCount - 1, 0),
5050
);
5151
return {start, end};
52-
}, [parentRef, tableRef, rowHeight, chunkSize, overscanCount, chunksCount]);
52+
}, [scrollContainerRef, tableRef, rowHeight, chunkSize, overscanCount, chunksCount]);
5353

5454
const updateVisibleChunks = React.useCallback(() => {
5555
const newRange = calculateVisibleRange();
@@ -80,7 +80,7 @@ export const useScrollBasedChunks = ({
8080
}, [updateVisibleChunks]);
8181

8282
React.useEffect(() => {
83-
const container = parentRef?.current;
83+
const container = scrollContainerRef?.current;
8484
if (!container) {
8585
return undefined;
8686
}
@@ -91,7 +91,7 @@ export const useScrollBasedChunks = ({
9191
return () => {
9292
container.removeEventListener('scroll', throttledHandleScroll);
9393
};
94-
}, [handleScroll, parentRef]);
94+
}, [handleScroll, scrollContainerRef]);
9595

9696
return React.useMemo(() => {
9797
// boolean array that represents active chunks

‎src/components/PaginatedTable/useTableScroll.ts‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@ import React from 'react';
22

33
interface UseTableScrollProps {
44
tableContainerRef: React.RefObject<HTMLDivElement>;
5-
parentRef: React.RefObject<HTMLElement>;
5+
scrollContainerRef: React.RefObject<HTMLElement>;
66
dependencies?: any[]; // Optional additional dependencies for the effect
77
}
88

99
export const useTableScroll = ({
1010
tableContainerRef,
11-
parentRef,
11+
scrollContainerRef,
1212
dependencies = [],
1313
}: UseTableScrollProps) => {
1414
// Get the CSS variable value for sticky top offset
@@ -27,20 +27,21 @@ export const useTableScroll = ({
2727

2828
// Handle table scrolling function
2929
const handleTableScroll = React.useCallback(() => {
30-
if (tableContainerRef.current && parentRef.current) {
30+
if (tableContainerRef.current && scrollContainerRef.current) {
3131
// Get the sticky top offset value
3232
const stickyTopOffset = getStickyTopOffset();
3333

3434
// Scroll the parent container to the position of the table container
3535
const tableRect = tableContainerRef.current.getBoundingClientRect();
36-
const parentRect = parentRef.current.getBoundingClientRect();
37-
const scrollTop = tableRect.top - parentRect.top + parentRef.current.scrollTop;
38-
if (tableRect.top < parentRect.top) {
36+
const scrollContainerRect = scrollContainerRef.current.getBoundingClientRect();
37+
const scrollTop =
38+
tableRect.top - scrollContainerRect.top + scrollContainerRef.current.scrollTop;
39+
if (tableRect.top < scrollContainerRect.top) {
3940
// Adjust scroll position to account for sticky offset
40-
parentRef.current.scrollTo(0, scrollTop - stickyTopOffset);
41+
scrollContainerRef.current.scrollTo(0, scrollTop - stickyTopOffset);
4142
}
4243
}
43-
}, [parentRef, tableContainerRef, getStickyTopOffset]);
44+
}, [scrollContainerRef, tableContainerRef, getStickyTopOffset]);
4445

4546
// Trigger scroll adjustment with dependencies
4647
React.useLayoutEffect(() => {

‎src/containers/Cluster/Cluster.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -171,14 +171,17 @@ export function Cluster({
171171
<Route
172172
path={getLocationObjectFromHref(getClusterPath(clusterTabsIds.nodes)).pathname}
173173
>
174-
<Nodes parentRef={container} additionalNodesProps={additionalNodesProps} />
174+
<Nodes
175+
scrollContainerRef={container}
176+
additionalNodesProps={additionalNodesProps}
177+
/>
175178
</Route>
176179
<Route
177180
path={
178181
getLocationObjectFromHref(getClusterPath(clusterTabsIds.storage)).pathname
179182
}
180183
>
181-
<PaginatedStorage parentRef={container} />
184+
<PaginatedStorage scrollContainerRef={container} />
182185
</Route>
183186
<Route
184187
path={

‎src/containers/Node/Node.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -226,7 +226,7 @@ function NodePageContent({
226226
return (
227227
<PaginatedStorage
228228
nodeId={nodeId}
229-
parentRef={parentContainer}
229+
scrollContainerRef={parentContainer}
230230
viewContext={{
231231
nodeId: nodeId,
232232
}}

‎src/containers/Nodes/Nodes.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ import './Nodes.scss';
4949
export interface NodesProps {
5050
path?: string;
5151
database?: string;
52-
parentRef: React.RefObject<HTMLElement>;
52+
scrollContainerRef: React.RefObject<HTMLElement>;
5353
additionalNodesProps?: AdditionalNodesProps;
5454

5555
withPeerRoleFilter?: boolean;
@@ -64,7 +64,7 @@ export interface NodesProps {
6464
export function Nodes({
6565
path,
6666
database,
67-
parentRef,
67+
scrollContainerRef,
6868
additionalNodesProps,
6969
withPeerRoleFilter,
7070
columns = getNodesColumns({database, getNodeRef: additionalNodesProps?.getNodeRef}),
@@ -112,7 +112,7 @@ export function Nodes({
112112
<GroupedNodesComponent
113113
path={path}
114114
database={database}
115-
parentRef={parentRef}
115+
scrollContainerRef={scrollContainerRef}
116116
withPeerRoleFilter={withPeerRoleFilter}
117117
columns={preparedColumns}
118118
defaultColumnsIds={defaultColumnsIds}
@@ -127,7 +127,7 @@ export function Nodes({
127127
<NodesComponent
128128
path={path}
129129
database={database}
130-
parentRef={parentRef}
130+
scrollContainerRef={scrollContainerRef}
131131
withPeerRoleFilter={withPeerRoleFilter}
132132
columns={preparedColumns}
133133
defaultColumnsIds={defaultColumnsIds}
@@ -144,7 +144,7 @@ export function Nodes({
144144
interface NodesComponentProps {
145145
path?: string;
146146
database?: string;
147-
parentRef: React.RefObject<HTMLElement>;
147+
scrollContainerRef: React.RefObject<HTMLElement>;
148148

149149
withPeerRoleFilter?: boolean;
150150

@@ -158,7 +158,7 @@ interface NodesComponentProps {
158158
function NodesComponent({
159159
path,
160160
database,
161-
parentRef,
161+
scrollContainerRef,
162162
withPeerRoleFilter,
163163
columns,
164164
defaultColumnsIds,
@@ -200,7 +200,7 @@ function NodesComponent({
200200
uptimeFilter={uptimeFilter}
201201
peerRoleFilter={peerRoleFilter}
202202
columns={columnsToShow}
203-
parentRef={parentRef}
203+
scrollContainerRef={scrollContainerRef}
204204
tableContainerRef={tableContainerRef}
205205
/>
206206
</TableWithControlsLayout.Table>
@@ -249,7 +249,7 @@ interface NodeGroupProps {
249249
peerRoleFilter?: NodesPeerRole;
250250
groupByParam?: NodesGroupByField;
251251
columns: Column<NodesPreparedEntity>[];
252-
parentRef: React.RefObject<HTMLElement>;
252+
scrollContainerRef: React.RefObject<HTMLElement>;
253253
tableContainerRef: React.RefObject<HTMLDivElement>;
254254
onIsExpandedChange: (name: string, isExpanded: boolean) => void;
255255
}
@@ -264,7 +264,7 @@ const NodeGroup = React.memo(function NodeGroup({
264264
peerRoleFilter,
265265
groupByParam,
266266
columns,
267-
parentRef,
267+
scrollContainerRef,
268268
tableContainerRef,
269269
onIsExpandedChange,
270270
}: NodeGroupProps) {
@@ -288,7 +288,7 @@ const NodeGroup = React.memo(function NodeGroup({
288288
filterGroupBy={groupByParam}
289289
initialEntitiesCount={count}
290290
columns={columns}
291-
parentRef={parentRef}
291+
scrollContainerRef={scrollContainerRef}
292292
tableContainerRef={tableContainerRef}
293293
/>
294294
</TableGroup>
@@ -298,7 +298,7 @@ const NodeGroup = React.memo(function NodeGroup({
298298
function GroupedNodesComponent({
299299
path,
300300
database,
301-
parentRef,
301+
scrollContainerRef,
302302
withPeerRoleFilter,
303303
columns,
304304
defaultColumnsIds,
@@ -369,7 +369,7 @@ function GroupedNodesComponent({
369369
peerRoleFilter={peerRoleFilter}
370370
groupByParam={groupByParam}
371371
columns={columnsToShow}
372-
parentRef={parentRef}
372+
scrollContainerRef={scrollContainerRef}
373373
tableContainerRef={tableContainerRef}
374374
onIsExpandedChange={setIsGroupExpanded}
375375
/>

‎src/containers/Nodes/NodesTable.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ interface NodesTableProps {
2828
filterGroupBy?: NodesGroupByField;
2929

3030
columns: Column<NodesPreparedEntity>[];
31-
parentRef: React.RefObject<HTMLElement>;
31+
scrollContainerRef: React.RefObject<HTMLElement>;
3232
tableContainerRef: React.RefObject<HTMLDivElement>;
3333

3434
initialEntitiesCount?: number;
@@ -45,7 +45,7 @@ export function NodesTable({
4545
filterGroup,
4646
filterGroupBy,
4747
columns,
48-
parentRef,
48+
scrollContainerRef,
4949
tableContainerRef,
5050
initialEntitiesCount,
5151
onStateChange,
@@ -83,7 +83,7 @@ export function NodesTable({
8383
return (
8484
<ResizeablePaginatedTable
8585
columnsWidthLSKey={NODES_COLUMNS_WIDTH_LS_KEY}
86-
parentRef={parentRef}
86+
scrollContainerRef={scrollContainerRef}
8787
tableContainerRef={tableContainerRef}
8888
columns={columns}
8989
fetchData={getNodes}

‎src/containers/PDiskPage/PDiskPage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -249,7 +249,7 @@ export function PDiskPage() {
249249
<PaginatedStorage
250250
nodeId={nodeId}
251251
pDiskId={pDiskId}
252-
parentRef={containerRef}
252+
scrollContainerRef={containerRef}
253253
viewContext={{
254254
nodeId: nodeId?.toString(),
255255
pDiskId: pDiskId?.toString(),

‎src/containers/Storage/PaginatedStorage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export interface PaginatedStorageProps {
1414

1515
viewContext?: StorageViewContext;
1616

17-
parentRef: React.RefObject<HTMLElement>;
17+
scrollContainerRef: React.RefObject<HTMLElement>;
1818

1919
initialEntitiesCount?: number;
2020
}

‎src/containers/Storage/PaginatedStorageGroups.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ interface StorageGroupGroupProps {
9595
filterGroupBy?: GroupsGroupByField;
9696
columns: StorageGroupsColumn[];
9797
tableContainerRef: React.RefObject<HTMLDivElement>;
98-
parentRef: React.RefObject<HTMLElement>;
98+
scrollContainerRef: React.RefObject<HTMLElement>;
9999
onIsExpandedChange: (name: string, isExpanded: boolean) => void;
100100
handleShowAllGroups: VoidFunction;
101101
}
@@ -109,7 +109,7 @@ const StorageGroupGroup = React.memo(function StorageGroupGroup({
109109
groupId,
110110
pDiskId,
111111
searchValue,
112-
parentRef,
112+
scrollContainerRef,
113113
filterGroupBy,
114114
columns,
115115
tableContainerRef,
@@ -127,7 +127,7 @@ const StorageGroupGroup = React.memo(function StorageGroupGroup({
127127
>
128128
<PaginatedStorageGroupsTable
129129
database={database}
130-
parentRef={parentRef}
130+
scrollContainerRef={scrollContainerRef}
131131
tableContainerRef={tableContainerRef}
132132
nodeId={nodeId}
133133
groupId={groupId}
@@ -151,7 +151,7 @@ function StorageGroupsComponent({
151151
groupId,
152152
pDiskId,
153153
viewContext,
154-
parentRef,
154+
scrollContainerRef,
155155
initialEntitiesCount,
156156
}: PaginatedStorageProps) {
157157
const {searchValue, visibleEntities, handleShowAllGroups} = useStorageQueryParams();
@@ -184,7 +184,7 @@ function StorageGroupsComponent({
184184
searchValue={searchValue}
185185
visibleEntities={visibleEntities}
186186
onShowAll={handleShowAllGroups}
187-
parentRef={parentRef}
187+
scrollContainerRef={scrollContainerRef}
188188
tableContainerRef={tableContainerRef}
189189
renderErrorMessage={renderPaginatedTableErrorMessage}
190190
columns={columnsToShow}
@@ -201,7 +201,7 @@ function GroupedStorageGroupsComponent({
201201
nodeId,
202202
groupId,
203203
pDiskId,
204-
parentRef,
204+
scrollContainerRef,
205205
viewContext,
206206
}: PaginatedStorageProps) {
207207
const [autoRefreshInterval] = useAutoRefreshInterval();
@@ -264,7 +264,7 @@ function GroupedStorageGroupsComponent({
264264
filterGroupBy={storageGroupsGroupByParam}
265265
searchValue={searchValue}
266266
visibleEntities={'all'}
267-
parentRef={parentRef}
267+
scrollContainerRef={scrollContainerRef}
268268
onIsExpandedChange={setIsGroupExpanded}
269269
handleShowAllGroups={handleShowAllGroups}
270270
columns={columnsToShow}

0 commit comments

Comments
 (0)