forked from MystenLabs/sui
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[explorer] adds pagination to tx data for Address and Object Results …
…Pages (MystenLabs#2547) * lists transactions sent from/to address * improves wording * lists transactions as clickable links * deduplicate transactions list * creates TxForID component * creates test and static data * adds SDK method for getting tx on object * updates frontend to work with new SDK method * moves tx into separate section * WIP ungroup tx in SDK * tidy up after rebase * add types to object SDK * static mode set up to work * stylize tx for objects * tidies up * tx at bottom * add check to stop errors and add more data to object with tx * improves small-screen spacing * widen gap at bottom * further small-screen space adjustments * update tests * adds license * updates test text to emphasize PaginationWrapper is tested * CSS refactoring * removes function duplication
- Loading branch information
Showing
10 changed files
with
284 additions
and
155 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
32 changes: 32 additions & 0 deletions
32
explorer/client/src/components/pagination/PaginationWrapper.module.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| .gone { | ||
| @apply invisible; | ||
| } | ||
|
|
||
| .btncontainer, | ||
| .pagenumber { | ||
| @apply inline-block w-[20%] font-mono; | ||
| } | ||
|
|
||
| button.btncontainer { | ||
| @apply inline-block px-0 cursor-pointer border-none bg-inherit hover:bg-sui | ||
| py-2 | ||
| text-offblack stroke-offblack | ||
| hover:text-white hover:stroke-white | ||
| items-center; | ||
| } | ||
|
|
||
| .pagenumber { | ||
| @apply select-none text-center break-normal text-sm; | ||
| } | ||
|
|
||
| .paginationheading { | ||
| @apply block; | ||
| } | ||
|
|
||
| .paginationheading > button { | ||
| @apply block lg:inline mb-2 bg-sui hover:bg-suidark hover:text-white rounded-r-md border-none cursor-pointer p-2; | ||
| } | ||
|
|
||
| .paginationheading > h2 { | ||
| @apply inline lg:ml-5; | ||
| } |
120 changes: 120 additions & 0 deletions
120
explorer/client/src/components/pagination/PaginationWrapper.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,120 @@ | ||
| // Copyright (c) 2022, Mysten Labs, Inc. | ||
| // SPDX-License-Identifier: Apache-2.0 | ||
| import { useState, useCallback } from 'react'; | ||
|
|
||
| import styles from './PaginationWrapper.module.css'; | ||
|
|
||
| export default function PaginationWrapper({ | ||
| results, | ||
| viewComponentFn, | ||
| }: { | ||
| results: any; | ||
| viewComponentFn: Function; | ||
| }) { | ||
| const [pageIndex, setPageIndex] = useState(0); | ||
|
|
||
| const ITEMS_PER_PAGE = 12; | ||
|
|
||
| const FINAL_PAGE_NO = | ||
| Math.floor(results.length / ITEMS_PER_PAGE) + | ||
| (results.length % ITEMS_PER_PAGE !== 0 ? 1 : 0); | ||
|
|
||
| const objectSample = results.slice( | ||
| pageIndex * ITEMS_PER_PAGE, | ||
| (pageIndex + 1) * ITEMS_PER_PAGE | ||
| ); | ||
|
|
||
| const handleFirstClick = useCallback(() => setPageIndex(0), []); | ||
|
|
||
| const handleBackClick = useCallback( | ||
| () => pageIndex - 1 >= 0 && setPageIndex(pageIndex - 1), | ||
| [pageIndex] | ||
| ); | ||
|
|
||
| const handleNextClick = useCallback( | ||
| () => | ||
| (pageIndex + 1) * ITEMS_PER_PAGE < results.length && | ||
| setPageIndex(pageIndex + 1), | ||
| [pageIndex, results.length] | ||
| ); | ||
|
|
||
| const handleLastClick = useCallback( | ||
| () => setPageIndex(FINAL_PAGE_NO - 1), | ||
| [FINAL_PAGE_NO] | ||
| ); | ||
|
|
||
| return ( | ||
| <> | ||
| {FINAL_PAGE_NO > 1 && ( | ||
| <> | ||
| <span className={pageIndex === 0 ? styles.gone : ''}> | ||
| <button | ||
| className={styles.btncontainer} | ||
| id="backBtn" | ||
| onClick={handleBackClick} | ||
| disabled={pageIndex === 0} | ||
| > | ||
| <svg | ||
| width="12" | ||
| height="12" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| > | ||
| <path | ||
| d="M 12 12 L 0 6 L 12 0" | ||
| fill="transparent" | ||
| /> | ||
| </svg> | ||
| </button> | ||
|
|
||
| <button | ||
| className={styles.btncontainer} | ||
| id="firstBtn" | ||
| onClick={handleFirstClick} | ||
| disabled={pageIndex === 0} | ||
| > | ||
| First | ||
| </button> | ||
| </span> | ||
|
|
||
| <span className={styles.pagenumber}> | ||
| Page {pageIndex + 1} of {FINAL_PAGE_NO} | ||
| </span> | ||
|
|
||
| <span | ||
| className={ | ||
| pageIndex === FINAL_PAGE_NO - 1 ? styles.gone : '' | ||
| } | ||
| > | ||
| <button | ||
| id="lastBtn" | ||
| disabled={pageIndex === FINAL_PAGE_NO - 1} | ||
| onClick={handleLastClick} | ||
| className={styles.btncontainer} | ||
| > | ||
| Last | ||
| </button> | ||
| <button | ||
| id="nextBtn" | ||
| className={styles.btncontainer} | ||
| disabled={pageIndex === FINAL_PAGE_NO - 1} | ||
| onClick={handleNextClick} | ||
| > | ||
| <svg | ||
| width="12" | ||
| height="12" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| > | ||
| <path | ||
| d="M 0 12 L 12 6 L 0 0" | ||
| fill="transparent" | ||
| /> | ||
| </svg> | ||
| </button> | ||
| </span> | ||
| </> | ||
| )} | ||
|
|
||
| {viewComponentFn(objectSample)} | ||
| </> | ||
| ); | ||
| } |
4 changes: 2 additions & 2 deletions
4
explorer/client/src/components/transactions-for-id/TxForID.module.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.