Skip to content

Commit 9ccd6d3

Browse files
radubreharradubrehar
committed
first draft
1 parent 8519a72 commit 9ccd6d3

File tree

9 files changed

+569
-85
lines changed

9 files changed

+569
-85
lines changed

‎examples/src/pages/tests/table/props/data/huge-updates.page.tsx‎

Lines changed: 61 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,10 @@ type Developer = {
2222

2323
age: number;
2424
reposCount: number;
25+
hobby: string;
26+
monthlyBonus: number;
27+
country: string;
28+
city: string;
2529
};
2630

2731
const dataSource = () => {
@@ -66,21 +70,31 @@ const updateRow = (api: DataSourceApi<Developer>, data: Developer) => {
6670
api.updateData(newData);
6771
};
6872

69-
let STARTED = false;
73+
let RUNNING = false;
7074

71-
const randomlyUpdateData = (
75+
let intervalId: any | null = null;
76+
77+
const stopRandomUpdates = () => {
78+
if (intervalId) {
79+
clearInterval(intervalId);
80+
intervalId = null;
81+
}
82+
RUNNING = false;
83+
};
84+
const startRandomUpdates = (
7285
api: InfiniteTableApi<Developer>,
7386
dataSourceApi: DataSourceApi<Developer>,
7487
) => {
7588
if (!api || !dataSourceApi) {
7689
return;
7790
}
78-
if (STARTED) {
91+
92+
if (RUNNING) {
7993
return;
8094
}
81-
STARTED = true;
82-
setInterval(() => {
83-
if (!STARTED) {
95+
RUNNING = true;
96+
intervalId = setInterval(() => {
97+
if (!RUNNING) {
8498
return;
8599
}
86100
const numberOfRowsToUpdate = 2;
@@ -103,6 +117,19 @@ const columns: InfiniteTablePropColumns<Developer> = {
103117
id: {
104118
field: 'id',
105119
},
120+
hobby: {
121+
field: 'hobby',
122+
},
123+
monthlyBonus: {
124+
field: 'monthlyBonus',
125+
type: 'number',
126+
},
127+
country: {
128+
field: 'country',
129+
},
130+
city: {
131+
field: 'city',
132+
},
106133
firstName: {
107134
field: 'firstName',
108135
},
@@ -146,6 +173,7 @@ export default () => {
146173
const [api, setApi] = React.useState<InfiniteTableApi<Developer> | null>(
147174
null,
148175
);
176+
const [running, setRunning] = React.useState(false);
149177
const [dataSourceApi, setDataSourceApi] =
150178
React.useState<DataSourceApi<Developer> | null>(null);
151179
return (
@@ -154,16 +182,37 @@ export default () => {
154182
<button
155183
className="bg-blue-500 text-white p-2 rounded-md cursor-pointer"
156184
onClick={() => {
157-
STARTED = !STARTED;
158-
159-
console.log('STARTED', STARTED);
160-
if (STARTED) {
161-
randomlyUpdateData(api!, dataSourceApi!);
185+
if (running) {
186+
stopRandomUpdates();
187+
setRunning(false);
188+
return;
162189
}
190+
setRunning(true);
191+
startRandomUpdates(api!, dataSourceApi!);
163192
}}
164193
>
165194
Toggle updates
166195
</button>
196+
<button
197+
onClick={() => {
198+
const numberOfRowsToUpdate = 10;
199+
const { renderStartIndex, renderEndIndex } =
200+
api!.getVerticalRenderRange();
201+
const dataArray = dataSourceApi!.getRowInfoArray();
202+
const data = dataArray
203+
.slice(renderStartIndex, renderEndIndex)
204+
.map((x) => x.data as Developer);
205+
206+
for (let i = 0; i < numberOfRowsToUpdate; i++) {
207+
const row = data[getRandomInt(0, data.length - 1)];
208+
if (row) {
209+
updateRow(dataSourceApi!, row);
210+
}
211+
}
212+
}}
213+
>
214+
Update once
215+
</button>
167216
<DataSource<Developer>
168217
data={dataSource}
169218
primaryKey="id"
@@ -183,7 +232,7 @@ export default () => {
183232
onReady={({ api, dataSourceApi }) => {
184233
setApi(api);
185234
setDataSourceApi(dataSourceApi);
186-
randomlyUpdateData(api, dataSourceApi);
235+
// startRandomUpdates(api, dataSourceApi);
187236
}}
188237
columnDefaultWidth={100}
189238
columnMinWidth={50}

‎examples/src/pages/tests/table/props/data/update2.page.tsx‎

Lines changed: 176 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
import * as React from 'react';
2+
3+
import {
4+
InfiniteTable,
5+
DataSource,
6+
InfiniteTablePropColumns,
7+
DataSourceApi,
8+
InfiniteTableApi,
9+
DataSourceDataFn,
10+
InfiniteTableProps,
11+
} from '@infinite-table/infinite-react';
12+
import { Button } from '@/components/ui/button';
13+
14+
type Developer = {
15+
id: number;
16+
firstName: string;
17+
lastName: string;
18+
country: string;
19+
city: string;
20+
currency: string;
21+
preferredLanguage: string;
22+
stack: string;
23+
canDesign: 'yes' | 'no';
24+
hobby: string;
25+
salary: number;
26+
age: number;
27+
};
28+
29+
const columns: InfiniteTablePropColumns<Developer> = {
30+
// id: { field: 'id' },
31+
salary: { field: 'salary' },
32+
age: { field: 'age' },
33+
firstName: { field: 'firstName' },
34+
// preferredLanguage: { field: 'preferredLanguage' },
35+
// lastName: { field: 'lastName' },
36+
// country: { field: 'country' },
37+
// city: { field: 'city' },
38+
// currency: { field: 'currency' },
39+
// stack: { field: 'stack' },
40+
// canDesign: { field: 'canDesign' },
41+
};
42+
43+
const dataSourceFn: DataSourceDataFn<Developer> = ({}) => {
44+
return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers1k-sql`)
45+
.then((r) => r.json())
46+
.then((data) => {
47+
return new Promise((resolve) => {
48+
setTimeout(() => {
49+
// console.log(data, 'data');
50+
// data.length = 1;
51+
// const newData = [...data.data.slice(0, 2)];
52+
const newData = data;
53+
54+
resolve(newData);
55+
}, 20);
56+
});
57+
});
58+
};
59+
60+
export default function DataTestPage() {
61+
const [active] = React.useState([true, true]);
62+
const [ds, setDs] = React.useState<DataSourceDataFn<Developer>>(
63+
() => dataSourceFn,
64+
);
65+
const [dataSourceApi, setDataSourceApi] =
66+
React.useState<DataSourceApi<Developer>>();
67+
const [activeCellIndex, setActiveCellIndex] = React.useState<
68+
[number, number] | null
69+
>(null);
70+
const [api, setApi] = React.useState<InfiniteTableApi<Developer>>();
71+
const [header, setHeader] = React.useState<boolean>(false);
72+
73+
const onReady = React.useCallback(
74+
({
75+
dataSourceApi,
76+
api,
77+
}: {
78+
dataSourceApi: DataSourceApi<Developer>;
79+
api: InfiniteTableApi<Developer>;
80+
}) => {
81+
setDataSourceApi(dataSourceApi);
82+
setApi(api);
83+
},
84+
[],
85+
);
86+
87+
const domProps: InfiniteTableProps<Developer>['domProps'] =
88+
React.useMemo(() => {
89+
return {
90+
style: {
91+
margin: '5px',
92+
height: 900,
93+
border: '1px solid gray',
94+
position: 'relative',
95+
},
96+
};
97+
}, []);
98+
return (
99+
<React.StrictMode>
100+
<div className="flex gap-2 items-center justify-center m-1">
101+
<Button
102+
onClick={() => {
103+
if (!dataSourceApi || !api) {
104+
return;
105+
}
106+
107+
const { start, end } = api.getVisibleRenderRange();
108+
const [startRow, startCol] = start;
109+
const [endRow, endCol] = end;
110+
// console.log(start, end);
111+
112+
const randomRow =
113+
Math.floor(Math.random() * (endRow - startRow + 1)) + startRow;
114+
const randomCol =
115+
Math.floor(Math.random() * (endCol - startCol + 1)) + startCol;
116+
117+
const [activeRow, activeCol] = activeCellIndex || [];
118+
119+
const updateRow = activeRow ?? randomRow;
120+
const updateCol = activeCol ?? randomCol;
121+
const colId = Object.keys(columns)[updateCol];
122+
const rowId = dataSourceApi.getPrimaryKeyByIndex(updateRow);
123+
dataSourceApi.updateData({
124+
[colId]: Math.floor(Math.random() * 10000),
125+
id: rowId,
126+
});
127+
128+
// dataSourceApi.get
129+
// dataSourceApi.;
130+
}}
131+
>
132+
update
133+
</Button>
134+
<Button
135+
onClick={() => {
136+
if (!dataSourceApi || !api) {
137+
return;
138+
}
139+
140+
const [activeRow] = activeCellIndex || [];
141+
const rowId = dataSourceApi.getPrimaryKeyByIndex(activeRow);
142+
dataSourceApi.removeData({ id: rowId });
143+
}}
144+
>
145+
remove row
146+
</Button>
147+
<Button
148+
onClick={() => {
149+
setDs(dataSourceFn.bind(null));
150+
}}
151+
>
152+
update datasource
153+
</Button>
154+
<Button
155+
onClick={() => {
156+
setHeader((header) => !header);
157+
}}
158+
>
159+
toggle header
160+
</Button>
161+
</div>
162+
{active[0] && (
163+
<DataSource<Developer> data={ds} primaryKey="id">
164+
<InfiniteTable<Developer>
165+
header={header}
166+
onActiveCellIndexChange={setActiveCellIndex}
167+
debugId="test"
168+
onReady={onReady}
169+
domProps={domProps}
170+
columns={columns}
171+
/>
172+
</DataSource>
173+
)}
174+
</React.StrictMode>
175+
);
176+
}

‎examples/src/pages/tests/testUtils/HeaderTestingModel.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@ export class HeaderTestingModel {
7070
const cell = this.getHeaderCellLocator(colLocation);
7171

7272
await cell.click();
73+
await this.page.evaluate(() => new Promise(requestAnimationFrame));
7374

7475
return cell;
7576
}

0 commit comments

Comments
 (0)