Миграция с SweetAlert на SweetAlert2

Миграция с библиотеки SweetAlert на её более современный и мощный аналог — SweetAlert2 — является важным шагом для большинства разработчиков, использующих всплывающие уведомления в своих веб-приложениях. SweetAlert, хоть и был популярен, давно не обновляется, что делает его менее гибким в сравнении с более новой версией библиотеки. SweetAlert2 обладает улучшенной функциональностью, производительностью и поддержкой современных браузеров, что делает миграцию актуальной.

Основные отличия между SweetAlert и SweetAlert2

  • Поддержка Promise: SweetAlert2 использует Promise API для работы с асинхронностью, что упрощает обработку событий, связанных с взаимодействием с пользователем.
  • Визуальные улучшения: SweetAlert2 предлагает больше настроек для кастомизации, включая поддержку анимации, тем и иконок.
  • Улучшенная совместимость: библиотека оптимизирована для работы в современных браузерах, поддерживает мобильные устройства и различные разрешения экрана.
  • Простота API: в отличие от старой версии, SweetAlert2 имеет улучшенную и более интуитивно понятную структуру API.

Установка SweetAlert2

Для начала работы с SweetAlert2, библиотеку необходимо установить. Если используется npm, можно установить её следующим образом:

npm install sweetalert2

Или, если проект использует CDN, достаточно подключить библиотеку через тег script:

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

Основы использования SweetAlert2

SweetAlert2 продолжает предоставлять возможности для создания всплывающих окон, но с гораздо большим набором опций. Основной синтаксис для создания простого уведомления выглядит следующим образом:

Swal.fire('Привет, мир!');

Это уведомление отобразится с простым сообщением. Библиотека автоматически обрабатывает отображение окна и его стилизацию.

Для создания окна с кнопками можно использовать:

Swal.fire({
  title: 'Вы уверены?',
  text: 'Вы не сможете вернуть эти изменения!',
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Да, удалить',
  cancelButtonText: 'Отменить'
}).then((result) => {
  if (result.isConfirmed) {
    console.log('Данные удалены');
  }
});

Этот пример показывает, как использовать различные параметры для настройки окна, включая возможность отмены действия и обработки результатов.

Параметры конфигурации

SweetAlert2 поддерживает обширный набор параметров для настройки всплывающих окон:

  • title — заголовок окна.
  • text — основное текстовое сообщение.
  • icon — иконка, которая может быть success, error, warning, info, question.
  • showCancelButton — флаг, который позволяет показывать кнопку отмены.
  • confirmButtonText и cancelButtonText — текст на кнопках подтверждения и отмены.
  • timer — автоматическое закрытие окна через заданное количество миллисекунд.
  • showClass и hideClass — настройка анимаций показа и скрытия.
  • footer — возможность добавления футера с дополнительной информацией или ссылками.

Асинхронная обработка с использованием Promise

SweetAlert2 позволяет удобно работать с асинхронными операциями, используя Promise. Рассмотрим пример с асинхронной функцией:

async function confirmAction() {
  const result = await Swal.fire({
    title: 'Подтвердите действие',
    text: 'Вы хотите выполнить это действие?',
    icon: 'question',
    showCancelButton: true,
    confirmButtonText: 'Подтвердить',
    cancelButtonText: 'Отмена'
  });

  if (result.isConfirmed) {
    // Действие подтверждено
    await executeAction();
    Swal.fire('Действие выполнено', '', 'success');
  }
}

Здесь используется async/await, что позволяет легко обрабатывать асинхронные операции после подтверждения действия пользователем.

Миграция из SweetAlert

Для миграции с оригинальной версии SweetAlert на SweetAlert2 необходимо учитывать несколько аспектов:

  1. Синтаксис вызова: В SweetAlert использовалась функция swal(), а в SweetAlert2 — Swal.fire(). Следовательно, нужно заменить все вызовы на новый формат.

    Старый код:

    swal("Привет, мир!");

    Новый код:

    Swal.fire('Привет, мир!');

  2. Параметры: Многие параметры, которые использовались в старой версии, были изменены или переименованы. Например, параметр type был заменён на icon в SweetAlert2. Нужно внимательно пройтись по документации и убедиться, что все параметры правильно обновлены.

    Старый код:

    swal({
  title: 'Ошибка!',
  text: 'Что-то пошло не так.',
  type: 'error'
});

    Новый код:

    Swal.fire({
  title: 'Ошибка!',
  text: 'Что-то пошло не так.',
  icon: 'error'
});

  3. Обработка событий: В SweetAlert2 используется Promise для обработки событий, в то время как в старой версии использовался колбэк. Например, обработку кнопки подтверждения и отмены можно выполнить с помощью .then() в SweetAlert2.

    Старый код:

    swal({
  title: 'Вы уверены?',
  text: 'Вы хотите удалить этот файл?',
  type: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Да',
  cancelButtonText: 'Отмена'
}, function(isConfirm) {
  if (isConfirm) {
    deleteFile();
  }
});

    Новый код:

    Swal.fire({
  title: 'Вы уверены?',
  text: 'Вы хотите удалить этот файл?',
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Да',
  cancelButtonText: 'Отмена'
}).then((result) => {
  if (result.isConfirmed) {
    deleteFile();
  }
});

Использование различных типов окон

SweetAlert2 поддерживает несколько типов окон, которые можно настроить через параметр icon. Это значительно расширяет возможности пользовательского интерфейса:

  • success — для успешных действий.
  • error — для отображения ошибок.
  • warning — для предупреждений.
  • info — для информативных сообщений.
  • question — для запросов.

Каждый тип окна автоматически применяет соответствующую иконку и стили.

Кастомизация и темы

SweetAlert2 позволяет настроить стиль и внешний вид уведомлений с помощью различных опций. Можно изменить цвет кнопок, фон окна, а также применить пользовательские стили для текста, иконок и других элементов.

Пример кастомизации:

Swal.fire({
  title: 'Настроенное окно',
  text: 'Это окно с кастомными стилями.',
  background: '#f0f0f0',
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Продолжить',
  cancelButtonText: 'Отменить'
});

Дополнительно, SweetAlert2 поддерживает темы и CSS-переменные, что позволяет полностью адаптировать внешний вид под конкретные требования приложения.

Заключение

Миграция с SweetAlert на SweetAlert2 — это логичный шаг для всех, кто использует библиотеку для создания всплывающих уведомлений. Новая версия обладает более мощным функционалом, улучшенной производительностью и совместимостью с современными стандартами. Обновлённое API и возможности для кастомизации делают SweetAlert2 не только удобным, но и более гибким инструментом для разработки.

Оглавление