Skip to content

Commit be5f8bc

Browse files
djhidjhi
authored
Merge pull request #10762 from marmelab/codemod-DataTable-Datagrid
Create a codemod to replace `Datagrid` by `DataTable `
2 parents 5cf92ae + 7d36f5e commit be5f8bc

8 files changed

+558
-0
lines changed

‎packages/ra-core/codemods/__testfixtures__/replace-Datagrid-DataTable-Basic.input.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
/* eslint-disable import/no-extraneous-dependencies */
2+
import * as React from 'react';
3+
import { List, Datagrid, TextField } from 'react-admin';
4+
5+
const PostList = () => (
6+
<List>
7+
<Datagrid>
8+
<TextField source="id" label="Post number" />
9+
<TextField source="title" />
10+
<TextField source="body" />
11+
</Datagrid>
12+
</List>
13+
);
14+
15+
export default PostList;

‎packages/ra-core/codemods/__testfixtures__/replace-Datagrid-DataTable-Basic.output.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
/* eslint-disable import/no-extraneous-dependencies */
2+
import * as React from 'react';
3+
import { List, DataTable } from 'react-admin';
4+
5+
const PostList = () => (
6+
<List>
7+
<DataTable>
8+
<DataTable.Col source="id" label="Post number" />
9+
<DataTable.Col source="title" />
10+
<DataTable.Col source="body" />
11+
</DataTable>
12+
</List>
13+
);
14+
15+
export default PostList;

‎packages/ra-core/codemods/__testfixtures__/replace-Datagrid-DataTable-ManyChildren.input.tsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
/* eslint-disable import/no-extraneous-dependencies */
2+
import * as React from 'react';
3+
import {
4+
List,
5+
Datagrid,
6+
TextField,
7+
EmailField,
8+
NumberField,
9+
EditButton,
10+
ReferenceField,
11+
UrlField,
12+
DateField,
13+
} from 'react-admin';
14+
15+
// @ts-ignore
16+
import { MyCustomField } from './MyCustomField';
17+
18+
const PostList = () => (
19+
<List>
20+
<Datagrid>
21+
<TextField source="id" />
22+
<EmailField source="email" />
23+
<EmailField
24+
source="author_email"
25+
label="Email of the author of the post"
26+
/>
27+
<NumberField source="nb_vues" />
28+
<NumberField
29+
source="price"
30+
locales="fr-FR"
31+
options={{ style: 'currency', currency: 'USD' }}
32+
/>
33+
<TextField source="title" />
34+
<ReferenceField source="userId" reference="users">
35+
<TextField source="name" />
36+
</ReferenceField>
37+
<UrlField source="url" />
38+
<DateField source="createdAt" />
39+
<MyCustomField source="code" />
40+
<EditButton />
41+
</Datagrid>
42+
</List>
43+
);
44+
45+
export default PostList;

‎packages/ra-core/codemods/__testfixtures__/replace-Datagrid-DataTable-ManyChildren.output.tsx‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
/* eslint-disable import/no-extraneous-dependencies */
2+
import * as React from 'react';
3+
import {
4+
List,
5+
DataTable,
6+
TextField,
7+
EmailField,
8+
EditButton,
9+
ReferenceField,
10+
UrlField,
11+
DateField,
12+
} from 'react-admin';
13+
14+
// @ts-ignore
15+
import { MyCustomField } from './MyCustomField';
16+
17+
const PostList = () => (
18+
<List>
19+
<DataTable>
20+
<DataTable.Col source="id" />
21+
<DataTable.Col source="email">
22+
<EmailField source="email" />
23+
</DataTable.Col>
24+
<DataTable.Col label="Email of the author of the post">
25+
<EmailField
26+
source="author_email"
27+
label="Email of the author of the post"
28+
/>
29+
</DataTable.Col>
30+
<DataTable.NumberCol source="nb_vues" />
31+
<DataTable.NumberCol
32+
source="price"
33+
locales="fr-FR"
34+
options={{ style: 'currency', currency: 'USD' }}
35+
/>
36+
<DataTable.Col source="title" />
37+
<DataTable.Col source="userId">
38+
<ReferenceField source="userId" reference="users">
39+
<TextField source="name" />
40+
</ReferenceField>
41+
</DataTable.Col>
42+
<DataTable.Col source="url">
43+
<UrlField source="url" />
44+
</DataTable.Col>
45+
<DataTable.Col source="createdAt">
46+
<DateField source="createdAt" />
47+
</DataTable.Col>
48+
<DataTable.Col source="code">
49+
<MyCustomField source="code" />
50+
</DataTable.Col>
51+
<DataTable.Col>
52+
<EditButton />
53+
</DataTable.Col>
54+
</DataTable>
55+
</List>
56+
);
57+
58+
export default PostList;

