@kevlid/discordmenus 0.1.3 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kevlid/discordmenus",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Components v2 settings menus for Discord bots",
   "main": "src/index.js",
   "types": "index.d.ts",

package/src/handle/component.js

@@ -312,8 +312,8 @@ async function handleComponent(interaction, menu, menu_key, renderMenu) {
         }
     }
 
-    const category = parseInt(options.get("cat") ?? 0);
-    const page = parseInt(options.get("page") ?? 0);
+    let category = parseInt(options.get("cat") ?? 0);
+    let page = parseInt(options.get("page") ?? 0);
     const action = values[1];
 
     let result;
@@ -362,7 +362,15 @@ async function handleComponent(interaction, menu, menu_key, renderMenu) {
     ) {
         const optionKey = values[0];
         const selected = Array.isArray(interactionData.values) ? interactionData.values : [];
-        const opt = menu.getOption(category, page, optionKey);
+        let opt = menu.getOption(category, page, optionKey);
+        if (!opt) {
+            const found = menu.findOption(optionKey);
+            if (found) {
+                opt = found.option;
+                category = found.category;
+                page = found.page;
+            }
+        }
         const maxSel = Number(opt?.maxValues);
         const multi = Number.isFinite(maxSel) && maxSel > 1;
         let saveValue = multi ? [...selected] : selected[0] ?? null;

package/src/menuInstance.js

@@ -108,6 +108,20 @@ class MenuInstance {
         return page.options.find(o => o.key === optionKey) ?? null;
     }
 
+    findOption(optionKey) {
+        for (let cat = 0; cat < this.pages.length; cat++) {
+            const categoryPages = this.pages[cat];
+            for (let page = 0; page < categoryPages.length; page++) {
+                const p = categoryPages[page];
+                const opt = p.options?.find(o => o.key === optionKey) ?? null;
+                if (opt) {
+                    return { option: opt, category: cat, page };
+                }
+            }
+        }
+        return null;
+    }
+
     getNavigationTargets(category, index) {
         const categoryPages = this.pages[category];
         const hasPrevCategory = category > 0;

package/src/render/selectMenu.js

@@ -1 +1,83 @@
-const { OptionTypes } = require("../utils/types");
    if (Array.isArray(currentValue)) {
        return currentValue;
    }
    if (currentValue != null) {
        return [currentValue];
    }
    return [];
    const ctx = { userId, category, page };
    const customId = encodeId(menuKey, [opt.key, opt.type], ctx);
    const component = {
        type: opt.selectType,
        custom_id: customId,
        min_values: opt.minValues,
        max_values: opt.maxValues,
    };
    if (opt.placeholder != null) {
        component.placeholder = opt.placeholder;
    }
    if (opt.type === OptionTypes.StringSelect) {
        const selectedValues = toIdArray(currentValue);
        component.options = opt.choices.map(c => ({
            label: c.label,
            value: c.value,
            description: c.description,
            default: selectedValues.includes(c.value),
        }));
    }
    if (opt.type === OptionTypes.UserSelect) {
        const ids = toIdArray(currentValue);
        if (ids.length > 0) {
            component.default_values = ids.map(id => ({ id, type: "user" }));
        }
    }
    if (opt.type === OptionTypes.RoleSelect) {
        const ids = toIdArray(currentValue);
        if (ids.length > 0) {
            component.default_values = ids.map(id => ({ id, type: "role" }));
        }
    }
    if (opt.type === OptionTypes.ChannelSelect) {
        if (opt.channelTypes && opt.channelTypes.length > 0) {
            component.channel_types = opt.channelTypes;
        }
        const ids = toIdArray(currentValue);
        if (ids.length > 0) {
            component.default_values = ids.map(id => ({ id, type: "channel" }));
        }
    }
    return component;
    const lines = [`**${opt.title}**`];
    if (opt.description) {
        lines.push(`-# ${opt.description}`);
    }
    const textDisplay = renderTextDisplay(lines.join("\n"));
    const selectMenu = renderSelectMenuComponent(menuKey, opt, currentValue, userId, category, page);
    const actionRow = renderActionRow(selectMenu);
    return [textDisplay, actionRow, renderSeparator()];
+const { OptionTypes } = require("../utils/types");
+const { renderTextDisplay, renderActionRow, renderSeparator } = require("./utils");
+const { encodeId } = require("../utils/customIds");
+
+function toIdArray(currentValue) {
+    if (Array.isArray(currentValue)) {
+        return currentValue;
+    }
+    if (currentValue != null) {
+        return [currentValue];
+    }
+    return [];
+}
+
+function renderSelectMenuComponent(menuKey, opt, currentValue, userId, category, page) {
+    // Stateless: do not depend on current rendered page in the custom id.
+    // The handler can locate the option by key in the built menu.
+    const ctx = { u: userId };
+    const customId = encodeId(menuKey, [opt.key, opt.type], ctx);
+
+    const component = {
+        type: opt.selectType,
+        custom_id: customId,
+        min_values: opt.minValues,
+        max_values: opt.maxValues,
+    };
+
+    if (opt.placeholder != null) {
+        component.placeholder = opt.placeholder;
+    }
+
+    if (opt.type === OptionTypes.StringSelect) {
+        const selectedValues = toIdArray(currentValue);
+        component.options = opt.choices.map(c => ({
+            label: c.label,
+            value: c.value,
+            description: c.description,
+            default: selectedValues.includes(c.value),
+        }));
+    }
+
+    if (opt.type === OptionTypes.UserSelect) {
+        const ids = toIdArray(currentValue);
+        if (ids.length > 0) {
+            component.default_values = ids.map(id => ({ id, type: "user" }));
+        }
+    }
+
+    if (opt.type === OptionTypes.RoleSelect) {
+        const ids = toIdArray(currentValue);
+        if (ids.length > 0) {
+            component.default_values = ids.map(id => ({ id, type: "role" }));
+        }
+    }
+
+    if (opt.type === OptionTypes.ChannelSelect) {
+        if (opt.channelTypes && opt.channelTypes.length > 0) {
+            component.channel_types = opt.channelTypes;
+        }
+        const ids = toIdArray(currentValue);
+        if (ids.length > 0) {
+            component.default_values = ids.map(id => ({ id, type: "channel" }));
+        }
+    }
+
+    return component;
+}
+
+function renderSelectMenuOption(menuKey, opt, currentValue, userId, category, page) {
+    const lines = [`**${opt.title}**`];
+
+    if (opt.description) {
+        lines.push(`-# ${opt.description}`);
+    }
+
+    const textDisplay = renderTextDisplay(lines.join("\n"));
+    const selectMenu = renderSelectMenuComponent(menuKey, opt, currentValue, userId, category, page);
+    const actionRow = renderActionRow(selectMenu);
+
+    return [textDisplay, actionRow, renderSeparator()];
+}
+
+module.exports = { renderSelectMenuOption };