Skip to content

Commit 4573871

Browse files
slax57slax57
committed
update common
1 parent 8eea15a commit 4573871

File tree

6 files changed

+74
-143
lines changed

6 files changed

+74
-143
lines changed

‎docs_headless/src/content/docs/common/WithRecord.md‎

Lines changed: 21 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,20 @@
11
---
2-
layout: default
3-
title: "WithRecord"
2+
title: "<WithRecord>"
43
---
54

6-
# `<WithRecord>`
7-
85
`<WithRecord>` grabs the current record from the `RecordContext`. It's the render prop version of [the `useRecordContext` hook](./useRecordContext.md).
96

107
## Usage
118

129
The most common use case for `<WithRecord>` is to build a custom field on-the-fly, without creating a new component. For instance, an author field for a book Show view.
1310

1411
```jsx
15-
import { Show, SimpleShowLayout, WithRecord } from 'react-admin';
12+
import { ShowBase, WithRecord } from 'ra-core';
1613

1714
const BookShow = () => (
18-
<Show>
19-
<SimpleShowLayout>
20-
<WithRecord label="author" render={record => <span>{record.author}</span>} />
21-
</SimpleShowLayout>
22-
</Show>
15+
<ShowBase>
16+
<WithRecord label="author" render={record => <span>{record.author}</span>} />
17+
</ShowBase>
2318
);
2419
```
2520

@@ -29,64 +24,41 @@ Note that if `record` is undefined, `<WithRecord>` doesn't call the `render` cal
2924

3025
As soon as there is a record available, react-admin puts it in a `RecordContext`. This means that `<WithRecord>` works out of the box:
3126

32-
- in descendants of the `<Show>` and `<ShowBase>` component
33-
- in descendants of the `<Edit>` and `<EditBase>` component
34-
- in descendants of the `<Create>` and `<CreateBase>` component
35-
- in descendants of the `<DataTable>` component
36-
- in descendants of the `<Datagrid>` component
37-
- in descendants of the `<SimpleList>` component
38-
- in descendants of the `<ReferenceField>` component
39-
40-
## Using in a Datagrid
41-
42-
When using `<WithRecord>` in a [`<Datagrid>`](./Datagrid.md), you must specify the `label` prop to let react-admin know which field to display in the column header.
43-
44-
```jsx
45-
import { Datagrid, TextField, WithRecord } from 'react-admin';
46-
47-
const PostList = () => (
48-
<List>
49-
<Datagrid>
50-
<TextField source="title" />
51-
<WithRecord label="author" render={record => <span>{record.author}</span>} />
52-
</Datagrid>
53-
</List>
54-
);
55-
```
56-
57-
**Tip:** You don't need to use `<WithRecord>` if you are using [`<DataTable>`](./DataTable.md), as the [`<DataTable.Col>`](./DataTable.md#datatablecol) component directly provides a [`render`](./DataTable.md#render) prop that works similarly to `<WithRecord>`.
27+
- in descendants of the `<ShowBase>` component
28+
- in descendants of the `<EditBase>` component
29+
- in descendants of the `<CreateBase>` component
30+
- in descendants of the `<ReferenceFieldBase>` component
31+
- in descendants of the `<ListIterator>` component
5832

5933
## TypeScript
6034

6135
The `<WithRecord>` component accepts a generic parameter for the record type:
6236

6337
```tsx
64-
import { Show, SimpleShowLayout, WithRecord } from 'react-admin';
38+
import { ShowBase, WithRecord } from 'ra-core';
6539

6640
type Book = {
6741
id: number;
6842
author: string;
6943
}
7044

7145
const BookShow = () => (
72-
<Show>
73-
<SimpleShowLayout>
74-
<WithRecord<Book>
75-
label="author"
76-
render={book => {
77-
// TypeScript knows that book is of type Book
78-
return <span>{book.author}</span>}
79-
}
80-
/>
81-
</SimpleShowLayout>
82-
</Show>
46+
<ShowBase>
47+
<WithRecord<Book>
48+
label="author"
49+
render={book => {
50+
// TypeScript knows that book is of type Book
51+
return <span>{book.author}</span>}
52+
}
53+
/>
54+
</ShowBase>
8355
);
8456
```
8557

8658
## See Also
8759

8860
* [`useRecordContext`](./useRecordContext.md) is the hook version of this component.
89-
* [`<WithListContext>`](./WithListContext.md) is the equivalent for lists.
61+
* [`<WithListContext>`](../list/WithListContext.md) is the equivalent for lists.
9062

