Skip to content

Commit

Permalink
Refactored the pagination logic and updated the contract in mainnet
Browse files Browse the repository at this point in the history
  • Loading branch information
@LeifuChen
LeifuChen committed Jul 11, 2023
1 parent 7da6edf commit b11a2cf
Show file tree
Hide file tree
Showing 11 changed files with 147 additions and 176 deletions.
73 changes: 47 additions & 26 deletions packages/app/src/components/Table/Pagination.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import { GridDivCenteredCol } from 'components/layout/grid'
import { resetButtonCSS } from 'styles/common'
import media from 'styles/media'

import StakingPagination from './StakingPagination'

type PaginationProps = {
pageIndex: number
pageCount: number
Expand All @@ -19,6 +21,8 @@ type PaginationProps = {
setPage: (page: number) => void
previousPage: () => void
nextPage: () => void
variant?: 'default' | 'staking'
extra?: React.ReactNode
}

const Pagination: FC<PaginationProps> = React.memo(
Expand All @@ -31,38 +35,55 @@ const Pagination: FC<PaginationProps> = React.memo(
setPage,
nextPage,
previousPage,
variant = 'default',
extra,
}) => {
const { t } = useTranslation()

const firstPage = () => setPage(0)
const toLastPage = () => setPage(pageCount - 1)

return (
<PaginationContainer compact={compact}>
<ArrowButtonContainer>
<ArrowButton onClick={firstPage} disabled={!canPreviousPage}>
<LeftEndArrowIcon />
</ArrowButton>
<ArrowButton onClick={previousPage} disabled={!canPreviousPage}>
<LeftArrowIcon />
</ArrowButton>
</ArrowButtonContainer>
<PageInfo>
{t('common.pagination.page')}{' '}
{t('common.pagination.page-of-total-pages', {
page: pageIndex + 1,
totalPages: pageCount,
})}
</PageInfo>
<ArrowButtonContainer>
<ArrowButton onClick={nextPage} disabled={!canNextPage}>
<RightArrowIcon />
</ArrowButton>
<ArrowButton onClick={toLastPage} disabled={!canNextPage}>
<RightEndArrowIcon />
</ArrowButton>
</ArrowButtonContainer>
</PaginationContainer>
return variant === 'default' ? (
<>
<PaginationContainer compact={compact}>
<ArrowButtonContainer>
<ArrowButton onClick={firstPage} disabled={!canPreviousPage}>
<LeftEndArrowIcon />
</ArrowButton>
<ArrowButton onClick={previousPage} disabled={!canPreviousPage}>
<LeftArrowIcon />
</ArrowButton>
</ArrowButtonContainer>
<PageInfo>
{t('common.pagination.page')}{' '}
{t('common.pagination.page-of-total-pages', {
page: pageIndex + 1,
totalPages: pageCount,
})}
</PageInfo>
<ArrowButtonContainer>
<ArrowButton onClick={nextPage} disabled={!canNextPage}>
<RightArrowIcon />
</ArrowButton>
<ArrowButton onClick={toLastPage} disabled={!canNextPage}>
<RightEndArrowIcon />
</ArrowButton>
</ArrowButtonContainer>
</PaginationContainer>
{extra}
</>
) : (
<StakingPagination
compact={compact}
pageIndex={pageIndex}
pageCount={pageCount}
canNextPage={canNextPage}
canPreviousPage={canPreviousPage}
setPage={setPage}
previousPage={previousPage}
nextPage={nextPage}
extra={extra}
/>
)
}
)
Expand Down
76 changes: 0 additions & 76 deletions packages/app/src/components/Table/PaginationArea.tsx
View file

This file was deleted.

69 changes: 41 additions & 28 deletions .../components/Table/CustomizePagination.tsx → ...rc/components/Table/StakingPagination.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,10 @@ type PaginationProps = {
setPage: (page: number) => void
previousPage: () => void
nextPage: () => void
extra?: React.ReactNode
}

const CustomizePagination: FC<PaginationProps> = React.memo(
const StakingPagination: FC<PaginationProps> = React.memo(
({
pageIndex,
pageCount,
Expand All @@ -30,51 +31,63 @@ const CustomizePagination: FC<PaginationProps> = React.memo(
setPage,
nextPage,
previousPage,
extra,
}) => {
const { t } = useTranslation()

const firstPage = () => setPage(0)
const toLastPage = () => setPage(pageCount - 1)

return (
<PaginationContainer compact={compact}>
<FlexDivRowCentered columnGap="15px">
<FlexDivRowCentered columnGap="5px">
<ArrowButton onClick={firstPage} disabled={!canPreviousPage}>
<LeftEndArrowIcon />
</ArrowButton>
<ArrowButton onClick={previousPage} disabled={!canPreviousPage}>
<LeftArrowIcon />
</ArrowButton>
<PaginationContainer>
<PageInfoContainer compact={compact}>
<FlexDivRowCentered columnGap="15px">
<FlexDivRowCentered columnGap="5px">
<ArrowButton onClick={firstPage} disabled={!canPreviousPage}>
<LeftEndArrowIcon />
</ArrowButton>
<ArrowButton onClick={previousPage} disabled={!canPreviousPage}>
<LeftArrowIcon />
</ArrowButton>
</FlexDivRowCentered>
<FlexDivRowCentered columnGap="5px">
<ArrowButton onClick={nextPage} disabled={!canNextPage}>
<RightArrowIcon />
</ArrowButton>
<ArrowButton onClick={toLastPage} disabled={!canNextPage}>
<RightEndArrowIcon />
</ArrowButton>
</FlexDivRowCentered>
</FlexDivRowCentered>
<FlexDivRowCentered columnGap="5px">
<ArrowButton onClick={nextPage} disabled={!canNextPage}>
<RightArrowIcon />
</ArrowButton>
<ArrowButton onClick={toLastPage} disabled={!canNextPage}>
<RightEndArrowIcon />
</ArrowButton>
</FlexDivRowCentered>
</FlexDivRowCentered>
<PageInfo>
{t('common.pagination.page')}{' '}
{t('common.pagination.page-of-total-pages', {
page: pageIndex + 1,
totalPages: pageCount,
})}
</PageInfo>
<PageInfo>
{t('common.pagination.page')}{' '}
{t('common.pagination.page-of-total-pages', {
page: pageIndex + 1,
totalPages: pageCount,
})}
</PageInfo>
{extra}
</PageInfoContainer>
</PaginationContainer>
)
}
)

const PaginationContainer = styled(GridDivCenteredCol)`
background: ${(props) => props.theme.colors.selectedTheme.newTheme.containers.cards.background};
padding: 20px 25px;
border-radius: 100px;
border: 1px solid ${(props) => props.theme.colors.selectedTheme.newTheme.border.color};
margin-top: 15px;
`

const PageInfo = styled.span`
color: ${(props) => props.theme.colors.selectedTheme.gray};
margin-left: 10px;
font-size: 13px;
`

const PaginationContainer = styled(GridDivCenteredCol)<{ compact: boolean }>`
const PageInfoContainer = styled(GridDivCenteredCol)<{ compact: boolean }>`
grid-template-columns: auto 1fr auto;
padding: ${(props) => (props.compact ? '10px' : '15px')} 12px;
border-bottom-left-radius: 4px;
Expand All @@ -100,4 +113,4 @@ const ArrowButton = styled.button`
}
`

export default CustomizePagination
export default StakingPagination
52 changes: 31 additions & 21 deletions packages/app/src/components/Table/Table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import Loader from 'components/Loader'
import { Body } from 'components/Text'
import media from 'styles/media'

import PaginationArea from './PaginationArea'
import Pagination from './Pagination'
import TableBodyRow, { TableCell } from './TableBodyRow'

export type TablePalette = 'primary'
Expand Down Expand Up @@ -84,8 +84,9 @@ type TableProps = {
rowStyle?: Record<string, any>
rounded?: boolean
noBottom?: boolean
customizePagination?: boolean
children?: React.ReactNode
paginationVariant?: 'default' | 'staking'
paginationOutsideTable?: boolean
paginationExtra?: React.ReactNode
}

export const Table: FC<TableProps> = memo(
Expand All @@ -111,8 +112,9 @@ export const Table: FC<TableProps> = memo(
rowStyle = {},
rounded = true,
noBottom = false,
customizePagination = false,
children = null,
paginationVariant = 'default',
paginationOutsideTable = false,
paginationExtra,
}) => {
const memoizedColumns = useMemo(
() => columns,
Expand Down Expand Up @@ -167,11 +169,20 @@ export const Table: FC<TableProps> = memo(
}, [pageIndex, pageCount, gotoPage])

const defaultRef = useRef(null)
const shouldShowPagination = useMemo(
const showPaginationInsideTable = useMemo(
() =>
(showPagination && !showShortList && data.length > (pageSize ?? MAX_PAGE_ROWS)) ||
!!children,
[children, data.length, pageSize, showPagination, showShortList]
showPagination &&
!showShortList &&
(paginationExtra || data.length > (pageSize ?? MAX_PAGE_ROWS)) &&
!paginationOutsideTable,
[
data.length,
pageSize,
paginationExtra,
paginationOutsideTable,
showPagination,
showShortList,
]
)

return (
Expand Down Expand Up @@ -241,34 +252,34 @@ export const Table: FC<TableProps> = memo(
})}
</TableBody>
) : null}
{!customizePagination && shouldShowPagination && (
<PaginationArea
customizePagination={customizePagination}
{showPaginationInsideTable ? (
<Pagination
compact={compactPagination}
pageIndex={pageIndex}
pageCount={pageCount}
canNextPage={canNextPage}
canPreviousPage={canPreviousPage}
gotoPage={gotoPage}
setPage={gotoPage}
previousPage={previousPage}
nextPage={nextPage}
children={children}
variant={paginationVariant}
extra={paginationExtra}
/>
)}
) : undefined}
</ReactTable>
</TableContainer>
{customizePagination && shouldShowPagination && (
<PaginationArea
customizePagination={customizePagination}
{paginationOutsideTable && (
<Pagination
compact={compactPagination}
pageIndex={pageIndex}
pageCount={pageCount}
canNextPage={canNextPage}
canPreviousPage={canPreviousPage}
gotoPage={gotoPage}
setPage={gotoPage}
previousPage={previousPage}
nextPage={nextPage}
children={children}
variant={paginationVariant}
extra={paginationExtra}
/>
)}
</>
Expand Down Expand Up @@ -327,7 +338,6 @@ const ReactTable = styled.div<{ palette: TablePalette; $rounded?: boolean; $noBo
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
overflow: auto;
position: relative;
border: ${(props) => props.theme.colors.selectedTheme.border};
Expand Down
Loading

0 comments on commit b11a2cf

Please sign in to comment.