Refactor paginator code.

Author: Shammamah Hossain

src/dash-table/components/ControlledTable/index.tsx

@@ -797,7 +797,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
             tooltip_duration
         );
 
-        const { export_columns, export_format, export_headers, virtual, merge_duplicate_headers, paginator, page_current } = this.props;
+        const { export_columns, export_format, export_headers, virtual, merge_duplicate_headers, paginator, page_current, page_count } = this.props;
         const buttonProps = {
             export_columns,
             export_format,
@@ -852,7 +852,8 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
             {!this.displayPagination ? null : (
                 <PageNavigation
                     paginator={paginator}
-                    page_current={page_current} />
+                    page_current={page_current}
+                    page_count={page_count} />
             )}
         </div>);
     }

src/dash-table/components/PageNavigation/index.tsx

@@ -18,7 +18,7 @@ export default class PageNavigation extends Component<IPageNavigationProps> {
             return;
         }
 
-        paginator.goToPage(page);
+        paginator.loadPage(page - 1);
     }
 
     render() {
@@ -27,7 +27,7 @@ export default class PageNavigation extends Component<IPageNavigationProps> {
             page_current
         } = this.props;
 
-        return (paginator.lastPage === 0 ? null : (
+        return (paginator.lastPage !== undefined && paginator.lastPage <= 0) ? null : (
             <div className='previous-next-container'>
                 <button
                     className='first-page'
@@ -54,9 +54,9 @@ export default class PageNavigation extends Component<IPageNavigationProps> {
                     >
                     </input>
 
-                    {paginator.lastPage ? ' / ' : ''}
+                    {paginator.lastPage !== undefined ? ' / ' : ''}
 
-                    {paginator.lastPage ? <div className='last-page'>
+                    {paginator.lastPage !== undefined ? <div className='last-page'>
                         {paginator.lastPage + 1}
                     </div> : ''}
                 </div>
@@ -71,7 +71,7 @@ export default class PageNavigation extends Component<IPageNavigationProps> {
                 <button
                     className='last-page'
                     onClick={paginator.loadLast}
-                    disabled={!paginator.hasLast()}>
+                    disabled={paginator.lastPage === undefined || paginator.isLast()}>
                     <FontAwesomeIcon icon='angle-double-right' />
                 </button>
             </div>

src/dash-table/components/PageNavigation/props.ts

@@ -3,4 +3,5 @@ import { IPaginator } from 'dash-table/derived/paginator';
 export interface IPageNavigationProps {
     paginator: IPaginator;
     page_current: number;
+    page_count: number | undefined;
 }

src/dash-table/derived/paginator.ts

@@ -13,169 +13,118 @@ export interface IPaginator {
     loadPrevious(): void;
     loadFirst(): void;
     loadLast(): void;
-    lastPage: number | undefined;
-    goToPage(page: number): void;
+    loadPage(page: number): void;
     hasPrevious(): boolean;
     hasNext(): boolean;
-    hasLast(): boolean;
-}
-
-export function lastPage(data: Data, page_size: number) {
-    return Math.max(Math.ceil(data.length / page_size) - 1, 0);
-}
-
-export function loadPrevious(page_current: number, setProps: SetProps) {
-    if (page_current <= 0) {
-        return;
-    }
-
-    page_current--;
-    setProps({ page_current, ...clearSelection });
+    isLast(): boolean;
+    lastPage: number | undefined;
 }
 
-export function loadFirst(page_current: number, setProps: SetProps) {
-    page_current = 0;
-    setProps({ page_current, ...clearSelection });
+export interface IPaginatorParams {
+    setProps: SetProps;
+    page_current: number;
+    page_count: number | undefined;
 }
 
-export function hasPrevious(page_current: number) {
-    return (page_current !== 0);
+export function lastPage(
+    data: Data,
+    page_size: number
+) {
+    return Math.ceil(data.length / page_size);
 }
 
-function getBackEndPagination(
-    page_current: number,
-    setProps: SetProps,
-    page_count: number | undefined
+function makePaginator(
+    params: IPaginatorParams | null
 ): IPaginator {
 
-    // adjust for zero-indexing
-    if (page_count) {
-        page_count = Math.max(0, page_count - 1);
+    if (params === null) {
+        return {
+            loadNext() { },
+            loadPrevious() { },
+            loadFirst() { },
+            loadLast() { },
+            loadPage() { },
+            hasPrevious() { return true; },
+            hasNext() { return true; },
+            isLast() { return false; },
+            lastPage: undefined
+        };
     }
 
-    return {
-        loadNext: () => {
-            page_current++;
-            setProps({ page_current, ...clearSelection });
-        },
-        loadPrevious: () => loadPrevious(page_current, setProps),
-        loadFirst: () => loadFirst(page_current, setProps),
-        loadLast: () => {
-            if (page_count) {
-                page_current = page_count;
-                setProps({ page_current, ...clearSelection });
-            }
-        },
-        lastPage: page_count,
-        goToPage: (page: number) => {
-
-            // adjust for zero-indexing
-            page--;
-
-            page_current = page;
+    let {
+        setProps,
+        page_current,
+        page_count
+    } = params;
+
+    function updatePage() {
+        setProps({
+            page_current,
+            ...clearSelection
+        });
+    }
 
-            if (page < 0) {
-                page_current = 0;
-            }
+    function loadPage(page: number) {
 
-            if (page_count && page > page_count) {
-                page_current = page_count;
-            }
+        page = Math.max(0, page);
+        page = page_count ? Math.min(page_count - 1, page) : page;
 
-            setProps({ page_current, ...clearSelection });
-        },
-        hasPrevious: () => hasPrevious(page_current),
-        hasNext: () => {
-            return page_count === undefined || page_current !== page_count;
-        },
-        hasLast: () => {
-            return !page_count ? false : page_current !== page_count;
-        }
-    };
-}
+        page_current = page;
+        updatePage();
+    }
 
-function getFrontEndPagination(
-    page_current: number,
-    page_size: number,
-    setProps: SetProps,
-    data: Data
-) {
     return {
-        loadNext: () => {
-            const maxPageIndex = lastPage(data, page_size);
 
-            if (page_current >= maxPageIndex) {
-                return;
-            }
+        loadNext: () => loadPage(page_current + 1),
 
-            page_current++;
-            setProps({ page_current, ...clearSelection });
-        },
-        loadPrevious: () => loadPrevious(page_current, setProps),
-        loadFirst: () => loadFirst(page_current, setProps),
-        loadLast: () => {
-            page_current = lastPage(data, page_size);
-            setProps({ page_current, ...clearSelection });
-        },
-        lastPage: lastPage(data, page_size),
-        goToPage: (page: number) => {
+        loadPrevious: () => loadPage(page_current - 1),
 
-            page--;
+        loadFirst: () => loadPage(0),
 
-            page_current = page;
+        loadPage,
 
-            if (page < 0) {
-                page_current = 0;
-            }
-
-            if (page > lastPage(data, page_size)) {
-                page_current = lastPage(data, page_size);
-            }
+        loadLast: () => {
+            if (page_count) { loadPage(page_count - 1); }
+        },
 
-            setProps({ page_current, ...clearSelection });
+        hasPrevious: () => {
+            return page_current !== 0;
         },
-        hasPrevious: () => hasPrevious(page_current),
+
         hasNext: () => {
-            return (page_current !== lastPage(data, page_size));
+            return page_count ? page_current !== page_count - 1 : true;
         },
-        hasLast: () => {
-            return (page_current !== lastPage(data, page_size));
-        }
-    };
-}
 
-function getNoPagination() {
-    return {
-        loadNext: () => { },
-        loadPrevious: () => { },
-        loadFirst: () => { },
-        loadLast: () => { },
-        lastPage: 0,
-        goToPage: () => { },
-        hasPrevious: () => false,
-        hasNext: () => false,
-        hasLast: () => false
+        isLast: () => {
+            return page_count ? page_current === page_count - 1 : false;
+        },
+
+        lastPage: page_count ? Math.max(0, page_count - 1) : undefined
     };
 }
 
 const getter = (
-    page_action: TableAction,
+    table_action: TableAction,
     page_current: number,
     page_size: number,
     page_count: number | undefined,
     setProps: SetProps,
     data: Data
 ): IPaginator => {
-    switch (page_action) {
-        case TableAction.None:
-            return getNoPagination();
-        case TableAction.Native:
-            return getFrontEndPagination(page_current, page_size, setProps, data);
-        case TableAction.Custom:
-            return getBackEndPagination(page_current, setProps, page_count);
-        default:
-            throw new Error(`Unknown pagination mode: '${page_action}'`);
+
+    if (table_action === TableAction.Native) {
+        page_count = lastPage(data, page_size);
     }
+
+    if (page_count) page_count = Math.max(page_count, 1);
+
+    return makePaginator(
+        table_action === TableAction.None ? null : {
+            setProps,
+            page_current,
+            page_count
+        }
+    );
 };
 
 export default memoizeOneFactory(getter);