How to use @material/snackbar - 10 common examples

getDefaultFoundation() {
    /* eslint brace-style: "off" */
    return new MDCSnackbarFoundation({
      addClass: (className: string) => this.root.addClass(className),
      removeClass: (className: string) => this.root.removeClass(className),
      announce: () => this.labelEl && this.announce(this.labelEl),
      notifyOpening: () => this.emit('onOpen', {}),
      notifyOpened: () => this.emit('onOpened', {}),
      notifyClosing: (reason: string) =>
        this.emit('onClose', reason ? { reason } : {}),
      notifyClosed: (reason: string) =>
        this.emit('onClosed', reason ? { reason } : {})
    });
  }

mounted: function() {
    this.snackbar = new MDCSnackbar(this.$refs.snackbar);
    this.snackbar.foundation_.autoDismissTimeoutMs_ = 31556952000; // 1 year
    this.snackbar.closeOnEscape = false;

    browser.runtime.onMessage.addListener(this.onMessage);
    browser.runtime.sendMessage({id: 'selectFrameId'});
  }
};

mounted: function() {
    this.snackbar = new MDCSnackbar(this.$refs.snackbar);
    this.snackbar.foundation_.autoDismissTimeoutMs_ = 31556952000; // 1 year
    this.snackbar.closeOnEscape = false;

    browser.runtime.onMessage.addListener(this.onMessage);
    browser.runtime.sendMessage({id: 'captureFrameId'});
  }
};

