import * as React from 'react' ; import classNames from 'classnames' ; import { Portal } from '../Portal' ; export type IModalSize = 'large' | 'x-large' | 'fill' | 'fullscreen' ; interface IProps { id : string ; size ? : IModalSize ; closeOnEsc ? : boolean ; closeModal ? ( ) : void ; theme ? : 'dark-ui' ; fullHeight ? : boolean ; } export class Modal extends React . PureComponent < IProps > { constructor ( props ) { super ( props ) ; this . handleKeydown = this . handleKeydown . bind ( this ) ; } handleKeydown ( event ) { if ( event . code === 'Escape' && this . props . closeModal ) { event . preventDefault ( ) ; this . props . closeModal ( ) ; } } componentDidMount ( ) { if ( this . props . closeOnEsc ) { document . addEventListener ( 'keydown' , this . handleKeydown ) ; } } componentWillUnmount ( ) { if ( this . props . closeOnEsc ) { document . removeEventListener ( 'keydown' , this . handleKeydown ) ; } } render ( ) { const modalClass = classNames ( 'modal' , { [ `modal--${ this . props . size }` ] : this . props . size } ) ; const dialogStyle = ! this . props . fullHeight ? { } : { height : '100%' } ; return ( < Portal id = { this . props . id } > < div className = "modal__backdrop fade in" / > < div className = { modalClass } style = { { display : 'block' } } data - theme = { this . props . theme } > < div className = "modal__dialog" style = { dialogStyle } > < div className = "modal__content" > { this . props . children } < /div> < /div> < /div> < /Portal>); } }