From 737dc91f753c819e47c02d4ba14a6fe0a562f13e Mon Sep 17 00:00:00 2001 From: ThieryMichel Date: Thu, 17 Jul 2025 18:04:39 +0200 Subject: [PATCH] remove mui components from ShowBase, ListBase and EditBase docs --- docs/EditBase.md | 38 ++++++++++++++------------------------ docs/ListBase.md | 30 ++++++++++++------------------ docs/ShowBase.md | 41 ++++++++++++----------------------------- 3 files changed, 38 insertions(+), 71 deletions(-) diff --git a/docs/EditBase.md b/docs/EditBase.md index a5671f6f1f1..d47f9d0bdec 100644 --- a/docs/EditBase.md +++ b/docs/EditBase.md @@ -17,27 +17,18 @@ Contrary to [``](./Edit.md), it does not render the page layout, so no tit Use `` to create a custom Edition view, with exactly the content you add as child and nothing else (no title, Card, or list of actions as in the `` component). ```jsx -import { EditBase, SelectInput, SimpleForm, TextInput, Title } from "react-admin"; -import { Card, CardContent, Container } from "@mui/material"; +import { EditBase, Form } from "react-admin"; export const BookEdit = () => ( - - - <Card> - <CardContent> - <SimpleForm> - <TextInput source="title" /> - <TextInput source="author" /> - <SelectInput source="availability" choices={[ - { id: "in_stock", name: "In stock" }, - { id: "out_of_stock", name: "Out of stock" }, - { id: "out_of_print", name: "Out of print" }, - ]} /> - </SimpleForm> - </CardContent> - </Card> - </Container> + <div> + <h1>Book Edition</h1> + <div> + <Form> + ... + </Form> + </div> + </div> </EditBase> ); ``` @@ -66,18 +57,17 @@ If your `authProvider` implements [Access Control](./Permissions.md#access-contr For instance, for the `<PostEdit>`page below: ```tsx -import { EditBase, SimpleForm, TextInput } from 'react-admin'; +import { EditBase, Form } from 'react-admin'; // Resource name is "posts" const PostEdit = () => ( <EditBase> - <SimpleForm> - <TextInput source="title" /> - <TextInput source="author" /> - <TextInput source="published_at" /> - </SimpleForm> + <Form> + ... + </Form> </EditBase> ); + ``` `<EditBase>` will call `authProvider.canAccess()` using the following parameters: diff --git a/docs/ListBase.md b/docs/ListBase.md index 2dfd4607a7b..973091c799b 100644 --- a/docs/ListBase.md +++ b/docs/ListBase.md @@ -19,32 +19,28 @@ You can use `ListBase` to create your own custom reusable List component, like t ```jsx import { ListBase, - Title, - ListToolbar, - Pagination, - DataTable, + ListIterator, } from 'react-admin'; -import { Card } from '@mui/material'; const MyList = ({ children, actions, filters, title, ...props }) => ( <ListBase {...props}> - <Title title={title}/> - <ListToolbar + <h1>{title}</h1> + <CustomToolbar filters={filters} actions={actions} /> - <Card> + <div> {children} - </Card> - <Pagination /> + </div> + <CustomPagination /> </ListBase> ); const PostList = () => ( <MyList title="Post List"> - <DataTable> + <ListIterator> ... - </DataTable> + </ListIterator> </MyList> ); ``` @@ -78,16 +74,14 @@ If your `authProvider` implements [Access Control](./Permissions.md#access-contr For instance, for the `<PostList>` page below: ```tsx -import { ListBase, DataTable } from 'react-admin'; +import { ListBase, ListIterator } from 'react-admin'; // Resource name is "posts" const PostList = () => ( <ListBase> - <DataTable> - <DataTable.Col source="title" /> - <DataTable.Col source="author" /> - <DataTable.Col source="published_at" /> - </DataTable> + <ListIterator> + <CustomPostRenderer /> + </ListIterator> </ListBase> ); ``` diff --git a/docs/ShowBase.md b/docs/ShowBase.md index 7e68a762962..a244c1f63e8 100644 --- a/docs/ShowBase.md +++ b/docs/ShowBase.md @@ -78,29 +78,18 @@ For instance, to display several fields in a single line, you can use Material U {% raw %} ```jsx -import { ShowBase, TextField, DateField, ReferenceField, WithRecord } from 'react-admin'; -import { Grid } from '@mui/material'; +import { ShowBase, ReferenceFieldBase, WithRecord } from 'react-admin'; import StarIcon from '@mui/icons-material/Star'; const BookShow = () => ( <ShowBase> - <Grid container spacing={2} sx={{ margin: 2 }}> - <Grid item xs={12} sm={6}> - <TextField label="Title" source="title" /> - </Grid> - <Grid item xs={12} sm={6}> - <ReferenceField label="Author" source="author_id" reference="authors"> - <TextField source="name" /> - </ReferenceField> - </Grid> - <Grid item xs={12} sm={6}> - <DateField label="Publication Date" source="published_at" /> - </Grid> - <Grid item xs={12} sm={6}> - <WithRecord label="Rating" render={record => <> - {[...Array(record.rating)].map((_, index) => <StarIcon key={index} />)} - </>} /> - </Grid> + <div> + <ReferenceFieldBase source="author_id" reference="authors"> + ... + </ReferenceFieldBase> + <WithRecord label="Rating" render={record => <> + {[...Array(record.rating)].map((_, index) => <StarIcon key={index} />)} + </>} /> </Grid> </ShowBase> ); @@ -170,7 +159,7 @@ You can override this behavior and pass custom side effects by providing a custo ```jsx import * as React from 'react'; -import { useNotify, useRefresh, useRedirect, ShowBase, SimpleShowLayout } from 'react-admin'; +import { useNotify, useRefresh, useRedirect, ShowBase } from 'react-admin'; const PostShow = () => { const notify = useNotify(); @@ -185,9 +174,7 @@ const PostShow = () => { return ( <ShowBase queryOptions={{ onError }}> - <SimpleShowLayout> - ... - </SimpleShowLayout> + ... </ShowBase> ); } @@ -228,16 +215,12 @@ If your `authProvider` implements [Access Control](./Permissions.md#access-contr For instance, for the `<PostShow>`page below: ```tsx -import { ShowBase, SimpleShowLayout, TextField } from 'react-admin'; +import { ShowBase } from 'react-admin'; // Resource name is "posts" const PostShow = () => ( <ShowBase> - <SimpleShowLayout> - <TextField source="title" /> - <TextField source="author" /> - <TextField source="published_at" /> - </SimpleShowLayout> + ... </ShowBase> ); ```