Move pagination to address-table

Author: arhtudormorar

src/common/Tooltip/Tooltip.tsx

@@ -64,6 +64,8 @@ export function Tooltip(
     };
   };
 
+  console.log('isTooltipVisible', isTooltipVisible);
+
   return (
     <div
       onClick={handleEllipsisClick}
@@ -94,7 +96,6 @@ export function Tooltip(
           </div>
         </div>
       )}
-
       <span>{trigger}</span>
     </div>
   );

src/components.d.ts

@@ -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 MvxPasskeyProviderIcon {
         "class"?: string;
     }
@@ -358,10 +346,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 MvxSimpleToastCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLMvxSimpleToastElement;
@@ -602,23 +586,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 HTMLMvxPasskeyProviderIconElement extends Components.MvxPasskeyProviderIcon, HTMLStencilElement {
     }
     var HTMLMvxPasskeyProviderIconElement: {
@@ -852,7 +819,6 @@ declare global {
         "mvx-multiversx-logo-icon": HTMLMvxMultiversxLogoIconElement;
         "mvx-multiversx-symbol-icon": HTMLMvxMultiversxSymbolIconElement;
         "mvx-notifications-feed": HTMLMvxNotificationsFeedElement;
-        "mvx-pagination": HTMLMvxPaginationElement;
         "mvx-passkey-provider-icon": HTMLMvxPasskeyProviderIconElement;
         "mvx-pending-transactions-panel": HTMLMvxPendingTransactionsPanelElement;
         "mvx-preloader": HTMLMvxPreloaderElement;
@@ -1036,19 +1002,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 MvxPasskeyProviderIcon {
         "class"?: string;
     }
@@ -1220,7 +1173,6 @@ declare namespace LocalJSX {
         "mvx-multiversx-logo-icon": MvxMultiversxLogoIcon;
         "mvx-multiversx-symbol-icon": MvxMultiversxSymbolIcon;
         "mvx-notifications-feed": MvxNotificationsFeed;
-        "mvx-pagination": MvxPagination;
         "mvx-passkey-provider-icon": MvxPasskeyProviderIcon;
         "mvx-pending-transactions-panel": MvxPendingTransactionsPanel;
         "mvx-preloader": MvxPreloader;
@@ -1279,7 +1231,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-passkey-provider-icon": LocalJSX.MvxPasskeyProviderIcon & JSXBase.HTMLAttributes<HTMLMvxPasskeyProviderIconElement>;
             "mvx-pending-transactions-panel": LocalJSX.MvxPendingTransactionsPanel & JSXBase.HTMLAttributes<HTMLMvxPendingTransactionsPanelElement>;
             "mvx-preloader": LocalJSX.MvxPreloader & JSXBase.HTMLAttributes<HTMLMvxPreloaderElement>;

src/components/visual/address-table/address-table.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import { DataTestIdsEnum } from 'constants/dataTestIds.enum';
 import type { IAddressTableData, IndexedAccountType } from 'types/address-table.types';
 
-import { Pagination } from '../pagination/components/Pagination/Pagination';
+import { Pagination } from './components/pagination/Pagination';
 
 const TOTAL_ADDRESSES_COUNT = 5000;
 const addressTableClasses: Record<string, string> = {

…ion/components/Pagination/Pagination.tsx …ble/components/pagination/Pagination.tsxsrc/components/visual/pagination/components/Pagination/Pagination.tsx renamed to src/components/visual/address-table/components/pagination/Pagination.tsx src/components/visual/pagination/components/Pagination/Pagination.tsx renamed to src/components/visual/address-table/components/pagination/Pagination.tsx

@@ -93,6 +93,13 @@ export function Pagination({
 
   return (
     <div class={{ [styles.pagination]: true, [className]: Boolean(className) }}>
+      <button
+        onClick={() => {
+          console.log('button clicked');
+        }}
+      >
+        asd
+      </button>
       <span
         onClick={handleEdgePageClick(1)}
         data-testid={DataTestIdsEnum.firstBtn}
@@ -134,6 +141,7 @@ export function Pagination({
                 isTooltipVisible={isTooltipOpen && activeTooltipIndex === paginationItemIndex}
                 trigger={<PaginationEllipsis isActive={isTooltipOpen && activeTooltipIndex === paginationItemIndex} />}
                 onVisibilityChange={(isVisible: boolean) => {
+                  console.log('isVisible', isVisible);
                   handleTooltipStatus(paginationItemIndex, isVisible);
                 }}
               >