Modal Manager

example.jsx

import React, { Component } from 'react'
import { Alert } from '@blueprintjs/core'

import ModalManager from './modalManager'

class Example extends Component {
  handle = (modal) => async () => {
    const result = await modal.result()
    alert(result)
  }
  
  render () {
    return (
      <div>
        <button onClick={this.handle(this.modal1)}>Open Modal 1</button> <button onClick={this.handle(this.modal2)}>Open Modal 2</button>
        <hr />
        <ModalManager ref={el => this.modal1 = el}>
          {({ open, handleAction }) => (
            <Alert
              cancelButtonText='Cancel'
              confirmButtonText='Confirm'
              isOpen={open}
              onCancel={handleAction('cancel 1')}
              onConfirm={handleAction('confirm 1')}
            >
              <p>Are you sure?</p>
            </Alert>
          )}
        </ModalManager>
        <ModalManager ref={el => this.modal2 = el}>
          {({ open, handleAction }) => (
            <Alert
              cancelButtonText='Cancel'
              confirmButtonText='Confirm'
              isOpen={open}
              onCancel={handleAction('cancel 2')}
              onConfirm={handleAction('confirm 2')}
            >
              <p>Are you sure?</p>
            </Alert>
          )}
        </ModalManager>
      </div>
    )
  }
}

export default Example

modalManager.jsx

import React, { Component } from 'react'

class ModalManager extends Component {
  state = {
    open: false
  }

  result = () => {
    this.setState({ open: true })
    return new Promise(resolve => { this.resolve = resolve })
  }

  close () {
    this.setState({ open: false })
  }

  handleAction = action => _ => {
    this.close()
    this.resolve(action)
  }

  render () {
    const { children } = this.props
    const handleAction = this.handleAction

    return children({ ...this.props, ...this.state, handleAction })
  }
}

export default ModalManager