Skip to content

Refactored pagination component #282

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
arhtudormorar merged 14 commits into from
Dec 18, 2025
Merged

Refactored pagination component #282

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
ff4647c
Refactored pagination comp
iuliacimpeanu Dec 12, 2025
7093f93
Refactored pagination ellipsis
iuliacimpeanu Dec 12, 2025
0493b3b
Work on pagination
arhtudormorar Dec 17, 2025
6f35f72
Refactor components
arhtudormorar Dec 17, 2025
e0b4800
Work on pagination
arhtudormorar Dec 17, 2025
956c74b
Fixed pagination story
arhtudormorar Dec 18, 2025
70f44ab
Move pagination to address-table
arhtudormorar Dec 18, 2025
25686b0
Update CHANGELOG
arhtudormorar Dec 18, 2025
06b2088
Try fix tests
arhtudormorar Dec 18, 2025
87df7cc
Remove log
arhtudormorar Dec 18, 2025
f001252
Remove unused contentclass
arhtudormorar Dec 18, 2025
5d5ca99
Remove logs
arhtudormorar Dec 18, 2025
0c18f1e
Minor edits
arhtudormorar Dec 18, 2025
752dd65
/gemini review
arhtudormorar Dec 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 16 additions & 49 deletions src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -179,18 +179,6 @@ export namespace Components {
"closeWithAnimation": () => Promise<unknown>;
"getEventBus": () => Promise<IEventBus>;
}
interface MvxPagination {
"class"?: string;
/**
* @default 1
*/
"currentPage": number;
/**
* @default false
*/
"isDisabled"?: boolean;
"totalPages": number;
}
interface MvxPaginationEllipsis {
/**
* @default false
Expand Down Expand Up @@ -371,10 +359,6 @@ export interface MvxLedgerIntroCustomEvent<T> extends CustomEvent<T> {
detail: T;
target: HTMLMvxLedgerIntroElement;
}
export interface MvxPaginationCustomEvent<T> extends CustomEvent<T> {
detail: T;
target: HTMLMvxPaginationElement;
}
export interface MvxPaginationEllipsisFormCustomEvent<T> extends CustomEvent<T> {
detail: T;
target: HTMLMvxPaginationEllipsisFormElement;
Expand All @@ -395,6 +379,10 @@ export interface MvxTransactionToastContentCustomEvent<T> extends CustomEvent<T>
detail: T;
target: HTMLMvxTransactionToastContentElement;
}
export interface MvxTransactionsTableCustomEvent<T> extends CustomEvent<T> {
detail: T;
target: HTMLMvxTransactionsTableElement;
}
export interface MvxWalletConnectScanCustomEvent<T> extends CustomEvent<T> {
detail: T;
target: HTMLMvxWalletConnectScanElement;
Expand Down Expand Up @@ -619,23 +607,6 @@ declare global {
prototype: HTMLMvxNotificationsFeedElement;
new (): HTMLMvxNotificationsFeedElement;
};
interface HTMLMvxPaginationElementEventMap {
"pageChange": number;
}
interface HTMLMvxPaginationElement extends Components.MvxPagination, HTMLStencilElement {
addEventListener<K extends keyof HTMLMvxPaginationElementEventMap>(type: K, listener: (this: HTMLMvxPaginationElement, ev: MvxPaginationCustomEvent<HTMLMvxPaginationElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
removeEventListener<K extends keyof HTMLMvxPaginationElementEventMap>(type: K, listener: (this: HTMLMvxPaginationElement, ev: MvxPaginationCustomEvent<HTMLMvxPaginationElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}
var HTMLMvxPaginationElement: {
prototype: HTMLMvxPaginationElement;
new (): HTMLMvxPaginationElement;
};
interface HTMLMvxPaginationEllipsisElement extends Components.MvxPaginationEllipsis, HTMLStencilElement {
}
var HTMLMvxPaginationEllipsisElement: {
Expand Down Expand Up @@ -781,7 +752,18 @@ declare global {
prototype: HTMLMvxTransactionToastProgressElement;
new (): HTMLMvxTransactionToastProgressElement;
};
interface HTMLMvxTransactionsTableElementEventMap {
"pageChange": number;
}
interface HTMLMvxTransactionsTableElement extends Components.MvxTransactionsTable, HTMLStencilElement {
addEventListener<K extends keyof HTMLMvxTransactionsTableElementEventMap>(type: K, listener: (this: HTMLMvxTransactionsTableElement, ev: MvxTransactionsTableCustomEvent<HTMLMvxTransactionsTableElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
removeEventListener<K extends keyof HTMLMvxTransactionsTableElementEventMap>(type: K, listener: (this: HTMLMvxTransactionsTableElement, ev: MvxTransactionsTableCustomEvent<HTMLMvxTransactionsTableElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}
var HTMLMvxTransactionsTableElement: {
prototype: HTMLMvxTransactionsTableElement;
Expand Down Expand Up @@ -892,7 +874,6 @@ declare global {
"mvx-multiversx-logo-icon": HTMLMvxMultiversxLogoIconElement;
"mvx-multiversx-symbol-icon": HTMLMvxMultiversxSymbolIconElement;
"mvx-notifications-feed": HTMLMvxNotificationsFeedElement;
"mvx-pagination": HTMLMvxPaginationElement;
"mvx-pagination-ellipsis": HTMLMvxPaginationEllipsisElement;
"mvx-pagination-ellipsis-form": HTMLMvxPaginationEllipsisFormElement;
"mvx-passkey-provider-icon": HTMLMvxPasskeyProviderIconElement;
Expand Down Expand Up @@ -1078,19 +1059,6 @@ declare namespace LocalJSX {
}
interface MvxNotificationsFeed {
}
interface MvxPagination {
"class"?: string;
/**
* @default 1
*/
"currentPage"?: number;
/**
* @default false
*/
"isDisabled"?: boolean;
"onPageChange"?: (event: MvxPaginationCustomEvent<number>) => void;
"totalPages"?: number;
}
interface MvxPaginationEllipsis {
/**
* @default false
Expand Down Expand Up @@ -1190,6 +1158,7 @@ declare namespace LocalJSX {
}
interface MvxTransactionsTable {
"class"?: string;
"onPageChange"?: (event: MvxTransactionsTableCustomEvent<number>) => void;
"transactions"?: TransactionRowType[];
}
interface MvxTrim {
Expand Down Expand Up @@ -1276,7 +1245,6 @@ declare namespace LocalJSX {
"mvx-multiversx-logo-icon": MvxMultiversxLogoIcon;
"mvx-multiversx-symbol-icon": MvxMultiversxSymbolIcon;
"mvx-notifications-feed": MvxNotificationsFeed;
"mvx-pagination": MvxPagination;
"mvx-pagination-ellipsis": MvxPaginationEllipsis;
"mvx-pagination-ellipsis-form": MvxPaginationEllipsisForm;
"mvx-passkey-provider-icon": MvxPasskeyProviderIcon;
Expand Down Expand Up @@ -1337,7 +1305,6 @@ declare module "@stencil/core" {
"mvx-multiversx-logo-icon": LocalJSX.MvxMultiversxLogoIcon & JSXBase.HTMLAttributes<HTMLMvxMultiversxLogoIconElement>;
"mvx-multiversx-symbol-icon": LocalJSX.MvxMultiversxSymbolIcon & JSXBase.HTMLAttributes<HTMLMvxMultiversxSymbolIconElement>;
"mvx-notifications-feed": LocalJSX.MvxNotificationsFeed & JSXBase.HTMLAttributes<HTMLMvxNotificationsFeedElement>;
"mvx-pagination": LocalJSX.MvxPagination & JSXBase.HTMLAttributes<HTMLMvxPaginationElement>;
"mvx-pagination-ellipsis": LocalJSX.MvxPaginationEllipsis & JSXBase.HTMLAttributes<HTMLMvxPaginationEllipsisElement>;
"mvx-pagination-ellipsis-form": LocalJSX.MvxPaginationEllipsisForm & JSXBase.HTMLAttributes<HTMLMvxPaginationEllipsisFormElement>;
"mvx-passkey-provider-icon": LocalJSX.MvxPasskeyProviderIcon & JSXBase.HTMLAttributes<HTMLMvxPasskeyProviderIconElement>;
Expand Down
22 changes: 13 additions & 9 deletions src/components/visual/address-table/address-table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import type { EventEmitter } from '@stencil/core';
import { Component, Event, h, Prop } from '@stencil/core';
import { Component, Event, h, Prop, State } from '@stencil/core';
import classNames from 'classnames';
import { DataTestIdsEnum } from 'constants/dataTestIds.enum';
import type { IAddressTableData, IndexedAccountType } from 'types/address-table.types';
import { Pagination } from '../Pagination/Pagination';

const TOTAL_ADDRESSES_COUNT = 5000;
const addressTableClasses: Record<string, string> = {
Expand All @@ -22,6 +23,9 @@ export class AddressTable {
@Event({ bubbles: false, composed: false }) selectAccount: EventEmitter;
@Event() pageChange: EventEmitter<number>;

@State() activeTooltipIndex: number | null = null;
@State() isTooltipOpen: boolean = false;

handleAccessWallet(event: MouseEvent) {
event.preventDefault();
this.accessWallet.emit();
Expand All @@ -34,12 +38,6 @@ export class AddressTable {
};
}

private handlePageChange(event: CustomEvent) {
event.preventDefault();
event.stopPropagation();
this.pageChange.emit(event.detail);
}

private processLedgerAddressIndex(accountDerivation: IndexedAccountType) {
return Number(accountDerivation.index + 1).toLocaleString();
}
Expand Down Expand Up @@ -144,12 +142,18 @@ export class AddressTable {
</div>

<div class="address-table-pagination">
<mvx-pagination
<Pagination
totalPages={totalPages}
isDisabled={isPageChanging}
class={addressClasses.pagination}
onPageChange={(event: CustomEvent) => this.handlePageChange(event)}
onPageChange={(page: number) => this.pageChange.emit(page)}
currentPage={Math.floor(this.accountScreenData.startIndex / this.accountScreenData.addressesPerPage) + 1}
activeTooltipIndex={this.activeTooltipIndex}
isTooltipOpen={this.isTooltipOpen}
onTooltipStatusChange={(index, isOpen) => {
this.activeTooltipIndex = index;
this.isTooltipOpen = isOpen;
}}
Comment thread
arhtudormorar marked this conversation as resolved.
Outdated
/>
</div>

Expand Down
16 changes: 8 additions & 8 deletions src/components/visual/pagination/pagination.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,14 @@ import './pagination.scss';
import { h } from '@stencil/core';
import type { Meta, StoryObj } from '@stencil/storybook-plugin';

import type { Pagination } from './pagination';
import type { PaginationPropsType } from './Pagination';

// prettier-ignore
const styles = {
paginationStoriesWrapper: 'pagination-stories-wrapper mvx:justify-center mvx:flex mvx:gap-4 mvx:pt-24',
} satisfies Record<string, string>;

const storySettings: Meta<Pagination> = {
const storySettings: Meta<PaginationPropsType> = {
tags: ['autodocs'],
title: 'Components/Pagination',
args: {
Expand All @@ -34,27 +34,27 @@ const storySettings: Meta<Pagination> = {
],
};

export const Default: StoryObj<Pagination> = {
export const Default: StoryObj<PaginationPropsType> = {
render: properties => <mvx-pagination {...properties} />,
};

export const Disabled: StoryObj<Pagination> = {
export const Disabled: StoryObj<PaginationPropsType> = {
render: () => <mvx-pagination currentPage={5} totalPages={20} isDisabled={true} class="custom-pagination" />,
};

export const FirstPage: StoryObj<Pagination> = {
export const FirstPage: StoryObj<PaginationPropsType> = {
render: () => <mvx-pagination currentPage={1} totalPages={10} />,
};

export const LastPage: StoryObj<Pagination> = {
export const LastPage: StoryObj<PaginationPropsType> = {
render: () => <mvx-pagination currentPage={10} totalPages={10} />,
};

export const SinglePage: StoryObj<Pagination> = {
export const SinglePage: StoryObj<PaginationPropsType> = {
render: () => <mvx-pagination currentPage={1} totalPages={1} />,
};

export const ManyPages: StoryObj<Pagination> = {
export const ManyPages: StoryObj<PaginationPropsType> = {
render: () => <mvx-pagination currentPage={520} totalPages={1000} />,
};

Expand Down
Loading