import React from 'react';
import { style } from 'app/styles';
export interface PopupProps {
isOpen: boolean;
// The children are the popup content
children: string | JSX.Element | JSX.Element[];
onClose?: (evt) => void;
onMouseEnter?: (evt) => void;
onMouseLeave?: (evt) => void;
style?: string | object;
noBackdrop?: boolean;
}
const containerStyle = {
overflow: 'visible',
};
const popupStyle = {
_extends: 'popup',
right: 0,
marginRight: 0,
minWidth: 180,
zIndex: 4,
};
const backdropStyle = {
opacity: 0,
position: 'fixed',
top: 0,
left: 0,
height: '100%',
width: '100%',
zIndex: 3,
};
const visible = { display: 'block' };
const hidden = { display: 'none' };
export class Popup extends React.Component<PopupProps> {
render() {
const popupStyles: any = [popupStyle, this.props.style];
const backdropStyles: any = [backdropStyle];
if (this.props.isOpen) {
popupStyles.push(visible);
backdropStyles.push(visible);
} else {
popupStyles.push(hidden);
backdropStyles.push(hidden);
}
return (
<div style={style(containerStyle)}>
{!this.props.noBackdrop && (
<div style={style(backdropStyles)} onClick={this.onBackdropClick} />
)}
<div
style={style(popupStyles)}
onMouseEnter={this.onMouseEnter}
onMouseLeave={this.onMouseLeave}
>
{this.props.children}
</div>
</div>
);
}
onBackdropClick = (evt: any) => {
this.props.onClose && this.props.onClose(evt);
};
onMouseEnter = (evt: any) => {
this.props.onMouseEnter && this.props.onMouseEnter(evt);
};
onMouseLeave = (evt: any) => {
this.props.onMouseLeave && this.props.onMouseLeave(evt);
};
}
|