1 | // TypeScript Version: 2.9
|
2 |
|
3 | import * as React from 'react';
|
4 |
|
5 | interface Props {
|
6 | /**
|
7 | * Is the modal closable when user press esc key.
|
8 | */
|
9 | closeOnEsc?: boolean;
|
10 | /**
|
11 | * Is the modal closable when user click on overlay.
|
12 | */
|
13 | closeOnOverlayClick?: boolean;
|
14 | /**
|
15 | * Callback fired when the Modal is open and the animation is finished.
|
16 | */
|
17 | onEntered?: () => void;
|
18 | /**
|
19 | * Callback fired when the Modal has exited and the animation is finished.
|
20 | */
|
21 | onExited?: () => void;
|
22 | /**
|
23 | * Callback fired when the Modal is requested to be closed by a click on the overlay or when user press esc key.
|
24 | */
|
25 | onClose: () => void;
|
26 | /**
|
27 | * Callback fired when the escape key is pressed.
|
28 | */
|
29 | onEscKeyDown?: () => void;
|
30 | /**
|
31 | * Callback fired when the overlay is clicked.
|
32 | */
|
33 | onOverlayClick?: () => void;
|
34 | /**
|
35 | * Control if the modal is open or not.
|
36 | */
|
37 | open: boolean;
|
38 | /**
|
39 | * An object containing classNames to style the modal, can have properties 'overlay' (classname for overlay div), 'modal' (classname for modal content div),
|
40 | * 'closeButton' (classname for the button that contain the close icon), 'closeIcon' (classname for close icon svg).
|
41 | * You can customize the transition with 'transitionEnter', 'transitionEnterActive', 'transitionExit', 'transitionExitActive'
|
42 | */
|
43 | classNames?: object;
|
44 | /**
|
45 | * An object containing the styles objects to style the modal, can have properties 'overlay', 'modal', 'closeButton', 'closeIcon'.
|
46 | */
|
47 | styles?: object;
|
48 | /**
|
49 | * Should the dialog be centered.
|
50 | */
|
51 | center?: boolean;
|
52 | /**
|
53 | * Show the close icon.
|
54 | */
|
55 | showCloseIcon?: boolean;
|
56 | /**
|
57 | * Close icon size.
|
58 | */
|
59 | closeIconSize?: number;
|
60 | /**
|
61 | * A valid svg path to show as icon.
|
62 | */
|
63 | closeIconSvgPath?: any;
|
64 | /**
|
65 | * Animation duration in milliseconds.
|
66 | */
|
67 | animationDuration?: number;
|
68 | /**
|
69 | * You can specify a container prop which should be of type `Element`. The portal will be rendered inside that element.
|
70 | * The default behavior will create a div node and render it at the at the end of document.body.
|
71 | */
|
72 | container?: any;
|
73 | /**
|
74 | * Whether to block scrolling when dialog is open
|
75 | */
|
76 | blockScroll?: boolean;
|
77 | /**
|
78 | * When the modal is open, trap focus within it
|
79 | */
|
80 | focusTrapped?: boolean;
|
81 | /**
|
82 | * Options to be passed to the focus trap, details available at https://github.com/davidtheclark/focus-trap#focustrap--createfocustrapelement-createoptions
|
83 | */
|
84 | focusTrapOptions?: object;
|
85 | /**
|
86 | * id attribute for overlay
|
87 | */
|
88 | overlayId?: string;
|
89 | /**
|
90 | * id attribute for modal
|
91 | */
|
92 | modalId?: string;
|
93 | /**
|
94 | * id attribute for close icon
|
95 | */
|
96 | closeIconId?: string;
|
97 | /**
|
98 | * ARIA role for modal
|
99 | */
|
100 | role?: string;
|
101 | /**
|
102 | * ARIA label for modal
|
103 | */
|
104 | ariaLabelledby?: string;
|
105 | /**
|
106 | * ARIA description for modal
|
107 | */
|
108 | ariaDescribedby?: string;
|
109 | }
|
110 |
|
111 | declare const ReactReponsiveModal: React.ComponentType<Props>;
|
112 |
|
113 | export default ReactReponsiveModal;
|