Skip to content

remove mui components from ShowBase, ListBase and EditBase docs #10841

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
ThieryMichel wants to merge 1 commit into from
Closed

remove mui components from ShowBase, ListBase and EditBase docs #10841

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 14 additions & 24 deletions docs/EditBase.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,27 +17,18 @@ Contrary to [`<Edit>`](./Edit.md), it does not render the page layout, so no tit
Use `<EditBase>` 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 `<Edit>` 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 = () => (
<EditBase>
<Container>
<Title title="Book Edition" />
<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>
);
```
Expand Down Expand Up @@ -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:
Expand Down
30 changes: 12 additions & 18 deletions docs/ListBase.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
```
Expand Down Expand Up @@ -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>
);
```
Expand Down
41 changes: 12 additions & 29 deletions docs/ShowBase.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down Expand Up @@ -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();
Expand All @@ -185,9 +174,7 @@ const PostShow = () => {

return (
<ShowBase queryOptions={{ onError }}>
<SimpleShowLayout>
...
</SimpleShowLayout>
...
</ShowBase>
);
}
Expand Down Expand Up @@ -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>
);
```
Expand Down
Loading