Sweetalert: Muitos botões combinados com uma entrada retornam apenas o valor do botão

Criado em 31 out. 2017  ·  6Comentários  ·  Fonte: t4t5/sweetalert

A menos que esteja faltando alguma coisa na documentação, acho bobagem que, se eu criar um swal com vários botões com valores diferentes combinados com um campo de entrada, o valor de entrada não será retornado usando o código swal nativo. Isso realmente diminui o potencial que o SweetAlert tem a oferecer.

Comentários muito úteis

@ t4t5 Cada botão deve retornar o valor de entrada e o valor do botão. Especificamente para o meu caso de uso, estou usando SweetAlert para uma ferramenta de administração de servidor baseada na web e, mais especificamente, para avisar o administrador quando ele clicar no botão "banir" em um usuário. O alerta teria então três botões que eu preciso que retornem um valor de ("1d", "1w" ou "para sempre") para representar um período de tempo. Eu também preciso de um campo de texto de entrada para fornecer uma razão do por que um usuário está sendo banido. Com o clique de qualquer um desses botões, ele permitiria que meu retorno de chamada emparelhe o valor do botão que foi clicado com o valor de entrada para construir uma consulta de API de volta ao meu servidor para colocar um banimento com um motivo e quanto tempo o banimento deve durar.

Esperançosamente, esse caso de uso deve esclarecer a importância de retornar os dois valores. Ele permite que os desenvolvedores não precisem hackear as coisas ou criar dois alertas para realizar o que deveria ser um processo de uma etapa.

example

        banPlayer: function (data) {
            var swalField = document.createElement('input');
            swalField.setAttribute("placeholder", "Reason for ban");
            swal({
                title: 'Banning: ' + data.name,
                buttons: {
                    cancel: "Go back!",
                    day: {
                      text: "24hr",
                      visible: true,
                      closeModal: true
                    },
                    week: {
                      text: "1w",
                      visible: true,
                      closeModal: true
                    },
                    perm: {
                      text: "Forever",
                      visible: true,
                      closeModal: true
                    }
                  },
                  content: swalField,
                dangerMode: true
            }).then( value => {
                let reason = swalField.value;
                // build API query request and submit it
            });

O snippet acima é minha maneira "hacky" de obter o conteúdo e os valores dos botões. No entanto, conforme expresso anteriormente neste tópico, seria muito mais agradável que ele retornasse apenas os dois valores.

Todos 6 comentários

Você quer dizer que deseja que o botão de confirmação e algum outro botão retornem o valor da entrada? Você poderia explicar qual é exatamente o seu caso de uso? :)

@ t4t5 provavelmente tem a ver com este FIXME.

swal({
    buttons: {
        cancel: "Go back!",
        one: {
          text: "Button One",
          value: 1
        },
        two: {
          text: "Button Two",
          value: 2
        },
        three: {
          text: "Button Three",
          value: 3
        }
      },
      content: {
        element: "input",
        attributes: {
          placeholder: "What's your favorite food?",
          type: "text",
        },
      }
/*
 * Only returns one value, because input is overridden by buttons
 * so you never get the input's value and the button's value
 * just the button's value.
 */
}).then( value => {
    switch (value) {                  
        case 1:
            swal("You pressed one!")
            break;
        case 2:
            swal("You pressed two!")
            break;
        case 3:
            swal("You pressed three!")
            break;
        default:
            swal("Phew, got outta there.");
    }
});

Seria muito útil ter a capacidade de usar o valor do botão, bem como qualquer valor de entrada, para executar a lógica em vez de alertas de aninhamento e ter uma entrada inútil porque está sendo substituída por seus botões.

+1 para ter button value e content value

Se você definir uma das teclas do botão para "confirmar", ele retornará o valor da entrada. por exemplo:

swal({
  buttons: {
    cancel: "Go back!",
    one: {
      text: "Button One",
      value: 1
    },
    two: {
      text: "Button Two",
      value: 2
    },
    confirm: {
      text: "Button Three",
    }
  },
  content: {
    element: "input",
    attributes: {
      placeholder: "What's your favorite food?",
      type: "text",
    },
  }
})

Isso é suficiente para o seu caso de uso ou você quis dizer que cada botão deve retornar o valor de entrada e o valor do botão?

@ t4t5 Cada botão deve retornar o valor de entrada e o valor do botão. Especificamente para o meu caso de uso, estou usando SweetAlert para uma ferramenta de administração de servidor baseada na web e, mais especificamente, para avisar o administrador quando ele clicar no botão "banir" em um usuário. O alerta teria então três botões que eu preciso que retornem um valor de ("1d", "1w" ou "para sempre") para representar um período de tempo. Eu também preciso de um campo de texto de entrada para fornecer uma razão do por que um usuário está sendo banido. Com o clique de qualquer um desses botões, ele permitiria que meu retorno de chamada emparelhe o valor do botão que foi clicado com o valor de entrada para construir uma consulta de API de volta ao meu servidor para colocar um banimento com um motivo e quanto tempo o banimento deve durar.

Esperançosamente, esse caso de uso deve esclarecer a importância de retornar os dois valores. Ele permite que os desenvolvedores não precisem hackear as coisas ou criar dois alertas para realizar o que deveria ser um processo de uma etapa.

example

        banPlayer: function (data) {
            var swalField = document.createElement('input');
            swalField.setAttribute("placeholder", "Reason for ban");
            swal({
                title: 'Banning: ' + data.name,
                buttons: {
                    cancel: "Go back!",
                    day: {
                      text: "24hr",
                      visible: true,
                      closeModal: true
                    },
                    week: {
                      text: "1w",
                      visible: true,
                      closeModal: true
                    },
                    perm: {
                      text: "Forever",
                      visible: true,
                      closeModal: true
                    }
                  },
                  content: swalField,
                dangerMode: true
            }).then( value => {
                let reason = swalField.value;
                // build API query request and submit it
            });

O snippet acima é minha maneira "hacky" de obter o conteúdo e os valores dos botões. No entanto, conforme expresso anteriormente neste tópico, seria muito mais agradável que ele retornasse apenas os dois valores.

Outro exemplo seria um Modal ( closeOnEsc: false, closeOnClickOutside: false ) com um campo de entrada e dois botões: confirmar + cancelar. Vou usar a solução @JayHerlth por enquanto. Seria melhor se o parâmetro-valor for um objeto se {botões e conteúdo} estiver definido.

Esta página foi útil?
0 / 5 - 0 avaliações

Questões relacionadas

voodoo6 picture voodoo6  ·  4Comentários

waldyrious picture waldyrious  ·  5Comentários

AlexV525 picture AlexV525  ·  4Comentários

fracz picture fracz  ·  4Comentários

Untit1ed picture Untit1ed  ·  5Comentários