pass isNext and isPrev to render props context to allow establishment…

… of previous and next controls

src/Pagination/Pagination.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { PaginationRenderProps } from "..";
 import { pagingRange } from "../util";
 import { PaginationProps, SetPageOptions } from "./types";
 
@@ -64,12 +65,23 @@ const Pagination: React.FunctionComponent<PaginationProps> = ({
 
     if (onChange) onChange(newPage);
   };
+  const renderProps = (): PaginationRenderProps => ({
+    setPage,
+    page: 0,
+    index: 0,
+    currentPage,
+    isCurrentPage: false,
+    isPrev: false,
+    isNext: false
+  });
 
   return (
     <>
+      {children({ ...renderProps(), isPrev: true })}
       {pagingRange(currentPage, { total: pageCount, length: show }).map((page, index) =>
-        children({ setPage, page, index, currentPage, isCurrentPage: page === currentPage })
+        children({ ...renderProps(), setPage, page, index, currentPage, isCurrentPage: page === currentPage })
       )}
+      {children({ ...renderProps(), isNext: true })}
     </>
   );
 };

src/Pagination/types.ts

@@ -61,6 +61,16 @@ export type PaginationRenderProps = {
    * isCurrentPage: Indicates if the current page being rendered is the active page.
    */
   isCurrentPage: boolean;
+  /**
+   * isPrev: Indicates if the current page being rendered should be treated
+   * as a control to go to the previous page.
+   */
+  isPrev: boolean;
+  /**
+   * isNext: Indicates if the current page being rendered should be treated
+   * as a control to go to the next page.
+   */
+  isNext: boolean;
 };
 
 /**

src/stories/Pagination.stories.tsx

@@ -30,25 +30,43 @@ const children: React.FunctionComponent<PaginationRenderProps> = ({
   index,
   currentPage,
   isCurrentPage,
+  isPrev,
+  isNext,
   setPage
-}) => (
-  <div
-    className="item"
-    key={index}
-    style={{ backgroundColor: isCurrentPage ? "yellow" : "white" }}
-    onClick={() => {
-      console.log(`Navigating from page ${currentPage} to page ${page}`);
-      setPage({ page });
-    }}>
-    <h1>{page}</h1>
-  </div>
-);
+}) => {
+  if (isPrev)
+    return (
+      <div className="item" onClick={() => setPage({ prev: true })}>
+        Previous
+      </div>
+    );
+
+  if (isNext)
+    return (
+      <div className="item" onClick={() => setPage({ next: true })}>
+        Next
+      </div>
+    );
+
+  return (
+    <div
+      className="item"
+      key={index}
+      style={{ backgroundColor: isCurrentPage ? "yellow" : "white" }}
+      onClick={() => {
+        console.log(`Navigating from page ${currentPage} to page ${page}`);
+        setPage({ page });
+      }}>
+      <h1>{page}</h1>
+    </div>
+  );
+};
 
 export const BasicPagination = Template.bind({});
 BasicPagination.args = {
   initialPage: 1,
   pageCount: 1024,
   show: 10,
-  onChange: page => console.log(`Going to page ${page}`),
+  onChange: (page: number) => console.log(`Going to page ${page}`),
   children
 };