zhangyuheng/blessing-skin-server
1
0
Fork 0
forked from mirror/blessing-skin-server
Code Pull Requests Activity

fix pagination

Browse Source
This commit is contained in:
Pig Fang 2020-04-26 21:31:19 +08:00
parent bec071fdb9
commit 840722c80b
2 changed files with 62 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
resources/assets/src/components/Pagination.tsx
View File

@ -12,7 +12,7 @@ export const labels = {
next: '›',
}
const Pagination: React.FC<Props> = props => {
const Pagination: React.FC<Props> = (props) => {
const { page, totalPages, onChange } = props
if (totalPages < 1) {
@ -34,45 +34,53 @@ const Pagination: React.FC<Props> = props => {
{i + 1}
</PaginationItem>
))
) : page < 3 || totalPages - page < 2 ? (
<>
{[1, 2].map(p => (
<PaginationItem
key={p}
active={page === p}
onClick={() => onChange(p)}
>
{p}
</PaginationItem>
))}
<PaginationItem disabled>...</PaginationItem>
{[totalPages - 1, totalPages].map(p => (
<PaginationItem
key={p}
active={page === p}
onClick={() => onChange(p)}
>
{p}
</PaginationItem>
))}
</>
) : (
<>
<PaginationItem onClick={() => onChange(1)}>1</PaginationItem>
{page < 4 ? (
[1, 2, 3, 4].map((n) => (
<PaginationItem
key={n}
active={page === n}
onClick={() => onChange(n)}
>
{n}
</PaginationItem>
))
) : (
<PaginationItem onClick={() => onChange(1)}>1</PaginationItem>
)}
<PaginationItem disabled>...</PaginationItem>
{[page - 1, page, page + 1].map(p => (
<PaginationItem
key={p}
active={page === p}
onClick={() => onChange(p)}
>
{p}
{page > 3 && page < totalPages - 2 && (
<>
{[page - 1, page, page + 1].map((n) => (
<PaginationItem
key={n}
active={page === n}
onClick={() => onChange(n)}
>
{n}
</PaginationItem>
))}
<PaginationItem disabled>...</PaginationItem>
</>
)}
{totalPages - page < 3 ? (
[totalPages - 3, totalPages - 2, totalPages - 1, totalPages].map(
(n) => (
<PaginationItem
key={n}
active={page === n}
onClick={() => onChange(n)}
>
{n}
</PaginationItem>
),
)
) : (
<PaginationItem onClick={() => onChange(totalPages)}>
{totalPages}
</PaginationItem>
))}
<PaginationItem disabled>...</PaginationItem>
<PaginationItem onClick={() => onChange(totalPages)}>
{totalPages}
</PaginationItem>
)}
</>
)}
<PaginationItem

29
resources/assets/tests/components/Pagination.test.tsx
View File

@ -80,7 +80,7 @@ describe('middle pages', () => {
})
describe('pages count greater than or equals to 8', () => {
it('edge', () => {
it('left edge', () => {
const mock = jest.fn()
const { getByText, queryByText } = render(
<Pagination page={2} totalPages={10} onChange={mock} />,
@ -90,31 +90,38 @@ describe('middle pages', () => {
expect(mock).toBeCalledWith(1)
expect(queryByText('1')).toBeInTheDocument()
expect(queryByText('2')).toBeInTheDocument()
expect(queryByText('3')).toBeInTheDocument()
expect(queryByText('...')).toBeInTheDocument()
expect(queryByText('9')).toBeInTheDocument()
expect(queryByText('10')).toBeInTheDocument()
fireEvent.click(getByText('2'))
expect(mock).toBeCalledWith(2)
expect(queryByText('1')).toBeInTheDocument()
expect(queryByText('2')).toBeInTheDocument()
expect(queryByText('3')).toBeInTheDocument()
expect(queryByText('...')).toBeInTheDocument()
expect(queryByText('10')).toBeInTheDocument()
})
it('right edge', () => {
const mock = jest.fn()
const { getByText, queryByText } = render(
<Pagination page={9} totalPages={10} onChange={mock} />,
)
fireEvent.click(getByText('10'))
expect(mock).toBeCalledWith(10)
expect(queryByText('1')).toBeInTheDocument()
expect(queryByText('...')).toBeInTheDocument()
expect(queryByText('8')).toBeInTheDocument()
expect(queryByText('9')).toBeInTheDocument()
expect(queryByText('10')).toBeInTheDocument()
fireEvent.click(getByText('9'))
expect(mock).toBeCalledWith(9)
expect(queryByText('1')).toBeInTheDocument()
expect(queryByText('2')).toBeInTheDocument()
expect(queryByText('...')).toBeInTheDocument()
expect(queryByText('9')).toBeInTheDocument()
expect(queryByText('10')).toBeInTheDocument()
fireEvent.click(getByText('10'))
expect(mock).toBeCalledWith(10)
expect(queryByText('1')).toBeInTheDocument()
expect(queryByText('2')).toBeInTheDocument()
expect(queryByText('...')).toBeInTheDocument()
expect(queryByText('8')).toBeInTheDocument()
expect(queryByText('9')).toBeInTheDocument()
expect(queryByText('10')).toBeInTheDocument()
})