Modals and notifications

In order to have same looking modals and notifications in each component, we decided to use sweetalert2 with semantic-ui.

This page describes how to create modals and notifications.

Preconditions

• Know how to style buttons with semantic-ui
• Use the sweetalert2 documentation as a basis

Remarks

• If you need a more complex modal then just use semantic-ui modal

How to

General

1. Just use JavaScript - no HTML in the render function needed
2. Make sure you set buttonsStyling to false buttonsStyling: false
3. Set the semantic-ui button classes you will need in confirmButtonClass and cancelButtonClass
4. Use functions of the component as callbacks (or then functions)

Callbacks

Every call returns a promise on which then could be applied. Just pass two functions to then: .then(() => {/* Confirmed */}, (reason) => {/* Canceled */}) Where reason in the second function could be the string cancel, overlay, close, or timer

Examples

Error

swal({
  title: 'Error',
  text: "Nooooooo",
  type: 'error',
  confirmButtonText: 'Confirmed',
  confirmButtonClass: 'negative ui button',
  buttonsStyling: false
})

Warning

swal({
  title: 'Warning',
  text: "This will not work",
  type: 'warning',
  confirmButtonText: 'Confirmed',
  confirmButtonClass: 'ui orange button',
  buttonsStyling: false
})

Success

swal({
  title: 'Success',
  text: "It worked!",
  type: 'success',
  confirmButtonText: 'Confirmed',
  confirmButtonClass: 'positive ui button',
  buttonsStyling: false
})

Decision

swal({
  title: 'Question',
  text: "A or B?",
  type: 'question',
  showCloseButton: true,
  showCancelButton: true,
  confirmButtonText: 'A',
  confirmButtonClass: 'ui olive button',
  cancelButtonText: 'B',
  cancelButtonClass: 'ui pink button',
  buttonsStyling: false
})

Remark: Optional close button on the right top corner

Self closing modal (Notification)

swal({
  type: 'info',
  title: 'Auto close alert!',
  text: 'I will close in 2 seconds.',
  timer: 2000,
  showCloseButton: false,
  showCancelButton: false,
  allowEscapeKey: false,
  showConfirmButton: false
});

Extra

• Instead of text you could use html in order to have styled content
• Decide on your own if allowEscapeKey and allowOutsideClick should be used

Complex modals

Use semantic-ui modals!

In that you have a structure:

<div role="dialog" class="ui modal" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc">
  <div class="header" id="dialog1Title">
    Modal Title
  </div>
  <div class="content" id="dialog1Desc">
    Your content. Like filechooser, slideshow or video.
  </div>
  <div class="actions">
    <div class="ui approve button" role="button" tabindex=0>OK</div>
    <div class="ui cancel button" role="button" tabindex=0>Cancel</div>
  </div>
</div>

On which you bind a button handling:

$('.ui.modal').modal({
    onDeny: function(){
        //console.log('modal cancelled');
        $('.ui.small.modal').modal('hide');//Added to remove duplicate modals
    },
    onApprove : function(data) {
        //console.log('modal clicked on approve', data);
        this.handleSubmit();
        $('.ui.small.modal').modal('hide');
    }
});

You could style how you want and need it. Also the buttons could be panels with stuff in there.