From 908aa443cc84f74ecdcbf8696c6ffed2276d3fa8 Mon Sep 17 00:00:00 2001 From: Parbez Date: Sat, 19 Feb 2022 18:00:44 +0530 Subject: [PATCH] feat: allow setting buttons --- .eslintignore | 3 +- example/index.js | 4 +-- readme.md | 21 ++++++++++---- src/Pagination.ts | 13 +++++---- src/PaginationEmbed.ts | 62 +++++++++++++++++++----------------------- 5 files changed, 54 insertions(+), 49 deletions(-) diff --git a/.eslintignore b/.eslintignore index 74611db..cf44e14 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,2 +1 @@ -dist -example \ No newline at end of file +**/*.js \ No newline at end of file diff --git a/example/index.js b/example/index.js index 49824e1..5c832a7 100644 --- a/example/index.js +++ b/example/index.js @@ -20,5 +20,5 @@ client.on("interactionCreate", (interaction) => { } }); -// change TOKEN by your own token from -client.login("TOKEN"); +// set your discord token in env with name `DISCORD_TOKEN`. See to get the token. +client.login(process.env.DISCORD_TOKEN); diff --git a/readme.md b/readme.md index 4f42c04..e452bc9 100644 --- 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 index abc13a8..d2e78c2 100644 --- a/src/Pagination.ts +++ b/src/Pagination.ts @@ -147,11 +147,13 @@ 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) @@ -159,19 +161,18 @@ export class Pagination extends PaginationEmbed { 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 index 5112c0f..e484c3b 100644 --- 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);