UNPKG

7.15 kBTypeScriptView Raw
1import * as React from 'react';
2declare type Nullable<T> = {
3 [P in keyof T]: T[P] | null;
4};
5export declare type TypeOptions = 'info' | 'success' | 'warning' | 'error' | 'default';
6export declare type Theme = 'light' | 'dark' | 'colored';
7export declare type ToastPosition = 'top-right' | 'top-center' | 'top-left' | 'bottom-right' | 'bottom-center' | 'bottom-left';
8export interface ToastContentProps<Data = {}> {
9 closeToast?: () => void;
10 toastProps: ToastProps;
11 data?: Data;
12}
13export declare type ToastContent = React.ReactNode | ((props: ToastContentProps) => React.ReactNode);
14export declare type Id = number | string;
15export declare type ToastTransition = React.FC<ToastTransitionProps> | React.ComponentClass<ToastTransitionProps>;
16/**
17 * ClassName for the elements - can take a function to build a classname or a raw string that is cx'ed to defaults
18 */
19export declare type ToastClassName = ((context?: {
20 type?: TypeOptions;
21 defaultClassName?: string;
22 position?: ToastPosition;
23 rtl?: boolean;
24}) => string) | string;
25export interface ClearWaitingQueueParams {
26 containerId?: Id;
27}
28export declare type DraggableDirection = 'x' | 'y';
29interface CommonOptions {
30 /**
31 * Pause the timer when the mouse hover the toast.
32 * `Default: true`
33 */
34 pauseOnHover?: boolean;
35 /**
36 * Pause the toast when the window loose focus.
37 * `Default: true`
38 */
39 pauseOnFocusLoss?: boolean;
40 /**
41 * Remove the toast when clicked.
42 * `Default: true`
43 */
44 closeOnClick?: boolean;
45 /**
46 * Set the delay in ms to close the toast automatically.
47 * Use `false` to prevent the toast from closing.
48 * `Default: 5000`
49 */
50 autoClose?: number | false;
51 /**
52 * Set the default position to use.
53 * `One of: 'top-right', 'top-center', 'top-left', 'bottom-right', 'bottom-center', 'bottom-left'`
54 * `Default: 'top-right'`
55 */
56 position?: ToastPosition;
57 /**
58 * Pass a custom close button.
59 * To remove the close button pass `false`
60 */
61 closeButton?: React.ReactElement | ((props: any) => React.ReactElement) | boolean;
62 /**
63 * An optional css class to set for the progress bar.
64 */
65 progressClassName?: ToastClassName;
66 /**
67 * An optional style to set for the progress bar.
68 */
69 progressStyle?: React.CSSProperties;
70 /**
71 * An optional css class to set for the toast content.
72 */
73 bodyClassName?: ToastClassName;
74 /**
75 * An optional inline style to apply for the toast content.
76 */
77 bodyStyle?: React.CSSProperties;
78 /**
79 * Hide or show the progress bar.
80 * `Default: false`
81 */
82 hideProgressBar?: boolean;
83 /**
84 * Pass a custom transition built with react-transition-group.
85 */
86 transition?: ToastTransition;
87 /**
88 * Allow toast to be draggable
89 * `Default: true`
90 */
91 draggable?: boolean;
92 /**
93 * The percentage of the toast's width it takes for a drag to dismiss a toast
94 * `Default: 80`
95 */
96 draggablePercent?: number;
97 /**
98 * Specify in which direction should you swipe to dismiss the toast
99 * `Default: "x"`
100 */
101 draggableDirection?: DraggableDirection;
102 /**
103 * Define the ARIA role for the toast
104 * `Default: alert`
105 * https://www.w3.org/WAI/PF/aria/roles
106 */
107 role?: string;
108 /**
109 * Set id to handle multiple container
110 */
111 containerId?: Id;
112 /**
113 * Fired when clicking inside toaster
114 */
115 onClick?: (event: React.MouseEvent) => void;
116 /**
117 * Support right to left display.
118 * `Default: false`
119 */
120 rtl?: boolean;
121 /**
122 * Used to display a custom icon. Set it to `false` to prevent
123 * the icons from being displayed
124 */
125 icon?: React.ReactNode | false;
126 /**
127 * Theme to use.
128 * `One of: 'light', 'dark', 'colored'`
129 * `Default: 'light'`
130 */
131 theme?: Theme;
132}
133export interface ToastOptions<Data = {}> extends CommonOptions {
134 /**
135 * An optional css class to set.
136 */
137 className?: ToastClassName;
138 /**
139 * Called when toast is mounted.
140 */
141 onOpen?: <T = {}>(props: T) => void;
142 /**
143 * Called when toast is unmounted.
144 */
145 onClose?: <T = {}>(props: T) => void;
146 /**
147 * An optional inline style to apply.
148 */
149 style?: React.CSSProperties;
150 /**
151 * Set the toast type.
152 * `One of: 'info', 'success', 'warning', 'error', 'default'`
153 */
154 type?: TypeOptions;
155 /**
156 * Set a custom `toastId`
157 */
158 toastId?: Id;
159 /**
160 * Used during update
161 */
162 updateId?: Id;
163 /**
164 * Set the percentage for the controlled progress bar. `Value must be between 0 and 1.`
165 */
166 progress?: number | string;
167 /**
168 * Add a delay in ms before the toast appear.
169 */
170 delay?: number;
171 isLoading?: boolean;
172 data?: Data;
173}
174export interface UpdateOptions extends Nullable<ToastOptions> {
175 /**
176 * Used to update a toast.
177 * Pass any valid ReactNode(string, number, component)
178 */
179 render?: ToastContent;
180}
181export interface ToastContainerProps extends CommonOptions {
182 /**
183 * An optional css class to set.
184 */
185 className?: ToastClassName;
186 /**
187 * Whether or not to display the newest toast on top.
188 * `Default: false`
189 */
190 newestOnTop?: boolean;
191 /**
192 * An optional inline style to apply.
193 */
194 style?: React.CSSProperties;
195 /**
196 * An optional inline style to apply for the toast.
197 */
198 toastStyle?: React.CSSProperties;
199 /**
200 * An optional css class for the toast.
201 */
202 toastClassName?: ToastClassName;
203 /**
204 * Show the toast only if it includes containerId and it's the same as containerId
205 * `Default: false`
206 */
207 enableMultiContainer?: boolean;
208 /**
209 * Limit the number of toast displayed at the same time
210 */
211 limit?: number;
212}
213export interface ToastTransitionProps {
214 isIn: boolean;
215 done: () => void;
216 position: ToastPosition | string;
217 preventExitTransition: boolean;
218 nodeRef: React.RefObject<HTMLElement>;
219 children?: React.ReactNode;
220}
221/**
222 * @INTERNAL
223 */
224export interface ToastProps extends ToastOptions {
225 isIn: boolean;
226 staleId?: Id;
227 toastId: Id;
228 key: Id;
229 transition: ToastTransition;
230 closeToast: () => void;
231 position: ToastPosition;
232 children?: ToastContent;
233 draggablePercent: number;
234 draggableDirection?: DraggableDirection;
235 progressClassName?: ToastClassName;
236 className?: ToastClassName;
237 bodyClassName?: ToastClassName;
238 deleteToast: () => void;
239 theme: Theme;
240 type: TypeOptions;
241}
242/**
243 * @INTERNAL
244 */
245export interface NotValidatedToastProps extends Partial<ToastProps> {
246 toastId: Id;
247}
248/**
249 * @INTERAL
250 */
251export interface Toast {
252 content: ToastContent;
253 props: ToastProps;
254}
255export {};