Skip to content

Commit ee21656

Browse files
radubreharradubrehar
committed
remove support for columns/columnGroups as a Map
1 parent 03f52db commit ee21656

File tree

56 files changed

+951
-1371
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+951
-1371
lines changed

‎examples/src/pages/tests/table/misc/buildColumnAndGroupTree.spec.ts

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -64,11 +64,11 @@ type Person = {
6464

6565
export default test.describe.parallel('buildColumnAndGroupTree', () => {
6666
test('should work correctly for groups that dont repeat twice', async () => {
67-
const columnGroups: Map<string, InfiniteTableColumnGroup> = new Map([
68-
['contact info', { header: 'Contact info' }],
69-
['street', { header: 'street', columnGroup: 'address' }],
70-
['address', { header: 'Address' }],
71-
]);
67+
const columnGroups: Record<string, InfiniteTableColumnGroup> = {
68+
'contact info': { header: 'Contact info' },
69+
street: { header: 'street', columnGroup: 'address' },
70+
address: { header: 'Address' },
71+
};
7272
const columns: InfiniteTableComputedColumn<Person>[] = [
7373
getComputedColumn({
7474
field: 'id',
@@ -309,12 +309,12 @@ export default test.describe.parallel('buildColumnAndGroupTree', () => {
309309
});
310310

311311
test('should work correctly for groups that are repeated', () => {
312-
const columnGroups: Map<string, InfiniteTableColumnGroup> = new Map([
313-
['contact info', { header: 'Contact info' }],
314-
['street', { header: 'street', columnGroup: 'address' }],
315-
['location', { header: 'location', columnGroup: 'address' }],
316-
['address', { header: 'Address' }],
317-
]);
312+
const columnGroups: Record<string, InfiniteTableColumnGroup> = {
313+
'contact info': { header: 'Contact info' },
314+
street: { header: 'street', columnGroup: 'address' },
315+
location: { header: 'location', columnGroup: 'address' },
316+
address: { header: 'Address' },
317+
};
318318
const columns: InfiniteTableComputedColumn<Person>[] = [
319319
getComputedColumn({
320320
field: 'streetNo',
@@ -533,12 +533,12 @@ export default test.describe.parallel('buildColumnAndGroupTree', () => {
533533
});
534534

535535
test('should work correctly for groups that are repeated - case 2', () => {
536-
const columnGroups: Map<string, InfiniteTableColumnGroup> = new Map([
537-
['contact info', { header: 'Contact info' }],
538-
['street', { header: 'street', columnGroup: 'address' }],
539-
['location', { header: 'location', columnGroup: 'address' }],
540-
['address', { header: 'Address' }],
541-
]);
536+
const columnGroups: Record<string, InfiniteTableColumnGroup> = {
537+
'contact info': { header: 'Contact info' },
538+
street: { header: 'street', columnGroup: 'address' },
539+
location: { header: 'location', columnGroup: 'address' },
540+
address: { header: 'Address' },
541+
};
542542
const columns: InfiniteTableComputedColumn<Person>[] = [
543543
getComputedColumn({
544544
field: 'streetNo',
@@ -678,14 +678,14 @@ export default test.describe.parallel('buildColumnAndGroupTree', () => {
678678
l: string;
679679
k: string;
680680
};
681-
const columnGroups: Map<string, InfiniteTableColumnGroup> = new Map([
682-
['c', { header: 'c', columnGroup: 'b' }],
683-
['b', { header: 'b', columnGroup: 'a' }],
684-
['a', { header: 'a', columnGroup: 'x' }],
685-
['x', { header: 'x' }],
686-
['h', { header: 'h', columnGroup: 'g' }],
687-
['g', { header: 'g', columnGroup: 'x' }],
688-
]);
681+
const columnGroups: Record<string, InfiniteTableColumnGroup> = {
682+
c: { header: 'c', columnGroup: 'b' },
683+
b: { header: 'b', columnGroup: 'a' },
684+
a: { header: 'a', columnGroup: 'x' },
685+
x: { header: 'x' },
686+
h: { header: 'h', columnGroup: 'g' },
687+
g: { header: 'g', columnGroup: 'x' },
688+
};
689689
const columns: InfiniteTableComputedColumn<Alphabet>[] = [
690690
getComputedColumn({
691691
field: 'd',

‎examples/src/pages/tests/table/misc/checkboxes.page.tsx

Lines changed: 23 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
11
import * as React from 'react';
22

3-
import {
4-
InfiniteTableColumn,
5-
InfiniteTable,
6-
} from '@infinite-table/infinite-react';
7-
import { DataSource } from '@infinite-table/infinite-react';
3+
import { InfiniteTable, DataSource } from '@infinite-table/infinite-react';
84

95
interface FakeData {
106
id: number;
@@ -63,8 +59,13 @@ const initialData: FakeData[] = [
6359
export default () => {
6460
const [rowHeight] = React.useState(50);
6561
const [data, setData] = React.useState(initialData);
66-
const renderRow = (data: FakeData): React.ReactElement => {
62+
const renderRow = (
63+
data: Partial<FakeData> | null,
64+
): React.ReactElement | null => {
6765
const item = data;
66+
if (!item) {
67+
return null;
68+
}
6869
return (
6970
<div
7071
style={{ width: '180vw', border: '1px solid red' }}
@@ -108,26 +109,22 @@ export default () => {
108109
columnDefaultWidth={150}
109110
sortable={false}
110111
rowHeight={rowHeight}
111-
columns={
112-
new Map(
113-
[
114-
{
115-
field: 'id',
116-
type: 'number',
117-
sortable: true,
118-
},
119-
{
120-
field: 'text',
121-
},
122-
{
123-
field: 'checked',
124-
render: ({ data }: { data: FakeData }) => {
125-
return renderRow(data);
126-
},
127-
},
128-
].map((c) => [c.field, c as InfiniteTableColumn<FakeData>]),
129-
)
130-
}
112+
columns={{
113+
id: {
114+
field: 'id',
115+
type: 'number',
116+
defaultSortable: true,
117+
},
118+
text: {
119+
field: 'text',
120+
},
121+
checked: {
122+
field: 'checked',
123+
render: ({ data }: { data: Partial<FakeData> | null }) => {
124+
return renderRow(data);
125+
},
126+
},
127+
}}
131128
/>
132129
</DataSource>
133130
</React.StrictMode>

‎examples/src/pages/tests/table/misc/datasource-events.page.tsx

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -26,22 +26,20 @@ const queryClient = new QueryClient({
2626

2727
const emptyArray: Employee[] = [];
2828

29-
export const columns = new Map<string, InfiniteTableColumn<Employee>>([
30-
['id', { field: 'id' }],
31-
[
32-
'country',
33-
{
34-
field: 'country',
35-
},
36-
],
37-
['city', { field: 'city' }],
38-
['team', { field: 'team' }],
39-
['department', { field: 'department' }],
40-
['firstName', { field: 'firstName' }],
41-
['lastName', { field: 'lastName' }],
42-
['salary', { field: 'salary' }],
43-
['age', { field: 'age' }],
44-
]);
29+
export const columns: Record<string, InfiniteTableColumn<Employee>> = {
30+
id: { field: 'id' },
31+
32+
country: {
33+
field: 'country',
34+
},
35+
city: { field: 'city' },
36+
team: { field: 'team' },
37+
department: { field: 'department' },
38+
firstName: { field: 'firstName' },
39+
lastName: { field: 'lastName' },
40+
salary: { field: 'salary' },
41+
age: { field: 'age' },
42+
};
4543

4644
type Employee = {
4745
id: number;

‎examples/src/pages/tests/table/props/column-groups/columns.ts

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
import type { InfiniteTableColumn } from '@infinite-table/infinite-react';
22
import type { Person } from './rowData';
33

4-
export const columns = new Map<string, InfiniteTableColumn<Person>>([
5-
['id', { field: 'id' }], //todo when id is in address group, it should be repeated
6-
['streetNo', { field: 'streetNo', columnGroup: 'street' }],
7-
['city', { field: 'city', columnGroup: 'location' }],
4+
export const columns: Record<string, InfiniteTableColumn<Person>> = {
5+
id: { field: 'id' }, //todo when id is in address group, it should be repeated
6+
streetNo: { field: 'streetNo', columnGroup: 'street' },
7+
city: { field: 'city', columnGroup: 'location' },
88

9-
['streetName', { field: 'streetName', columnGroup: 'street' }],
10-
['firstName', { field: 'firstName' }],
9+
streetName: { field: 'streetName', columnGroup: 'street' },
10+
firstName: { field: 'firstName' },
1111

12-
['country', { field: 'country', columnGroup: 'location' }],
13-
['region', { field: 'region', columnGroup: 'location' }],
12+
country: { field: 'country', columnGroup: 'location' },
13+
region: { field: 'region', columnGroup: 'location' },
1414

15-
['email', { field: 'email', columnGroup: 'contact info' }],
16-
['phone', { field: 'phone', columnGroup: 'contact info' }],
17-
]);
15+
email: { field: 'email', columnGroup: 'contact info' },
16+
phone: { field: 'phone', columnGroup: 'contact info' },
17+
};

‎examples/src/pages/tests/table/props/column-groups/uncontrolled/resize-column-groups.page.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@ import { columns } from '../columns';
66
import { rowData, Person } from '../rowData';
77

88
const getColumnGroups = () => {
9-
const columnGroups: Map<string, InfiniteTableColumnGroup> = new Map([
10-
['contact info', { header: 'Contact info' }],
11-
['street', { header: 'street', columnGroup: 'address' }],
12-
['location', { header: 'location', columnGroup: 'address' }],
13-
['address', { header: 'Address' }],
14-
]);
9+
const columnGroups: Record<string, InfiniteTableColumnGroup> = {
10+
'contact info': { header: 'Contact info' },
11+
street: { header: 'street', columnGroup: 'address' },
12+
location: { header: 'location', columnGroup: 'address' },
13+
address: { header: 'Address' },
14+
};
1515

1616
return columnGroups;
1717
};

‎examples/src/pages/tests/table/props/column-groups/uncontrolled/uncontrolled-column-groups.page.tsx

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,25 @@ import { columns } from '../columns';
66
import { rowData, Person } from '../rowData';
77

88
const getColumnGroups = () => {
9-
const columnGroups: Map<string, InfiniteTableColumnGroup> = new Map([
10-
['contact info', { header: 'Contact info' }],
11-
['street', { header: 'street', columnGroup: 'address' }],
12-
['location', { header: 'location', columnGroup: 'address' }],
13-
['address', { header: 'Address' }],
14-
]);
9+
const columnGroups: Record<string, InfiniteTableColumnGroup> = {
10+
'contact info': { header: 'Contact info' },
11+
street: { header: 'street', columnGroup: 'address' },
12+
location: { header: 'location', columnGroup: 'address' },
13+
address: { header: 'Address' },
14+
};
1515

1616
return columnGroups;
1717
};
1818

19-
const columnGroups = getColumnGroups();
2019
const collapsedColumnGroups = new Map<string[], string>();
21-
(globalThis as any).columnGroups = columnGroups;
20+
2221
(globalThis as any).collapsedColumnGroups = collapsedColumnGroups;
2322

2423
const App = () => {
24+
const [columnGroups, setColumnGroups] = React.useState(getColumnGroups());
25+
26+
(globalThis as any).columnGroups = columnGroups;
27+
(globalThis as any).setColumnGroups = setColumnGroups;
2528
return (
2629
<React.StrictMode>
2730
<DataSource<Person> primaryKey="id" data={rowData}>

‎examples/src/pages/tests/table/props/column-groups/uncontrolled/uncontrolled-column-groups.spec.ts

Lines changed: 54 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,61 @@
11
import { test, expect } from '@testing';
22

3-
export default test.describe.parallel(
4-
'Column groups should render correctly',
5-
() => {
6-
/*
7-
*
8-
* See ./current.png image in the current folder for how nesting should look like in this test
9-
*
10-
*/
11-
12-
test('should remove column when a new key is removed from the columns map', async ({
13-
page,
14-
}) => {
15-
await page.load();
16-
const locationText = await (
17-
await page.locator(
18-
'.InfiniteHeader [data-group-id="location,country,region"]',
19-
)
20-
).innerText();
21-
const countryText = await (
22-
await page.locator(
23-
'.InfiniteHeader [data-col-index="5"][data-row-index="2"]',
24-
)
25-
).innerText();
26-
27-
expect(locationText).toEqual('location');
28-
expect(countryText).toEqual('country');
29-
30-
const secondAddressNode = await page.locator(
31-
'.InfiniteHeader [data-col-index="5"][data-row-index="0"]',
32-
);
33-
34-
expect(
35-
await secondAddressNode.evaluate((node) => node.dataset.groupId),
36-
).toEqual('address,country,region');
37-
expect(
38-
await secondAddressNode.evaluate(
39-
(node: HTMLElement) => node.offsetWidth,
40-
),
41-
).toEqual(480);
42-
43-
await page.evaluate(() => {
44-
// update the groups via columnGroups.set method
45-
(window as any).columnGroups.set('contact info', {
3+
export default test.describe
4+
.parallel('Column groups should render correctly', () => {
5+
/*
6+
*
7+
* See ./current.png image in the current folder for how nesting should look like in this test
8+
*
9+
*/
10+
11+
test('should remove column when a new key is removed from the columns map', async ({
12+
page,
13+
}) => {
14+
await page.load();
15+
const locationText = await (
16+
await page.locator(
17+
'.InfiniteHeader [data-group-id="location,country,region"]',
18+
)
19+
).innerText();
20+
const countryText = await (
21+
await page.locator(
22+
'.InfiniteHeader [data-col-index="5"][data-row-index="2"]',
23+
)
24+
).innerText();
25+
26+
expect(locationText).toEqual('location');
27+
expect(countryText).toEqual('country');
28+
29+
const secondAddressNode = await page.locator(
30+
'.InfiniteHeader [data-col-index="5"][data-row-index="0"]',
31+
);
32+
33+
expect(
34+
await secondAddressNode.evaluate((node) => node.dataset.groupId),
35+
).toEqual('address,country,region');
36+
expect(
37+
await secondAddressNode.evaluate((node: HTMLElement) => node.offsetWidth),
38+
).toEqual(480);
39+
40+
await page.evaluate(() => {
41+
// update the groups
42+
(window as any).setColumnGroups((columnGroups: any) => {
43+
columnGroups = { ...columnGroups };
44+
columnGroups['contact info'] = {
4645
columnGroup: 'address',
4746
header: 'Contact info',
48-
});
47+
};
48+
return columnGroups;
4949
});
50+
});
5051

51-
await page.waitForTimeout(30);
52+
await page.waitForTimeout(30);
5253

53-
expect(
54-
await secondAddressNode.evaluate((node) => node.dataset.groupId),
55-
).toEqual('address,country,region,email,phone');
56-
expect(
57-
await secondAddressNode.evaluate(
58-
(node: HTMLElement) => node.offsetWidth,
59-
),
60-
).toEqual(960);
61-
});
62-
},
63-
);
54+
expect(
55+
await secondAddressNode.evaluate((node) => node.dataset.groupId),
56+
).toEqual('address,country,region,email,phone');
57+
expect(
58+
await secondAddressNode.evaluate((node: HTMLElement) => node.offsetWidth),
59+
).toEqual(960);
60+
});
61+
});

0 commit comments

Comments
 (0)