Fixes #180 - Add support to globally customize snackbarContent

iamhosseindhv · Oct 11, 2019 · caad8d8 · caad8d8
1 parent 8e9d0af
commit caad8d8
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 7 deletions.
diff --git a/src/SnackbarItem/SnackbarItem.js b/src/SnackbarItem/SnackbarItem.js
@@ -7,7 +7,8 @@ import Collapse from '@material-ui/core/Collapse';
 import SnackbarContent from '@material-ui/core/SnackbarContent';
 import { getTransitionDirection, getSnackbarClasses, getCollapseClasses } from './SnackbarItem.util';
 import styles from './SnackbarItem.styles';
-import { capitalise } from '../utils/constants';
+import { capitalise, MESSAGES } from '../utils/constants';
+import warning from '../utils/warning';
 
 
 class SnackbarItem extends Component {
@@ -43,6 +44,7 @@ class SnackbarItem extends Component {
         const {
             classes,
             action,
+            content,
             ContentProps = {},
             hideIconVariant,
             preventDuplicate,
@@ -57,6 +59,8 @@ class SnackbarItem extends Component {
         const {
             key,
             persist,
+            children,
+            content: singleContent,
             variant = 'default',
             action: singleAction,
             ContentProps: singleContentProps = {},
@@ -79,9 +83,17 @@ class SnackbarItem extends Component {
             finalAction = contentProps.action(key);
         }
 
-        let snackChildren = snack.children;
-        if (snackChildren && typeof snackChildren === 'function') {
-            snackChildren = snackChildren(key);
+        let snackContent;
+        if (snack.children) {
+            snackContent = snack.children;
+            warning(MESSAGES.NO_CHILDREN_OPTION);
+        }
+        if (singleContent) {
+            snackContent = singleContent;
+        }
+        snackContent = snackContent || content;
+        if (snackContent && typeof snackContent === 'function') {
+            snackContent = snackContent(key);
         }
 
         return (
@@ -104,7 +116,7 @@ class SnackbarItem extends Component {
                     classes={getSnackbarClasses(classes)}
                     onClose={this.handleClose(key)}
                 >
-                    {snackChildren || (
+                    {snackContent || (
                         <SnackbarContent
                             className={classNames(
                                 classes.base,

diff --git a/src/SnackbarProvider.js b/src/SnackbarProvider.js
@@ -276,10 +276,15 @@ SnackbarProvider.propTypes = {
         info: PropTypes.any,
     }),
     /**
-     * Callback to get action(s). actions are mostly buttons displayed in Snackbar.
+     * Callback used for getting action(s). actions are mostly buttons displayed in Snackbar.
      * @param {string|number} key key of a snackbar
      */
-    action: PropTypes.func,
+    action: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    /**
+     * Replace the snackbar. Callback used for displaying entirely customized snackbar.
+     * @param {string|number} key key of a snackbar
+     */
+    content: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     /**
      * The anchor of the `Snackbar`.
      */

diff --git a/src/index.d.ts b/src/index.d.ts
@@ -13,6 +13,7 @@ export interface OptionsObject extends Omit<SnackbarProps, 'open' | 'message' |
     persist?: boolean;
     preventDuplicate?: boolean;
     children?: React.ReactNode | ((key: OptionsObject['key']) => React.ReactNode);
+    content?: React.ReactNode | ((key: OptionsObject['key']) => React.ReactNode);
     action?: SnackbarContentProps['action'] | ((key: OptionsObject['key']) => React.ReactNode);
 }
 
@@ -47,6 +48,7 @@ export interface SnackbarProviderProps extends Omit<SnackbarProps, 'open' | 'mes
     preventDuplicate?: boolean;
     dense?: boolean;
     action?: SnackbarContentProps['action'] | ((key: OptionsObject['key']) => React.ReactNode);
+    content?: React.ReactNode | ((key: OptionsObject['key']) => React.ReactNode);
 }
 
 export const SnackbarProvider: React.ComponentType<SnackbarProviderProps>;
diff --git a/src/utils/constants.js b/src/utils/constants.js
@@ -70,6 +70,7 @@ export const defaultIconVariant = {
 
 export const MESSAGES = {
     NO_PERSIST_ALL: 'WARNING - notistack: Reached maxSnack while all enqueued snackbars have \'persist\' flag. Notistack will dismiss the oldest snackbar anyway to allow other ones in the queue to be presented.',
+    NO_CHILDREN_OPTION: 'WARNING - notistack: \'children\' option in enqueueSnackbar has been deprecated and renamed to \'content\', and it will be removed in the next major release.',
 };
 
 export const SNACKBAR_INDENTS = {