Modal e TextInput

O que são Modais e TextInputs?

Os Modais são componentes interativos no Discord que permitem coletar informações diretamente dos usuários. Eles podem conter diversos campos de entrada de texto, definidos pela classe TextInput. A classe Modal oferece versatilidade para criação por string, objeto ou desestruturação, enquanto o TextInput permite configurações detalhadas de campos de entrada.

Recursos Principais

Exemplos de Uso

Criação de Modal (Por String)

Exemplo de criação de modal com campos de texto usando string:


const modal = new Modal("Título do Modal", "modal_id", [
 new ActionRow().addComponents(
  new TextInput("Campo 1", "campo_1", 1, true, "Digite algo aqui"),
  new TextInput("Campo 2", "campo_2", 2, false, "Outro valor")
  )
]);

// Definindo a ação onSubmit
modal.onSubmit(interaction, (res) => {
  console.log("Campo 1:", res.getField("campo_1"));
  console.log("Campo 2:", res.getField("campo_2"));
});

Criação de Modal (Por Objeto)

Exemplo de criação de modal passando as configurações como objeto:


const modal = new Modal({
  title: "Título do Modal",
  custom_id: "modal_id",
  components: [
   new ActionRow().addComponents(
     new TextInput({
       label: "Campo 1",
       customId: "campo_1",
       style: 1,
       required: true,
       placeholder: "Digite algo"
     }),
     new TextInput({
       label: "Campo 2",
       customId: "campo_2",
       style: 2,
       placeholder: "Outro valor"
     })
    )
  ]
});

// Evento onSubmit
modal.onSubmit(interaction, (res) => {
  console.log("Campo 1:", res.getField("campo_1"));
  console.log("Campo 2:", res.getField("campo_2"));
});

Criação de Modal (Por Desestruturação)

Exemplo de modal utilizando métodos encadeados:


const modal = new Modal()
  .setTitle("Título do Modal")
  .setCustomId("modal_id")
  .addComponents(
    new ActionRow().addComponents(
      new TextInput()
        .setLabel("Campo 1")
        .setCustomId("campo_1")
        .setStyle(1)
        .setRequired(true)
        .setPlaceholder("Digite algo"),
      new TextInput()
        .setLabel("Campo 2")
        .setCustomId("campo_2")
        .setStyle(2)
        .setPlaceholder("Outro valor")
       )
   );

// Ação onSubmit
modal.onSubmit(interaction, async (res) => {
  console.log("Campo 1:", res.getField("campo_1"));
  console.log("Campo 2:", res.getField("campo_2"));
});

O Método onSubmit

O método onSubmit permite capturar e processar as interações do usuário com o modal. Ele oferece um mecanismo flexível para execução de ações após a submissão. 


// Exemplo de uso do método onSubmit
const modal = new Modal("Título do Modal", "modal_id", [
 new ActionRow().addComponents(
   new TextInput("Campo 1", "campo_1", 1),
   new TextInput("Campo 2", "campo_2", 2)
  )
]);

modal.onSubmit(interaction, (res) => {
  console.log("Campo 1:", res.getField("campo_1"));
  console.log("Campo 2:", res.getField("campo_2"));
}, 60000); // Tempo limite de 60 segundos para resposta