oceanic-component-helper
Version:
Use Discord Components with style. This is designed for Oceanic.js but has no runtime dependencies! If support for raw components is added in future, it certainly should support Discord.js and Dysnomia too.
223 lines (222 loc) • 8.7 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ActionRow = ActionRow;
exports.TextButton = TextButton;
exports.URLButton = URLButton;
exports.PremiumButton = PremiumButton;
exports.StringSelect = StringSelect;
exports.SelectOption = SelectOption;
exports.LineInput = LineInput;
exports.ParagraphInput = ParagraphInput;
exports.UserSelect = UserSelect;
exports.RoleSelect = RoleSelect;
exports.MentionableSelect = MentionableSelect;
exports.ChannelSelect = ChannelSelect;
exports.Section = Section;
exports.Text = Text;
exports.Thumbnail = Thumbnail;
exports.Gallery = Gallery;
exports.GalleryItem = GalleryItem;
exports.File = File;
exports.Spacer = Spacer;
exports.Divider = Divider;
exports.Container = Container;
/**
* Create an {@link ComponentTypes.ACTION_ROW | ACTION_ROW} component.
* @param items a list of message or modal components
* @param props optional properties (id)
* @returns an {@link ActionRowBase} object with item type inferred.
*/
function ActionRow(items = [], props) {
// enums are inlined so there are no runtime dependencies
return { ...props, components: items, type: 1 };
}
/**
* Create a {@link ComponentTypes.BUTTON | BUTTON} component with a custom ID.
* Clicks can be handled with {@link ClientEvents.interactionCreate}.
* @param label text to display on the button
* @param customID custom ID to handle interactions
* @param props optional properties (disabled, emoji, id, style)
* @returns a {@link TextButton} object
*/
function TextButton(label, customID, props) {
return { ...props, label, customID, style: props?.style ?? 2 /* SECONDARY */, type: 2 };
}
/**
* Create a {@link ComponentTypes.BUTTON | BUTTON} component with the {@link ButtonStyles.LINK | LINK} style.
* @param label text to display on the button
* @param url URL to open on click
* @param props optional properties (disabled, emoji, id)
* @returns a {@link URLButton} object
*/
function URLButton(label, url, props) {
return { ...props, label, url, style: 5, type: 2 };
}
/**
* Create a {@link ComponentTypes.BUTTON | BUTTON} component with the {@link ButtonStyles.PREMIUM | PREMIUM} style.
* @param skuID identifier for a purchasable [SKU](https://discord.com/developers/docs/resources/sku)
* @param props optional properties (disabled, id)
* @returns a {@link PremiumButton} object
*/
function PremiumButton(skuID, props) {
return { ...props, skuID, style: 6, type: 2 };
}
/**
* Create a {@link ComponentTypes.STRING_SELECT | STRING_SELECT} component.
* Selection can be handled with {@link ClientEvents.interactionCreate}.
* @param customID custom ID to handle interactions
* @param options list of options
* @param props optional properties (disabled, id, maxValues, minValues, placeholder)
* @returns a {@link StringSelectMenu} object
*/
function StringSelect(customID, options = [], props) {
return { ...props, customID, options, type: 3 };
}
function SelectOption(label, value, props) {
return { ...props, label, value };
}
/**
* Create a {@link ComponentTypes.TEXT_INPUT | TEXT_INPUT} component with the {@link TextInputStyles.SHORT | SHORT} style.
* Submission can be handled with {@link ClientEvents.interactionCreate}.
* @param customID custom ID to handle interactions
* @param options list of options
* @param props optional properties (id, maxLength, minLength, placeholder, required, value)
* @returns a {@link TextInput} object
*/
function LineInput(label, customID, props) {
return { ...props, label, customID, style: 1 /* .SHORT */, type: 4 };
}
/**
* Create a {@link ComponentTypes.TEXT_INPUT | TEXT_INPUT} component with the {@link TextInputStyles.PARAGRAPH | PARAGRAPH} style.
* Submission can be handled with {@link ClientEvents.interactionCreate}.
* @param customID custom ID to handle interactions
* @param options list of options
* @param props optional properties (id, maxLength, minLength, placeholder, required, value)
* @returns a {@link TextInput} object
*/
function ParagraphInput(label, customID, props) {
return { ...props, label, customID, style: 2 /* .PARAGRAPH */, type: 4 };
}
/**
* Create a {@link ComponentTypes.USER_SELECT | USER_SELECT} component.
* Selection can be handled with {@link ClientEvents.interactionCreate}.
* @param customID custom ID to handle interactions
* @param props optional properties (defaultValues, disabled, id, maxValues, minValues, placeholder)
* @returns a {@link UserSelectMenu} object
*/
function UserSelect(customID, props) {
return { ...props, customID, type: 5 };
}
/**
* Create a {@link ComponentTypes.ROLE_SELECT | ROLE_SELECT} component.
* Selection can be handled with {@link ClientEvents.interactionCreate}.
* @param customID custom ID to handle interactions
* @param props optional properties (defaultValues, disabled, id, maxValues, minValues, placeholder)
* @returns a {@link RoleSelectMenu} object
*/
function RoleSelect(customID, props) {
return { ...props, customID, type: 6 };
}
/**
* Create a {@link ComponentTypes.MENTIONABLE_SELECT | MENTIONABLE_SELECT} component.
* Selection can be handled with {@link ClientEvents.interactionCreate}.
* @param customID custom ID to handle interactions
* @param props optional properties (defaultValues, disabled, id, maxValues, minValues, placeholder)
* @returns a {@link RoleSelectMenu} object
*/
function MentionableSelect(customID, props) {
return { ...props, customID, type: 7 };
}
/**
* Create a {@link ComponentTypes.CHANNEL_SELECT | CHANNEL_SELECT} component.
* Selection can be handled with {@link ClientEvents.interactionCreate}.
* @param customID custom ID to handle interactions
* @param props optional properties (defaultValues, disabled, id, maxValues, minValues, placeholder)
* @returns a {@link RoleSelectMenu} object
*/
function ChannelSelect(customID, channelTypes, props) {
return { ...props, customID, channelTypes, type: 8 };
}
/**
* Create a {@link ComponentTypes.SECTION | SECTION} component.
* @param rows 1 to 3 rows of text
* @param accessory thumnail or button appearing on the right
* @param props optional properties (id)
* @returns a {@link SectionComponent}
*/
function Section(rows, accessory, props) {
const components = rows.map(row => Text(row));
return { ...props, components, accessory, type: 9 };
}
/**
* Create a {@link ComponentTypes.TEXT_DISPLAY | TEXT_DISPLAY} component.
* @param content markdown text
* @param optional properties (id)
* @returns a {@link TextDisplayComponent}
*/
function Text(content, props) {
return { ...props, content, type: 10 };
}
/**
* Create a {@link ComponentTypes.THUMBNAIL | THUMBNAIL} component.
* @param url media URL
* @param props optional properties (description, id, spoiler)
* @returns a {@link ThumbnailComponent}
*/
function Thumbnail(url, props) {
return { ...props, media: { url }, type: 11 };
}
/**
* Create a {@link ComponentTypes.MEDIA_GALLERY | MEDIA_GALLERY} component.
* @param url media URL
* @param props optional properties (id)
* @returns a {@link MediaGalleryComponent}
*/
function Gallery(items = [], props) {
return { ...props, items, type: 12 };
}
/**
* Create a media gallery item.
* @param url media URL
* @param props optional properties (description, spoiler)
* @returns a {@link MediaGalleryItem}
*/
function GalleryItem(url, props) {
return { ...props, media: { url } };
}
/**
* Create a {@link ComponentTypes.FILE | FILE} component.
* @param file the filename used in {@link CreateMessageOptions.files} - without the attachment:// prefix
* @param props optional properties (id, spoiler)
* @returns a {@link FileComponent}
*/
function File(file, props) {
return { ...props, file: { url: "attachment://" + file }, type: 13 };
}
/**
* Create a non-divider {@link ComponentTypes.SEPARATOR | SEPARATOR} component.
* @param spacing spacing size
* @param props optional properties (id)
* @returns a {@link SeparatorComponent}
*/
function Spacer(spacing, props) {
return { ...props, spacing, divider: false, type: 14 };
}
/**
* Create a divider {@link ComponentTypes.SEPARATOR | SEPARATOR} component.
* @param spacing spacing size
* @param props optional properties (id)
* @returns a {@link SeparatorComponent}
*/
function Divider(spacing, props) {
return { ...props, spacing, divider: true, type: 14 };
}
/**
* Create a {@link ComponentTypes.CONTAINER | CONTAINER} component.
* @param items child components to appear in the container
* @param props optional properties (accentColor, id, spoiler)
* @returns a {@link ContainerComponent}
*/
function Container(items = [], props) {
return { ...props, components: items, type: 17 };
}