mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-04-06 14:30:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(pagination): new algo to avoid tremble of page item

Browse Source
This commit is contained in:
07akioni 2019-10-15 16:25:53 +08:00
parent bed5f852f0
commit d3fe50f8b0
2 changed files with 65 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/common/Pagination/src/utils.js
View File

@ -5,6 +5,7 @@
*/
function pagesToShow (currentPage, pageCount, pageSlot = 9) {
if (pageCount === 1) return [1]
if (pageCount === 2) return [1, 2]
const firstPage = 1
const lastPage = pageCount
let middleStart = currentPage
@ -12,28 +13,28 @@ function pagesToShow (currentPage, pageCount, pageSlot = 9) {
const middleDelta = (pageSlot - 5) / 2
middleEnd += middleDelta
middleEnd = Math.min(Math.max(middleEnd, firstPage + pageSlot - 3), lastPage - 2)
middleStart -= middleStart
middleStart -= middleDelta
middleStart = Math.max(Math.min(middleStart, lastPage - pageSlot + 3), firstPage + 2)
let leftSplit = false
let rightSplit = false
if (middleStart > firstPage + 1) leftSplit = true
if (middleEnd < lastPage - 1) rightSplit = true
if (middleStart > firstPage + 2) leftSplit = true
if (middleEnd < lastPage - 2) rightSplit = true
const items = []
items.push(firstPage)
if (leftSplit) {
items.push(-2)
} else if (pageCount >= firstPage + 1) {
} else if (lastPage >= firstPage + 1) {
items.push(firstPage + 1)
}
for (let i = middleStart; i <= middleEnd && i < lastPage; ++i) {
for (let i = middleStart; i <= middleEnd; ++i) {
items.push(i)
}
if (rightSplit) {
items.push(-1)
} else if (middleEnd === lastPage - 2) {
} else if (middleEnd === lastPage - 2 && !(items[items.length - 1] === lastPage - 1)) {
items.push(lastPage - 1)
}
if (firstPage !== lastPage) items.push(lastPage)
if (!(items[items.length - 1] === lastPage)) items.push(lastPage)
return items
}

95
test/unit/specs/packages/common/Pagination/index.spec.js
View File

@ -4,7 +4,7 @@ import { expect } from 'chai'
describe('Pagination', function () {
describe('utils', function () {
describe('#pagesToShow', function () {
it('should not add splitor when less than 6 total pages', function () {
it('should work when less than 9 total pages', function () {
expect(pagesToShow(1, 1)).to.deep.equal([1])
expect(pagesToShow(1, 2)).to.deep.equal([1, 2])
expect(pagesToShow(2, 2)).to.deep.equal([1, 2])
@ -26,36 +26,55 @@ describe('Pagination', function () {
expect(pagesToShow(4, 6)).to.deep.equal([1, 2, 3, 4, 5, 6])
expect(pagesToShow(5, 6)).to.deep.equal([1, 2, 3, 4, 5, 6])
expect(pagesToShow(6, 6)).to.deep.equal([1, 2, 3, 4, 5, 6])
})
it('should work when totalPage is 7', function () {
expect(pagesToShow(1, 7)).to.deep.equal([1, 2, 3, 4, 5, -1, 7])
expect(pagesToShow(2, 7)).to.deep.equal([1, 2, 3, 4, 5, -1, 7])
expect(pagesToShow(3, 7)).to.deep.equal([1, 2, 3, 4, 5, -1, 7])
expect(pagesToShow(1, 7)).to.deep.equal([1, 2, 3, 4, 5, 6, 7])
expect(pagesToShow(2, 7)).to.deep.equal([1, 2, 3, 4, 5, 6, 7])
expect(pagesToShow(3, 7)).to.deep.equal([1, 2, 3, 4, 5, 6, 7])
expect(pagesToShow(4, 7)).to.deep.equal([1, 2, 3, 4, 5, 6, 7])
expect(pagesToShow(5, 7)).to.deep.equal([1, -2, 3, 4, 5, 6, 7])
expect(pagesToShow(6, 7)).to.deep.equal([1, -2, 3, 4, 5, 6, 7])
expect(pagesToShow(7, 7)).to.deep.equal([1, -2, 3, 4, 5, 6, 7])
expect(pagesToShow(5, 7)).to.deep.equal([1, 2, 3, 4, 5, 6, 7])
expect(pagesToShow(6, 7)).to.deep.equal([1, 2, 3, 4, 5, 6, 7])
expect(pagesToShow(7, 7)).to.deep.equal([1, 2, 3, 4, 5, 6, 7])
expect(pagesToShow(1, 8)).to.deep.equal([1, 2, 3, 4, 5, 6, 7, 8])
expect(pagesToShow(2, 8)).to.deep.equal([1, 2, 3, 4, 5, 6, 7, 8])
expect(pagesToShow(3, 8)).to.deep.equal([1, 2, 3, 4, 5, 6, 7, 8])
expect(pagesToShow(4, 8)).to.deep.equal([1, 2, 3, 4, 5, 6, 7, 8])
expect(pagesToShow(5, 8)).to.deep.equal([1, 2, 3, 4, 5, 6, 7, 8])
expect(pagesToShow(6, 8)).to.deep.equal([1, 2, 3, 4, 5, 6, 7, 8])
expect(pagesToShow(7, 8)).to.deep.equal([1, 2, 3, 4, 5, 6, 7, 8])
expect(pagesToShow(8, 8)).to.deep.equal([1, 2, 3, 4, 5, 6, 7, 8])
expect(pagesToShow(1, 9)).to.deep.equal([1, 2, 3, 4, 5, 6, 7, 8, 9])
expect(pagesToShow(2, 9)).to.deep.equal([1, 2, 3, 4, 5, 6, 7, 8, 9])
expect(pagesToShow(3, 9)).to.deep.equal([1, 2, 3, 4, 5, 6, 7, 8, 9])
expect(pagesToShow(4, 9)).to.deep.equal([1, 2, 3, 4, 5, 6, 7, 8, 9])
expect(pagesToShow(5, 9)).to.deep.equal([1, 2, 3, 4, 5, 6, 7, 8, 9])
expect(pagesToShow(6, 9)).to.deep.equal([1, 2, 3, 4, 5, 6, 7, 8, 9])
expect(pagesToShow(7, 9)).to.deep.equal([1, 2, 3, 4, 5, 6, 7, 8, 9])
expect(pagesToShow(8, 9)).to.deep.equal([1, 2, 3, 4, 5, 6, 7, 8, 9])
expect(pagesToShow(9, 9)).to.deep.equal([1, 2, 3, 4, 5, 6, 7, 8, 9])
})
it('should work when totalPage is 8', function () {
expect(pagesToShow(1, 8)).to.deep.equal([1, 2, 3, 4, 5, -1, 8])
expect(pagesToShow(2, 8)).to.deep.equal([1, 2, 3, 4, 5, -1, 8])
expect(pagesToShow(3, 8)).to.deep.equal([1, 2, 3, 4, 5, -1, 8])
expect(pagesToShow(4, 8)).to.deep.equal([1, 2, 3, 4, 5, 6, -1, 8])
expect(pagesToShow(5, 8)).to.deep.equal([1, -2, 3, 4, 5, 6, 7, 8])
expect(pagesToShow(6, 8)).to.deep.equal([1, -2, 4, 5, 6, 7, 8])
expect(pagesToShow(7, 8)).to.deep.equal([1, -2, 4, 5, 6, 7, 8])
expect(pagesToShow(8, 8)).to.deep.equal([1, -2, 4, 5, 6, 7, 8])
it('should work when totalPage is 10', function () {
expect(pagesToShow(1, 10)).to.deep.equal([1, 2, 3, 4, 5, 6, 7, -1, 10])
expect(pagesToShow(2, 10)).to.deep.equal([1, 2, 3, 4, 5, 6, 7, -1, 10])
expect(pagesToShow(3, 10)).to.deep.equal([1, 2, 3, 4, 5, 6, 7, -1, 10])
expect(pagesToShow(4, 10)).to.deep.equal([1, 2, 3, 4, 5, 6, 7, -1, 10])
expect(pagesToShow(5, 10)).to.deep.equal([1, 2, 3, 4, 5, 6, 7, -1, 10])
expect(pagesToShow(6, 10)).to.deep.equal([1, -2, 4, 5, 6, 7, 8, 9, 10])
expect(pagesToShow(7, 10)).to.deep.equal([1, -2, 4, 5, 6, 7, 8, 9, 10])
expect(pagesToShow(8, 10)).to.deep.equal([1, -2, 4, 5, 6, 7, 8, 9, 10])
expect(pagesToShow(9, 10)).to.deep.equal([1, -2, 4, 5, 6, 7, 8, 9, 10])
expect(pagesToShow(10, 10)).to.deep.equal([1, -2, 4, 5, 6, 7, 8, 9, 10])
})
it('should work when totalPage is 9', function () {
expect(pagesToShow(1, 9)).to.deep.equal([1, 2, 3, 4, 5, -1, 9])
expect(pagesToShow(2, 9)).to.deep.equal([1, 2, 3, 4, 5, -1, 9])
expect(pagesToShow(3, 9)).to.deep.equal([1, 2, 3, 4, 5, -1, 9])
expect(pagesToShow(4, 9)).to.deep.equal([1, 2, 3, 4, 5, 6, -1, 9])
expect(pagesToShow(5, 9)).to.deep.equal([1, -2, 3, 4, 5, 6, 7, -1, 9])
expect(pagesToShow(6, 9)).to.deep.equal([1, -2, 4, 5, 6, 7, 8, 9])
expect(pagesToShow(7, 9)).to.deep.equal([1, -2, 5, 6, 7, 8, 9])
expect(pagesToShow(8, 9)).to.deep.equal([1, -2, 5, 6, 7, 8, 9])
expect(pagesToShow(9, 9)).to.deep.equal([1, -2, 5, 6, 7, 8, 9])
it('should work when totalPage is 11', function () {
expect(pagesToShow(1, 11)).to.deep.equal([1, 2, 3, 4, 5, 6, 7, -1, 11])
expect(pagesToShow(2, 11)).to.deep.equal([1, 2, 3, 4, 5, 6, 7, -1, 11])
expect(pagesToShow(3, 11)).to.deep.equal([1, 2, 3, 4, 5, 6, 7, -1, 11])
expect(pagesToShow(4, 11)).to.deep.equal([1, 2, 3, 4, 5, 6, 7, -1, 11])
expect(pagesToShow(5, 11)).to.deep.equal([1, 2, 3, 4, 5, 6, 7, -1, 11])
expect(pagesToShow(6, 11)).to.deep.equal([1, -2, 4, 5, 6, 7, 8, -1, 11])
expect(pagesToShow(7, 11)).to.deep.equal([1, -2, 5, 6, 7, 8, 9, 10, 11])
expect(pagesToShow(8, 11)).to.deep.equal([1, -2, 5, 6, 7, 8, 9, 10, 11])
expect(pagesToShow(9, 11)).to.deep.equal([1, -2, 5, 6, 7, 8, 9, 10, 11])
expect(pagesToShow(10, 11)).to.deep.equal([1, -2, 5, 6, 7, 8, 9, 10, 11])
expect(pagesToShow(11, 11)).to.deep.equal([1, -2, 5, 6, 7, 8, 9, 10, 11])
})
})
describe('#mapPagesToPageItems', function () {
@ -84,17 +103,13 @@ describe('Pagination', function () {
})
describe('#pageItems', function () {
it('should work', function () {
expect(pageItems(5, 9)).to.deep.equal([{
expect(pageItems(6, 11)).to.deep.equal([{
type: 'page',
label: 1,
active: false
}, {
type: 'fastBackward',
label: 'fastBackward'
}, {
type: 'page',
label: 3,
active: false
}, {
type: 'page',
label: 4,
@ -102,21 +117,25 @@ describe('Pagination', function () {
}, {
type: 'page',
label: 5,
active: true
}, {
type: 'page',
label: 6,
active: false
}, {
type: 'page',
label: 6,
active: true
}, {
type: 'page',
label: 7,
active: false
}, {
type: 'page',
label: 8,
active: false
}, {
type: 'fastForward',
label: 'fastForward'
}, {
type: 'page',
label: 9,
label: 11,
active: false
}])
})