All files / app/components Popup.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 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80                            12x       12x               12x                   12x 12x       26x 26x 26x 1x 1x   25x 25x     26x                               16x       16x       16x        
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);
  };
}