Skip to content

Commit 54a9f74

Browse files
radubreharradubrehar
committed
cleanup add rowHoverClassName prop and release version patch
1 parent 76d496d commit 54a9f74

File tree

12 files changed

+470
-9
lines changed

12 files changed

+470
-9
lines changed

‎examples/src/pages/tests/table/props/row-className/with-row-hover-on-body-prop.page.tsx‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
import * as React from 'react';
2+
3+
import {
4+
InfiniteTable,
5+
InfiniteTablePropColumns,
6+
} from '@infinite-table/infinite-react';
7+
import { DataSource } from '@infinite-table/infinite-react';
8+
9+
type Developer = {
10+
id: number;
11+
12+
firstName: string;
13+
lastName: string;
14+
15+
currency: string;
16+
preferredLanguage: string;
17+
stack: string;
18+
canDesign: 'yes' | 'no';
19+
20+
age: number;
21+
};
22+
23+
const data: Developer[] = [
24+
{
25+
id: 1,
26+
firstName: 'John',
27+
lastName: 'Bob',
28+
age: 20,
29+
canDesign: 'yes',
30+
currency: 'USD',
31+
preferredLanguage: 'JavaScript',
32+
stack: 'frontend',
33+
},
34+
{
35+
id: 2,
36+
firstName: 'Marry',
37+
lastName: 'Bob',
38+
age: 25,
39+
canDesign: 'yes',
40+
currency: 'USD',
41+
preferredLanguage: 'JavaScript',
42+
stack: 'frontend',
43+
},
44+
{
45+
id: 3,
46+
firstName: 'Bill',
47+
lastName: 'Bobson',
48+
age: 30,
49+
canDesign: 'no',
50+
currency: 'CAD',
51+
preferredLanguage: 'TypeScript',
52+
stack: 'frontend',
53+
},
54+
{
55+
id: 4,
56+
firstName: 'Mark',
57+
lastName: 'Twain',
58+
age: 31,
59+
canDesign: 'yes',
60+
currency: 'CAD',
61+
preferredLanguage: 'Rust',
62+
stack: 'backend',
63+
},
64+
{
65+
id: 5,
66+
firstName: 'Matthew',
67+
lastName: 'Hilson',
68+
age: 29,
69+
canDesign: 'yes',
70+
currency: 'CAD',
71+
preferredLanguage: 'Go',
72+
stack: 'backend',
73+
},
74+
];
75+
76+
const columns: InfiniteTablePropColumns<Developer> = {
77+
firstName: {
78+
field: 'firstName',
79+
},
80+
age: {
81+
field: 'age',
82+
type: 'number',
83+
},
84+
85+
stack: { field: 'stack' },
86+
currency: { field: 'currency' },
87+
};
88+
89+
export default () => {
90+
const dataSource = React.useCallback(() => {
91+
return Promise.resolve(data.slice(0, data.length - 1));
92+
}, []);
93+
94+
return (
95+
<>
96+
<React.StrictMode>
97+
<DataSource<Developer> data={dataSource} primaryKey="id">
98+
<InfiniteTable<Developer>
99+
columns={columns}
100+
rowClassName={'custom-row'}
101+
domProps={{
102+
style: {
103+
minHeight: 500,
104+
},
105+
}}
106+
>
107+
<InfiniteTable.Header />
108+
<InfiniteTable.Body rowHoverClassName={'hover-row'} />
109+
</InfiniteTable>
110+
</DataSource>
111+
</React.StrictMode>
112+
</>
113+
);
114+
};

‎examples/src/pages/tests/table/props/row-className/with-row-hover-on-body-prop.spec.ts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { test, expect } from '@testing';
2+
3+
export default test.describe
4+
.parallel('rowClassName and rowHoverClassName', () => {
5+
test('are correctly applied', async ({ page, tableModel }) => {
6+
await page.waitForInfinite();
7+
8+
const cell = tableModel.withCell({
9+
colIndex: 0,
10+
rowIndex: 0,
11+
});
12+
13+
const locator = cell.getLocator();
14+
15+
const cls = await locator.getAttribute('class');
16+
17+
expect(cls).toContain('custom-row');
18+
expect(cls).not.toContain('hover-row');
19+
expect(cls).not.toContain('InfiniteColumnCell--hovered');
20+
21+
await locator.hover();
22+
23+
await page.waitForTimeout(50);
24+
25+
const newCls = await locator.getAttribute('class');
26+
expect(newCls).toContain('InfiniteColumnCell--hovered');
27+
expect(newCls).toContain('hover-row');
28+
expect(newCls).toContain('custom-row');
29+
});
30+
});