9163
## API
9264

‎docs_headless/src/content/docs/common/useGetRecordId.md‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
11
---
2-
layout: default
32
title: "useGetRecordId"
43
---
54

6-
# `useGetRecordId`
7-
85
Accessing the current `recordId` can sometimes be tricky, because it depends on the context in which your component is used.
96

107
This hook makes it easier to get current `recordId`.
@@ -17,7 +14,7 @@ It will try to obtain it from these 3 sources, in this order:
1714
This hook accepts a single parameter, `recordId`, which is optional if used inside a `RecordContextProvider` or if `recordId` can be guessed from the URL.
1815

1916
```jsx
20-
import { useGetRecordId } from 'react-admin';
17+
import { useGetRecordId } from 'ra-core';
2118

2219
const DisplayRecordCurrentId = () => {
2320
const recordId = useGetRecordId();

‎docs_headless/src/content/docs/common/useNotify.md‎

Lines changed: 27 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,15 @@
11
---
2-
layout: default
32
title: "useNotify"
4-
storybook_path: ra-core-usenotify--basic
53
---
64

7-
# `useNotify`
8-
95
This hook returns a function that displays a notification at the bottom of the page.
106

117
![Notification](../img/notification.webp)
128

139
## Usage
1410

1511
```jsx
16-
import { useNotify } from 'react-admin';
12+
import { useNotify } from 'ra-core';
1713

