-
Notifications
You must be signed in to change notification settings - Fork 26
/
Dialog.tsx
42 lines (37 loc) · 1.21 KB
/
Dialog.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
import React from 'react';
import { DialogProps as ReachDialogProps } from '@reach/dialog';
import IconClose from '../private/icons/IconClose';
import DialogOverlay from '../dialogOverlay/DialogOverlay';
import { DialogToggle, DialogToggleText } from './private/toggle';
import { DialogPosition, DialogMaxWidth } from './private/types';
import { DialogContainer, DialogContent, DialogMain } from './private/layout';
export type DialogProps = ReachDialogProps &
DialogPosition &
DialogMaxWidth & {
disableScrollLock?: boolean;
};
const Dialog: React.FC<DialogProps> = ({
children,
maxWidth,
isOpen = false,
onDismiss,
position = 'CENTER',
disableScrollLock = false,
}) => (
<DialogOverlay
isOpen={isOpen && isOpen}
onDismiss={onDismiss && onDismiss}
dangerouslyBypassScrollLock={disableScrollLock}
>
<DialogContent maxWidth={maxWidth} position={position}>
<DialogContainer>
<DialogToggle type="button" onClick={onDismiss && onDismiss}>
<IconClose />
<DialogToggleText>Close dialog</DialogToggleText>
</DialogToggle>
<DialogMain>{children}</DialogMain>
</DialogContainer>
</DialogContent>
</DialogOverlay>
);
export default Dialog;