import * as React from 'react' ; import * as ReactModal from 'react-modal' ; import * as classNames from 'classnames' ; import { observer } from 'mobx-react' ; import { observable } from 'mobx' ; export type Props = ButtonActionProps & ButtonComponentProps ; export type ButtonActionProps = Partial < { store : any ; } > ; export type ButtonComponentProps = Partial < { readonly title : string ; children : JSX . Element ; } > ; @ observer export class Dialog extends React . Component < Props > { render ( ) { const store = this . props . store ; const defaultProps = { overlayClassName : 'Dialog-Overlay' , } ; return ( < > { store . dialogs . map ( ( dialog , idx ) => ( < ReactModal { ... defaultProps } className = { classNames ( 'Dialog' , dialog . className ) } onRequestClose = { ( ) => store . closeDialog ( idx ) } isOpen = { store . getCurrentDialogState ( idx ) } key = { idx } ariaHideApp = { false } > { dialog . title && < DialogHeader title = { dialog . title } />} < DialogContent > { dialog . children } < /DialogContent> < DialogButtons > < div className = "Button" role = "button" onClick = { ( ) => store . closeDialog ( idx ) } > Close < /div> < /DialogButtons> < /ReactModal>))} < />); } } export interface DialogHeaderProps { title : string ; } export function DialogHeader ( props ) { return ( < div className = "Dialog-header" > < h3 > { props . title } < /h3> < /div>); } export interface DialogContentProps { children ? : JSX . Element ; } export function DialogContent ( props ) { return ( < div className = "Dialog-content-scroll" > < div className = "Dialog-content-margin" > { props . children } < /div> < /div>); } export interface DialogButtonsProps { children ? : JSX . Element ; } export function DialogButtons ( props ) { return < div className = "Dialog-button-bar" > { props . children } < /div>; } export class DialogActions { render ( ) { return < Dialog store = { dialogs } />; } } export class DialogManager extends DialogActions { @ observable showDialog = true ; @ observable dialogs : any [ ] = [ ] ; closeDialog ( idx ) { this . dialogs [ idx ] . showDialog = false ; if ( this . dialogs [ idx ] . onDismiss ) { this . dialogs [ idx ] . onDismiss ( ) ; } } getCurrentDialogState ( idx ) { return this . dialogs [ idx ] . showDialog ; } addDialog ( title , className , children , onDismiss ? ) { this . dialogs . push ( { title , className , children , onDismiss , showDialog : this . showDialog , } ) ; } } export const dialogs = new DialogManager ( ) ;