1814
const NotifyButton = () => {
1915
const notify = useNotify();
@@ -51,30 +47,19 @@ The `options` is an object that can have the following properties:
5147

5248
| Name | Type | Default | Description |
5349
| ------------------ | --------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
54-
| `anchorOrigin` | `object` | - | The position of the notification. The default is `{ vertical: 'bottom', horizontal: 'center' }`. See [the Material UI documentation](https://mui.com/material-ui/react-snackbar/) for more details. |
5550
| `autoHideDuration` | `number | null` | `4000` | Duration (in milliseconds) after which the notification hides. Set it to `null` if the notification should not be dismissible. |
5651
| `messageArgs` | `object` | - | options to pass to the `translate` function (because notification messages are translated if your admin has an `i18nProvider`). It is useful for inserting variables into the translation. |
5752
| `multiLine` | `boolean` | - | Set it to `true` if the notification message should be shown in more than one line. |
5853
| `undoable` | `boolean` | - | Set it to `true` if the notification should contain an "undo" button |
5954
| `type` | `string` | `info` | The notification type (`info`, `success`, `error` or `warning` - the default is `info`) |
6055

61-
## `anchorOrigin`
62-
63-
You can change the default position of the notification by passing an `anchorOrigin` option. The value is passed to [the Material UI `<Snackbar anchorOrigin>`](https://mui.com/material-ui/react-snackbar/) prop.
64-
65-
```jsx
66-
notify(
67-
'Form submitted successfully',
68-
{ anchorOrigin: { vertical: 'top', horizontal: 'right' }
69-
});
70-
```
7156

7257
## `autoHideDuration`
7358

7459
You can define a custom delay for hiding a given notification.
7560

7661
```jsx
77-
import { useNotify } from 'react-admin';
62+
import { useNotify } from 'ra-core';
7863

7964
const LogoutButton = () => {
8065
const notify = useNotify();
@@ -90,11 +75,10 @@ const LogoutButton = () => {
9075
};
9176
```
9277

93-
To change the default delay for all notifications, check [the `<Admin notification>` documentation](./Admin.md#notification).
9478

9579
## `messageArgs`
9680

97-
`useNotify` calls [the `translate` function](./useTranslate.md) to translate the notification message. You often need to pass variables to the `translate` function. The `messageArgs` option allows you to do that.
81+
`useNotify` calls [the `translate` function](../i18n/useTranslate.md) to translate the notification message. You often need to pass variables to the `translate` function. The `messageArgs` option allows you to do that.
9882

9983
For instance, if you want to display a notification message like "Post 123 created", you need to pass the post id to the translation function.
10084

@@ -118,7 +102,7 @@ Then, in your translation files, you can use the `id` variable:
118102
notify('post.created', { messageArgs: { _: 'Post created' } });
119103
```
120104

121-
Finally, `messageArgs` lets you define a `smart_count` variable, which is useful for [pluralization](./useTranslate.md#using-pluralization-and-interpolation):
105+
Finally, `messageArgs` lets you define a `smart_count` variable, which is useful for [pluralization](../i18n/useTranslate.md#using-pluralization-and-interpolation):
122106

123107
```jsx
124108
notify('post.created', { messageArgs: { smart_count: 2 } });
@@ -160,10 +144,9 @@ notify('This is an error', { type: 'error' });
160144

161145
When using `useNotify` as a side effect for an `undoable` mutation, you MUST set the `undoable` option to `true`, otherwise the "undo" button will not appear, and the actual update will never occur.
162146

163-
{% raw %}
164147
```jsx
165148
import * as React from 'react';
166-
import { useNotify, Edit, SimpleForm } from 'react-admin';
149+
import { useNotify, EditBase, Form } from 'ra-core';
167150

168151
const PostEdit = () => {
169152
const notify = useNotify();
@@ -173,28 +156,22 @@ const PostEdit = () => {
173156
};
174157

175158
return (
176-
<Edit mutationMode="undoable" mutationOptions={{ onSuccess }}>
177-
<SimpleForm>
159+
<EditBase mutationMode="undoable" mutationOptions={{ onSuccess }}>
160+
<Form>
178161
...
179-
</SimpleForm>
180-
</Edit>
162+
</Form>
163+
</EditBase>
181164
);
182165
}
183166
```
184-
{% endraw %}
185167

186168
## Custom Notification Content
187169

188170
You may want a notification message that contains HTML or other React components. To do so, you can pass a React node as the first argument of the `notify` function.
189171

190-
This allows e.g. using [Material UI's `<Alert>` component](https://mui.com/material-ui/react-snackbar/#customization) to display a notification with a custom icon, color, or action.
191-
192-
![useNotify with node](../img/use-notify-node.png)
193-
194172
```tsx
195173
import { useSubscribe } from "@react-admin/ra-realtime";
196-
import { useNotify, useDataProvider } from "react-admin";
197-
import { Alert } from "@mui/material";
174+
import { useNotify, useDataProvider } from "ra-core";
198175

199176
export const ConnectionWatcher = () => {
200177
const notify = useNotify();
@@ -205,20 +182,20 @@ export const ConnectionWatcher = () => {
205182
.getOne("agents", { id: event.payload.agentId })
206183
.then(({ data }) => {
207184
notify(
208-
<Alert severity="info">
185+
<div className="notification info">
209186
Agent ${data.firstName} ${data.lastName} just logged in
210-
</Alert>
211-
);
187+
</div>
188+
);
212189
});
213190
}
214191
if (event.type === "disconnected") {
215192
dataProvider
216193
.getOne("agents", { id: event.payload.agentId })
217194
.then(({ data }) => {
218195
notify(
219-
<Alert severity="info">
196+
<div className="notification info">
220197
Agent ${data.firstName} ${data.lastName} just logged out
221-
</Alert>
198+
</div>
222199
);
223200
});
224201
}
@@ -227,15 +204,14 @@ export const ConnectionWatcher = () => {
227204
};
228205
```
229206

230-
Note that if you use this ability to pass a React node, the message will not be translated - you'll have to translate it yourself using [`useTranslate`](./useTranslate.md).
207+
Note that if you use this ability to pass a React node, the message will not be translated - you'll have to translate it yourself using [`useTranslate`](../i18n/useTranslate.md).
231208

232209
## Closing The Notification
233210

234211
If you have custom actions in your notification element, you can leverage the `useCloseNotification` hook to close the notification programmatically:
235212

236213
```tsx
237-
import { useCheckForApplicationUpdate, useCloseNotification, useNotify } from 'react-admin';
238-
import { Button, SnackbarContent } from '@mui/material';
214+
import { useCheckForApplicationUpdate, useCloseNotification, useNotify } from 'ra-core';
239215

240216
export const CheckForApplicationUpdate = () => {
241217
const notify = useNotify();
@@ -253,17 +229,16 @@ const ApplicationUpdateNotification = ({ reset }: { reset:() => void }) => {
253229
const closeNotification = useCloseNotification();
254230

255231
return (
256-
<SnackbarContent
257-
message="A new application version is available. Refresh your browser tab to update"
258-
action={
259-
<Button
260-
onClick={() => {
261-
closeNotification();
262-
}}
263-
label="Dismiss"
264-
/>
265-
}
266-
/>
232+
<div className="notification-content">
233+
<span>A new application version is available. Refresh your browser tab to update</span>
234+
<button
235+
onClick={() => {
236+
closeNotification();
237+
}}
238+
>
239+
Dismiss
240+
</button>
241+
</div>
267242
);
268243
};
269244
```

0 commit comments

Comments
 (0)