UNPKG

4.94 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 */
76 onEnter?: TransitionHandlerProps['onEnter'];
77 /**
78 * Callback fired when the transition has entered.
79 */
80 onEntered?: TransitionHandlerProps['onEntered'];
81 /**
82 * Callback fired when the transition is entering.
83 */
84 onEntering?: TransitionHandlerProps['onEntering'];
85 /**
86 * Callback fired before the transition is exiting.
87 */
88 onExit?: TransitionHandlerProps['onExit'];
89 /**
90 * Callback fired when the transition has exited.
91 */
92 onExited?: TransitionHandlerProps['onExited'];
93 /**
94 * Callback fired when the transition is exiting.
95 */
96 onExiting?: TransitionHandlerProps['onExiting'];
97 onMouseEnter?: React.MouseEventHandler<any>;
98 onMouseLeave?: React.MouseEventHandler<any>;
99 /**
100 * If `true`, `Snackbar` is open.
101 */
102 open?: boolean;
103 /**
104 * The number of milliseconds to wait before dismissing after user interaction.
105 * If `autoHideDuration` prop isn't specified, it does nothing.
106 * If `autoHideDuration` prop is specified but `resumeHideDuration` isn't,
107 * we default to `autoHideDuration / 2` ms.
108 */
109 resumeHideDuration?: number;
110 /**
111 * The component used for the transition.
112 * [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
113 */
114 TransitionComponent?: React.ComponentType<
115 TransitionProps & { children?: React.ReactElement<any, any> }
116 >;
117 /**
118 * The duration for the transition, in milliseconds.
119 * You may specify a single timeout for all transitions, or individually with an object.
120 */
121 transitionDuration?: TransitionProps['timeout'];
122 /**
123 * Props applied to the [`Transition`](http://reactcommunity.org/react-transition-group/transition#Transition-props) element.
124 */
125 TransitionProps?: TransitionProps;
126}
127
128export type SnackbarClassKey =
129 | 'root'
130 | 'anchorOriginTopCenter'
131 | 'anchorOriginBottomCenter'
132 | 'anchorOriginTopRight'
133 | 'anchorOriginBottomRight'
134 | 'anchorOriginTopLeft'
135 | 'anchorOriginBottomLeft';
136
137/**
138 *
139 * Demos:
140 *
141 * - [Snackbars](https://material-ui.com/components/snackbars/)
142 *
143 * API:
144 *
145 * - [Snackbar API](https://material-ui.com/api/snackbar/)
146 */
147export default function Snackbar(props: SnackbarProps): JSX.Element;