Как я могу добавить метод загрузки в диалоговое окно sweetalert2 через React JS?

Я пишу веб-проект, который записывает аудио и отправляет его на внутренний сервер.

После того, как пользователь закончил запись, я использую Swal.fire() в sweetalert2, чтобы показать сообщение об успешном завершении и получить ввод пользователя, который мне нужен для завершения процесса (заголовок PDF, который будет создан).

Когда пользователь нажимает кнопку отправки, на сервер отправляется запрос axios, что занимает несколько секунд.

Прямо сейчас в моем коде, когда нажимается кнопка «Отправить» сладкого оповещения, всплывающее окно закрывается, и пользователь должен просто ждать без какого-либо индикатора, указывающего, что страница ожидает ответа.

Мой вопрос: как я могу изменить содержимое всплывающего окна, чтобы пользователь знал о его загрузке, используя интерфейс sweetalert2 (или если есть лучший способ сделать это)?

Код Swal.fire():

const stopRecording = () => {
    // .. stop recording
    
    Swal.fire({
      icon: "success",
      title: '<span style="color: white">Recording Saved!</span>',
      text:
        "Please Enter the Title for the Output Audio Sheets...\n You can press cancel and record again",
      input: "text",
      showCancelButton: true,
      confirmButtonColor: "white",
      confirmButtonText: '<span style="color: #191919">Submit</span>',
      cancelButtonColor: "white",
      cancelButtonText: '<span style="color: #191919">Cancel</span>',
      customClass: "swal-confirm",
    }).then((result) => {
      if (!result.value) return;
      else {
        // .. getting the data and performing axios request
      }
    });
};

Теперь, когда вы прочитали код, я могу быть более конкретным. Метод Swal.fire().then() требует времени, и я хочу изменить окно, чтобы при его выполнении пользователь мог видеть индикатор выполнения или что-то в этом роде.


reactjs javascript axios loading sweetalert2
person אור גור אריה    schedule 26.03.2021    source источник
comment
можно сделать интервал или использовать axios onProgress, как объяснить здесь   -  person antoineso    schedule 26.03.2021

Ответы (1)


arrow_upward
0
arrow_downward

Я провел небольшое исследование и нашел решение.

На самом деле, у объекта sweetalert2 есть свойство как раз для подобных вещей, и оно называется preConfirm.

Он используется для отправки веб-запросов или загрузки некоторых данных прямо перед закрытием окна.

Кроме того, благодаря этому свойству я избегал использования метода .then(), что сделало код более элегантным и читабельным.

Мой код сейчас:

const saveRecording = (audioData) => {
    // .. stop and save recording

    Swal.fire({
      // Swal properties
      icon: "success",
      title: '<span style="color: white">Recording Saved!</span>',
      text:
        "Please Enter the Title for the Output Audio Sheets...\n You can press cancel and record again",
      input: "text",
      inputPlaceholder: "Enter Your Title Here",
      showCancelButton: true,

      // input validator
      inputValidator: (value) => {
        if (!value) {
          return "Title cannot be empty!";
        }
      },

      // styles
      confirmButtonColor: "white",
      confirmButtonText: '<span style="color: #191919">Submit</span>',
      cancelButtonColor: "white",
      cancelButtonText: '<span style="color: #191919">Cancel</span>',
      customClass: "swal-confirm",

      // This is my solution 
      preConfirm: (title) => {
        // .. axios request here using `title` as the input
      },
      allowOutsideClick: () => !Swal.isLoading(),
      showLoaderOnConfirm: true,
    });
  };

Вы можете взглянуть на официальный пример Sweetalert2 для выполнения AJAX запросов прямо здесь: https://sweetalert2.github.io/#ajax-request

person אור גור אריה    schedule 27.03.2021