From 6603741668276301296c7d0dc45b1c71b216426b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?An=C3=ADbal=20Svarcas?= Date: Mon, 7 Nov 2022 11:27:04 -0300 Subject: [PATCH 1/7] Add missing Admin's notification prop --- docs/Admin.md | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/docs/Admin.md b/docs/Admin.md index 10877667f12..38f4e0bc92b 100644 --- a/docs/Admin.md +++ b/docs/Admin.md @@ -533,6 +533,33 @@ const App = () => ( ); ``` +## `notification` + +You can override the notification component, for instance to change the notification duration. It defaults to 4000, i.e. 4 seconds, and you can override it using the `autoHideDuration` prop. For instance, to create a custom Notification component with a 5 seconds default: + +```jsx +// in src/MyNotification.js +import { Notification } from 'react-admin'; + +const MyNotification = props => ; + +export default MyNotification; +``` + +To use this custom notification component, pass it to the `` component as the `notification` prop: + +```jsx +// in src/App.js +import MyNotification from './MyNotification'; +import dataProvider from './dataProvider'; + +const App = () => ( + + // ... + +); +``` + ## Declaring resources at runtime You might want to dynamically define the resources when the app starts. To do so, you have two options: using a function as `` child, or unplugging it to use a combination of `AdminContext` and `` instead. From e9cab5addc76dc6aaeefcf37d847394530f46332 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?An=C3=ADbal=20Svarcas?= Date: Mon, 7 Nov 2022 11:30:16 -0300 Subject: [PATCH 2/7] Update Layout component usage --- docs/Admin.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/Admin.md b/docs/Admin.md index 38f4e0bc92b..dd2e4c5a970 100644 --- a/docs/Admin.md +++ b/docs/Admin.md @@ -399,20 +399,20 @@ const App = () => ( ); ``` -Your custom layout can simply extend [the default `` component](./Layout.md) if you only want to override the appBar, the menu, the notification component, or the error page. For instance: +Your custom layout can simply extend [the default `` component](./Layout.md) if you only want to override the appBar, the menu, or the error page. For instance: ```jsx // in src/MyLayout.js import { Layout } from 'react-admin'; import MyAppBar from './MyAppBar'; import MyMenu from './MyMenu'; -import MyNotification from './MyNotification'; +import MyError from './MyError'; const MyLayout = (props) => ; export default MyLayout; From 2f85d542788800f8b275e89776c98d879ed85581 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?An=C3=ADbal=20Svarcas?= Date: Mon, 7 Nov 2022 13:44:46 -0300 Subject: [PATCH 3/7] Update docs/Admin.md Co-authored-by: Francois Zaninotto --- docs/Admin.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/Admin.md b/docs/Admin.md index dd2e4c5a970..2b1002868ea 100644 --- a/docs/Admin.md +++ b/docs/Admin.md @@ -535,7 +535,7 @@ const App = () => ( ## `notification` -You can override the notification component, for instance to change the notification duration. It defaults to 4000, i.e. 4 seconds, and you can override it using the `autoHideDuration` prop. For instance, to create a custom Notification component with a 5 seconds default: +You can override the notification component, for instance to change the notification duration. A common use case is to change the `autoHideDuration`, and force the notification to remain on screen longer than the default 4 seconds. For instance, to create a custom Notification component with a 5 seconds default: ```jsx // in src/MyNotification.js From 7cd0030a57b57abed1b8dba2c8d577cd6e8448d6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?An=C3=ADbal=20Svarcas?= Date: Mon, 7 Nov 2022 13:44:55 -0300 Subject: [PATCH 4/7] Update docs/Admin.md Co-authored-by: Francois Zaninotto --- docs/Admin.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/Admin.md b/docs/Admin.md index 2b1002868ea..6d4d59b801f 100644 --- a/docs/Admin.md +++ b/docs/Admin.md @@ -541,7 +541,7 @@ You can override the notification component, for instance to change the notifica // in src/MyNotification.js import { Notification } from 'react-admin'; -const MyNotification = props => ; +const MyNotification =() => ; export default MyNotification; ``` From a68400c1da5f39abac741b7bc6e5d5c73e2df6a2 Mon Sep 17 00:00:00 2001 From: asvarcas Date: Mon, 7 Nov 2022 13:50:05 -0300 Subject: [PATCH 5/7] Add notification anchor --- docs/Admin.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/Admin.md b/docs/Admin.md index 6d4d59b801f..5b06874c0df 100644 --- a/docs/Admin.md +++ b/docs/Admin.md @@ -46,6 +46,7 @@ Here are all the props accepted by the component: - [`ready`](#ready) - [`requireAuth`](#requireauth) - [`store`](#store) +- [`notification`](#notification) ## `dataProvider` From a4c4b7b41fcb3e660814d164038b5eec62dea3d7 Mon Sep 17 00:00:00 2001 From: asvarcas Date: Mon, 7 Nov 2022 13:51:58 -0300 Subject: [PATCH 6/7] Update notifications recipes --- docs/Theming.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/Theming.md b/docs/Theming.md index ee68f4c7924..599fc15b0fe 100644 --- a/docs/Theming.md +++ b/docs/Theming.md @@ -1009,7 +1009,7 @@ const App = () => ( ## Notifications -You can override the notification component, for instance to change the notification duration. It defaults to 4000, i.e. 4 seconds, and you can override it using the `autoHideDuration` prop. For instance, to create a custom Notification component with a 5 seconds default: +You can override the notification component, for instance to change the notification duration. A common use case is to change the `autoHideDuration`, and force the notification to remain on screen longer than the default 4 seconds. For instance, to create a custom Notification component with a 5 seconds default: ```jsx // in src/MyNotification.js From d63834a5fabcedb05b5b87e635872ba41f134730 Mon Sep 17 00:00:00 2001 From: asvarcas Date: Mon, 7 Nov 2022 14:05:24 -0300 Subject: [PATCH 7/7] Update notifications recipes --- docs/Admin.md | 2 +- docs/Theming.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/Admin.md b/docs/Admin.md index 5b06874c0df..968aa048127 100644 --- a/docs/Admin.md +++ b/docs/Admin.md @@ -542,7 +542,7 @@ You can override the notification component, for instance to change the notifica // in src/MyNotification.js import { Notification } from 'react-admin'; -const MyNotification =() => ; +const MyNotification = () => ; export default MyNotification; ``` diff --git a/docs/Theming.md b/docs/Theming.md index 599fc15b0fe..1bab6dfb332 100644 --- a/docs/Theming.md +++ b/docs/Theming.md @@ -1015,7 +1015,7 @@ You can override the notification component, for instance to change the notifica // in src/MyNotification.js import { Notification } from 'react-admin'; -const MyNotification = props => ; +const MyNotification = () => ; export default MyNotification; ```