Skip to content

Commit bae770c

Browse files
radubreharradubrehar
committed
Merge remote-tracking branch 'origin/master' into feat/horizontal-layout
2 parents 456e84f + 97918b6 commit bae770c

File tree

64 files changed

+1886
-616
lines changed

Some content is hidden

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

64 files changed

+1886
-616
lines changed

‎.cursorignore‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# Add directories or file patterns to ignore during indexing (e.g. foo/ or *.csv)
2+
node_modules
3+
/www/dataserver/data
4+
.next
5+
.env.local
6+
dist
7+
out
8+
.contentlayer

‎examples/src/pages/tests/datasource/sortinfo-controlled.spec.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ export default test.describe.parallel('DataSource', () => {
2020
id: persons[0].id,
2121
indexInAll: 0,
2222
rowSelected: false,
23+
rowDisabled: false,
2324
isGroupRow: false,
2425
selfLoaded: true,
2526
dataSourceHasGrouping: false,
@@ -29,6 +30,7 @@ export default test.describe.parallel('DataSource', () => {
2930
id: persons[1].id,
3031
indexInAll: 1,
3132
rowSelected: false,
33+
rowDisabled: false,
3234
isGroupRow: false,
3335
selfLoaded: true,
3436
dataSourceHasGrouping: false,
@@ -54,6 +56,7 @@ export default test.describe.parallel('DataSource', () => {
5456
dataSourceHasGrouping: false,
5557
indexInAll: 0,
5658
rowSelected: false,
59+
rowDisabled: false,
5760
// indexInGroup: 0,
5861
isGroupRow: false,
5962
selfLoaded: true,
@@ -63,6 +66,7 @@ export default test.describe.parallel('DataSource', () => {
6366
data: persons[1],
6467
indexInAll: 1,
6568
rowSelected: false,
69+
rowDisabled: false,
6670
// indexInGroup: 1,
6771
id: persons[1].id,
6872
isGroupRow: false,

‎examples/src/pages/tests/table/props/active-row-index/default.page.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ export default function KeyboardNavigationForRows() {
5555
defaultActiveRowIndex={99}
5656
keyboardNavigation="row"
5757
domProps={{
58+
autoFocus: true,
5859
style: {
5960
height: 800,
6061
},

‎examples/src/pages/tests/table/props/active-row-index/small-grid-one-col.page.tsx‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
import { InfiniteTable, DataSource } from '@infinite-table/infinite-react';
2+
3+
import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react';
4+
import * as React from 'react';
5+
6+
type Developer = {
7+
id: number;
8+
firstName: string;
9+
lastName: string;
10+
country: string;
11+
city: string;
12+
currency: string;
13+
14+
email: string;
15+
preferredLanguage: string;
16+
stack: string;
17+
canDesign: 'yes' | 'no';
18+
hobby: string;
19+
salary: number;
20+
age: number;
21+
};
22+
const dataSource: Developer[] = [
23+
{
24+
id: 1,
25+
firstName: 'John',
26+
lastName: 'Doe',
27+
country: 'USA',
28+
city: 'New York',
29+
currency: '$',
30+
email: '[email protected]',
31+
preferredLanguage: 'JavaScript',
32+
stack: 'frontend',
33+
canDesign: 'yes',
34+
hobby: 'Coding',
35+
salary: 50000,
36+
age: 30,
37+
},
38+
{
39+
id: 2,
40+
firstName: 'Jane',
41+
lastName: 'Doe',
42+
country: 'USA',
43+
city: 'San Francisco',
44+
currency: '$',
45+
email: '[email protected]',
46+
preferredLanguage: 'Ruby',
47+
stack: 'backend',
48+
canDesign: 'no',
49+
hobby: 'Photography',
50+
salary: 60000,
51+
age: 35,
52+
},
53+
{
54+
id: 3,
55+
firstName: 'Bob',
56+
lastName: 'Doe',
57+
country: 'Canada',
58+
city: 'Toronto',
59+
currency: '$',
60+
email: '[email protected]',
61+
preferredLanguage: 'Ruby',
62+
stack: 'frontend',
63+
canDesign: 'no',
64+
hobby: 'Photography',
65+
salary: 40000,
66+
age: 28,
67+
},
68+
];
69+
70+
const columns: InfiniteTablePropColumns<Developer> = {
71+
firstName: { field: 'firstName', defaultFlex: 1 },
72+
};
73+
74+
export default function KeyboardNavigationForRows() {
75+
return (
76+
<DataSource<Developer> primaryKey="id" data={dataSource}>
77+
<InfiniteTable<Developer>
78+
columns={columns}
79+
keyboardNavigation="row"
80+
defaultActiveRowIndex={2}
81+
rowHeight={40}
82+
columnDefaultWidth={120}
83+
header={false}
84+
domProps={{
85+
style: {
86+
width: '80vw',
87+
minHeight: 120,
88+
},
89+
}}
90+
/>
91+
</DataSource>
92+
);
93+
}

‎examples/src/pages/tests/table/props/active-row-index/small-grid.page.tsx‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import { InfiniteTable, DataSource } from '@infinite-table/infinite-react';
2+
3+
import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react';
4+
import * as React from 'react';
5+
6+
type Developer = {
7+
id: number;
8+
firstName: string;
9+
lastName: string;
10+
country: string;
11+
city: string;
12+
currency: string;
13+
14+
email: string;
15+
preferredLanguage: string;
16+
stack: string;
17+
canDesign: 'yes' | 'no';
18+
hobby: string;
19+
salary: number;
20+
age: number;
21+
};
22+
const dataSource: Developer[] = [
23+
{
24+
id: 1,
25+
firstName: 'John',
26+
lastName: 'Doe',
27+
country: 'USA',
28+
city: 'New York',
29+
currency: '$',
30+
email: '[email protected]',
31+
preferredLanguage: 'JavaScript',
32+
stack: 'frontend',
33+
canDesign: 'yes',
34+
hobby: 'Coding',
35+
salary: 50000,
36+
age: 30,
37+
},
38+
{
39+
id: 2,
40+
firstName: 'Jane',
41+
lastName: 'Doe',
42+
country: 'USA',
43+
city: 'San Francisco',
44+
currency: '$',
45+
email: '[email protected]',
46+
preferredLanguage: 'Ruby',
47+
stack: 'backend',
48+
canDesign: 'no',
49+
hobby: 'Photography',
50+
salary: 60000,
51+
age: 35,
52+
},
53+
{
54+
id: 3,
55+
firstName: 'Bob',
56+
lastName: 'Doe',
57+
country: 'Canada',
58+
city: 'Toronto',
59+
currency: '$',
60+
email: '[email protected]',
61+
preferredLanguage: 'Ruby',
62+
stack: 'frontend',
63+
canDesign: 'no',
64+
hobby: 'Photography',
65+
salary: 40000,
66+
age: 28,
67+
},
68+
];
69+
70+
const columns: InfiniteTablePropColumns<Developer> = {
71+
preferredLanguage: { field: 'preferredLanguage' },
72+
country: { field: 'country' },
73+
firstName: { field: 'firstName' },
74+
id: { field: 'id' },
75+
};
76+
77+
export default function KeyboardNavigationForRows() {
78+
return (
79+
<DataSource<Developer> primaryKey="id" data={dataSource}>
80+
<InfiniteTable<Developer>
81+
columns={columns}
82+
keyboardNavigation="row"
83+
defaultActiveRowIndex={2}
84+
rowHeight={40}
85+
columnDefaultWidth={120}
86+
header={false}
87+
domProps={{
88+
style: {
89+
width: 800,
90+
minHeight: 120,
91+
},
92+
}}
93+
/>
94+
</DataSource>
95+
);
96+
}

‎examples/src/pages/tests/table/props/active-row-index/small-grid.spec.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { getScrollerLocator } from '@examples/pages/tests/testUtils';
2+
3+
import { test, expect } from '@testing';
4+
5+
export default test.describe('No scrollbar grid', () => {
6+
test('should not have scrollbars induced by the active row index selector', async ({
7+
page,
8+
}) => {
9+
await page.waitForInfinite();
10+
const scroller = await getScrollerLocator({ page });
11+
12+
const { scrollWidth, scrollHeight, offsetWidth } = await scroller.evaluate(
13+
(node) => {
14+
return {
15+
scrollWidth: (node as HTMLElement).scrollWidth,
16+
scrollHeight: (node as HTMLElement).scrollHeight,
17+
offsetWidth: (node as HTMLElement).offsetWidth,
18+
};
19+
},
20+
);
21+
22+
expect(scrollHeight).toEqual(120);
23+
expect(scrollWidth).toEqual(800);
24+
expect(offsetWidth).toEqual(800);
25+
});
26+
});

‎examples/src/pages/tests/table/props/active-row-index/with-disabled-controlled.page.tsx‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
import {
2+
InfiniteTable,
3+
DataSource,
4+
DataSourceData,
5+
type InfiniteTablePropColumns,
6+
DataSourceApi,
7+
RowDisabledStateObject,
8+
} from '@infinite-table/infinite-react';
9+
10+
import * as React from 'react';
11+
import { useState } from 'react';
12+
13+
type Developer = {
14+
id: number;
15+
firstName: string;
16+
lastName: string;
17+
country: string;
18+
city: string;
19+
currency: string;
20+
21+
email: string;
22+
preferredLanguage: string;
23+
stack: string;
24+
canDesign: 'yes' | 'no';
25+
hobby: string;
26+
salary: number;
27+
age: number;
28+
};
29+
30+
const dataSource: DataSourceData<Developer> = ({}) => {
31+
return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers10-sql`)
32+
.then((r) => r.json())
33+
.then((data: Developer[]) => data);
34+
};
35+
36+
const columns: InfiniteTablePropColumns<Developer> = {
37+
preferredLanguage: { field: 'preferredLanguage' },
38+
id: { field: 'id' },
39+
country: { field: 'country' },
40+
salary: {
41+
field: 'salary',
42+
type: 'number',
43+
},
44+
age: { field: 'age' },
45+
canDesign: { field: 'canDesign' },
46+
firstName: { field: 'firstName' },
47+
stack: { field: 'stack' },
48+
49+
hobby: { field: 'hobby' },
50+
city: { field: 'city' },
51+
currency: { field: 'currency' },
52+
};
53+
54+
export default function KeyboardNavigationForRows() {
55+
const [activeRowIndex, setActiveRowIndex] = useState(0);
56+
57+
const [rowDisabledState, setRowDisabledState] =
58+
useState<RowDisabledStateObject>({
59+
enabledRows: true,
60+
disabledRows: [3, 5, 6],
61+
});
62+
63+
const [dataSourceApi, setDataSourceApi] =
64+
useState<DataSourceApi<Developer>>();
65+
66+
(globalThis as any).activeRowIndex = activeRowIndex;
67+
return (
68+
<>
69+
<div style={{ marginBottom: '10px' }}>
70+
<button onClick={() => dataSourceApi?.disableAllRows()}>
71+
Disable All Rows
72+
</button>
73+
<button
74+
onClick={() => dataSourceApi?.enableAllRows()}
75+
style={{ marginLeft: '10px' }}
76+
>
77+
Enable All Rows
78+
</button>
79+
<button
80+
onClick={() => {
81+
if (dataSourceApi) {
82+
const isRowDisabled = dataSourceApi.isRowDisabled(1);
83+
dataSourceApi.setRowEnabledAt(1, isRowDisabled);
84+
}
85+
}}
86+
style={{ marginLeft: '10px' }}
87+
>
88+
Toggle Row 1
89+
</button>
90+
</div>
91+
<DataSource<Developer>
92+
onReady={setDataSourceApi}
93+
primaryKey="id"
94+
data={dataSource}
95+
selectionMode="multi-row"
96+
rowDisabledState={rowDisabledState}
97+
onRowDisabledStateChange={(s) => setRowDisabledState(s.getState())}
98+
>
99+
<InfiniteTable<Developer>
100+
columns={columns}
101+
activeRowIndex={activeRowIndex}
102+
onActiveRowIndexChange={setActiveRowIndex}
103+
keyboardNavigation="row"
104+
domProps={{
105+
autoFocus: true,
106+
style: {
107+
height: 800,
108+
},
109+
}}
110+
/>
111+
</DataSource>
112+
</>
113+
);
114+
}

0 commit comments

Comments
 (0)