How to use the @material/snackbar.MDCSnackbarFoundation.prototype function in @material/snackbar

To help you get started, we’ve selected a few @material/snackbar examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github jamesmfriedman / rmwc / src / snackbar / snackbar.tsx View on Github external
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 } */
github jamesmfriedman / rmwc / src / snackbar / foundation.tsx View on Github external
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
    },