Skip to content

Commit

Permalink
fix(Pagination): with pagination fix hidden ellipsis (#3271)
Browse files Browse the repository at this point in the history
  • Loading branch information
layershifter authored Nov 10, 2018
1 parent e3d933a commit 47747f1
Show file tree
Hide file tree
Showing 7 changed files with 89 additions and 17 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import React from 'react'
import { Pagination } from 'semantic-ui-react'

const PaginationExampleCompact = () => (
<Pagination
boundaryRange={0}
defaultActivePage={1}
ellipsisItem={null}
firstItem={null}
lastItem={null}
siblingRange={1}
totalPages={10}
/>
)

export default PaginationExampleCompact
1 change: 1 addition & 0 deletions docs/src/examples/addons/Pagination/Types/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ const PaginationTypesExamples = () => (
description='A component to render a pagination.'
examplePath='addons/Pagination/Types/PaginationExamplePagination'
/>
<ComponentExample examplePath='addons/Pagination/Types/PaginationExampleCompact' />
</ExampleSection>
)

Expand Down
16 changes: 14 additions & 2 deletions src/addons/Pagination/Pagination.js
Original file line number Diff line number Diff line change
Expand Up @@ -110,10 +110,22 @@ export default class Pagination extends Component {
})

render() {
const { 'aria-label': ariaLabel, boundaryRange, siblingRange, totalPages } = this.props
const {
'aria-label': ariaLabel,
boundaryRange,
ellipsisItem,
siblingRange,
totalPages,
} = this.props
const { activePage } = this.state

const items = createPaginationItems({ activePage, boundaryRange, siblingRange, totalPages })
const items = createPaginationItems({
activePage,
boundaryRange,
hideEllipsis: _.isNil(ellipsisItem),
siblingRange,
totalPages,
})
const rest = getUnhandledProps(Pagination, this.props)

return (
Expand Down
9 changes: 5 additions & 4 deletions src/lib/createPaginationItems/createPaginationItems.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,11 @@ import { isSimplePagination, typifyOptions } from './paginationUtils'

/**
* @param {object} rawOptions
* @param {number} rawOptions.activePage
* @param {number} rawOptions.boundaryRange Number of always visible pages at the beginning and end.
* @param {number} rawOptions.siblingRange Number of always visible pages before and after the current one.
* @param {number} rawOptions.totalPages Total number of pages.
* @param {number|string} rawOptions.activePage
* @param {number|string} rawOptions.boundaryRange Number of always visible pages at the beginning and end.
* @param {boolean} rawOptions.hideEllipsis Marks if ellipsis should be hidden.
* @param {number|string} rawOptions.siblingRange Number of always visible pages before and after the current one.
* @param {number|string} rawOptions.totalPages Total number of pages.
*/
const createPaginationItems = (rawOptions) => {
const options = typifyOptions(rawOptions)
Expand Down
6 changes: 4 additions & 2 deletions src/lib/createPaginationItems/paginationUtils.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@
* @param {number} options.totalPages Total number of pages.
* @return {boolean}
*/
export const isSimplePagination = ({ boundaryRange, siblingRange, totalPages }) => {
export const isSimplePagination = ({ boundaryRange, hideEllipsis, siblingRange, totalPages }) => {
const boundaryRangeSize = 2 * boundaryRange
const ellipsisSize = 2
const ellipsisSize = hideEllipsis ? 0 : 2
const siblingRangeSize = 2 * siblingRange

return 1 + ellipsisSize + siblingRangeSize + boundaryRangeSize >= totalPages
Expand All @@ -19,11 +19,13 @@ export const isSimplePagination = ({ boundaryRange, siblingRange, totalPages })
export const typifyOptions = ({
activePage,
boundaryRange,
hideEllipsis,
siblingRange,
totalPages,
}) => ({
activePage: +activePage,
boundaryRange: +boundaryRange,
hideEllipsis: !!hideEllipsis,
siblingRange: +siblingRange,
totalPages: +totalPages,
})
18 changes: 10 additions & 8 deletions src/lib/createPaginationItems/rangeFactories.js
Original file line number Diff line number Diff line change
@@ -1,29 +1,31 @@
import _ from 'lodash'
import { createInnerPrefix, createInnerSuffix } from './suffixFactories'

export const createSimpleRange = (start, end, pageFactory) => _.map(_.range(start, end + 1), pageFactory)
export const createSimpleRange = (start, end, pageFactory) =>
_.map(_.range(start, end + 1), pageFactory)

export const createComplexRange = (options, pageFactory) => {
const { activePage, boundaryRange, siblingRange, totalPages } = options
const { activePage, boundaryRange, hideEllipsis, siblingRange, totalPages } = options

const ellipsisSize = hideEllipsis ? 0 : 1
const firstGroupEnd = boundaryRange
const firstGroup = createSimpleRange(1, firstGroupEnd, pageFactory)

const lastGroupStart = (totalPages + 1) - boundaryRange
const lastGroupStart = totalPages + 1 - boundaryRange
const lastGroup = createSimpleRange(lastGroupStart, totalPages, pageFactory)

const innerGroupStart = Math.min(
Math.max(activePage - siblingRange, firstGroupEnd + 2),
lastGroupStart - 1 - (2 * siblingRange) - 1,
Math.max(activePage - siblingRange, firstGroupEnd + ellipsisSize + 1),
lastGroupStart - ellipsisSize - 2 * siblingRange - 1,
)
const innerGroupEnd = innerGroupStart + (2 * siblingRange)
const innerGroupEnd = innerGroupStart + 2 * siblingRange
const innerGroup = createSimpleRange(innerGroupStart, innerGroupEnd, pageFactory)

return [
...firstGroup,
createInnerPrefix(firstGroupEnd, innerGroupStart, pageFactory),
!hideEllipsis && createInnerPrefix(firstGroupEnd, innerGroupStart, pageFactory),
...innerGroup,
createInnerSuffix(innerGroupEnd, lastGroupStart, pageFactory),
!hideEllipsis && createInnerSuffix(innerGroupEnd, lastGroupStart, pageFactory),
...lastGroup,
].filter(Boolean)
}
Original file line number Diff line number Diff line change
Expand Up @@ -29,5 +29,43 @@ describe('createPaginationItems', () => {
{ active: false, type: 'lastItem', value: 30 },
])
})
})

it('creates an array of item objects when "hideEllipsis" is true', () => {
createPaginationItems({
activePage: 1,
boundaryRange: 0,
hideEllipsis: true,
siblingRange: 1,
totalPages: 10,
}).should.deep.equal([
{ active: false, type: 'firstItem', value: 1 },
{ active: false, type: 'prevItem', value: 1 },

{ active: true, type: 'pageItem', value: 1 },
{ active: false, type: 'pageItem', value: 2 },
{ active: false, type: 'pageItem', value: 3 },

{ active: false, type: 'nextItem', value: 2 },
{ active: false, type: 'lastItem', value: 10 },
])
})

it('creates an array of item objects when is simple', () => {
createPaginationItems({
activePage: 1,
boundaryRange: 2,
siblingRange: 2,
totalPages: 3,
}).should.deep.equal([
{ active: false, type: 'firstItem', value: 1 },
{ active: false, type: 'prevItem', value: 1 },

{ active: true, type: 'pageItem', value: 1 },
{ active: false, type: 'pageItem', value: 2 },
{ active: false, type: 'pageItem', value: 3 },

{ active: false, type: 'nextItem', value: 2 },
{ active: false, type: 'lastItem', value: 3 },
])
})
})

0 comments on commit 47747f1

Please sign in to comment.