|
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162 |
- 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">×</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;
|