packages/instant/src/components/zero_ex_instant_overlay.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

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
                        className={OVERLAY_CLOSE_BUTTON_DIV_CLASS}
                        position="absolute"
                        top="0px"
                        right="0px"
                        display={{ default: 'initial', sm: 'none' }}
                    >
                        <Icon
                            height={18}
                            width={18}
                            color={ColorOption.white}
                            icon="closeX"
                            onClick={onClose}
                            padding="2em 2em"
                        />
                    </Container>
                    <Container
                        width={{ default: 'auto', sm: '100%' }}
                        height={{ default: 'auto', sm: '100%' }}
                        className={MAIN_CONTAINER_DIV_CLASS}
                    >
                        <ZeroExInstantContainer />
                    </Container>
                </Flex>
            </Overlay>
        </ZeroExInstantProvider>
    );
};