Skip to content

v7.0.0

Compare
Choose a tag to compare
@limonte limonte released this 16 Nov 07:51

πŸ₯‡ This release is delivered because of the awesomeness of these people (ordered a-z): @ACupaJoe, @limonte, @samturrell, @toverux, @zenflow

πŸ”΄ Breaking change # 1 - useRejections

⚠️ useRejections is now false default, set it to true if you want backward compatibility with previous versions (<7.0.0)

Before you were handling dismissals in the rejection handler: [JSFIDDLE β†—]

swal({
  ...
}).then(
  value => {
    // handle confirm
  },
  dismiss => {
    // handle dismiss
  }
).catch(swal.noop)

Now you should handle both confirmations and dismissals in the fulfillment handler: [JSFIDDLE β†—]

swal({
  ...
}).then(result => {
  if (result.value) {
    // handle confirm
    console.log(result.value)
  } else {
    // handle dismiss, result.dismiss can be 'cancel', 'overlay', 'close', and 'timer'
    console.log(result.dismiss)
  }
})

In order to have painless backward compatibility with previous versions, use useRejections: true [JSFIDDLE β†—]

swal({
  useRejections: true           // <<<<<<------- BACKWARD COMPATIBILITY WITH v6.x
}).then(
  value => {
    // handle confirm
  },
  dismiss => {
    // handle dismiss
  }
).catch(swal.noop)

ℹ️ Since we are not rejecting promise by default, .catch(swal.noop) isn't needed anymore.

⚠️ useRejections is deprecated and will be removed in the next major release.

πŸ”΄ Breaking change # 2 - preConfirm

preConfirm shouldn't reject a promise with an error message, instead it should show an error with swal.showValidationError(message) and fulfill a promise:

Before:

preConfirm: (email) => {
  return new Promise((resolve, reject) => {
    if (email === 'taken@example.com') {
      reject('This email is already taken.')
    }
    resolve()
  })
}

After:

preConfirm: (email) => {
  return new Promise((resolve) => {
    if (email === 'taken@example.com') {
      swal.showValidationError('This email is already taken.')
    }
    resolve()
  })
}

πŸ”΄ Breaking change # 3 - inputValidator

inputValidator shouldn't reject a promise with an error message, instead, it should fulfill a promise with an error string:

Before:

inputValidator: (email) => {
  return new Promise((resolve, reject) => {
    if (email === 'taken@example.com') {
      reject('This email is already taken.')
    }
    resolve()
  })
}

After:

preConfirm: (email) => {
  return new Promise((resolve) => {
    if (email === 'taken@example.com') {
      resolve('This email is already taken.')
    }
    resolve()
  })
}

πŸ”΄ Breaking change # 4 - default entry point

  • default entry point is now dist/sweetalert2.all.js (#692 #612 #422).
    • before: import swal from 'sweetalert2/dist/sweetalert2.all.js'
    • now: import swal from 'sweetalert2'

⚠️ It's not needed to import CSS styles separately, they are included in dist/sweetalert2.all.js.

πŸŽ‰ New features

  • Ability to use with async/await (#485 #700)
const {value: name} = await swal({text: 'What is your name?', input: 'text'})
const {value: location} = await swal({text: 'Where are you from?', input: 'text'})

swal(`Hi ${name}, from ${location}!`)
  • Toasts/growl functionality (#663 #670)
swal({
  text: 'Your work has been saved',
  toast: true
})
  • backdrop parameter, default true (#680 #681)
swal({
  text: 'I will not add a backdrop to the document',
  backdrop: false
})

⚠️ Deprecated parameters

These parameter are now deprecated and will be removed in the next major release:

  • useRejections
  • expectRejections