feat(snackbar): Added dismissOnAction option to show method (#459)

material-components · May 22, 2017 · 1d2d800 · 1d2d800
1 parent 1412123
commit 1d2d800
Show file tree

Hide file tree

Showing 6 changed files with 140 additions and 12 deletions.
diff --git a/demos/snackbar.html b/demos/snackbar.html
@@ -89,19 +89,42 @@ <h2 class="mdc-typography--title">Basic Example</h2>
           <label for="multiline" id="multiline-label">Multiline</label>
         </div>
 
-        <div class="mdc-form-field">
-          <div class="mdc-checkbox">
-            <input type="checkbox" class="mdc-checkbox__native-control" id="action-on-bottom" aria-labelledby="action-on-bottom-label" />
-            <div class="mdc-checkbox__background">
-              <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
-                <path class="mdc-checkbox__checkmark__path" fill="none" stroke="white" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
-              </svg>
+        <div class="mdc-checkbox-wrapper">
+          <div class="mdc-checkbox-wrapper__layout">
+            <div class="mdc-checkbox">
+              <input type="checkbox"
+                     class="mdc-checkbox__native-control"
+                     id="action-on-bottom"
+                     aria-labelledby="action-on-bottom-label" />
+              <div class="mdc-checkbox__background">
+                <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
+                  <path class="mdc-checkbox__checkmark__path" fill="none" stroke="white"
+                        d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
+                </svg>
               <div class="mdc-checkbox__mixedmark"></div>
             </div>
           </div>
           <label for="action-on-bottom" id="action-on-bottom-label">Action On Bottom</label>
         </div>
 
+        <div class="mdc-checkbox-wrapper">
+          <div class="mdc-checkbox-wrapper__layout">
+            <div class="mdc-checkbox">
+              <input type="checkbox"
+                     checked
+                     class="mdc-checkbox__native-control"
+                     id="dismiss-on-action"
+                     aria-labelledby="dismiss-on-action-label" />
+              <div class="mdc-checkbox__background">
+                <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
+                  <path class="mdc-checkbox__checkmark__path" fill="none" stroke="white"
+                        d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
+                </svg>
+              <div class="mdc-checkbox__mixedmark"></div>
+            </div>
+          </div>
+          <label for="dismiss-on-action" id="dismiss-on-action-label">Dismiss On Action</label>
+        </div>
 
         <div class="field">
           <label for="message">Message Text</label>
@@ -152,8 +175,10 @@ <h2 class="mdc-typography--title">Basic Example</h2>
         var actionInput = document.getElementById('action');
         var multilineInput = document.getElementById('multiline');
         var actionOnBottomInput = document.getElementById('action-on-bottom');
+        var dismissOnActionInput = document.getElementById('dismiss-on-action');
 
         var show = function(sb) {
+          snackbar.dismissesOnAction = dismissOnActionInput.checked;
           var data =  {
             message: messageInput.value,
             actionOnBottom: actionOnBottomInput.checked,

diff --git a/packages/mdc-snackbar/README.md b/packages/mdc-snackbar/README.md
@@ -125,6 +125,18 @@ properties and their usage.
 | multiline | Whether to show the snackbar with space for multiple lines of text | Optional |  Boolean |
 | actionOnBottom | Whether to show the action below the multiple lines of text | Optional, applies when multiline is true |  Boolean |
 
+### Keep snackbar when the action button is pressed
+
+By default the snackbar will be dimissed when the user presses the action button.
+If you want the snackbar to remain visible until the timeout is reached (regardless of
+whether the user pressed the action button or not) you can set the `dismissesOnAction`
+property to `false`:
+
+```
+const snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));
+snackbar.dismissesOnAction = false
+```
+
 ### Using the Foundation Class
 
 MDC Snackbar ships with an `MDCSnackbarFoundation` class that external frameworks and libraries can

diff --git a/packages/mdc-snackbar/foundation.js b/packages/mdc-snackbar/foundation.js
@@ -51,6 +51,7 @@ export default class MDCSnackbarFoundation extends MDCFoundation {
     super(Object.assign(MDCSnackbarFoundation.defaultAdapter, adapter));
 
     this.active_ = false;
+    this.dismissOnAction_ = true;
     this.queue_ = [];
     this.actionClickHandler_ = () => this.invokeAction_();
   }
@@ -65,6 +66,14 @@ export default class MDCSnackbarFoundation extends MDCFoundation {
     this.adapter_.deregisterActionClickHandler(this.actionClickHandler_);
   }
 
+  dismissesOnAction() {
+    return this.dismissOnAction_;
+  }
+
+  setDismissOnAction(dismissOnAction) {
+    this.dismissOnAction_ = !!dismissOnAction;
+  }
+
   show(data) {
     if (!data) {
       throw new Error(
@@ -108,15 +117,22 @@ export default class MDCSnackbarFoundation extends MDCFoundation {
     this.adapter_.addClass(ACTIVE);
     this.adapter_.unsetAriaHidden();
 
-    setTimeout(this.cleanup_.bind(this), data.timeout || MESSAGE_TIMEOUT);
+    this.timeoutId_ = setTimeout(this.cleanup_.bind(this), data.timeout || MESSAGE_TIMEOUT);
   }
 
   invokeAction_() {
-    if (!this.actionHandler_) {
-      return;
-    }
+    try {
+      if (!this.actionHandler_) {
+        return;
+      }
 
-    this.actionHandler_();
+      this.actionHandler_();
+    } finally {
+      if (this.dismissOnAction_) {
+        clearTimeout(this.timeoutId_);
+        this.cleanup_();
+      }
+    }
   }
 
   cleanup_() {

diff --git a/packages/mdc-snackbar/index.js b/packages/mdc-snackbar/index.js
@@ -55,4 +55,12 @@ export class MDCSnackbar extends MDCComponent {
         (handler) => this.root_.removeEventListener(getCorrectEventName(window, 'transitionend'), handler),
     });
   }
+
+  get dismissesOnAction() {
+    return this.foundation_.dismissesOnAction();
+  }
+
+  set dismissesOnAction(dismissesOnAction) {
+    this.foundation_.setDismissOnAction(dismissesOnAction);
+  }
 }
diff --git a/test/unit/mdc-snackbar/foundation.test.js b/test/unit/mdc-snackbar/foundation.test.js
@@ -312,3 +312,54 @@ test('#show will clean up snackbar after the timeout and transition end', () =>
 
   clock.uninstall();
 });
+
+test('snackbar is dismissed after action button is pressed', () => {
+  const {foundation, mockAdapter} = setupTest();
+  const {isA} = td.matchers;
+
+  let actionClickHandler;
+  td.when(mockAdapter.registerActionClickHandler(isA(Function)))
+    .thenDo((handler) => {
+      actionClickHandler = handler;
+    });
+
+  foundation.init();
+
+  td.reset();
+
+  foundation.show({
+    message: 'Message Deleted',
+    actionText: 'Undo',
+    actionHandler: () => {},
+  });
+
+  actionClickHandler();
+
+  td.verify(mockAdapter.removeClass(cssClasses.ACTIVE));
+});
+
+test('snackbar is not dismissed after action button is pressed if setDismissOnAction(false) was called before', () => {
+  const {foundation, mockAdapter} = setupTest();
+  const {isA} = td.matchers;
+
+  let actionClickHandler;
+  td.when(mockAdapter.registerActionClickHandler(isA(Function)))
+    .thenDo((handler) => {
+      actionClickHandler = handler;
+    });
+
+  foundation.init();
+  foundation.setDismissOnAction(false);
+
+  td.reset();
+
+  foundation.show({
+    message: 'Message Deleted',
+    actionText: 'Undo',
+    actionHandler: () => {},
+  });
+
+  actionClickHandler();
+
+  td.verify(mockAdapter.removeClass(cssClasses.ACTIVE), {times: 0});
+});
diff --git a/test/unit/mdc-snackbar/mdc-snackbar.test.js b/test/unit/mdc-snackbar/mdc-snackbar.test.js
@@ -161,3 +161,19 @@ test('foundationAdapter#deregisterTransitionEndHandler adds an event listener to
   domEvents.emit(root, 'transitionend');
   td.verify(handler(td.matchers.anything()), {times: 0});
 });
+
+test('#get dismissesOnAction property dispatches to foundation_', () => {
+  const {component} = setupTest();
+
+  assert.isTrue(component.dismissesOnAction);
+  component.foundation_.setDismissOnAction(false);
+  assert.isFalse(component.dismissesOnAction);
+});
+
+test('#set dismissesOnAction property dispatches to foundation_', () => {
+  const {component} = setupTest();
+
+  assert.isTrue(component.foundation_.dismissesOnAction());
+  component.dismissesOnAction = false;
+  assert.isFalse(component.foundation_.dismissesOnAction());
+});