UNPKG

5.27 kBTypeScriptView Raw
1import * as React from 'react';
2import { StandardProps } from '..';
3import { SnackbarContentProps } from '../SnackbarContent';
4import { TransitionHandlerProps, TransitionProps } from '../transitions/transition';
5import { ClickAwayListenerProps } from '../ClickAwayListener';
6
7export interface SnackbarOrigin {
8 vertical: 'top' | 'bottom';
9 horizontal: 'left' | 'center' | 'right';
10}
11
12export type SnackbarCloseReason = 'timeout' | 'clickaway';
13
14export interface SnackbarProps
15 extends StandardProps<
16 React.HTMLAttributes<HTMLDivElement> & Partial<TransitionHandlerProps>,
17 SnackbarClassKey
18 > {
19 /**
20 * The action to display. It renders after the message, at the end of the snackbar.
21 */
22 action?: SnackbarContentProps['action'];
23 /**
24 * The anchor of the `Snackbar`.
25 */
26 anchorOrigin?: SnackbarOrigin;
27 /**
28 * The number of milliseconds to wait before automatically calling the
29 * `onClose` function. `onClose` should then set the state of the `open`
30 * prop to hide the Snackbar. This behavior is disabled by default with
31 * the `null` value.
32 */
33 autoHideDuration?: number | null;
34 /**
35 * Replace the `SnackbarContent` component.
36 */
37 children?: React.ReactElement<any, any>;
38 /**
39 * Props applied to the `ClickAwayListener` element.
40 */
41 ClickAwayListenerProps?: Partial<ClickAwayListenerProps>;
42 /**
43 * Props applied to the [`SnackbarContent`](/api/snackbar-content/) element.
44 */
45 ContentProps?: Partial<SnackbarContentProps>;
46 /**
47 * If `true`, the `autoHideDuration` timer will expire even if the window is not focused.
48 */
49 disableWindowBlurListener?: boolean;
50 /**
51 * When displaying multiple consecutive Snackbars from a parent rendering a single
52 * <Snackbar/>, add the key prop to ensure independent treatment of each message.
53 * e.g. <Snackbar key={message} />, otherwise, the message may update-in-place and
54 * features such as autoHideDuration may be canceled.
55 * @document
56 */
57 key?: any;
58 /**
59 * The message to display.
60 */
61 message?: SnackbarContentProps['message'];
62 /**
63 * Callback fired when the component requests to be closed.
64 * Typically `onClose` is used to set state in the parent component,
65 * which is used to control the `Snackbar` `open` prop.
66 * The `reason` parameter can optionally be used to control the response to `onClose`,
67 * for example ignoring `clickaway`.
68 *
69 * @param {object} event The event source of the callback.
70 * @param {string} reason Can be: `"timeout"` (`autoHideDuration` expired), `"clickaway"`.
71 */
72 onClose?: (event: React.SyntheticEvent<any>, reason: SnackbarCloseReason) => void;
73 /**
74 * Callback fired before the transition is entering.
75 * @deprecated Use the `TransitionProps` prop instead.
76 */
77 onEnter?: TransitionHandlerProps['onEnter'];
78 /**
79 * Callback fired when the transition has entered.
80 * @deprecated Use the `TransitionProps` prop instead.
81 */
82 onEntered?: TransitionHandlerProps['onEntered'];
83 /**
84 * Callback fired when the transition is entering.
85 * @deprecated Use the `TransitionProps` prop instead.
86 */
87 onEntering?: TransitionHandlerProps['onEntering'];
88 /**
89 * Callback fired before the transition is exiting.
90 * @deprecated Use the `TransitionProps` prop instead.
91 */
92 onExit?: TransitionHandlerProps['onExit'];
93 /**
94 * Callback fired when the transition has exited.
95 * @deprecated Use the `TransitionProps` prop instead.
96 */
97 onExited?: TransitionHandlerProps['onExited'];
98 /**
99 * Callback fired when the transition is exiting.
100 * @deprecated Use the `TransitionProps` prop instead.
101 */
102 onExiting?: TransitionHandlerProps['onExiting'];
103 onMouseEnter?: React.MouseEventHandler<any>;
104 onMouseLeave?: React.MouseEventHandler<any>;
105 /**
106 * If `true`, `Snackbar` is open.
107 */
108 open?: boolean;
109 /**
110 * The number of milliseconds to wait before dismissing after user interaction.
111 * If `autoHideDuration` prop isn't specified, it does nothing.
112 * If `autoHideDuration` prop is specified but `resumeHideDuration` isn't,
113 * we default to `autoHideDuration / 2` ms.
114 */
115 resumeHideDuration?: number;
116 /**
117 * The component used for the transition.
118 * [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
119 */
120 TransitionComponent?: React.ComponentType<
121 TransitionProps & { children?: React.ReactElement<any, any> }
122 >;
123 /**
124 * The duration for the transition, in milliseconds.
125 * You may specify a single timeout for all transitions, or individually with an object.
126 */
127 transitionDuration?: TransitionProps['timeout'];
128 /**
129 * Props applied to the [`Transition`](http://reactcommunity.org/react-transition-group/transition#Transition-props) element.
130 */
131 TransitionProps?: TransitionProps;
132}
133
134export type SnackbarClassKey =
135 | 'root'
136 | 'anchorOriginTopCenter'
137 | 'anchorOriginBottomCenter'
138 | 'anchorOriginTopRight'
139 | 'anchorOriginBottomRight'
140 | 'anchorOriginTopLeft'
141 | 'anchorOriginBottomLeft';
142
143/**
144 *
145 * Demos:
146 *
147 * - [Snackbars](https://mui.com/components/snackbars/)
148 *
149 * API:
150 *
151 * - [Snackbar API](https://mui.com/api/snackbar/)
152 */
153export default function Snackbar(props: SnackbarProps): JSX.Element;