Componentes de construcción

Los componentes se construyen con un generador, que es una clase de JavaScript, la cual lo representa. Dentro de este generador, puedes personalizar el componente para que sea de texto o color.

Existen diferentes tipos de generadores de componentes con distintas personalizaciones, pero todos tienen una propiedad común: el Id personalizado. Un identificador único que se utiliza para gestionar las interacciones del componente.

ActionRow

Todos los generadores se envían dentro de una ActionRow. Cada mensaje puede contener un máximo de 5 filas de acción.

Aquí se muestra cómo crear una ActionRow básica:

import { ActionRow } from 'seyfert';

const row = new ActionRow()

  .setComponents([])

  .addComponents();

Construyendo cada componente

Ahora vamos a construir cada tipo de componente y establecerlo dentro de una ActionRow:

Botones

Una ActionRow no debe contener más de 5 botones.

import { ActionRow, Button } from 'seyfert';
import { ButtonStyle } from 'seyfert/lib/types';

const button = new Button()
  .setCustomId('primer-boton')
  .setStyle(ButtonStyle.Primary)
  .setLabel('Primer Botón');

const row = new ActionRow<Button>().setComponents([button]);

Menús Select

Una ActionRow no debe contener más de un menú select.

Existen diferentes tipos de menús select: StringSelectMenu, UserSelectMenu, RoleSelectMenu, ChannelSelectMenu y MentionableSelectMenu.

Vamos a crear diferentes filas de acción para cada menú select.

import {
  ActionRow,
  StringSelectMenu,
  StringSelectOption,
  UserSelectMenu,
  RoleSelectMenu,
  ChannelSelectMenu,
  MentionableSelectMenu
} from 'seyfert';

const stringMenu = new StringSelectMenu()
  .setCustomId('menu-de-cadenas')
  .setPlaceholder('Selecciona una opción de cadena')
  .addOption(
    new StringSelectOption().setLabel('Opción 1').setValue('1'),
    new StringSelectOption().setLabel('Opción 2').setValue('2')
  );

const stringRow = new ActionRow<StringSelectMenu>().setComponents([stringMenu]);

const userMenu = new UserSelectMenu()
  .setCustomId('menu-de-usuarios')
  .setPlaceholder('Selecciona un usuario')
  //id de usuarios
  .setDefaultUsers('123456789', '987654321');

const userRow = new ActionRow<UserSelectMenu>().setComponents([userMenu]);

const roleMenu = new RoleSelectMenu()
  .setCustomId('menu-de-roles')
  .setPlaceholder('Selecciona un rol')
  //id de roles
  .setDefaultRoles('123456789', '987654321');

const roleRow = new ActionRow<RoleSelectMenu>().setComponents([roleMenu]);

const channelMenu = new ChannelSelectMenu()
  .setCustomId('menu-de-canales')
  .setPlaceholder('Selecciona un canal')
  //id de canales
  .setDefaultChannels('123456789', '987654321');

const channelRow = new ActionRow<ChannelSelectMenu>().setComponents([channelMenu]);

const mentionableMenu = new MentionableSelectMenu()
  .setCustomId('menu-de-mencionables')
  .setPlaceholder('Selecciona un mencionable')
  //id de mencionables (rol o usuario)
  .setDefaultMentionables(
    { type: 'User', id: '123456789' },
    { type: 'Role', id: '987654321' }
  );

const mentionableRow = new ActionRow<MentionableSelectMenu>().setComponents([mentionableMenu]);

Enviando los componentes

Después de crear los componentes, debes enviar la ActionRow al campo de componentes. Puedes ver un ejemplo a continuación:

import { Declare, Command, type CommandContext, ActionRow, Button } from 'seyfert';
import { ButtonStyle } from 'seyfert/lib/types';

@Declare({
  name: 'ping',
  description: 'Muestra el ping con Discord'
})
export default class PingCommand extends Command {

  async run(ctx: CommandContext) {
    // latencia promedio entre fragmentos
    const ping = ctx.client.gateway.latency;

    const row = new ActionRow()
      .setComponents([
        new Button().setCustomId('pingbtn').setLabel(`Ping: ${ping}`).setStyle(ButtonStyle.Primary)
      ])

    await ctx.write({
      content: `El ping es \`${ping}\``,
      components: [row]
    });
  }
}