Allow dismiss snackbars programmatically (iamhosseindhv#20)

xiromoreira · Jan 9, 2019 · a7cb4d9 · a7cb4d9
1 parent 479f423
commit a7cb4d9
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 7 deletions.
diff --git a/index.d.ts b/index.d.ts
@@ -8,6 +8,7 @@ type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>
 export type VariantType = 'default' | 'error' | 'success' | 'warning' | 'info';
 
 export interface OptionsObject extends Omit<SnackbarProps, 'open' | 'message' | 'classes'> {
+    key?: string | number;
     variant?: VariantType;
     onClickAction?: Function;
 }
@@ -22,7 +23,8 @@ export type CombinedClassKey = NotistackClassKey | SnackbarClassKey;
 
 export interface InjectedNotistackProps {
     onPresentSnackbar: (variant: VariantType, message: string) => void;
-    enqueueSnackbar: (message: string | React.ReactNode, options?: OptionsObject) => void;
+    enqueueSnackbar: (message: string | React.ReactNode, options?: OptionsObject) => string | number;
+    closeSnackbar: (key: string | number) => void
 }
 
 export function withSnackbar<P extends InjectedNotistackProps>(component: React.ComponentType<P>):

diff --git a/src/SnackbarProvider.js b/src/SnackbarProvider.js
@@ -53,15 +53,19 @@ class SnackbarProvider extends Component {
      * We can pass Material-ui Snackbar props for individual customisation.
      * @param {string} options.variant - type of the snackbar. default value is 'default'.
      * can be: (default, success, error, warning, info)
+     * @returns generated or user defined key referencing the new snackbar
      */
-    handleEnqueueSnackbar = (message, options) => {
+    handleEnqueueSnackbar = (message, { key, ...options }) => {
+        if (key === undefined || key === null) {
+            key = new Date().getTime() + Math.random();
+        }
         this.queue.push({
-            message,
+            message, key,
             ...options,
             open: true,
-            key: new Date().getTime() + Math.random(),
         });
         this.handleDisplaySnack();
+        return key;
     };
 
     /**
@@ -152,7 +156,10 @@ class SnackbarProvider extends Component {
 
         return (
             <SnackbarContext.Provider value={this.handlePresentSnackbar}>
-                <SnackbarContextNext.Provider value={this.handleEnqueueSnackbar}>
+                <SnackbarContextNext.Provider value={{
+                    handleEnqueueSnackbar: this.handleEnqueueSnackbar,
+                    handleCloseSnackbar: this.handleCloseSnack
+                  }}>
                     <Fragment>
                         {children}
                         {snacks.map((snack, index) => (

diff --git a/src/withSnackbar.js b/src/withSnackbar.js
@@ -5,11 +5,12 @@ const withSnackbar = Component => props => (
     <SnackbarContext.Consumer>
         {handlePresentSnackbar => (
             <SnackbarContextNext.Consumer>
-                {handleEnqueueSnackbar => (
+                {context => (
                     <Component
                         {...props}
                         onPresentSnackbar={handlePresentSnackbar}
-                        enqueueSnackbar={handleEnqueueSnackbar}
+                        enqueueSnackbar={context.handleEnqueueSnackbar}
+                        closeSnackbar={context.handleCloseSnackbar}
                     />
                 )}
             </SnackbarContextNext.Consumer>