fix(Pagination): remove show* props

Semantic-Org · Dec 17, 2017 · 18dd654 · 18dd654
1 parent c91dedb
commit 18dd654
Show file tree

Hide file tree

Showing 12 changed files with 45 additions and 101 deletions.
diff --git a/docs/app/Examples/addons/Pagination/Usage/PaginationExampleMenuProps.js b/docs/app/Examples/addons/Pagination/Usage/PaginationExampleMenuProps.js
@@ -4,9 +4,10 @@ import { Pagination } from 'semantic-ui-react'
 const PaginationExampleShorthand = () => (
   <Pagination
     defaultActivePage={1}
+    firstItem={null}
+    lastItem={null}
     pointing
     secondary
-    showPreviousAndNext={false}
     totalPages={3}
   />
 )

diff --git a/docs/app/Examples/addons/Pagination/Usage/PaginationExampleOptions.js b/docs/app/Examples/addons/Pagination/Usage/PaginationExampleOptions.js
@@ -7,8 +7,8 @@ export default class PaginationExampleCustomization extends Component {
     boundaryRange: 1,
     siblingRange: 1,
     showEllipsis: true,
-    showFirstAndLast: true,
-    showPreviousAndNext: true,
+    showFirstAndLastNav: true,
+    showPreviousAndNextNav: true,
     totalPages: 50,
   }
 
@@ -24,8 +24,8 @@ export default class PaginationExampleCustomization extends Component {
       boundaryRange,
       siblingRange,
       showEllipsis,
-      showFirstAndLast,
-      showPreviousAndNext,
+      showFirstAndLastNav,
+      showPreviousAndNextNav,
       totalPages,
     } = this.state
 
