insomnia/packages/insomnia-app/app/ui/components/modals/ask-modal.js

import React, {PureComponent} from 'react';
import autobind from 'autobind-decorator';
import Modal from '../base/modal';
import ModalBody from '../base/modal-body';
import ModalHeader from '../base/modal-header';
import ModalFooter from '../base/modal-footer';

@autobind
class AskModal extends PureComponent {
  constructor (props) {
    super(props);

    this.state = {
      title: '',
      message: ''
    };
  }

  _setModalRef (m) {
    this.modal = m;
  }

  _setYesButtonRef (n) {
    this.yesButton = n;
  }

  _handleYes () {
    this.hide();
    this._doneCallback && this._doneCallback(true);
    this._promiseCallback(true);
  }

  _handleNo () {
    this.hide();
    this._doneCallback && this._doneCallback(false);
    this._promiseCallback(false);
  }

  hide () {
    this.modal.hide();
  }

  show (options = {}) {
    const {
      title,
      message,
      onDone
    } = options;

    this._doneCallback = onDone;

    this.setState({title, message});

    this.modal.show();

    setTimeout(() => {
      this.yesButton && this.yesButton.focus();
    }, 100);

    return new Promise(resolve => {
      this._promiseCallback = resolve;
    });
  }

  render () {
    const {message, title} = this.state;

    return (
      <Modal noEscape ref={this._setModalRef} closeOnKeyCodes={[13]}>
        <ModalHeader>{title || 'Confirm?'}</ModalHeader>
        <ModalBody className="wide pad">
          {message}
        </ModalBody>
        <ModalFooter>
          <div>
            <button className="btn" onClick={this._handleNo}>
              No
            </button>
            <button ref={this._setYesButtonRef} className="btn" onClick={this._handleYes}>
              Yes
            </button>
          </div>
        </ModalFooter>
      </Modal>
    );
  }
}

AskModal.propTypes = {};

export default AskModal;