wba/frontend/src/js/widget/wb-dialog.js

import { h, Component, createRef } from 'preact';

class WBDialog extends Component {
  constructor(...args) {
    super(...args);
    this.modalRef = createRef();
  }

  show() {
    $(this.modalRef.current).modal();
  }

  hide() {
    $(this.modalRef.current).modal('hide');
  }

  componentWillUnmount() {
    $(this.modalRef.current).modal('hide');
  }

  render({ title, children, canAccept, accept, reject }) {
    return (
      <form class="m-0">
        <div class="modal" tabindex="-1" role="dialog" ref={ this.modalRef }>
          <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title">{ title }</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>

              <div class="modal-body">
                { children[0] }
              </div>

              <div class="modal-footer">
                { children[1] ? children[1] : [
                  <input type="submit" class="btn btn-primary" value="Accept"
                    onclick={ e => { e.preventDefault(); if (!canAccept()) return; this.hide(); accept(); } } />,
                  <button type="button" class="btn btn-secondary"
                    onclick={ () => { this.hide(); reject(); } }>Cancel</button>
                ] }
              </div>

            </div>
          </div>
        </div>
      </form>
    );
  }
}

WBDialog.defaultProps = {
  title: 'Dialog',
  accept: () => {},
  reject: () => {},
  canAccept: () => true
};

export default WBDialog;