From 6a1ced056802ca440c3b5c96ae427df8a9c953bb Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Wed, 8 May 2024 18:20:53 +0200 Subject: [PATCH] Move `dataLabel` prop to `PaginationStatus` component Update exports from module to default --- .../shared/Pagination/Pagination.tsx | 25 ++++--------------- .../shared/Pagination/PaginationButton.tsx | 4 ++- .../shared/Pagination/PaginationContext.ts | 1 - .../shared/Pagination/PaginationPage.tsx | 4 ++- .../shared/Pagination/PaginationStatus.tsx | 13 +++++++--- .../src/components/shared/Pagination/index.ts | 8 +++--- .../pages/OverviewPage/TransactionHistory.tsx | 4 +-- 7 files changed, 27 insertions(+), 32 deletions(-) diff --git a/dapp/src/components/shared/Pagination/Pagination.tsx b/dapp/src/components/shared/Pagination/Pagination.tsx index 6393f0f2f..f0d282413 100644 --- a/dapp/src/components/shared/Pagination/Pagination.tsx +++ b/dapp/src/components/shared/Pagination/Pagination.tsx @@ -6,18 +6,10 @@ export type PaginationProps = Omit & { data: T[] pageSize?: number defaultPage?: number - dataLabel?: string } -export function Pagination(props: PaginationProps) { - const { - data, - children, - pageSize = 10, - defaultPage = 0, - dataLabel = "items", - ...restProps - } = props +function Pagination(props: PaginationProps) { + const { data, children, pageSize = 10, defaultPage = 0, ...restProps } = props const [currentPage, setCurrentPage] = React.useState(defaultPage) const [direction, setDirection] = React.useState<"left" | "right">("right") @@ -42,18 +34,9 @@ export function Pagination(props: PaginationProps) { direction, setPage: handleSetPage, totalSize: data.length, - dataLabel, pageData, }), - [ - pageSize, - currentPage, - data, - dataLabel, - direction, - handleSetPage, - pageData, - ], + [pageSize, currentPage, data, direction, handleSetPage, pageData], ) return ( @@ -64,3 +47,5 @@ export function Pagination(props: PaginationProps) { ) } + +export default Pagination diff --git a/dapp/src/components/shared/Pagination/PaginationButton.tsx b/dapp/src/components/shared/Pagination/PaginationButton.tsx index 1e795ee80..3062178ab 100644 --- a/dapp/src/components/shared/Pagination/PaginationButton.tsx +++ b/dapp/src/components/shared/Pagination/PaginationButton.tsx @@ -7,7 +7,7 @@ type PaginationButtonProps = Omit & { mode: "previous" | "next" } -export function PaginationButton(props: PaginationButtonProps) { +function PaginationButton(props: PaginationButtonProps) { const { mode, ...restProps } = props const { currentPage, setPage, totalSize, pageSize } = usePagination() @@ -42,3 +42,5 @@ export function PaginationButton(props: PaginationButtonProps) { /> ) } + +export default PaginationButton diff --git a/dapp/src/components/shared/Pagination/PaginationContext.ts b/dapp/src/components/shared/Pagination/PaginationContext.ts index c1909e4ff..718c446e9 100644 --- a/dapp/src/components/shared/Pagination/PaginationContext.ts +++ b/dapp/src/components/shared/Pagination/PaginationContext.ts @@ -6,7 +6,6 @@ type PaginationContextType = { direction: "left" | "right" totalSize: number setPage: (page: number) => void - dataLabel: string pageData: T[] } | null diff --git a/dapp/src/components/shared/Pagination/PaginationPage.tsx b/dapp/src/components/shared/Pagination/PaginationPage.tsx index b90bd4324..0bb1c8307 100644 --- a/dapp/src/components/shared/Pagination/PaginationPage.tsx +++ b/dapp/src/components/shared/Pagination/PaginationPage.tsx @@ -27,7 +27,7 @@ type PaginationPageProps = Omit & { children: (pageData: unknown[]) => React.ReactNode } -export function PaginationPage(props: PaginationPageProps) { +function PaginationPage(props: PaginationPageProps) { const { children, ...restProps } = props const { currentPage, direction, pageData } = usePagination() @@ -49,3 +49,5 @@ export function PaginationPage(props: PaginationPageProps) { ) } + +export default PaginationPage diff --git a/dapp/src/components/shared/Pagination/PaginationStatus.tsx b/dapp/src/components/shared/Pagination/PaginationStatus.tsx index 15b3e4ee7..95bf57a2d 100644 --- a/dapp/src/components/shared/Pagination/PaginationStatus.tsx +++ b/dapp/src/components/shared/Pagination/PaginationStatus.tsx @@ -3,15 +3,22 @@ import { TextProps } from "@chakra-ui/react" import { TextSm } from "../Typography" import { usePagination } from "./PaginationContext" -export function PaginationStatus(props: TextProps) { - const { currentPage, pageSize, totalSize, dataLabel } = usePagination() +type PaginationStatusProps = TextProps & { + dataLabel?: string +} + +function PaginationStatus(props: PaginationStatusProps) { + const { dataLabel = "items", ...restProps } = props + const { currentPage, pageSize, totalSize } = usePagination() const rangeStart = currentPage * pageSize + 1 // Pages are indexed from 0 const rangeEnd = Math.min(rangeStart + pageSize - 1, totalSize) return ( - + Showing {rangeStart}-{rangeEnd} out of {totalSize} {dataLabel} ) } + +export default PaginationStatus diff --git a/dapp/src/components/shared/Pagination/index.ts b/dapp/src/components/shared/Pagination/index.ts index dd48fc6ee..84337122b 100644 --- a/dapp/src/components/shared/Pagination/index.ts +++ b/dapp/src/components/shared/Pagination/index.ts @@ -1,4 +1,4 @@ -export { Pagination } from "./Pagination" -export { PaginationStatus } from "./PaginationStatus" -export { PaginationPage } from "./PaginationPage" -export { PaginationButton } from "./PaginationButton" +export { default as Pagination } from "./Pagination" +export { default as PaginationStatus } from "./PaginationStatus" +export { default as PaginationPage } from "./PaginationPage" +export { default as PaginationButton } from "./PaginationButton" diff --git a/dapp/src/pages/OverviewPage/TransactionHistory.tsx b/dapp/src/pages/OverviewPage/TransactionHistory.tsx index d20deba68..f733b96c5 100644 --- a/dapp/src/pages/OverviewPage/TransactionHistory.tsx +++ b/dapp/src/pages/OverviewPage/TransactionHistory.tsx @@ -49,7 +49,7 @@ export default function TransactionHistory(props: TransactionHistoryProps) { You have no transactions yet! ) : ( - + {(pageData) => // TODO: Fix type assertion of `pageData` @@ -108,7 +108,7 @@ export default function TransactionHistory(props: TransactionHistoryProps) { - + )}