fix pagination issues

beforesemicolon · Nov 17, 2019 · b9d42b9 · b9d42b9
1 parent 1f4efe4
commit b9d42b9
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 8 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "flatlist-react",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "A helpful utility component to handle lists in react like a champ",
   "main": "./lib/index.js",
   "scripts": {

diff --git a/src/flatlist-react.tsx b/src/flatlist-react.tsx
@@ -86,12 +86,11 @@ const FlatList = forwardRef((props: Props, ref: Ref<HTMLElement>) => {
         sortBy, sortDesc, sort, sortCaseInsensitive, sortGroupBy, sortGroupDesc, // sort props
         searchBy, searchOnEveryWord, searchTerm, searchCaseInsensitive, // search props
         display, displayRow, rowGap, displayGrid, gridGap, minColumnWidth, // display props,
-        hasMoreItems, loadMoreItems, paginationLoadingIndicator, paginationLoadingIndicatorPosition,
-        pagination, // pagination props
+        hasMoreItems, loadMoreItems, paginationLoadingIndicator, paginationLoadingIndicatorPosition, // pagination props
         ...otherProps // props to be added to the wrapper container if wrapperHtmlTag is specified
     } = props;
     // tslint:disable-next-line:prefer-const
-    let {list, group, search, ...tagProps} = otherProps;
+    let {list, group, search, pagination, ...tagProps} = otherProps;
 
     list = convertListToArray(list);
 
@@ -209,6 +208,13 @@ const FlatList = forwardRef((props: Props, ref: Ref<HTMLElement>) => {
         });
     }
 
+    if (pagination && pagination.loadMore) {
+        pagination = {
+            ...(FlatList.defaultProps && FlatList.defaultProps.pagination),
+            ...pagination
+        };
+    }
+
     const content = (
         <Fragment>
             {
@@ -222,7 +228,7 @@ const FlatList = forwardRef((props: Props, ref: Ref<HTMLElement>) => {
                 {...{display, displayRow, rowGap, displayGrid, gridGap, minColumnWidth}}
                 showGroupSeparatorAtTheBottom={group.separatorAtTheBottom || showGroupSeparatorAtTheBottom}
             />
-            {(loadMoreItems || pagination.loadMore) &&
+            {(loadMoreItems || (pagination && pagination.loadMore)) &&
                 <InfiniteLoader
                   hasMore={hasMoreItems || pagination.hasMore}
                   loadMore={loadMoreItems || pagination.loadMore}
@@ -324,6 +330,15 @@ FlatList.propTypes = {
      * the minimum column width when display grid is activated
      */
     minColumnWidth: string,
+    /**
+     * a pagination shorthand configuration
+     */
+    pagination: shape({
+        hasMore: bool,
+        loadMore: func,
+        loadingIndicator: oneOfType([node, func, element]),
+        loadingIndicatorPosition: string,
+    }),
     /**
      * a custom element to be used instead of the default loading indicator for pagination
      */
@@ -441,6 +456,12 @@ FlatList.defaultProps = {
     limit: 0,
     loadMoreItems: null,
     minColumnWidth: '',
+    pagination: {
+        hasMore: false,
+        loadMore: null,
+        loadingIndicator: null,
+        loadingIndicatorPosition: '',
+    },
     paginationLoadingIndicator: undefined,
     paginationLoadingIndicatorPosition: '',
     renderWhenEmpty: null,

diff --git a/src/subComponents/InfiniteLoader.tsx b/src/subComponents/InfiniteLoader.tsx
@@ -4,10 +4,10 @@ import DefaultLoadIndicator from './DefaultLoadIndicator';
 import {bool, element, func, node, oneOf, oneOfType} from 'prop-types';
 
 export interface InfiniteLoaderInterface {
-  loadingIndicator: () => JSX.Element | JSX.Element | null;
+  loadingIndicator: null | (() => JSX.Element) | JSX.Element;
   loadingIndicatorPosition: string;
   hasMore: boolean;
-  loadMore: () => void;
+  loadMore: null | (() => void);
 }
 
 interface State {
@@ -140,7 +140,7 @@ class InfiniteLoader extends Component<InfiniteLoaderInterface, State> {
       if (loaderPosition <= startingPoint) {
         this.waitingForUpdate = true;
         if (!this.state.loading) {
-          this.setState({loading: true}, this.props.loadMore);
+          this.setState({loading: true}, this.props.loadMore as (() => void));
         }
       }
     }
@@ -165,6 +165,7 @@ class InfiniteLoader extends Component<InfiniteLoaderInterface, State> {
         {
           hasMore &&
           (loadingIndicator ?
+              // @ts-ignore
               (isFunction(loadingIndicator) ? loadingIndicator() : loadingIndicator) :
               DefaultLoadIndicator)
         }