import React , { useRef , useEffect , useState } from 'react' ; import ReactDOM from 'react-dom' ; import useOnOutsideClick from 'shared/hooks/onOutsideClick' ; import useOnEscapeKeyDown from 'shared/hooks/onEscapeKeyDown' ; import useWindowSize from 'shared/hooks/useWindowSize' ; import styled from 'styled-components' ; import { Cross } from 'shared/icons' ; import { ScrollOverlay , ClickableOverlay , StyledModal } from './Styles' ; const $root = document . getElementById ( 'root' ) ! ; type ModalProps = { width : number ; onClose : ( ) => void ; renderContent : ( ) => JSX . Element ; } ; function getAdjustedHeight ( height ) { if ( height >= 900 ) { return height - 150 ; } if ( height >= 800 ) { return height - 125 ; } return height - 70 ; } const CloseIcon = styled ( Cross ) `
  position: absolute;
  top: 16px;
  right: -32px;
  cursor: pointer;
  fill: ${ props => props . theme . colors . text . primary };
  &:hover {
    fill: ${ props => props . theme . colors . text . secondary };
  }
` ; const InnerModal = ( { width , onClose : tellParentToClose , renderContent } ) => { const $modalRef = useRef < HTMLDivElement > ( null ) ; const $clickableOverlayRef = useRef < HTMLDivElement > ( null ) ; const [ _width , height ] = useWindowSize ( ) ; useOnOutsideClick ( $modalRef , true , tellParentToClose , $clickableOverlayRef ) ; useOnEscapeKeyDown ( true , tellParentToClose ) ; return ( < ScrollOverlay > < ClickableOverlay ref = { $clickableOverlayRef } > < StyledModal width = { width } height = { getAdjustedHeight ( height ) } ref = { $modalRef } > { renderContent ( ) } < CloseIcon onClick = { ( ) => tellParentToClose ( ) } width = { 20 } height = { 20 } / > < /StyledModal> < /ClickableOverlay> < /ScrollOverlay>); } ; const Modal = ( { width , onClose : tellParentToClose , renderContent } ) => { return ReactDOM . createPortal ( < InnerModal width = { width } onClose = { tellParentToClose } renderContent = { renderContent } / > , $root ) ; } ; export default Modal ;