@@ -36,12 +36,14 @@ export default class PaginationExampleCustomization extends Component {
             activePage={activePage}
             boundaryRange={boundaryRange}
             onPageChange={this.handlePaginationChange}
-            showEllipsis={showEllipsis}
-            showFirstAndLast={showFirstAndLast}
-            showPreviousAndNext={showPreviousAndNext}
-            siblingRange={siblingRange}
             size='mini'
             totalPages={totalPages}
+            // Heads up! All items are powered by shorthands, if you want to hide one of them, just pass `null` as value
+            ellipsisItem={showEllipsis ? undefined : null}
+            firstItem={showFirstAndLastNav ? undefined : null}
+            lastItem={showFirstAndLastNav ? undefined : null}
+            prevItem={showPreviousAndNextNav ? undefined : null}
+            nextItem={showPreviousAndNextNav ? undefined : null}
           />
         </Grid.Column>
 
@@ -69,15 +71,15 @@ export default class PaginationExampleCustomization extends Component {
               <Form.Input
                 label='Boundary pages range'
                 name='boundaryRange'
-                min={1}
+                min={0}
                 onChange={this.handleInputChange}
                 type='number'
                 value={boundaryRange}
               />
               <Form.Input
                 label='Sibling pages range'
                 name='siblingRange'
-                min={1}
+                min={0}
                 onChange={this.handleInputChange}
                 type='number'
                 value={siblingRange}
@@ -91,15 +93,15 @@ export default class PaginationExampleCustomization extends Component {
                 onChange={this.handleCheckboxChange}
               />
               <Form.Checkbox
-                checked={showFirstAndLast}
-                label='Show first and last pages'
-                name='showFirstAndLast'
+                checked={showFirstAndLastNav}
+                label='Show first and last nav pages'
+                name='showFirstAndLastNav'
                 onChange={this.handleCheckboxChange}
               />
               <Form.Checkbox
-                checked={showPreviousAndNext}
-                label='Show previous and next pages'
-                name='showPreviousAndNext'
+                checked={showPreviousAndNextNav}
+                label='Show previous and next nav pages'
+                name='showPreviousAndNextNav'
                 onChange={this.handleCheckboxChange}
               />
             </Form.Group>

diff --git a/docs/app/Examples/addons/Pagination/Usage/PaginationExampleShorthand.js b/docs/app/Examples/addons/Pagination/Usage/PaginationExampleShorthand.js
@@ -9,7 +9,6 @@ const PaginationExampleShorthand = () => (
     lastItem={{ content: <Icon name='angle double right' />, icon: true }}
     prevItem={{ content: <Icon name='angle left' />, icon: true }}
     nextItem={{ content: <Icon name='angle right' />, icon: true }}
-    showFirstAndLast
     totalPages={10}
   />
 )

diff --git a/src/addons/Pagination/Pagination.d.ts b/src/addons/Pagination/Pagination.d.ts
@@ -44,15 +44,6 @@ export interface PaginationProps {
    */
   onPageChange?: (event: React.MouseEvent<HTMLAnchorElement>, data: PaginationProps) => void;
 
-  /** Boolean flag to show ellipsis. */
-  showEllipsis?: boolean;
-
-  /** Boolean flag to hide first and last page links. */
-  showFirstAndLast?: boolean;
-
-  /** Boolean flag to show previous and next page links. */
-  showPreviousAndNext?: boolean;
-
   /** Number of always visible pages before and after the current one. */
   siblingRange?: number | string;
 

diff --git a/src/addons/Pagination/Pagination.js b/src/addons/Pagination/Pagination.js
@@ -64,15 +64,6 @@ export default class Pagination extends Component {
      */
     onPageChange: PropTypes.func,
 
-    /** Boolean flag to show ellipsis. */
-    showEllipsis: PropTypes.bool,
-
-    /** Boolean flag to hide first and last page links. */
-    showFirstAndLast: PropTypes.bool,
-
-    /** Boolean flag to show previous and next page links. */
-    showPreviousAndNext: PropTypes.bool,
-
     /** Number of always visible pages before and after the current one. */
     siblingRange: PropTypes.oneOfType([
       PropTypes.number,
@@ -106,14 +97,11 @@ export default class Pagination extends Component {
       ariaLabel: 'Next item',
       content: '⟩',
     },
-    pageItem: null,
+    pageItem: {},
     prevItem: {
       ariaLabel: 'Previous item',
       content: '⟨',
     },
-    showEllipsis: true,
-    showFirstAndLast: false,
-    showPreviousAndNext: true,
     siblingRange: 1,
   }
 
@@ -140,36 +128,21 @@ export default class Pagination extends Component {
   })
 
   render() {
-    const {
-      ariaLabel,
-      boundaryRange,
-      showEllipsis,
-      showFirstAndLast,
-      showPreviousAndNext,
-      siblingRange,
-      totalPages,
-    } = this.props
+    const { ariaLabel, boundaryRange, siblingRange, totalPages } = this.props
     const { activePage } = this.state
 
-    const items = createPaginationItems({
-      activePage,
-      boundaryRange,
-      showEllipsis,
-      showFirstAndLast,
-      showPreviousAndNext,
-      siblingRange,
-      totalPages,
-    })
+    const items = createPaginationItems({ activePage, boundaryRange, siblingRange, totalPages })
     const rest = getUnhandledProps(Pagination, this.props)
 
     return (
       <Menu {...rest} aria-label={ariaLabel} pagination role='navigation'>
-        {_.map(items, ({ active, type, value }) => PaginationItem.create(
-          this.props[type] || value, {
-            defaultProps: { value },
-            overrideProps: this.handleItemOverrides(active, type, value),
+        {_.map(items, ({ active, type, value }) => PaginationItem.create(this.props[type], {
+          defaultProps: {
+            content: value,
+            value,
           },
-        ))}
+          overrideProps: this.handleItemOverrides(active, type, value),
+        }))}
       </Menu>
     )
   }

diff --git a/src/lib/createPaginationItems/createPaginationItems.js b/src/lib/createPaginationItems/createPaginationItems.js
@@ -12,28 +12,25 @@ 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 {bool} rawOptions.showEllipsis Boolean flag to show ellipsis.
- * @param {bool} rawOptions.showFirstAndLast Boolean flag to hide first and last page links.
- * @param {bool} rawOptions.showPreviousAndNext Boolean flag to show previous and next page links.
  * @param {number} rawOptions.siblingRange Number of always visible pages before and after the current one.
  * @param {number} rawOptions.totalPages Total number of pages.
  */
 const createPaginationItems = (rawOptions) => {
   const options = typifyOptions(rawOptions)
-  const { activePage, showFirstAndLast, showPreviousAndNext, totalPages } = options
+  const { activePage, totalPages } = options
 
   const pageFactory = createPageFactory(activePage)
   const innerRange = isSimplePagination(options)
     ? createSimpleRange(1, totalPages, pageFactory)
     : createComplexRange(options, pageFactory)
 
   return [
-    showFirstAndLast && createFirstPage(),
-    showPreviousAndNext && createPrevItem(activePage),
+    createFirstPage(),
+    createPrevItem(activePage),
     ...innerRange,
-    showPreviousAndNext && createNextItem(activePage, totalPages),
-    showFirstAndLast && createLastItem(totalPages),
-  ].filter(Boolean)
+    createNextItem(activePage, totalPages),
+    createLastItem(totalPages),
+  ]
 }
 
 export default createPaginationItems
diff --git a/src/lib/createPaginationItems/paginationUtils.js b/src/lib/createPaginationItems/paginationUtils.js
@@ -5,32 +5,25 @@
  * @param {object} options
  * @param {number} options.boundaryRange Number of always visible pages at the beginning and end.
  * @param {number} options.siblingRange Number of always visible pages before and after the current one.
- * @param {boolean} options.showEllipsis Boolean flag to show ellipsis.
  * @param {number} options.totalPages Total number of pages.
  * @return {boolean}
  */
-export const isSimplePagination = ({ boundaryRange, showEllipsis, siblingRange, totalPages }) => {
-  const boundaryRangeSize = 2 * +boundaryRange
-  const ellipsisSize = 2 * +showEllipsis
-  const siblingRangeSize = 2 * +siblingRange
+export const isSimplePagination = ({ boundaryRange, siblingRange, totalPages }) => {
+  const boundaryRangeSize = 2 * boundaryRange
+  const ellipsisSize = 2
+  const siblingRangeSize = 2 * siblingRange
 
   return 1 + ellipsisSize + siblingRangeSize + boundaryRangeSize >= totalPages
 }
 
 export const typifyOptions = ({
   activePage,
   boundaryRange,
-  showEllipsis,
-  showFirstAndLast,
-  showPreviousAndNext,
   siblingRange,
   totalPages,
 }) => ({
   activePage: +activePage,
   boundaryRange: +boundaryRange,
-  showEllipsis: !!showEllipsis,
-  showFirstAndLast: !!showFirstAndLast,
-  showPreviousAndNext: !!showPreviousAndNext,
   siblingRange: +siblingRange,
   totalPages: +totalPages,
 })
diff --git a/src/lib/createPaginationItems/rangeFactories.js b/src/lib/createPaginationItems/rangeFactories.js
@@ -4,7 +4,7 @@ import { createInnerPrefix, createInnerSuffix } from './suffixFactories'
 export const createSimpleRange = (start, end, pageFactory) => _.map(_.range(start, end + 1), pageFactory)
 
 export const createComplexRange = (options, pageFactory) => {
-  const { activePage, boundaryRange, showEllipsis, siblingRange, totalPages } = options
+  const { activePage, boundaryRange, siblingRange, totalPages } = options
 
   const firstGroupEnd = boundaryRange
   const firstGroup = createSimpleRange(1, firstGroupEnd, pageFactory)
@@ -13,17 +13,17 @@ export const createComplexRange = (options, pageFactory) => {
   const lastGroup = createSimpleRange(lastGroupStart, totalPages, pageFactory)
 
   const innerGroupStart = Math.min(
-    Math.max(activePage - siblingRange, firstGroupEnd + (+showEllipsis + 1)),
-    lastGroupStart - +showEllipsis - (2 * siblingRange) - 1,
+    Math.max(activePage - siblingRange, firstGroupEnd + 2),
+    lastGroupStart - 1 - (2 * siblingRange) - 1,
   )
   const innerGroupEnd = innerGroupStart + (2 * siblingRange)
   const innerGroup = createSimpleRange(innerGroupStart, innerGroupEnd, pageFactory)
 
   return [
     ...firstGroup,
-    showEllipsis && createInnerPrefix(firstGroupEnd, innerGroupStart, pageFactory),
+    createInnerPrefix(firstGroupEnd, innerGroupStart, pageFactory),
     ...innerGroup,
-    showEllipsis && createInnerSuffix(innerGroupEnd, lastGroupStart, pageFactory),
+    createInnerSuffix(innerGroupEnd, lastGroupStart, pageFactory),
     ...lastGroup,
   ].filter(Boolean)
 }
diff --git a/src/lib/createPaginationItems/suffixFactories.js b/src/lib/createPaginationItems/suffixFactories.js
@@ -11,7 +11,6 @@ export const createInnerPrefix = (firstGroupEnd, innerGroupStart, pageFactory) =
 export const createInnerSuffix = (innerGroupEnd, lastGroupStart, pageFactory) => {
   const suffixPage = innerGroupEnd + 1
   const showEllipsis = suffixPage !== (lastGroupStart - 1)
-
   const suffixFactory = showEllipsis ? createEllipsisItem : pageFactory
 
   return suffixFactory(suffixPage)

diff --git a/test/specs/addons/Pagination/Pagination-test.js b/test/specs/addons/Pagination/Pagination-test.js
@@ -26,7 +26,7 @@ describe('Pagination', () => {
         />,
       )
         .find('PaginationItem')
-        .at(3)
+        .at(4)
         .simulate('click', event)
 
       onPageChange.should.have.been.calledOnce()

diff --git a/test/specs/lib/createPaginationItems/createPaginationItems-test.js b/test/specs/lib/createPaginationItems/createPaginationItems-test.js
@@ -5,9 +5,6 @@ describe('createPaginationItems', () => {
     createPaginationItems({
       activePage: 15,
       boundaryRange: 2,
-      showEllipsis: true,
-      showFirstAndLast: true,
-      showPreviousAndNext: true,
       siblingRange: 2,
       totalPages: 30,
     }).should.deep.equal([

diff --git a/test/specs/lib/createPaginationItems/itemFactories-test.js b/test/specs/lib/createPaginationItems/itemFactories-test.js
@@ -7,14 +7,6 @@ import {
   createPrevItem,
 } from 'src/lib/createPaginationItems/itemFactories'
 
-//
-// export const createPageFactory = current => page => ({
-//   active: current === page,
-//   type: 'pageItem',
-//   value: page,
-// })
-//
-
 describe('itemFactories', () => {
   describe('createEllipsisItem', () => {
     it('"active" is always false', () => {