import * as React from "react" ; import * as ReactDOM from "react-dom" ; import styled from "styled-components" ; import { mediaQueries } from "./styleConstants" ; import { RENDER_CONTEXT } from "./context" ; interface ToggleDisplayEl { visible : boolean ; } interface TextAlignProps { textAlign ? : string | undefined ; } const ModalOuter = styled . div < ToggleDisplayEl & TextAlignProps > `
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.7);
  display: flex;
  display: ${ props => ( props . visible ? "flex" : "none" ) };
  justify-content: center;
  align-items: center;
  text-align: ${ props => props . textAlign || "left" };
  z-index: 100001; // to beat wp tools
  ${ props => props . theme . renderContext === RENDER_CONTEXT . EMBED && `
    display: block;
    text-align: center;
  ` }
` ; interface ModalInnerProps { width ? : number ; padding ? : string ; fullScreen ? : boolean ; } const ModalInner = styled . div `
  box-shadow: 0px 0px 20px 5px rgba(100, 100, 100, 0.4);
  max-width: ${ ( props ) => props . width || 400 }px;
  padding: ${ ( props ) => props . padding || "35px 35px 50px 35px" };
  background: #fff;
  ${ ( props ) : string => { if ( props . fullScreen ) { return "max-width: 100%; width: 100%; height: 100%; overflow: auto;" ; } return "" ; } } ${ mediaQueries . MOBILE } {
    max-height: 100%;
    max-width: 100%;
    overflow: auto;
    padding-top: 15px;
    padding-right: 10px;
    padding-left: 10px;

    ${ props => props . theme . renderContext === RENDER_CONTEXT . EMBED && `
      max-height: none;
      padding: 16px;
      display: inline-block;
      margin: 32px auto 16px;
    ` }
  }
` ; export interface ModalPropsAndState { visible ? : boolean ; textAlign ? : string ; width ? : number ; padding ? : string ; fullScreen ? : boolean ; onOuterClicked ? ( ) : void ; } export class Modal extends React . Component < ModalPropsAndState , ModalPropsAndState > { private static getDerivedStateFromProps ( props , state ) { if ( typeof props . visible !== "undefined" ) { const visible = props . visible ; return { visible } ; } return null ; } public bucket : HTMLDivElement = document . createElement ( "div" ) ; public constructor ( props ) { super ( props ) ; this . state = { visible : this . props . visible || true , } ; } public componentDidMount ( ) { document . body . appendChild ( this . bucket ) ; } public componentWillUnmount ( ) { document . body . removeChild ( this . bucket ) ; } public render ( ) { return ReactDOM . createPortal ( < ModalOuter data - iframe - height visible = { this . state . visible ! } textAlign = { this . props . textAlign } onClick = { ( ) => { if ( this . props . onOuterClicked ) { this . props . onOuterClicked ( ) ; } } } > < ModalInner data - iframe - height width = { this . props . width } fullScreen = { this . props . fullScreen } padding = { this . props . padding } onClick = { ( ev ) => { ev . stopPropagation ( ) ; } } > { this . props . children } < /ModalInner> < /ModalOuter>, this.bucket); } }