‎examples/src/pages/tests/table/props/row-className/with-row-hover-static-on-body.page.tsx‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
import * as React from 'react';
2+
3+
import {
4+
InfiniteTable,
5+
InfiniteTablePropColumns,
6+
} from '@infinite-table/infinite-react';
7+
import { DataSource } from '@infinite-table/infinite-react';
8+
9+
type Developer = {
10+
id: number;
11+
12+
firstName: string;
13+
lastName: string;
14+
15+
currency: string;
16+
preferredLanguage: string;
17+
stack: string;
18+
canDesign: 'yes' | 'no';
19+
20+
age: number;
21+
};
22+
23+
const data: Developer[] = [
24+
{
25+
id: 1,
26+
firstName: 'John',
27+
lastName: 'Bob',
28+
age: 20,
29+
canDesign: 'yes',
30+
currency: 'USD',
31+
preferredLanguage: 'JavaScript',
32+
stack: 'frontend',
33+
},
34+
{
35+
id: 2,
36+
firstName: 'Marry',
37+
lastName: 'Bob',
38+
age: 25,
39+
canDesign: 'yes',
40+
currency: 'USD',
41+
preferredLanguage: 'JavaScript',
42+
stack: 'frontend',
43+
},
44+
{
45+
id: 3,
46+
firstName: 'Bill',
47+
lastName: 'Bobson',
48+
age: 30,
49+
canDesign: 'no',
50+
currency: 'CAD',
51+
preferredLanguage: 'TypeScript',
52+
stack: 'frontend',
53+
},
54+
{
55+
id: 4,
56+
firstName: 'Mark',
57+
lastName: 'Twain',
58+
age: 31,
59+
canDesign: 'yes',
60+
currency: 'CAD',
61+
preferredLanguage: 'Rust',
62+
stack: 'backend',
63+
},
64+
{
65+
id: 5,
66+
firstName: 'Matthew',
67+
lastName: 'Hilson',
68+
age: 29,
69+
canDesign: 'yes',
70+
currency: 'CAD',
71+
preferredLanguage: 'Go',
72+
stack: 'backend',
73+
},
74+
];
75+
76+
const columns: InfiniteTablePropColumns<Developer> = {
77+
firstName: {
78+
field: 'firstName',
79+
},
80+
age: {
81+
field: 'age',
82+
type: 'number',
83+
},
84+
85+
stack: { field: 'stack' },
86+
currency: { field: 'currency' },
87+
};
88+
89+
InfiniteTable.Body.rowHoverClassName.push('hover-row');
90+
91+
export default () => {
92+
const dataSource = React.useCallback(() => {
93+
return Promise.resolve(data.slice(0, data.length - 1));
94+
}, []);
95+
96+
return (
97+
<>
98+
<React.StrictMode>
99+
<DataSource<Developer> data={dataSource} primaryKey="id">
100+
<InfiniteTable<Developer>
101+
columns={columns}
102+
rowClassName={'custom-row'}
103+
domProps={{
104+
style: {
105+
minHeight: 500,
106+
},
107+
}}
108+
></InfiniteTable>
109+
</DataSource>
110+
</React.StrictMode>
111+
</>
112+
);
113+
};

‎examples/src/pages/tests/table/props/row-className/with-row-hover-static-on-body.spec.ts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { test, expect } from '@testing';
2+
3+
export default test.describe
4+
.parallel('rowClassName and rowHoverClassName', () => {
5+
test('are correctly applied', async ({ page, tableModel }) => {
6+
await page.waitForInfinite();
7+
8+
const cell = tableModel.withCell({
9+
colIndex: 0,
10+
rowIndex: 0,
11+
});
12+
13+
const locator = cell.getLocator();
14+
15+
const cls = await locator.getAttribute('class');
16+
17+
expect(cls).toContain('custom-row');
18+
expect(cls).not.toContain('hover-row');
19+
expect(cls).not.toContain('InfiniteColumnCell--hovered');
20+
21+
await locator.hover();
22+
23+
await page.waitForTimeout(50);
24+
25+
const newCls = await locator.getAttribute('class');
26+
expect(newCls).toContain('InfiniteColumnCell--hovered');
27+
expect(newCls).toContain('hover-row');
28+
expect(newCls).toContain('custom-row');
29+
});
30+
});

0 commit comments

Comments
 (0)