blob: f823d050dffe533be04227e648496ca6aa2d2d7f (
plain) (
blame)
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
|
import * as React from 'react';
import { ZeroExInstantContainer } from '../components/zero_ex_instant_container';
import { MAIN_CONTAINER_DIV_CLASS, OVERLAY_CLOSE_BUTTON_DIV_CLASS, OVERLAY_DIV_CLASS } from '../constants';
import { ColorOption } from '../style/theme';
import { Container } from './ui/container';
import { Flex } from './ui/flex';
import { Icon } from './ui/icon';
import { Overlay } from './ui/overlay';
import { ZeroExInstantProvider, ZeroExInstantProviderProps } from './zero_ex_instant_provider';
export interface ZeroExInstantOverlayProps extends ZeroExInstantProviderProps {
onClose?: () => void;
zIndex?: number;
}
export const ZeroExInstantOverlay: React.StatelessComponent<ZeroExInstantOverlayProps> = props => {
const { onClose, zIndex, ...rest } = props;
return (
<ZeroExInstantProvider {...rest}>
<Overlay zIndex={zIndex} className={OVERLAY_DIV_CLASS}>
<Flex height="100vh">
<Container position="absolute" top="0px" right="0px" display={{ default: 'initial', sm: 'none' }}>
<Container className={OVERLAY_CLOSE_BUTTON_DIV_CLASS}>
<Icon
height={18}
width={18}
color={ColorOption.white}
icon="closeX"
onClick={onClose}
padding="2em 2em"
/>
</Container>
</Container>
<Container
width={{ default: 'auto', sm: '100%' }}
height={{ default: 'auto', sm: '100%' }}
className={MAIN_CONTAINER_DIV_CLASS}
>
<ZeroExInstantContainer />
</Container>
</Flex>
</Overlay>
</ZeroExInstantProvider>
);
};
|