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

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)

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