diff --git a/UPGRADE.md b/UPGRADE.md index 454d0468bb0..baba3a4bbee 100644 --- a/UPGRADE.md +++ b/UPGRADE.md @@ -118,12 +118,11 @@ Here's how to migrate the *Altering the Form Values before Submitting* example f import * as React from 'react'; import { useCallback } from 'react'; import { useForm } from 'react-final-form'; -import { SaveButton, Toolbar, useCreate, useRedirect, useNotify } from 'react-admin'; +import { SaveButton, Toolbar, useCreate, useRedirect } from 'react-admin'; const SaveWithNoteButton = ({ handleSubmit, handleSubmitWithRedirect, ...props }) => { const [create] = useCreate('posts'); const redirectTo = useRedirect(); - const notify = useNotify(); const { basePath, redirect } = props; const form = useForm(); @@ -171,9 +170,7 @@ const SaveWithNoteButton = props => { }, { onSuccess: ({ data: newRecord }) => { - notify('ra.notification.created', 'info', { - smart_count: 1, - }); + notify('ra.notification.created', { messageArgs: { smart_count: 1 } }); redirectTo(redirect, basePath, newRecord.id, newRecord); }, } @@ -472,7 +469,7 @@ const ExportButton = ({ sort, filter, maxResults = 1000, resource }) => { const payload = { sort, filter, pagination: { page: 1, perPage: maxResults }} const handleClick = dataProvider.getList(resource, payload) .then(({ data }) => jsonExport(data, (err, csv) => downloadCSV(csv, resource))) - .catch(error => notify('ra.notification.http_error', 'warning')); + .catch(error => notify('ra.notification.http_error', { type: 'warning'})); return ( ; }; @@ -651,7 +651,7 @@ The callback takes 6 arguments: Here are more examples of `useNotify` calls: -```jsx +```js // notify a warning notify(`This is a warning`, 'warning'); // pass translation arguments @@ -660,6 +660,17 @@ notify('item.created', 'info', { resource: 'post' }); notify('Element updated', 'info', undefined, true); ``` +**Tip**: The callback also allows a signature with only 2 arguments, the message to display and an object with the rest of the arguments + +```js +// notify an undoable success message, with translation arguments +notify('Element deleted', { + type: 'success', + undoable: true, + messageArgs: { resource: 'post' } +}); +``` + **Tip**: When using `useNotify` as a side effect for an `undoable` Edit form, you MUST set the fourth argument to `true`, otherwise the "undo" button will not appear, and the actual update will never occur. ```jsx @@ -670,7 +681,7 @@ const PostEdit = props => { const notify = useNotify(); const onSuccess = () => { - notify(`Changes saved`, undefined, undefined, true); + notify('Changes saved`', { undoable: true }); }; return ( @@ -792,7 +803,7 @@ const ApproveButton = ({ record }) => { redirect('/comments'); notify('Comment approved'); }, - onFailure: (error) => notify(`Comment approval error: ${error.message}`, 'warning'), + onFailure: (error) => notify(`Comment approval error: ${error.message}`, { type: 'warning' }), } ); return