Skip to content

Commit a3009b6

Browse files
fzaninottofzaninotto
committed
[Doc] Add links from other chapters
1 parent 5aa72ff commit a3009b6

File tree

3 files changed

+112
-0
lines changed

3 files changed

+112
-0
lines changed

‎docs/Forms.md‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -770,3 +770,39 @@ Users often need to edit data from several resources in the same form. React-adm
770770
<source src="./img/reference-many-input.mp4" type="video/mp4"/>
771771
Your browser does not support the video tag.
772772
</video>
773+
774+
## Edit In Place
775+
776+
Instead of asking users to fill a form to edit a record, you can let them edit the record straight from the list or show view. [The `<InPlaceEditor>` component](./InPlaceEditor.md) uses a `<TextField>` in read mode, and a `<TextInput>` in edition mode. It is useful for quick edits without navigating to a separate edit page.
777+
778+
<video controls autoplay playsinline muted loop>
779+
<source src="./img/InPlaceEditor.mp4" type="video/mp4"/>
780+
Your browser does not support the video tag.
781+
</video>
782+
783+
{% raw %}
784+
```tsx
785+
import { Show, InPlaceEditor } from 'react-admin';
786+
import { Stack, Box, Typography } from '@mui/material';
787+
788+
const CustomerShow = () => (
789+
<Show>
790+
<Stack direction="row" spacing={2}>
791+
<AvatarField />
792+
<CustomerActions />
793+
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
794+
<Typography>Phone</Typography>
795+
<InPlaceEditor source="phone" />
796+
</Box>
797+
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
798+
<Typography>Email</Typography>
799+
<InPlaceEditor source="email" />
800+
</Box>
801+
...
802+
</Stack>
803+
</Show>
804+
);
805+
```
806+
{% endraw %}
807+
808+
Check out [the `<InPlaceEditor>` documentation](./InPlaceEditor.md) for more details.

‎docs/TextField.md‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,3 +58,43 @@ import { FunctionField } from 'react-admin';
5858
render={record => `${record.first_name} ${record.last_name}`}
5959
/>;
6060
```
61+
62+
## Edit In Place
63+
64+
In addition to rendering a field value, you may want to allow users to edit that value. You can redirect the user to an `<Edit>` page, or you can use the [`<InPlaceEditor>`](./InPlaceEditor.md) component to edit the value directly in the list or show view.
65+
66+
67+
68+
<video controls autoplay playsinline muted loop>
69+
<source src="./img/InPlaceEditor.mp4" type="video/mp4"/>
70+
Your browser does not support the video tag.
71+
</video>
72+
73+
`<InPlaceEditor>` renders a `<TextField>` by default, and turns into a `<TextInput>` when the user clicks on it. It is useful for quick edits without navigating to a separate edit page.
74+
75+
{% raw %}
76+
```tsx
77+
import { Show, InPlaceEditor } from 'react-admin';
78+
import { Stack, Box, Typography } from '@mui/material';
79+
80+
const CustomerShow = () => (
81+
<Show>
82+
<Stack direction="row" spacing={2}>
83+
<AvatarField />
84+
<CustomerActions />
85+
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
86+
<Typography>Phone</Typography>
87+
<InPlaceEditor source="phone" />
88+
</Box>
89+
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
90+
<Typography>Email</Typography>
91+
<InPlaceEditor source="email" />
92+
</Box>
93+
...
94+
</Stack>
95+
</Show>
96+
);
97+
```
98+
{% endraw %}
99+
100+
Check out [the `<InPlaceEditor>` documentation](./InPlaceEditor.md) for more details.

‎docs/TextInput.md‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,42 @@ export const PostEdit = () => (
101101

102102
See [the `<RichTextInput>` documentation](./RichTextInput.md) for more details.
103103

104+
## Edit In Place
105+
106+
Instead of using a `<TextInput>` in a form, you can use an `<InPlaceEditor>` to edit the value directly in the list or the show view. This is useful for quick edits without having to open a form.
107+
108+
<video controls autoplay playsinline muted loop>
109+
<source src="./img/InPlaceEditor.mp4" type="video/mp4"/>
110+
Your browser does not support the video tag.
111+
</video>
112+
113+
{% raw %}
114+
```tsx
115+
import { Show, InPlaceEditor } from 'react-admin';
116+
import { Stack, Box, Typography } from '@mui/material';
117+
118+
const CustomerShow = () => (
119+
<Show>
120+
<Stack direction="row" spacing={2}>
121+
<AvatarField />
122+
<CustomerActions />
123+
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
124+
<Typography>Phone</Typography>
125+
<InPlaceEditor source="phone" />
126+
</Box>
127+
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
128+
<Typography>Email</Typography>
129+
<InPlaceEditor source="email" />
130+
</Box>
131+
...
132+
</Stack>
133+
</Show>
134+
);
135+
```
136+
{% endraw %}
137+
138+
Check out [the `<InPlaceEditor>` documentation](./InPlaceEditor.md) for more details.
139+
104140
## Predictive Text Input
105141

106142
An alternative to `<TextInput>` is [`<PredictiveTextInput>`](./PredictiveTextInput.md), which suggests completion for the input value, using your favorite AI backend. Users can accept the completion by pressing the `Tab` key. It's like Intellisense or Copilot for your forms.

0 commit comments

Comments
 (0)