/
Modal.tsx
111 lines (96 loc) · 3.08 KB
/
Modal.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
import { factory, Factory, getDefaultZIndex, useProps } from '../../core';
import { ModalBaseCloseButtonProps, ModalBaseOverlayProps } from '../ModalBase';
import { ModalBody } from './ModalBody';
import { ModalCloseButton } from './ModalCloseButton';
import { ModalContent } from './ModalContent';
import { ModalHeader } from './ModalHeader';
import { ModalOverlay } from './ModalOverlay';
import {
ModalRoot,
ModalRootCssVariables,
ModalRootProps,
ModalRootStylesNames,
} from './ModalRoot';
import { ModalTitle } from './ModalTitle';
import classes from './Modal.module.css';
export type ModalStylesNames = ModalRootStylesNames;
export type ModalCssVariables = ModalRootCssVariables;
export interface ModalProps extends ModalRootProps {
__staticSelector?: string;
/** Modal title */
title?: React.ReactNode;
/** Determines whether the overlay should be rendered, `true` by default */
withOverlay?: boolean;
/** Props passed down to the `Overlay` component, use to configure opacity, `background-color`, styles and other properties */
overlayProps?: ModalBaseOverlayProps;
/** Modal content */
children?: React.ReactNode;
/** Determines whether the close button should be rendered, `true` by default */
withCloseButton?: boolean;
/** Props passed down to the close button */
closeButtonProps?: ModalBaseCloseButtonProps;
}
export type ModalFactory = Factory<{
props: ModalProps;
ref: HTMLDivElement;
stylesNames: ModalStylesNames;
vars: ModalCssVariables;
staticComponents: {
Root: typeof ModalRoot;
Overlay: typeof ModalOverlay;
Content: typeof ModalContent;
Body: typeof ModalBody;
Header: typeof ModalHeader;
Title: typeof ModalTitle;
CloseButton: typeof ModalCloseButton;
};
}>;
const defaultProps: Partial<ModalProps> = {
closeOnClickOutside: true,
withinPortal: true,
lockScroll: true,
trapFocus: true,
returnFocus: true,
closeOnEscape: true,
keepMounted: false,
zIndex: getDefaultZIndex('modal'),
transitionProps: { duration: 200, transition: 'fade-down' },
withOverlay: true,
withCloseButton: true,
};
export const Modal = factory<ModalFactory>((_props, ref) => {
const {
title,
withOverlay,
overlayProps,
withCloseButton,
closeButtonProps,
children,
radius,
...others
} = useProps('Modal', defaultProps, _props);
const hasHeader = !!title || withCloseButton;
return (
<ModalRoot ref={ref} radius={radius} {...others}>
{withOverlay && <ModalOverlay {...overlayProps} />}
<ModalContent radius={radius}>
{hasHeader && (
<ModalHeader>
{title && <ModalTitle>{title}</ModalTitle>}
{withCloseButton && <ModalCloseButton {...closeButtonProps} />}
</ModalHeader>
)}
<ModalBody>{children}</ModalBody>
</ModalContent>
</ModalRoot>
);
});
Modal.classes = classes;
Modal.displayName = '@mantine/core/Modal';
Modal.Root = ModalRoot;
Modal.Overlay = ModalOverlay;
Modal.Content = ModalContent;
Modal.Body = ModalBody;
Modal.Header = ModalHeader;
Modal.Title = ModalTitle;
Modal.CloseButton = ModalCloseButton;