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
|
import * as _ from 'lodash';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Placement, Popper, PopperChildrenProps } from 'react-popper';
import { colors } from '@0xproject/react-shared';
import { Container } from 'ts/components/ui/container';
import { Overlay } from 'ts/components/ui/overlay';
import { styled } from 'ts/style/theme';
export interface PopoverProps {
anchorEl: HTMLInputElement;
placement?: Placement;
onRequestClose?: () => void;
zIndex?: number;
}
const PopoverContainer = styled.div`
background-color: ${colors.white};
max-height: 679px;
overflow-y: auto;
border-radius: 2px;
box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
`;
const defaultPlacement: Placement = 'bottom';
export class Popover extends React.Component<PopoverProps> {
public static defaultProps = {
placement: defaultPlacement,
};
public render(): React.ReactNode {
const { anchorEl, placement, zIndex, onRequestClose } = this.props;
const overlayStyleOverrides = {
zIndex,
backgroundColor: 'transparent',
};
return (
<div>
{/* <Overlay onClick={onRequestClose} style={overlayStyleOverrides}/> */}
<Popper referenceElement={anchorEl} placement="bottom" eventsEnabled={true}>
{this._renderPopperChildren.bind(this)}
</Popper>
</div>
);
}
private _renderPopperChildren(props: PopperChildrenProps): React.ReactNode {
const popperContainerStyleOverrids = {
zIndex: _.isUndefined(this.props.zIndex) ? undefined : this.props.zIndex + 1,
};
return (
<div ref={props.ref} style={{...props.style, ...popperContainerStyleOverrids}}>
<PopoverContainer>
{this.props.children}
</PopoverContainer>
</div>
);
}
}
|
