chore(Pagination): own implementation instead of react-bootstrap (#2549)

src/common/pagination.js

@@ -0,0 +1,125 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const PageItem = ({ active, children, disabled, onClick, value }) =>
+  active ? (
+    <li className='active page-item'>
+      <span className='page-link'>{children}</span>
+    </li>
+  ) : disabled ? (
+    <li className='disabled page-item'>
+      <span className='page-link'>{children}</span>
+    </li>
+  ) : (
+    <li className='page-item'>
+      <a className='page-link' href='#' onClick={onClick} data-value={value}>
+        {children}
+      </a>
+    </li>
+  )
+
+export default class Pagination extends React.PureComponent {
+  static defaultProps = {
+    ellipsis: true,
+    maxButtons: 7,
+    next: true,
+    prev: true,
+  }
+
+  static propTypes = {
+    ariaLabel: PropTypes.string,
+    ellipsis: PropTypes.bool,
+    maxButtons: PropTypes.number,
+    next: PropTypes.bool,
+    onChange: PropTypes.func.isRequired,
+    pages: PropTypes.number.isRequired,
+    prev: PropTypes.bool,
+    value: PropTypes.number.isRequired,
+  }
+
+  _onClick (event) {
+    event.preventDefault()
+    this.props.onChange(+event.currentTarget.dataset.value)
+  }
+  _onClick = this._onClick.bind(this)
+
+  render () {
+    const {
+      ariaLabel,
+      ellipsis,
+      maxButtons,
+      next,
+      pages,
+      prev,
+      value,
+    } = this.props
+    const onClick = this._onClick
+
+    let min, max
+    if (pages <= maxButtons) {
+      min = 1
+      max = pages
+    } else {
+      min = Math.max(
+        1,
+        Math.min(value - Math.floor(maxButtons / 2), pages - maxButtons + 1)
+      )
+      max = min + maxButtons - 1
+    }
+
+    const pageButtons = []
+    if (ellipsis && min !== 1) {
+      pageButtons.push(
+        <PageItem disabled key='firstEllipsis'>
+          …
+        </PageItem>
+      )
+    }
+    for (let page = min; page <= max; ++page) {
+      pageButtons.push(
+        <PageItem
+          active={page === value}
+          key={page}
+          onClick={onClick}
+          value={page}
+        >
+          {page}
+        </PageItem>
+      )
+    }
+    if (ellipsis && max !== pages) {
+      pageButtons.push(
+        <PageItem disabled key='lastEllipsis'>
+          …
+        </PageItem>
+      )
+    }
+    return (
+      <nav aria-label={ariaLabel}>
+        <ul className='pagination'>
+          {prev && (
+            <PageItem
+              aria-label='Previous'
+              disabled={value === 1}
+              onClick={onClick}
+              value={value - 1}
+            >
+              ‹
+            </PageItem>
+          )}
+          {pageButtons}
+          {next && (
+            <PageItem
+              aria-label='Next'
+              disabled={value === pages}
+              onClick={onClick}
+              value={value + 1}
+            >
+              ›
+            </PageItem>
+          )}
+        </ul>
+      </nav>
+    )
+  }
+}

src/common/sorted-table/index.js

@@ -8,7 +8,7 @@ import Shortcuts from 'shortcuts'
 import { Portal } from 'react-overlays'
 import { routerShape } from 'react-router/lib/PropTypes'
 import { Set } from 'immutable'
-import { Dropdown, MenuItem, Pagination } from 'react-bootstrap-4/lib'
+import { Dropdown, MenuItem } from 'react-bootstrap-4/lib'
 import {
   ceil,
   filter,
@@ -25,6 +25,7 @@ import ButtonGroup from '../button-group'
 import Component from '../base-component'
 import defined, { get } from '../xo-defined'
 import Icon from '../icon'
+import Pagination from '../pagination'
 import propTypes from '../prop-types-decorator'
 import SingleLineRow from '../single-line-row'
 import Tooltip from '../tooltip'
@@ -526,8 +527,7 @@ export default class SortedTable extends Component {
     this._saveUrlState(this.state.filter, page)
     this.setState({ page })
   }
-
-  _onPageSelection = (_, event) => this._setPage(event.eventKey)
+  _setPage = this._setPage.bind(this)
 
   _selectAllVisibleItems = event => {
     this.setState({
@@ -709,14 +709,9 @@ export default class SortedTable extends Component {
 
     const paginationInstance = displayPagination && (
       <Pagination
-        prev
-        next
-        ellipsis
-        boundaryLinks
-        maxButtons={7}
-        items={ceil(nItems / itemsPerPage)}
-        activePage={state.page}
-        onSelect={this._onPageSelection}
+        pages={ceil(nItems / itemsPerPage)}
+        onChange={this._setPage}
+        value={state.page}
       />
     )
 

src/xo-app/home/index.js

@@ -10,6 +10,7 @@ import Icon from 'icon'
 import invoke from 'invoke'
 import Link from 'link'
 import Page from '../page'
+import Pagination from 'pagination'
 import propTypes from 'prop-types-decorator'
 import React from 'react'
 import Shortcuts from 'shortcuts'
@@ -79,7 +80,6 @@ import {
   DropdownButton,
   MenuItem,
   OverlayTrigger,
-  Pagination,
   Popover,
 } from 'react-bootstrap-4/lib'
 
@@ -586,8 +586,8 @@ export default class Home extends Component {
 
   _expandAll = () => this.setState({ expandAll: !this.state.expandAll })
 
-  _onPageSelection = (_, event) => {
-    this.page = event.eventKey
+  _onPageSelection = page => {
+    this.page = page
   }
 
   _tick = isCriteria => (
@@ -1101,16 +1101,9 @@ export default class Home extends Component {
               <div style={{ display: 'flex', width: '100%' }}>
                 <div style={{ margin: 'auto' }}>
                   <Pagination
-                    first
-                    last
-                    prev
-                    next
-                    ellipsis
-                    boundaryLinks
-                    maxButtons={5}
-                    items={ceil(filteredItems.length / ITEMS_PER_PAGE)}
-                    activePage={activePage}
-                    onSelect={this._onPageSelection}
+                    onChange={this._onPageSelection}
+                    pages={ceil(filteredItems.length / ITEMS_PER_PAGE)}
+                    value={activePage}
                   />
                 </div>
               </div>