Skip to content
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

Add <TabbedForm.Tab> and <TabbedShowLayout.Tab> shortcuts #8525

Merged
merged 2 commits into from
Dec 20, 2022
Merged

Add <TabbedForm.Tab> and <TabbedShowLayout.Tab> shortcuts #8525

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
00cae25
Add TabbedForm.Tab and TabbedShowLayout.Tab shortcuts
fzaninotto Dec 20, 2022
c7cf02b
Review
fzaninotto Dec 20, 2022
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
2 changes: 1 addition & 1 deletion docs/AuthRBAC.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -630,7 +630,7 @@ const ProductShow = () => (

### `<Tab>`

Replacement for the show `<Tab>` that only renders a tab if the user has the right permissions.
Replacement for the `<TabbedShowLayout.Tab>` that only renders a tab if the user has the right permissions.

Add a `name` prop to the Tab to define the resource on which the user needs to have the 'read' permissions for.

Expand Down
8 changes: 4 additions & 4 deletions docs/Permissions.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,14 +178,14 @@ export const UserEdit = () => {
return (
<Edit title={<UserTitle />}>
<TabbedForm defaultValue={{ role: 'user' }}>
<FormTab label="user.form.summary">
<TabbedForm.Tab label="user.form.summary">
{permissions === 'admin' && <TextInput disabled source="id" />}
<TextInput source="name" validate={required()} />
</FormTab>
</TabbedForm.Tab>
{permissions === 'admin' &&
<FormTab label="user.form.security">
<TabbedForm.Tab label="user.form.security">
<TextInput source="role" validate={required()} />
</FormTab>}
</TabbedForm.Tab>}
</TabbedForm>
</Edit>
);
Expand Down
16 changes: 8 additions & 8 deletions docs/Show.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,12 +80,12 @@ export const PostShow = () => (
<Show>
- <SimpleShowLayout>
+ <TabbedShowLayout>
+ <Tab label="Main>
+ <TabbedShowLayout.Tab label="Main>
<TextField source="title" />
<TextField source="teaser" />
<RichTextField source="body" />
<DateField label="Publication date" source="created_at" />
+ </Tab>
+ </TabbedShowLayout.Tab>
- </SimpleShowLayout>
+ </TabbedShowLayout>
</Show>
Expand Down Expand Up @@ -362,25 +362,25 @@ export const PostShow = () => {
```
{% endraw %}

This also works inside a `TabbedShowLayout`, and you can hide a `Tab` completely:
This also works inside a `<TabbedShowLayout>`, and you can hide a `TabbedShowLayout.Tab` completely:

{% raw %}
```jsx
import { Show, TabbedShowLayout, Tab, TextField } from 'react-admin';
import { Show, TabbedShowLayout, TextField } from 'react-admin';

export const UserShow = () => {
const { permissions } = usePermissions();
return (
<Show>
<TabbedShowLayout>
<Tab label="user.form.summary">
<TabbedShowLayout.Tab label="user.form.summary">
{permissions === 'admin' && <TextField source="id" />}
<TextField source="name" />
</Tab>
</TabbedShowLayout.Tab>
{permissions === 'admin' &&
<Tab label="user.form.security">
<TabbedShowLayout.Tab label="user.form.security">
<TextField source="role" />
</Tab>}
</TabbedShowLayout.Tab>}
</TabbedShowLayout>
</Show>
);
Expand Down
10 changes: 5 additions & 5 deletions docs/ShowTutorial.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -358,27 +358,27 @@ const BookShow = () => (
When a Show view has to display a lot of fields, the `<SimpleShowLayout>` component ends up in very long page that is not user-friendly. You can use [the `<TabbedShowLayout>` component](./TabbedShowLayout.md) instead, which is a variant of the `<SimpleShowLayout>` component that displays the fields in tabs.

```jsx
import { Show, TabbedShowLayout, Tab, TextField, DateField, WithRecord } from 'react-admin';
import { Show, TabbedShowLayout, TextField, DateField, WithRecord } from 'react-admin';
import StarIcon from '@mui/icons-material/Star';
import FavoriteIcon from '@mui/icons-material/Favorite';
import PersonPinIcon from '@mui/icons-material/PersonPin';

const BookShow = () => (
<Show>
<TabbedShowLayout>
<Tab label="Description" icon={<FavoriteIcon />}>
<TabbedShowLayout.Tab label="Description" icon={<FavoriteIcon />}>
<TextField label="Title" source="title" />
<ReferenceField label="Author" source="author_id">
<TextField source="name" />
</ReferenceField>
<DateField label="Publication Date" source="published_at" />
</Tab>
<Tab label="User ratings" icon={<PersonPinIcon />}>
</TabbedShowLayout.Tab>
<TabbedShowLayout.Tab label="User ratings" icon={<PersonPinIcon />}>
<WithRecord label="Rating" render={record => <>
{[...Array(record.rating)].map((_, index) => <StarIcon key={index} />)}
</>} />
<DateField label="Last rating" source="last_rated_at" />
</Tab>
</TabbedShowLayout.Tab>
</TabbedShowLayout>
</Show>
);
Expand Down
Loading