this._settingsViewPromise = import('./views/settings.js')
        .then((module) => this._viewClasses.SettingsView = module.SettingsView)
        .then(() => this._booted)
        .then(() => new this._viewClasses.SettingsView(this, this._model,
            this._screens.settings, this._animationHelper));

    this._booted.then(() => this._hideLoadingScreen());

    // MDC-Web component init.

    MDCRipple.attachTo(document.querySelector('.mm-convert__update'));
    const menu =
        new MDCSimpleMenu(document.querySelector('.mdc-toolbar__menu'));

    this._snackbar = new MDCSnackbar(document.querySelector('.mm-snackbar'));

    // Add event listener to button to toggle the menu on and off.
    this._elements.more.addEventListener('click', () =>
        this._booted.then(() => (menu.open = !menu.open)));

    // Add event listener to open Settings screen.
    document.querySelector('.mm-menu__settings').addEventListener('click',
        () => this._settingsViewPromise.then((view) => {
          view.show(this._screens.convert);
          history.pushState({page: 'settings'}, 'Settings');
        }));

    const ratesDialog =
        new MDCDialog(document.querySelector('#mm-rates-dialog'));
    document.querySelector('.mm-menu__rates').addEventListener('click', () => {
      this._updateRateInfo();

import * as RMWC from '@rmwc/types';
import * as React from 'react';
import { MDCSnackbarFoundation, util } from '@material/snackbar';
import { Button, ButtonProps } from '@rmwc/button';
import {
  componentFactory,
  FoundationComponent,
  handleDeprecations,
  closest
} from '@rmwc/base';
import { IconButton, IconButtonProps } from '@rmwc/icon-button';
import { Icon } from '@rmwc/icon';

/** Monkey patch the foundation to accept dynamic reasons rather than just "action" */
// @ts-ignore
MDCSnackbarFoundation.prototype.handleActionButtonClick = function(
  evt: any,
  reason: string
) {
  this.close(reason);
};

export type SnackbarOnOpenEventT = RMWC.CustomEventT<{}>;
export type SnackbarOnCloseEventT = RMWC.CustomEventT<{ reason?: string }>;

/** A Snackbar component for notifications. */
export interface SnackbarProps {
  /** Show the Snackbar. */
  open?: boolean;
  /** A callback thats fired when the Snackbar shows. */
  onOpen?: (evt: SnackbarOnOpenEventT) => void;
  /** A callback thats fired when the Snackbar hides. evt.detail = { reason?: string } */

import { SnackbarProps } from '.';
import { MDCSnackbarFoundation, util } from '@material/snackbar';
import { closest } from '@rmwc/base';
import { useFoundation } from '@rmwc/base';
import { useEffect } from 'react';

/** Monkey patch the foundation to accept dynamic reasons rather than just "action" */
// @ts-ignore
MDCSnackbarFoundation.prototype.handleActionButtonClick = function(
  evt: any,
  reason: string
) {
  this.close(reason);
};

export function useSnackbarFoundation(
  props: SnackbarProps & Omit, 'action'>
) {
  const { foundation, ...elements } = useFoundation({
    props,
    elements: {
      rootEl: true,
      surfaceEl: true,
      labelEl: true
    },

getDefaultFoundation() {
    // prettier-ignore
    return new MDCSnackbarFoundation({
      addClass: helper.addClass('rootProps', this),
      removeClass: helper.removeClass('rootProps', this),
      setAriaHidden: helper.setAttr('rootProps', this, 'aria-hidden', true),
      unsetAriaHidden: helper.rmAttr('rootProps', this, 'aria-hidden', false),
      setActionAriaHidden: helper.setAttr('actionButtonProps', this, 'aria-hidden', true),
      unsetActionAriaHidden: helper.rmAttr('actionButtonProps', this, 'aria-hidden', false),
      setActionText: actionText => this.setState({ actionText }),
      setMessageText: messageText => this.setState({ messageText }),
      setFocus: () => this.actionButton_.focus(),
      visibilityIsHidden: () => document.hidden,
      registerCapturedBlurHandler: helper.registerHandler('actionButtonProps', this, 'blur'),
      deregisterCapturedBlurHandler: helper.deregisterHandler('actionButtonProps', this, 'blur'),
      registerVisibilityChangeHandler: (handler) => document.addEventListener('visibilitychange', handler),
      deregisterVisibilityChangeHandler: (handler) => document.removeEventListener('visibilitychange', handler),
      registerCapturedInteractionHandler: (evt, handler) =>
        document.body.addEventListener(evt, handler, true),

//       - Chrome 70
      //       - Firefox 60 (ESR)
      //       - IE 11
      //   * NVDA 2018:
      //       - Chrome 70
      //       - Firefox 60 (ESR)
      //       - IE 11
      //   * ChromeVox 53
      this.showLabelText = false;

      // Prevent visual jank by temporarily displaying the label text in the ::before pseudo-element.
      // CSS generated content is normally announced by screen readers
      // (except in IE 11; see https://tink.uk/accessibility-support-for-css-generated-content/);
      // however, `aria-live` is turned off, so this DOM update will be ignored by screen readers.
      labelEl.setAttribute(
        MDCSnackbarFoundation.strings.ARIA_LIVE_LABEL_TEXT_ATTR,
        this.labelText,
      );

      setTimeout(() => {
        // Allow screen readers to announce changes to the DOM again.
        ariaEl.setAttribute('aria-live', priority);

        // Remove the message from the ::before pseudo-element.
        labelEl.removeAttribute(
          MDCSnackbarFoundation.strings.ARIA_LIVE_LABEL_TEXT_ATTR,
        );

        // Restore the original label text, which will be announced by screen readers.
        this.showLabelText = true;
      }, MDCSnackbarFoundation.numbers.ARIA_LIVE_DELAY_MS);
    },

MDCSnackbarFoundation.strings.ARIA_LIVE_LABEL_TEXT_ATTR,
        this.labelText,
      );

      setTimeout(() => {
        // Allow screen readers to announce changes to the DOM again.
        ariaEl.setAttribute('aria-live', priority);

        // Remove the message from the ::before pseudo-element.
        labelEl.removeAttribute(
          MDCSnackbarFoundation.strings.ARIA_LIVE_LABEL_TEXT_ATTR,
        );

        // Restore the original label text, which will be announced by screen readers.
        this.showLabelText = true;
      }, MDCSnackbarFoundation.numbers.ARIA_LIVE_DELAY_MS);
    },
  },

const common = (language: string = 'en'): void => {
  const name = $('#name');
  const email = $('#email');
  const comment = $('#comment');
  const sendButton = $('#send-button');

  const sendToastEl = $('#send-toast');
  const sendToast = new MDCSnackbar(sendToastEl);

  firebase.auth()
    .onAuthStateChanged((user: { uid: string }): void => {
      if (user) {
        sendButton.onclick = (): void => {
          const textfieldInputs = $$('.mdc-text-field__input');
          const empty = [].filter.call(textfieldInputs, textfieldInput => textfieldInput.value === '');

          if (!empty.length) {
            firebase.firestore()
              .collection('users')
              .add({ id: user.uid, name: name.value, email: email.value, message: comment.value })
              .catch(error => console.error(`Error adding document: ${error}`));

            [].forEach.call(
              textfieldInputs,