fix tests, improve pagination and props

Elson Correia · Elson Correia · commit f997f60f5438 · 2022-10-19T06:52:18.000-04:00
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "flatlist-react",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "description": "A helpful utility component to handle lists in react like a champ",
   "main": "./lib/index.js",
   "scripts": {
diff --git a/src/___subComponents/InfiniteLoader.tsx b/src/___subComponents/InfiniteLoader.tsx
@@ -89,11 +89,12 @@ class InfiniteLoader extends Component<InfiniteLoaderProps, State> {
       this.state.scrollingContainer.scrollTop = this.lastScrollTop;
     }
 
-    // if prev and current loading are the same is because the component updated from props change
-    // otherwise is because the component updated itself
+    // reset loading state when the list size changes
     if (prevProps.itemsCount !== this.props.itemsCount) {
       this.reset();
     }
+
+    this.checkIfLoadingIsNeeded();
   }
 
   componentWillUnmount(): void {
@@ -103,9 +104,7 @@ class InfiniteLoader extends Component<InfiniteLoaderProps, State> {
 
   // update the loading flags and items count whether "hasMore" is false or list changed
   reset(): void {
-    this.setState({ loading: false }, () => {
-      this.checkIfLoadingIsNeeded();
-    });
+    this.setState({ loading: false });
   }
 
   getScrollingContainerChildrenCount = (): number => {
@@ -166,22 +165,24 @@ class InfiniteLoader extends Component<InfiniteLoaderProps, State> {
     }
   };
 
-  render(): JSX.Element {
+  render(): ReactNode {
     const { loading } = this.state;
     const { hasMore, loadingIndicator, loadingIndicatorPosition } = this.props;
 
+    const spinning = hasMore && loading;
+
     // do not remove the element from the dom so the ref is not broken but set it invisible enough
     const styles: CSSProperties = {
       display: "flex",
-      height: hasMore ? "auto" : 0,
+      height: spinning ? "auto" : 0,
       justifyContent:
         loadingIndicatorPosition === "center"
           ? loadingIndicatorPosition
           : loadingIndicatorPosition === "right"
           ? "flex-end"
           : "flex-start",
-      padding: hasMore ? "5px 0" : 0,
-      visibility: loading && hasMore ? "visible" : "hidden",
+      padding: spinning ? "5px 0" : 0,
+      visibility: spinning ? "visible" : "hidden",
     };
 
     const loadingEl = isFunction(loadingIndicator)
@@ -194,7 +195,7 @@ class InfiniteLoader extends Component<InfiniteLoaderProps, State> {
         className="__infinite-loader"
         style={styles}
       >
-        {hasMore && (loadingIndicator ? loadingEl : <DefaultLoadIndicator />)}
+        {spinning && (loadingIndicator ? loadingEl : <DefaultLoadIndicator />)}
       </div>
     );
   }
diff --git a/src/___subComponents/PlainList.tsx b/src/___subComponents/PlainList.tsx
@@ -1,5 +1,5 @@
 import { array, bool, func, node, object, oneOfType, string } from "prop-types";
-import React, { forwardRef, Ref } from "react";
+import React, { forwardRef, ReactNode, Ref } from "react";
 import convertListToArray from "../___utils/convertListToArray";
 import { isString } from "../___utils/isType";
 import { listItem } from "../flatListProps";
@@ -9,8 +9,8 @@ import { handleRenderItem, renderBlank, renderFunc } from "./uiFunctions";
 
 export interface PlainListProps {
   list: listItem[];
-  renderItem: JSX.Element | renderFunc;
-  renderWhenEmpty?: null | (() => JSX.Element);
+  renderItem: ReactNode | renderFunc;
+  renderWhenEmpty?: ReactNode | (() => JSX.Element);
   wrapperHtmlTag?: string;
   renderOnScroll?: boolean;
   forwardRef?: Ref<HTMLElement>;
diff --git a/src/___subComponents/ScrollRenderer.tsx b/src/___subComponents/ScrollRenderer.tsx
@@ -1,6 +1,7 @@
 import { any, arrayOf, element, func, node, oneOfType } from "prop-types";
 import React, {
   createRef,
+  ReactNode,
   Ref,
   useEffect,
   useLayoutEffect,
@@ -17,8 +18,8 @@ interface Props {
   list: any[];
   renderItem: renderItem;
   groupSeparator:
-    | JSX.Element
-    | ((g: any, idx: number, label: string) => JSX.Element | null)
+    | ReactNode
+    | ((g: any, idx: number, label: string) => ReactNode | null)
     | null;
 }
 
diff --git a/src/___subComponents/ScrollToTopButton.tsx b/src/___subComponents/ScrollToTopButton.tsx
@@ -7,12 +7,12 @@ import {
   oneOfType,
   shape,
 } from "prop-types";
-import React, { createRef, Ref, useEffect, useState } from "react";
+import React, { createRef, ReactNode, Ref, useEffect, useState } from "react";
 import { isFunction } from "../___utils/isType";
 import { btnPosition } from "./uiFunctions";
 
 interface Props {
-  button: JSX.Element | (() => JSX.Element);
+  button: ReactNode | (() => ReactNode);
   position: string;
   offset: number;
   padding: number;
@@ -22,7 +22,7 @@ interface Props {
 function ScrollToTopButton(props: Props) {
   const anchor: Ref<HTMLElement> = createRef();
   const { button, position, padding, offset, scrollingContainer } = props;
-  const btn = isFunction(button) ? (button as () => JSX.Element)() : button;
+  const btn = isFunction(button) ? (button as () => ReactNode)() : button;
   const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
diff --git a/src/___subComponents/uiFunctions.tsx b/src/___subComponents/uiFunctions.tsx
@@ -2,21 +2,23 @@ import React, { cloneElement, Component, FC, ReactNode } from "react";
 import { isArray, isFunction } from "../___utils/isType";
 import DefaultBlank from "./DefaultBlank";
 
-export type renderFunc = (item: any, key: number | string) => ReactNode;
+export type renderFunc = (
+  item: any,
+  key: number | string
+) => ReactNode | JSX.Element;
 
-export type renderItemCallback = (item: any, idx: number | string) => ReactNode;
 export type renderItem =
   | ReactNode
-  | FC
+  | FC<any>
   | Component
   | renderFunc
-  | renderItemCallback;
+  | JSX.Element;
 
 export const renderBlank = (
-  renderWhenEmpty: null | (() => JSX.Element) = null
+  renderWhenEmpty: ReactNode | (() => JSX.Element) = null
 ): JSX.Element =>
   renderWhenEmpty && isFunction(renderWhenEmpty)
-    ? renderWhenEmpty()
+    ? (renderWhenEmpty as () => JSX.Element)()
     : DefaultBlank();
 
 export const handleRenderGroupSeparator = (CustomSeparator: any) =>
@@ -49,8 +51,8 @@ export const handleRenderItem =
     renderItem: renderItem,
     renderSeparator:
       | null
-      | ((s: string, i: number | string) => JSX.Element) = null
-  ): renderFunc | ReactNode =>
+      | ((s: string, i: number | string) => ReactNode) = null
+  ): renderFunc =>
   (item: any, key: number | string) => {
     if (!renderItem) {
       return null;
@@ -60,12 +62,12 @@ export const handleRenderItem =
 
     if (isArray(item) && item[0] === "___list-separator") {
       return renderSeparator
-        ? (renderSeparator as renderItemCallback)(item, itemId)
+        ? (renderSeparator as renderFunc)(item, itemId)
         : null;
     }
 
     if (isFunction(renderItem)) {
-      return (renderItem as renderItemCallback)(item, itemId);
+      return (renderItem as renderFunc)(item, itemId);
     }
 
     const comp = renderItem as JSX.Element;
diff --git a/src/___subComponents/withList.tsx b/src/___subComponents/withList.tsx
@@ -7,7 +7,7 @@ import limitList from "../___utils/limitList";
 import reverseList from "../___utils/reverseList";
 import searchList from "../___utils/searchList";
 import sortList from "../___utils/sortList";
-import { defaultProps, FlatListProps } from "../flatListProps";
+import { defaultProps, FlatListProps, SortInterface } from "../flatListProps";
 import { renderBlank } from "./uiFunctions";
 
 const withList = (List: any): FC<FlatListProps> => {
@@ -88,7 +88,7 @@ const withList = (List: any): FC<FlatListProps> => {
     }
 
     const sortOptions = {
-      ...defaultProps.sort,
+      ...(defaultProps.sort as SortInterface),
       ...sort,
     };
     if (sortOptions.by || sortBy || (isBoolean(sort) && sort)) {
diff --git a/src/flatListProps.ts b/src/flatListProps.ts
@@ -1,23 +1,9 @@
-import {
-    array,
-    arrayOf,
-    bool,
-    element,
-    func,
-    node,
-    number,
-    object,
-    oneOf,
-    oneOfType,
-    Requireable,
-    shape,
-    string
-} from 'prop-types';
-import {Component, FC, ReactNode, Ref} from 'react';
+import {array, arrayOf, bool, element, func, node, number, object, oneOf, oneOfType, Requireable, shape, string} from 'prop-types';
+import {ReactNode, Ref} from 'react';
 import warning from 'warning';
 import {DisplayHandlerProps, DisplayInterface} from './___subComponents/DisplayHandler';
 import {InfiniteLoaderInterface} from './___subComponents/InfiniteLoader';
-import {renderFunc, renderItem} from './___subComponents/uiFunctions';
+import {renderItem} from './___subComponents/uiFunctions';
 import {GroupOptionsInterface} from './___utils/groupList';
 import {SearchOptionsInterface} from './___utils/searchList';
 import {SortOptionsInterface} from './___utils/sortList';
@@ -39,20 +25,20 @@ function deprecated(propType: Requireable<unknown>, defaultVal: unknown, alterna
     };
 }
 
-export type listItem = {id?: string | number} | unknown;
+export type listItem = Array<{id?: string | number, [key: string]: any} | any> | Set<any> | Map<any, any> | {id?: string | number, [key: string]: any};
 
 export interface GroupInterface extends GroupOptionsInterface {
     of?: number;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    separator?: JSX.Element | ((g: any, idx: number, label: string) => JSX.Element | null) | null;
+    separator?: ReactNode | ((g: any, idx: number, label: string) => ReactNode | null) | null;
     separatorAtTheBottom?: boolean;
     sortBy?: SortOptionsInterface['by'];
     sortDescending?: boolean;
     sortCaseInsensitive?: boolean;
 }
 
 export interface ScrollToTopInterface {
-    button?: JSX.Element | (() => JSX.Element);
+    button?: ReactNode | (() => JSX.Element);
     offset?: number;
     padding?: number;
     position?: string;
@@ -67,9 +53,9 @@ export interface SortInterface extends SortOptionsInterface {
 export interface FlatListProps {
     __forwarededRef?: Ref<HTMLElement>;
     // RENDER
-    list: listItem[];
+    list: listItem;
     renderItem: renderItem;
-    renderWhenEmpty?: null | (() => JSX.Element);
+    renderWhenEmpty?: ReactNode | (() => JSX.Element);
     renderOnScroll?: boolean;
     limit?: number | string;
     reversed?: boolean;
@@ -119,7 +105,7 @@ export interface FlatListProps {
     paginationLoadingIndicatorPosition?: InfiniteLoaderInterface['loadingIndicatorPosition'];
     // scrollToTop
     scrollToTop?: boolean | ScrollToTopInterface;
-    scrollToTopButton?: JSX.Element | (() => JSX.Element);
+    scrollToTopButton?: ReactNode | (() => ReactNode);
     scrollToTopOffset?: number;
     scrollToTopPadding?: number;
     scrollToTopPosition?: string;
@@ -128,9 +114,11 @@ export interface FlatListProps {
     [key: string]: any;
 }
 
-export const defaultProps = {
+export const defaultProps: FlatListProps = {
     __forwarededRef: {current: null},
     // RENDER
+    list: [],
+    renderItem: null,
     limit: 0,
     renderWhenEmpty: null,
     reversed: false,
@@ -154,18 +142,14 @@ export const defaultProps = {
     // GROUPS
     group: {
         by: '',
-        limit: 0, // deprecated
+        limit: 0,
         of: 0,
         reversed: false,
         separator: null,
         separatorAtTheBottom: false,
-        sortedBy: '',
-        sortBy: '', // deprecated
-        sorted: false,
-        sortedCaseInsensitive: false,
-        sortCaseInsensitive: false, // deprecated
-        sortedDescending: false,
-        sortDescending: false // deprecated
+        sortBy: '',
+        sortCaseInsensitive: false,
+        sortDescending: false
     },
     groupBy: '',
     groupOf: 0,
@@ -260,7 +244,7 @@ export const propTypes = {
     // GROUPS
     group: shape({
         by: oneOfType([func, string]),
-        limit: deprecated(number, defaultProps.group.limit, 'group.of'), // deprecated
+        limit: deprecated(number, defaultProps.group?.limit, 'group.of'), // deprecated
         of: number,
         reversed: bool,
         separator: oneOfType([node, func, element]),
@@ -272,11 +256,11 @@ export const propTypes = {
         sortBy: deprecated(oneOfType([
             string,
             arrayOf(oneOfType([string, shape({by: string, caseInsensitive: bool, descending: bool})]))
-        ]), defaultProps.group.sortBy, 'sortedBy'), // deprecated
+        ]), defaultProps?.group?.sortBy, 'sortedBy'), // deprecated
         sortedCaseInsensitive: bool,
-        sortCaseInsensitive: deprecated(bool, defaultProps.group.sortCaseInsensitive, 'sortedCaseInsensitive'), // deprecated
+        sortCaseInsensitive: deprecated(bool, defaultProps.group?.sortCaseInsensitive, 'sortedCaseInsensitive'), // deprecated
         sortedDescending: bool,
-        sortDescending: deprecated(bool, defaultProps.group.sortDescending, 'sortedDescending') // deprecated
+        sortDescending: deprecated(bool, defaultProps.group?.sortDescending, 'sortedDescending') // deprecated
     }),
     groupBy: oneOfType([func, string]),
     groupOf: number,
@@ -324,7 +308,7 @@ export const propTypes = {
             arrayOf(oneOfType([string, shape({by: string, caseInsensitive: bool})]))
         ]),
         caseInsensitive: bool,
-        everyWord: deprecated(bool, defaultProps.search.everyWord, 'search.onEveryWord'), // deprecated
+        everyWord: deprecated(bool, defaultProps.search?.everyWord, 'search.onEveryWord'), // deprecated
         onEveryWord: bool,
         minCharactersCount: number,
         term: string
diff --git a/src/flatlist-react.tsx b/src/flatlist-react.tsx
@@ -8,13 +8,17 @@ import withList from './___subComponents/withList';
 import {isString} from './___utils/isType';
 import {defaultProps, FlatListProps, GroupInterface, propTypes, ScrollToTopInterface} from './flatListProps';
 
-function FlatList(props: FlatListProps): JSX.Element {
+interface Props extends FlatListProps {
+    list: any[]; // withList changes the list to array of anything
+}
+
+function FlatList(props: Props): JSX.Element {
     const {
-        list, renderWhenEmpty, wrapperHtmlTag, renderItem = null, renderOnScroll, // render/list related props
+        list, renderWhenEmpty = null, wrapperHtmlTag, renderItem = null, renderOnScroll, // render/list related props
         group = {} as GroupInterface, groupSeparator, // group props
         display = {} as DisplayInterface, displayRow, rowGap, displayGrid, gridGap, minColumnWidth, // display props,
         hasMoreItems, loadMoreItems, paginationLoadingIndicator, paginationLoadingIndicatorPosition,
-        scrollToTop, scrollToTopButton, scrollToTopPadding, scrollToTopOffset, scrollToTopPosition,
+        scrollToTop, scrollToTopButton = null, scrollToTopPadding, scrollToTopOffset, scrollToTopPosition,
         pagination = {} as InfiniteLoaderInterface, // pagination props
         __forwarededRef,
         ...otherProps
@@ -97,7 +101,7 @@ FlatList.propTypes = propTypes;
 
 FlatList.defaultProps = defaultProps;
 
-export default memo<FlatListProps>(withList(forwardRef((props: FlatListProps, ref: Ref<HTMLElement>) => {
+export default memo<FlatListProps>(withList(forwardRef((props: Props, ref: Ref<HTMLElement>) => {
     ref = ref || createRef();
     return (
         <FlatList {...props} __forwarededRef={ref}/>
diff --git a/tests/FlatList.test.tsx b/tests/FlatList.test.tsx
@@ -378,7 +378,7 @@ describe('FlatList', () => {
                     group={{
                         by: groupByFn,
                         separator: sep,
-                        sortedBy: 'age'
+                        sortBy: 'age'
                     }}
                 />
             );
diff --git a/tests/___subComponentns/uiFunctions.test.tsx b/tests/___subComponentns/uiFunctions.test.tsx
@@ -48,7 +48,7 @@ describe('uiFunctions', () => {
         it('Should match snapshot', () => {
             const item = {name: 'item name', id: 12};
             const itemNull = handleRenderItem(null);
-            const itemFn = handleRenderItem((item, key) => <div key={key}>{item.name} {key}</div>);
+            const itemFn = handleRenderItem((item: any, key: string) => <div key={key}>{item.name} {key}</div>);
 
             const {asFragment: i1} = render(itemNull(item, 0) as any);
             const {asFragment: i2} = render(itemFn(item, 0) as any);

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "flatlist-react",`
`3`		`- "version": "1.5.2",`
	`3`	`+ "version": "1.5.3",`
`4`	`4`	`"description": "A helpful utility component to handle lists in react like a champ",`
`5`	`5`	`"main": "./lib/index.js",`
`6`	`6`	`"scripts": {`