Add showFirstLast property

couds · Oct 18, 2018 · 090ae05 · 090ae05
1 parent 5cdf6b2
commit 090ae05
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 0 deletions.
diff --git a/src/components/pagination/pagination.js b/src/components/pagination/pagination.js
@@ -19,6 +19,7 @@ class Pagination extends React.PureComponent {
     /** Text of the Previous button */
     previous: PropTypes.node,
     showPrevNext: PropTypes.bool,
+    showFirstLast: PropTypes.bool,
     autoHide: PropTypes.bool,
     /**
      * Classname of the container of the pagination, this could be used to customize the inner views
@@ -35,6 +36,7 @@ class Pagination extends React.PureComponent {
     next: 'Next',
     previous: 'Previous',
     showPrevNext: true,
+    showFirstLast: false,
     autoHide: true,
     className: '',
     renderAs: 'nav',
@@ -77,6 +79,7 @@ class Pagination extends React.PureComponent {
       next,
       previous,
       showPrevNext,
+      showFirstLast,
       delta,
       autoHide,
       className,
@@ -131,6 +134,29 @@ class Pagination extends React.PureComponent {
             && (
             <React.Fragment>
               <ul className="pagination-list">
+                {
+                  showFirstLast && current !== 1 && firstPage !== 1 && (
+                    <React.Fragment>
+                      <li key={1}>
+                        <a
+                          role="button"
+                          tabIndex={0}
+                          className="pagination-link"
+                          onClick={current === 1 ? undefined : this.goToPage(1)}
+                          aria-label="Page 1"
+                          aria-current="page"
+                        >
+                            1
+                        </a>
+                      </li>
+                      <li>
+                        <span className="pagination-ellipsis">
+                          &hellip;
+                        </span>
+                      </li>
+                    </React.Fragment>
+                  )
+                }
                 {
                   Array((lastPage - firstPage) + 1).fill(0).map((_, i) => (
                     // eslint-disable-next-line react/no-array-index-key
@@ -150,6 +176,29 @@ class Pagination extends React.PureComponent {
                     </li>
                   ))
                 }
+                {
+                  showFirstLast && current !== lastPage && total !== lastPage && (
+                    <React.Fragment>
+                      <li key={total}>
+                        <span className="pagination-ellipsis">
+                          &hellip;
+                        </span>
+                      </li>
+                      <li>
+                        <a
+                          role="button"
+                          tabIndex={0}
+                          className="pagination-link"
+                          onClick={current === total ? undefined : this.goToPage(total)}
+                          aria-label={`Page ${total}`}
+                          aria-current="page"
+                        >
+                          {total}
+                        </a>
+                      </li>
+                    </React.Fragment>
+                  )
+                }
               </ul>
             </React.Fragment>
             )

diff --git a/src/components/pagination/pagination.story.js b/src/components/pagination/pagination.story.js
@@ -16,4 +16,13 @@ storiesOf('Pagination', module)
   )))
   .add('Without prev/next button', (() => (
     <Pagination showPrevNext={false} current={3} total={5} delta={1} />
+  )))
+  .add('With first/last pages numbers', (() => (
+    <React.Fragment>
+      <Pagination showFirstLast current={3} total={5} delta={1} />
+      <Pagination showFirstLast current={1} total={5} delta={1} />
+      <Pagination showFirstLast current={5} total={5} delta={1} />
+      <Pagination showFirstLast current={2} total={2} delta={1} />
+      <Pagination showFirstLast current={1} total={2} delta={1} />
+    </React.Fragment>
   )));