import * as React from 'react'; import { InternalStandardProps as StandardProps } from '..'; import { SnackbarContentProps } from '../SnackbarContent'; import { TransitionHandlerProps, TransitionProps } from '../transitions/transition'; import { ClickAwayListenerProps } from '../ClickAwayListener'; export interface SnackbarOrigin { vertical: 'top' | 'bottom'; horizontal: 'left' | 'center' | 'right'; } export type SnackbarCloseReason = 'timeout' | 'clickaway'; export interface SnackbarProps extends StandardProps & Partial> { /** * The action to display. It renders after the message, at the end of the snackbar. */ action?: SnackbarContentProps['action']; /** * The anchor of the `Snackbar`. * On smaller screens, the component grows to occupy all the available width, * the horizontal alignment is ignored. * @default { vertical: 'bottom', horizontal: 'left' } */ anchorOrigin?: SnackbarOrigin; /** * The number of milliseconds to wait before automatically calling the * `onClose` function. `onClose` should then set the state of the `open` * prop to hide the Snackbar. This behavior is disabled by default with * the `null` value. * @default null */ autoHideDuration?: number | null; /** * Replace the `SnackbarContent` component. */ children?: React.ReactElement; /** * Override or extend the styles applied to the component. */ classes?: { /** Styles applied to the root element. */ root?: string; /** Styles applied to the root element if `anchorOrigin={{ 'top', 'center' }}`. */ anchorOriginTopCenter?: string; /** Styles applied to the root element if `anchorOrigin={{ 'bottom', 'center' }}`. */ anchorOriginBottomCenter?: string; /** Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }}`. */ anchorOriginTopRight?: string; /** Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }}`. */ anchorOriginBottomRight?: string; /** Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }}`. */ anchorOriginTopLeft?: string; /** Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }}`. */ anchorOriginBottomLeft?: string; }; /** * Props applied to the `ClickAwayListener` element. */ ClickAwayListenerProps?: Partial; /** * Props applied to the [`SnackbarContent`](/api/snackbar-content/) element. */ ContentProps?: Partial; /** * If `true`, the `autoHideDuration` timer will expire even if the window is not focused. * @default false */ disableWindowBlurListener?: boolean; /** * When displaying multiple consecutive Snackbars from a parent rendering a single * , add the key prop to ensure independent treatment of each message. * e.g. , otherwise, the message may update-in-place and * features such as autoHideDuration may be canceled. */ key?: any; /** * The message to display. */ message?: SnackbarContentProps['message']; /** * Callback fired when the component requests to be closed. * Typically `onClose` is used to set state in the parent component, * which is used to control the `Snackbar` `open` prop. * The `reason` parameter can optionally be used to control the response to `onClose`, * for example ignoring `clickaway`. * * @param {object} event The event source of the callback. * @param {string} reason Can be: `"timeout"` (`autoHideDuration` expired), `"clickaway"`. */ onClose?: (event: React.SyntheticEvent, reason: SnackbarCloseReason) => void; /** * If `true`, `Snackbar` is open. */ open?: boolean; /** * The number of milliseconds to wait before dismissing after user interaction. * If `autoHideDuration` prop isn't specified, it does nothing. * If `autoHideDuration` prop is specified but `resumeHideDuration` isn't, * we default to `autoHideDuration / 2` ms. */ resumeHideDuration?: number; /** * The component used for the transition. * [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. * @default Grow */ TransitionComponent?: React.ComponentType< TransitionProps & { children?: React.ReactElement } >; /** * The duration for the transition, in milliseconds. * You may specify a single timeout for all transitions, or individually with an object. * @default { * enter: duration.enteringScreen, * exit: duration.leavingScreen, * } */ transitionDuration?: TransitionProps['timeout']; /** * Props applied to the transition element. * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition) component. * @default {} */ TransitionProps?: TransitionProps; } export type SnackbarClassKey = keyof NonNullable; /** * * Demos: * * - [Snackbars](https://material-ui.com/components/snackbars/) * * API: * * - [Snackbar API](https://material-ui.com/api/snackbar/) */ export default function Snackbar(props: SnackbarProps): JSX.Element;