feat: allow setting buttons

imranbarbhuiya · Feb 19, 2022 · 908aa44 · 908aa44
1 parent 0ee379b
commit 908aa44
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 49 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1,2 +1 @@
-dist
-example
+**/*.js
diff --git a/example/index.js b/example/index.js
@@ -20,5 +20,5 @@ client.on("interactionCreate", (interaction) => {
   }
 });
 
-// change TOKEN by your own token from <https://discord.com/developers/applications>
-client.login("TOKEN");
+// set your discord token in env with name `DISCORD_TOKEN`. See <https://discord.com/developers/applications> to get the token.
+client.login(process.env.DISCORD_TOKEN);
diff --git a/readme.md b/readme.md
@@ -264,6 +264,22 @@ Change all the button style
 pagination.setButtonStyle("SECONDARY");
 ```
 
+#### Add or remove buttons
+
+`Pagination` class have a property `buttons` which stores all the buttons with keys `first`, `prev`, `next` and `last`. If you want to add one more you can add it with any key.
+
+```js
+pagination.buttons = { ...pagination.buttons, extra: new MessageButton() };
+```
+
+If you want to remove some button then you can set the buttons to only these buttons.
+
+```js
+pagination.buttons = { prev: new MessageButton(), next: new MessageButton() };
+```
+
+If you are adding an extra button then make sure it's key isn't `first`, `prev`, `next`, or `last` or it'll be used as to paginate between different pages.
+
 #### Add Action row
 
 Add some action rows above or below the pagination button row
@@ -344,11 +360,6 @@ pagination.paginate(message);
 If you are migrating from other lib where you use to set multiple embeds at the same time,
 then we also have a similar method called [Pagination#setEmbeds](https://imranbarbhuiya.github.io/pagination.djs/classes/Pagination.html#setEmbeds), where you can pass your embeds and use [render()](https://imranbarbhuiya.github.io/pagination.djs/classes/Pagination.html#render) method and pagination will take care of the rest.
 
-## Note
-
-- If you have a global Button Interaction handler then you can ignore the interactions with customId starting with `paginate-`.
-- When adding an additional action row or button, don't set the custom id to any of the following: `paginate-first`, `paginate-prev`, `paginate-next`, `paginate-last`.
-
 ## License
 
 MIT

diff --git a/src/Pagination.ts b/src/Pagination.ts
@@ -147,31 +147,32 @@ export class Pagination extends PaginationEmbed {
    */
   paginate(message: Message): this {
     const collector = message.createMessageComponentCollector({
-      filter: ({ customId }) => customId.startsWith("paginate-"),
+      filter: ({ customId }) =>
+        Object.values(this.buttons).some((b) => b.customId === customId),
       idle: this.idle,
     });
 
     collector.on("collect", async (i) => {
+      // here filter isn't used just to avoid the `interaction failed` error
       if (
         this.authorizedUsers.length &&
         !this.authorizedUsers.includes(i.user.id)
       ) {
         return i.deferUpdate();
       }
 
-      // here filter isn't used just to avoid the `interaction failed` error
       if (!i.isButton()) return;
 
-      if (i.customId === "paginate-first") {
+      if (i.customId === this.buttons.first?.customId) {
         this.goFirst(i);
       }
-      if (i.customId === "paginate-prev") {
+      if (i.customId === this.buttons.prev?.customId) {
         this.goPrev(i);
       }
-      if (i.customId === "paginate-next") {
+      if (i.customId === this.buttons.next?.customId) {
         this.goNext(i);
       }
-      if (i.customId === "paginate-last") {
+      if (i.customId === this.buttons.last?.customId) {
         this.goLast(i);
       }
     });

diff --git a/src/PaginationEmbed.ts b/src/PaginationEmbed.ts
@@ -174,13 +174,12 @@ export class PaginationEmbed extends MessageEmbed {
 
   /**
    * The pagination buttons.
-   * @private
    */
-  private buttons!: {
-    first: MessageButton;
-    prev: MessageButton;
-    next: MessageButton;
-    last: MessageButton;
+  public buttons!: {
+    first?: MessageButton;
+    prev?: MessageButton;
+    next?: MessageButton;
+    last?: MessageButton;
   };
 
   /**
@@ -848,20 +847,15 @@ export class PaginationEmbed extends MessageEmbed {
         .setStyle(this.buttonInfo.last.style),
     };
     if (this.totalEntry <= this.limit) {
-      this.buttons.first.setDisabled(true);
-      this.buttons.prev.setDisabled(true);
-      this.buttons.last.setDisabled(true);
-      this.buttons.next.setDisabled(true);
+      this.buttons.first?.setDisabled(true);
+      this.buttons.prev?.setDisabled(true);
+      this.buttons.last?.setDisabled(true);
+      this.buttons.next?.setDisabled(true);
     } else if (!this.loop) {
-      this.buttons.first.setDisabled(true);
-      this.buttons.prev.setDisabled(true);
+      this.buttons.first?.setDisabled(true);
+      this.buttons.prev?.setDisabled(true);
     }
-    this.mainActionRow.setComponents(
-      this.buttons.first,
-      this.buttons.prev,
-      this.buttons.next,
-      this.buttons.last
-    );
+    this.mainActionRow.setComponents(...this.buttons);
     this.actionRows = [this.mainActionRow];
     if (this.extraRows.length > 0) {
       this.extraRows.forEach((row) => {
@@ -968,11 +962,11 @@ export class PaginationEmbed extends MessageEmbed {
   protected goFirst(i: ButtonInteraction): ButtonInteraction {
     this.currentPage = 1;
     if (!this.loop) {
-      this.buttons.first.setDisabled(true);
-      this.buttons.prev.setDisabled(true);
+      this.buttons.first?.setDisabled(true);
+      this.buttons.prev?.setDisabled(true);
     }
-    this.buttons.next.setDisabled(false);
-    this.buttons.last.setDisabled(false);
+    this.buttons.next?.setDisabled(false);
+    this.buttons.last?.setDisabled(false);
 
     this.goToPage(1);
 
@@ -996,11 +990,11 @@ export class PaginationEmbed extends MessageEmbed {
   protected goPrev(i: ButtonInteraction): ButtonInteraction {
     this.currentPage--;
     if (!this.loop) {
-      this.buttons.first.setDisabled(this.currentPage === 1);
-      this.buttons.prev.setDisabled(this.currentPage === 1);
+      this.buttons.first?.setDisabled(this.currentPage === 1);
+      this.buttons.prev?.setDisabled(this.currentPage === 1);
     }
-    this.buttons.next.setDisabled(false);
-    this.buttons.last.setDisabled(false);
+    this.buttons.next?.setDisabled(false);
+    this.buttons.last?.setDisabled(false);
     this.goToPage(this.currentPage);
     i.update(this.payload);
     return i;
@@ -1021,13 +1015,13 @@ export class PaginationEmbed extends MessageEmbed {
    */
   protected goNext(i: ButtonInteraction): ButtonInteraction {
     this.currentPage++;
-    this.buttons.prev.setDisabled(false);
-    this.buttons.first.setDisabled(false);
+    this.buttons.prev?.setDisabled(false);
+    this.buttons.first?.setDisabled(false);
     if (!this.loop) {
-      this.buttons.next.setDisabled(
+      this.buttons.next?.setDisabled(
         this.currentPage === Math.ceil(this.totalEntry / this.limit)
       );
-      this.buttons.last.setDisabled(
+      this.buttons.last?.setDisabled(
         this.currentPage === Math.ceil(this.totalEntry / this.limit)
       );
     }
@@ -1051,11 +1045,11 @@ export class PaginationEmbed extends MessageEmbed {
    */
   protected goLast(i: ButtonInteraction): ButtonInteraction {
     this.currentPage = Math.ceil(this.totalEntry / this.limit);
-    this.buttons.prev.setDisabled(false);
-    this.buttons.first.setDisabled(false);
+    this.buttons.prev?.setDisabled(false);
+    this.buttons.first?.setDisabled(false);
     if (!this.loop) {
-      this.buttons.next.setDisabled(true);
-      this.buttons.last.setDisabled(true);
+      this.buttons.next?.setDisabled(true);
+      this.buttons.last?.setDisabled(true);
     }
     this.goToPage(this.currentPage);
     i.update(this.payload);