diff options
Diffstat (limited to 'packages/website/ts/components/ui/popover.tsx')
-rw-r--r-- | packages/website/ts/components/ui/popover.tsx | 59 |
1 files changed, 59 insertions, 0 deletions
diff --git a/packages/website/ts/components/ui/popover.tsx b/packages/website/ts/components/ui/popover.tsx new file mode 100644 index 000000000..66c0ac663 --- /dev/null +++ b/packages/website/ts/components/ui/popover.tsx @@ -0,0 +1,59 @@ +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; +`; + +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> + ); + } +} |