Revision of React-admin-readme-3.jsx

1 file changed, 49 insertions

React-admin-readme-3.jsx(檔案已創建)

		@@ -0,0 +1,49 @@
1	+	// in posts.js
2	+	import * as React from "react";
3	+	import { List, Datagrid, Edit, Create, SimpleForm, DateField, TextField, EditButton, TextInput, DateInput, useRecordContext } from 'react-admin';
4	+	import BookIcon from '@mui/icons-material/Book';
5	+	export const PostIcon = BookIcon;
6	+
7	+	export const PostList = () => (
8	+	<List>
9	+	<Datagrid>
10	+	<TextField source="id" />
11	+	<TextField source="title" />
12	+	<DateField source="published_at" />
13	+	<TextField source="average_note" />
14	+	<TextField source="views" />
15	+	<EditButton />
16	+	</Datagrid>
17	+	</List>
18	+	);
19	+
20	+	const PostTitle = () => {
21	+	const record = useRecordContext();
22	+	return <span>Post {record ? `"${record.title}"` : ''}</span>;
23	+	};
24	+
25	+	export const PostEdit = () => (
26	+	<Edit title={<PostTitle />}>
27	+	<SimpleForm>
28	+	<TextInput disabled source="id" />
29	+	<TextInput source="title" />
30	+	<TextInput source="teaser" options={{ multiline: true }} />
31	+	<TextInput multiline source="body" />
32	+	<DateInput label="Publication date" source="published_at" />
33	+	<TextInput source="average_note" />
34	+	<TextInput disabled label="Nb views" source="views" />
35	+	</SimpleForm>
36	+	</Edit>
37	+	);
38	+
39	+	export const PostCreate = () => (
40	+	<Create title="Create a Post">
41	+	<SimpleForm>
42	+	<TextInput source="title" />
43	+	<TextInput source="teaser" options={{ multiline: true }} />
44	+	<TextInput multiline source="body" />
45	+	<TextInput label="Publication date" source="published_at" />
46	+	<TextInput source="average_note" />
47	+	</SimpleForm>
48	+	</Create>
49	+	);