Skip to content

Commit 13bd573

Browse files
astandrikastandrik
committed
fix: move to table
1 parent 48c6bdc commit 13bd573

File tree

11 files changed

+93
-100
lines changed

11 files changed

+93
-100
lines changed

‎src/components/PaginatedTable/PaginatedTable.tsx

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ import type {
1616
SortParams,
1717
} from './types';
1818
import {useScrollBasedChunks} from './useScrollBasedChunks';
19-
import {useTableScroll} from './useTableScroll';
2019

2120
import './PaginatedTable.scss';
2221

@@ -30,7 +29,6 @@ export interface PaginatedTableProps<T, F> {
3029
getRowClassName?: GetRowClassName<T>;
3130
rowHeight?: number;
3231
scrollContainerRef: React.RefObject<HTMLElement>;
33-
tableContainerRef: React.RefObject<HTMLDivElement>;
3432
initialSortParams?: SortParams;
3533
onColumnsResize?: HandleTableColumnsResize;
3634
renderEmptyDataMessage?: RenderEmptyDataMessage;
@@ -52,7 +50,6 @@ export const PaginatedTable = <T, F>({
5250
getRowClassName,
5351
rowHeight = DEFAULT_TABLE_ROW_HEIGHT,
5452
scrollContainerRef,
55-
tableContainerRef,
5653
initialSortParams,
5754
onColumnsResize,
5855
renderErrorMessage,
@@ -123,14 +120,6 @@ export const PaginatedTable = <T, F>({
123120
[onDataFetched, setFoundEntities, setIsInitialLoad, setTotalEntities],
124121
);
125122

126-
// Use the extracted table scroll hook
127-
// The hook handles scrolling internally based on dependencies
128-
useTableScroll({
129-
tableContainerRef,
130-
scrollContainerRef,
131-
dependencies: [rawFilters],
132-
});
133-
134123
// Reset table on filters change
135124
React.useLayoutEffect(() => {
136125
const defaultTotal = initialEntitiesCount || 0;

‎src/components/PaginatedTable/ResizeablePaginatedTable.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ interface ResizeablePaginatedTableProps<T, F>
2222
export function ResizeablePaginatedTable<T, F>({
2323
columnsWidthLSKey,
2424
columns,
25-
tableContainerRef,
2625
...props
2726
}: ResizeablePaginatedTableProps<T, F>) {
2827
const [tableColumnsWidth, setTableColumnsWidth] = useTableResize(columnsWidthLSKey);
@@ -31,7 +30,6 @@ export function ResizeablePaginatedTable<T, F>({
3130

3231
return (
3332
<PaginatedTable
34-
tableContainerRef={tableContainerRef}
3533
columns={updatedColumns}
3634
onColumnsResize={setTableColumnsWidth}
3735
containerClassName={b('resizeable-table-container')}

‎src/components/TableWithControlsLayout/TableWithControlsLayout.tsx

Lines changed: 24 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import React from 'react';
33
import {cn} from '../../utils/cn';
44
import {TableSkeleton} from '../TableSkeleton/TableSkeleton';
55

6+
import {useTableScroll} from './useTableScroll';
7+
68
import './TableWithControlsLayout.scss';
79

810
const b = cn('ydb-table-with-controls-layout');
@@ -15,6 +17,8 @@ interface TableWithControlsLayoutItemProps {
1517

1618
interface TableProps extends TableWithControlsLayoutItemProps {
1719
loading?: boolean;
20+
scrollContainerRef?: React.RefObject<HTMLElement>;
21+
scrollDependencies?: any[];
1822
}
1923

2024
export const TableWithControlsLayout = ({
@@ -36,17 +40,31 @@ TableWithControlsLayout.Controls = function TableControls({
3640
);
3741
};
3842

39-
TableWithControlsLayout.Table = React.forwardRef<HTMLDivElement, TableProps>(function Table(
40-
{children, loading, className, fullHeight},
41-
ref,
42-
) {
43+
TableWithControlsLayout.Table = function Table({
44+
children,
45+
loading,
46+
className,
47+
fullHeight,
48+
scrollContainerRef,
49+
scrollDependencies = [],
50+
}: TableProps) {
51+
// Create an internal ref for the table container
52+
const tableContainerRef = React.useRef<HTMLDivElement>(null);
53+
54+
// Use the internal ref for scrolling
55+
useTableScroll({
56+
tableContainerRef,
57+
scrollContainerRef,
58+
dependencies: scrollDependencies,
59+
});
60+
4361
if (loading) {
4462
return <TableSkeleton className={b('loader')} />;
4563
}
4664

4765
return (
48-
<div ref={ref} className={b('table', {fullHeight}, className)}>
66+
<div ref={tableContainerRef} className={b('table', {fullHeight}, className)}>
4967
{children}
5068
</div>
5169
);
52-
});
70+
};

‎src/components/PaginatedTable/useTableScroll.ts renamed to ‎src/components/TableWithControlsLayout/useTableScroll.ts

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React from 'react';
22

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

@@ -14,7 +14,7 @@ export const useTableScroll = ({
1414
// Get the CSS variable value for sticky top offset
1515
const getStickyTopOffset = React.useCallback(() => {
1616
// Try to get the variable from parent elements
17-
if (tableContainerRef.current) {
17+
if (tableContainerRef?.current) {
1818
const computedStyle = window.getComputedStyle(tableContainerRef.current);
1919
const stickyTopOffset = computedStyle.getPropertyValue(
2020
'--data-table-sticky-top-offset',
@@ -27,8 +27,8 @@ export const useTableScroll = ({
2727

2828
// Handle table scrolling function
2929
const handleTableScroll = React.useCallback(() => {
30-
console.log('teteteteeetete');
31-
if (tableContainerRef.current && scrollContainerRef.current) {
30+
// Only proceed if both refs and their current properties are available
31+
if (tableContainerRef?.current && scrollContainerRef?.current) {
3232
// Get the sticky top offset value
3333
const stickyTopOffset = getStickyTopOffset();
3434

@@ -44,21 +44,17 @@ export const useTableScroll = ({
4444
}
4545
}, [scrollContainerRef, tableContainerRef, getStickyTopOffset]);
4646

47-
// Use a ref to track whether it's the first render
48-
const isFirstRender = React.useRef(true);
49-
5047
// Trigger scroll adjustment with dependencies, but skip on first render
5148
React.useLayoutEffect(() => {
52-
if (isFirstRender.current) {
53-
// Skip scrolling on first render
54-
isFirstRender.current = false;
49+
// Only proceed if both refs are available
50+
if (!tableContainerRef || !scrollContainerRef) {
5551
return;
5652
}
5753

5854
// Only scroll on subsequent renders when dependencies change
5955
handleTableScroll();
6056
// eslint-disable-next-line react-hooks/exhaustive-deps
61-
}, [handleTableScroll, ...dependencies]);
57+
}, [handleTableScroll, tableContainerRef, scrollContainerRef, ...dependencies]);
6258

6359
return {
6460
handleTableScroll,

‎src/containers/Nodes/Nodes.tsx

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -169,7 +169,6 @@ function NodesComponent({
169169
const {searchValue, uptimeFilter, peerRoleFilter} = useNodesPageQueryParams(groupByParams);
170170
const {problemFilter} = useProblemFilter();
171171
const viewerNodesHandlerHasGrouping = useViewerNodesHandlerHasGrouping();
172-
const tableContainerRef = React.useRef<HTMLDivElement>(null);
173172

174173
const {columnsToShow, columnsToSelect, setColumns} = useSelectedColumns(
175174
columns,
@@ -191,7 +190,10 @@ function NodesComponent({
191190
handleSelectedColumnsUpdate={setColumns}
192191
/>
193192
</TableWithControlsLayout.Controls>
194-
<TableWithControlsLayout.Table ref={tableContainerRef}>
193+
<TableWithControlsLayout.Table
194+
scrollContainerRef={scrollContainerRef}
195+
scrollDependencies={[searchValue, problemFilter, uptimeFilter, peerRoleFilter]}
196+
>
195197
<NodesTable
196198
path={path}
197199
database={database}
@@ -201,7 +203,6 @@ function NodesComponent({
201203
peerRoleFilter={peerRoleFilter}
202204
columns={columnsToShow}
203205
scrollContainerRef={scrollContainerRef}
204-
tableContainerRef={tableContainerRef}
205206
/>
206207
</TableWithControlsLayout.Table>
207208
</TableWithControlsLayout>
@@ -250,7 +251,6 @@ interface NodeGroupProps {
250251
groupByParam?: NodesGroupByField;
251252
columns: Column<NodesPreparedEntity>[];
252253
scrollContainerRef: React.RefObject<HTMLElement>;
253-
tableContainerRef: React.RefObject<HTMLDivElement>;
254254
onIsExpandedChange: (name: string, isExpanded: boolean) => void;
255255
}
256256

@@ -265,7 +265,6 @@ const NodeGroup = React.memo(function NodeGroup({
265265
groupByParam,
266266
columns,
267267
scrollContainerRef,
268-
tableContainerRef,
269268
onIsExpandedChange,
270269
}: NodeGroupProps) {
271270
return (
@@ -289,7 +288,6 @@ const NodeGroup = React.memo(function NodeGroup({
289288
initialEntitiesCount={count}
290289
columns={columns}
291290
scrollContainerRef={scrollContainerRef}
292-
tableContainerRef={tableContainerRef}
293291
/>
294292
</TableGroup>
295293
);
@@ -308,7 +306,6 @@ function GroupedNodesComponent({
308306
}: NodesComponentProps) {
309307
const {searchValue, peerRoleFilter, groupByParam} = useNodesPageQueryParams(groupByParams);
310308
const [autoRefreshInterval] = useAutoRefreshInterval();
311-
const tableContainerRef = React.useRef<HTMLDivElement>(null);
312309

313310
const {columnsToShow, columnsToSelect, setColumns} = useSelectedColumns(
314311
columns,
@@ -370,7 +367,6 @@ function GroupedNodesComponent({
370367
groupByParam={groupByParam}
371368
columns={columnsToShow}
372369
scrollContainerRef={scrollContainerRef}
373-
tableContainerRef={tableContainerRef}
374370
onIsExpandedChange={setIsGroupExpanded}
375371
/>
376372
);
@@ -394,7 +390,8 @@ function GroupedNodesComponent({
394390
</TableWithControlsLayout.Controls>
395391
{error ? <ResponseError error={error} /> : null}
396392
<TableWithControlsLayout.Table
397-
ref={tableContainerRef}
393+
scrollContainerRef={scrollContainerRef}
394+
scrollDependencies={[searchValue, groupByParam]}
398395
loading={isLoading}
399396
className={b('groups-wrapper')}
400397
>

‎src/containers/Nodes/NodesTable.tsx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ interface NodesTableProps {
2929

3030
columns: Column<NodesPreparedEntity>[];
3131
scrollContainerRef: React.RefObject<HTMLElement>;
32-
tableContainerRef: React.RefObject<HTMLDivElement>;
3332

3433
initialEntitiesCount?: number;
3534
onStateChange?: (state: PaginatedTableState) => void;
@@ -46,7 +45,6 @@ export function NodesTable({
4645
filterGroupBy,
4746
columns,
4847
scrollContainerRef,
49-
tableContainerRef,
5048
initialEntitiesCount,
5149
onStateChange,
5250
}: NodesTableProps) {
@@ -84,7 +82,6 @@ export function NodesTable({
8482
<ResizeablePaginatedTable
8583
columnsWidthLSKey={NODES_COLUMNS_WIDTH_LS_KEY}
8684
scrollContainerRef={scrollContainerRef}
87-
tableContainerRef={tableContainerRef}
8885
columns={columns}
8986
fetchData={getNodes}
9087
initialEntitiesCount={initialEntitiesCount}

‎src/containers/Storage/PaginatedStorageGroups.tsx

Lines changed: 25 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,6 @@ interface StorageGroupGroupProps {
9494
visibleEntities: 'all';
9595
filterGroupBy?: GroupsGroupByField;
9696
columns: StorageGroupsColumn[];
97-
tableContainerRef: React.RefObject<HTMLDivElement>;
9897
scrollContainerRef: React.RefObject<HTMLElement>;
9998
onIsExpandedChange: (name: string, isExpanded: boolean) => void;
10099
handleShowAllGroups: VoidFunction;
@@ -112,7 +111,6 @@ const StorageGroupGroup = React.memo(function StorageGroupGroup({
112111
scrollContainerRef,
113112
filterGroupBy,
114113
columns,
115-
tableContainerRef,
116114
onIsExpandedChange,
117115
handleShowAllGroups,
118116
}: StorageGroupGroupProps) {
@@ -125,22 +123,26 @@ const StorageGroupGroup = React.memo(function StorageGroupGroup({
125123
expanded={isExpanded}
126124
onIsExpandedChange={onIsExpandedChange}
127125
>
128-
<PaginatedStorageGroupsTable
129-
database={database}
126+
<TableWithControlsLayout.Table
130127
scrollContainerRef={scrollContainerRef}
131-
tableContainerRef={tableContainerRef}
132-
nodeId={nodeId}
133-
groupId={groupId}
134-
pDiskId={pDiskId}
135-
filterGroup={name}
136-
filterGroupBy={filterGroupBy}
137-
searchValue={searchValue}
138-
visibleEntities={'all'}
139-
onShowAll={handleShowAllGroups}
140-
renderErrorMessage={renderPaginatedTableErrorMessage}
141-
columns={columns}
142-
initialEntitiesCount={count}
143-
/>
128+
scrollDependencies={[name, searchValue, filterGroupBy]}
129+
>
130+
<PaginatedStorageGroupsTable
131+
database={database}
132+
scrollContainerRef={scrollContainerRef}
133+
nodeId={nodeId}
134+
groupId={groupId}
135+
pDiskId={pDiskId}
136+
filterGroup={name}
137+
filterGroupBy={filterGroupBy}
138+
searchValue={searchValue}
139+
visibleEntities={'all'}
140+
onShowAll={handleShowAllGroups}
141+
renderErrorMessage={renderPaginatedTableErrorMessage}
142+
columns={columns}
143+
initialEntitiesCount={count}
144+
/>
145+
</TableWithControlsLayout.Table>
144146
</TableGroup>
145147
);
146148
});
@@ -157,7 +159,6 @@ function StorageGroupsComponent({
157159
const {searchValue, visibleEntities, handleShowAllGroups} = useStorageQueryParams();
158160

159161
const storageGroupsHandlerHasGroupping = useStorageGroupsHandlerHasGrouping();
160-
const tableContainerRef = React.useRef<HTMLDivElement>(null);
161162

162163
const {columnsToShow, columnsToSelect, setColumns} = useStorageGroupsSelectedColumns({
163164
visibleEntities,
@@ -175,7 +176,10 @@ function StorageGroupsComponent({
175176
handleSelectedColumnsUpdate={setColumns}
176177
/>
177178
</TableWithControlsLayout.Controls>
178-
<TableWithControlsLayout.Table ref={tableContainerRef}>
179+
<TableWithControlsLayout.Table
180+
scrollContainerRef={scrollContainerRef}
181+
scrollDependencies={[searchValue, visibleEntities]}
182+
>
179183
<PaginatedStorageGroupsTable
180184
database={database}
181185
nodeId={nodeId}
@@ -185,7 +189,6 @@ function StorageGroupsComponent({
185189
visibleEntities={visibleEntities}
186190
onShowAll={handleShowAllGroups}
187191
scrollContainerRef={scrollContainerRef}
188-
tableContainerRef={tableContainerRef}
189192
renderErrorMessage={renderPaginatedTableErrorMessage}
190193
columns={columnsToShow}
191194
initialEntitiesCount={initialEntitiesCount}
@@ -205,7 +208,6 @@ function GroupedStorageGroupsComponent({
205208
viewContext,
206209
}: PaginatedStorageProps) {
207210
const [autoRefreshInterval] = useAutoRefreshInterval();
208-
const tableContainerRef = React.useRef<HTMLDivElement>(null);
209211
const {searchValue, storageGroupsGroupByParam, visibleEntities, handleShowAllGroups} =
210212
useStorageQueryParams();
211213

@@ -268,7 +270,6 @@ function GroupedStorageGroupsComponent({
268270
onIsExpandedChange={setIsGroupExpanded}
269271
handleShowAllGroups={handleShowAllGroups}
270272
columns={columnsToShow}
271-
tableContainerRef={tableContainerRef}
272273
/>
273274
</PaginatedTableProvider>
274275
);
@@ -290,7 +291,8 @@ function GroupedStorageGroupsComponent({
290291
</TableWithControlsLayout.Controls>
291292
{error ? <ResponseError error={error} /> : null}
292293
<TableWithControlsLayout.Table
293-
ref={tableContainerRef}
294+
scrollContainerRef={scrollContainerRef}
295+
scrollDependencies={[searchValue, storageGroupsGroupByParam]}
294296
loading={isLoading}
295297
className={b('groups-wrapper')}
296298
>

0 commit comments

Comments
 (0)