‎packages/ra-core/codemods/__testfixtures__/replace-Datagrid-DataTable-Props.input.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
/* eslint-disable prettier/prettier */
2+
/* eslint-disable import/no-extraneous-dependencies */
3+
import * as React from 'react';
4+
import { List, Datagrid, TextField, useRecordContext } from 'react-admin';
5+
6+
const CustomEmpty = () => <div>No posts found</div>;
7+
8+
const PostPanel = () => {
9+
const record = useRecordContext();
10+
return <div dangerouslySetInnerHTML={{ __html: record.body }} />;
11+
};
12+
13+
const postRowStyle = (record, index) => ({
14+
backgroundColor: record.nb_views >= 500 ? '#efe' : 'white',
15+
});
16+
17+
const PostList = () => (
18+
<List>
19+
<Datagrid
20+
bulkActionButtons={false}
21+
empty={<CustomEmpty />}
22+
expand={<PostPanel />}
23+
expandSingle
24+
rowClick={false}
25+
optimized
26+
rowStyle={postRowStyle}
27+
sx={{
28+
'& .RaDatagrid-row': {
29+
backgroundColor: 'white',
30+
},
31+
'& .RaDatagrid-row:hover': {
32+
backgroundColor: '#f5f5f5',
33+
},
34+
}}>
35+
<TextField source="id" />
36+
<TextField source="title" />
37+
<TextField source="body" />
38+
</Datagrid>
39+
</List>
40+
);
41+
42+
export default PostList;

‎packages/ra-core/codemods/__testfixtures__/replace-Datagrid-DataTable-Props.output.tsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
/* eslint-disable prettier/prettier */
2+
/* eslint-disable import/no-extraneous-dependencies */
3+
import * as React from 'react';
4+
import { List, DataTable, useRecordContext } from 'react-admin';
5+
6+
const CustomEmpty = () => <div>No posts found</div>;
7+
8+
const PostPanel = () => {
9+
const record = useRecordContext();
10+
return <div dangerouslySetInnerHTML={{ __html: record.body }} />;
11+
};
12+
13+
const postRowStyle = (record, index) => ({
14+
backgroundColor: record.nb_views >= 500 ? '#efe' : 'white',
15+
});
16+
17+
const PostList = () => (
18+
<List>
19+
<DataTable
20+
bulkActionButtons={false}
21+
empty={<CustomEmpty />}
22+
expand={<PostPanel />}
23+
expandSingle
24+
rowClick={false}
25+
rowSx={postRowStyle}
26+
sx={{
27+
'& .RaDataTable-row': {
28+
backgroundColor: 'white',
29+
},
30+
'& .RaDataTable-row:hover': {
31+
backgroundColor: '#f5f5f5',
32+
},
33+
}}>
34+
<DataTable.Col source="id" />
35+
<DataTable.Col source="title" />
36+
<DataTable.Col source="body" />
37+
</DataTable>
38+
</List>
39+
);
40+
41+
export default PostList;

‎packages/ra-core/codemods/__tests__/replace-Datagrid-DataTable.spec.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { defineTest } from 'jscodeshift/dist/testUtils';
2+
3+
jest.autoMockOff();
4+
5+
defineTest(
6+
__dirname,
7+
'replace-Datagrid-DataTable',
8+
null,
9+
'replace-Datagrid-DataTable-Basic',
10+
{ parser: 'tsx' }
11+
);
12+
defineTest(
13+
__dirname,
14+
'replace-Datagrid-DataTable',
15+
null,
16+
'replace-Datagrid-DataTable-ManyChildren',
17+
{ parser: 'tsx' }
18+
);
19+
defineTest(
20+
__dirname,
21+
'replace-Datagrid-DataTable',
22+
null,
23+
'replace-Datagrid-DataTable-Props',
24+
{ parser: 'tsx' }
25+
);

0 commit comments

Comments
 (0)