Modals
Modals can also be created in Seyfert. They are created with a builder like other components do and then TextInput
components, inside an ActionRow
, are attached to it.
Here is an example of how to create a modal with two text inputs:
1import { Modal, TextInput, ActionRow } from 'seyfert';2
3import { TextInputStyle } from 'seyfert/lib/types';4
5const nameInput = new TextInput()6 .setCustomId('name')7 .setStyle(TextInputStyle.Short)8 .setLabel('Name');9
10const row1 = new ActionRow<TextInput>().setComponents([nameInput]);11
12const ageInput = new TextInput()13 .setCustomId('age')14 .setStyle(TextInputStyle.Short)15 .setLabel('Age');16
17const row2 = new ActionRow<TextInput>().setComponents([ageInput]);18
19const modal = new Modal()20 .setCustomId('mymodal')21 .setTitle('My Modal')22 .setComponents([row1, row2]);
Handling Modals
To handle modals, as they aren’t components, Seyfert provides ModalCommmand
class which has the same logic as the ComponentCommand
class.
1import { ModalCommand, type ModalSubmitInteraction } from 'seyfert';2
3export default class MyModal extends ModalCommand {4 filter(context: ModalContext) {5 return context.customId === 'mymodal';6 }7
8 async run(context: ModalContext) {9 const interaction = context.interaction;10
11 //we are getting the textinput values by passing their custom id's in the getInputValue method.12
13 const name = interaction.getInputValue('name', true);14
15 const age = interaction.getInputValue('age', true);16
17 return context.write({18 content: `You are ${name} and have ${age} years`19 });20 }21}