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

import { h, Component } from 'preact';

class WBDialog extends Component {
  constructor(...args) {
    super(...args);
    this.state.id = uuid.v4();
  }

  show() {
    const { id } = this.state;
    $('#' + id).modal();
  }

  hide() {
    const { id } = this.state;
    $('#' + id).modal('hide');
  }

  render({ title, children, accept, reject }, { id }) {
    return (
      <form class="m-0">
        <div class="modal" id={ id } tabindex="-1" role="dialog">
          <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(); 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': () => {}
};

export default WBDialog;