-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
remove support for columns/columnGroups as a Map
- Loading branch information
1 parent
03f52db
commit ee21656
Showing
56 changed files
with
951 additions
and
1,371 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
22 changes: 11 additions & 11 deletions
22
examples/src/pages/tests/table/props/column-groups/columns.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,17 +1,17 @@ | ||
| import type { InfiniteTableColumn } from '@infinite-table/infinite-react'; | ||
| import type { Person } from './rowData'; | ||
|
|
||
| export const columns = new Map<string, InfiniteTableColumn<Person>>([ | ||
| ['id', { field: 'id' }], //todo when id is in address group, it should be repeated | ||
| ['streetNo', { field: 'streetNo', columnGroup: 'street' }], | ||
| ['city', { field: 'city', columnGroup: 'location' }], | ||
| export const columns: Record<string, InfiniteTableColumn<Person>> = { | ||
| id: { field: 'id' }, //todo when id is in address group, it should be repeated | ||
| streetNo: { field: 'streetNo', columnGroup: 'street' }, | ||
| city: { field: 'city', columnGroup: 'location' }, | ||
|
|
||
| ['streetName', { field: 'streetName', columnGroup: 'street' }], | ||
| ['firstName', { field: 'firstName' }], | ||
| streetName: { field: 'streetName', columnGroup: 'street' }, | ||
| firstName: { field: 'firstName' }, | ||
|
|
||
| ['country', { field: 'country', columnGroup: 'location' }], | ||
| ['region', { field: 'region', columnGroup: 'location' }], | ||
| country: { field: 'country', columnGroup: 'location' }, | ||
| region: { field: 'region', columnGroup: 'location' }, | ||
|
|
||
| ['email', { field: 'email', columnGroup: 'contact info' }], | ||
| ['phone', { field: 'phone', columnGroup: 'contact info' }], | ||
| ]); | ||
| email: { field: 'email', columnGroup: 'contact info' }, | ||
| phone: { field: 'phone', columnGroup: 'contact info' }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
110 changes: 54 additions & 56 deletions
110
...src/pages/tests/table/props/column-groups/uncontrolled/uncontrolled-column-groups.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,63 +1,61 @@ | ||
| import { test, expect } from '@testing'; | ||
|
|
||
| export default test.describe.parallel( | ||
| 'Column groups should render correctly', | ||
| () => { | ||
| /* | ||
| * | ||
| * See ./current.png image in the current folder for how nesting should look like in this test | ||
| * | ||
| */ | ||
|
|
||
| test('should remove column when a new key is removed from the columns map', async ({ | ||
| page, | ||
| }) => { | ||
| await page.load(); | ||
| const locationText = await ( | ||
| await page.locator( | ||
| '.InfiniteHeader [data-group-id="location,country,region"]', | ||
| ) | ||
| ).innerText(); | ||
| const countryText = await ( | ||
| await page.locator( | ||
| '.InfiniteHeader [data-col-index="5"][data-row-index="2"]', | ||
| ) | ||
| ).innerText(); | ||
|
|
||
| expect(locationText).toEqual('location'); | ||
| expect(countryText).toEqual('country'); | ||
|
|
||
| const secondAddressNode = await page.locator( | ||
| '.InfiniteHeader [data-col-index="5"][data-row-index="0"]', | ||
| ); | ||
|
|
||
| expect( | ||
| await secondAddressNode.evaluate((node) => node.dataset.groupId), | ||
| ).toEqual('address,country,region'); | ||
| expect( | ||
| await secondAddressNode.evaluate( | ||
| (node: HTMLElement) => node.offsetWidth, | ||
| ), | ||
| ).toEqual(480); | ||
|
|
||
| await page.evaluate(() => { | ||
| // update the groups via columnGroups.set method | ||
| (window as any).columnGroups.set('contact info', { | ||
| export default test.describe | ||
| .parallel('Column groups should render correctly', () => { | ||
| /* | ||
| * | ||
| * See ./current.png image in the current folder for how nesting should look like in this test | ||
| * | ||
| */ | ||
|
|
||
| test('should remove column when a new key is removed from the columns map', async ({ | ||
| page, | ||
| }) => { | ||
| await page.load(); | ||
| const locationText = await ( | ||
| await page.locator( | ||
| '.InfiniteHeader [data-group-id="location,country,region"]', | ||
| ) | ||
| ).innerText(); | ||
| const countryText = await ( | ||
| await page.locator( | ||
| '.InfiniteHeader [data-col-index="5"][data-row-index="2"]', | ||
| ) | ||
| ).innerText(); | ||
|
|
||
| expect(locationText).toEqual('location'); | ||
| expect(countryText).toEqual('country'); | ||
|
|
||
| const secondAddressNode = await page.locator( | ||
| '.InfiniteHeader [data-col-index="5"][data-row-index="0"]', | ||
| ); | ||
|
|
||
| expect( | ||
| await secondAddressNode.evaluate((node) => node.dataset.groupId), | ||
| ).toEqual('address,country,region'); | ||
| expect( | ||
| await secondAddressNode.evaluate((node: HTMLElement) => node.offsetWidth), | ||
| ).toEqual(480); | ||
|
|
||
| await page.evaluate(() => { | ||
| // update the groups | ||
| (window as any).setColumnGroups((columnGroups: any) => { | ||
| columnGroups = { ...columnGroups }; | ||
| columnGroups['contact info'] = { | ||
| columnGroup: 'address', | ||
| header: 'Contact info', | ||
| }); | ||
| }; | ||
| return columnGroups; | ||
| }); | ||
| }); | ||
|
|
||
| await page.waitForTimeout(30); | ||
| await page.waitForTimeout(30); | ||
|
|
||
| expect( | ||
| await secondAddressNode.evaluate((node) => node.dataset.groupId), | ||
| ).toEqual('address,country,region,email,phone'); | ||
| expect( | ||
| await secondAddressNode.evaluate( | ||
| (node: HTMLElement) => node.offsetWidth, | ||
| ), | ||
| ).toEqual(960); | ||
| }); | ||
| }, | ||
| ); | ||
| expect( | ||
| await secondAddressNode.evaluate((node) => node.dataset.groupId), | ||
| ).toEqual('address,country,region,email,phone'); | ||
| expect( | ||
| await secondAddressNode.evaluate((node: HTMLElement) => node.offsetWidth), | ||
| ).toEqual(960); | ||
| }); | ||
| }); |
Oops, something went wrong.