Defines type component ListView

Author: letrungduong113

package.json

@@ -25,8 +25,8 @@
     "query-string": "^7.0.1",
     "react": "17.0.1",
     "react-fast-compare": "^3.2.0",
-    "react-hook-form": "^7.11.0",
-    "react-i18next": "^11.11.2",
+    "react-hook-form": "^7.11.1",
+    "react-i18next": "^11.11.3",
     "react-native": "0.64.1",
     "react-native-dotenv": "^3.1.1",
     "react-native-error-boundary": "^1.1.10",
@@ -40,7 +40,7 @@
     "react-native-unimodules": "^0.14.5",
     "react-native-vector-image": "^0.3.2",
     "react-navigation-heavy-screen": "^1.2.1",
-    "react-query": "^3.18.1",
+    "react-query": "^3.19.0",
     "recoil": "^0.3.1"
   },
   "devDependencies": {

src/common/components/ListView/ListView.props.ts

@@ -1,10 +1,10 @@
 import {ListRenderItem} from 'react-native';
 
-export interface IRefreshListViewProps {
+export interface IRefreshListViewProps<ItemT> {
   refreshState: number;
   onHeaderRefresh?: (state: number) => void;
   onFooterRefresh?: (state: number) => void;
-  data: any[];
+  data: ReadonlyArray<ItemT>;
 
   listRef?: any;
 
@@ -18,14 +18,14 @@ export interface IRefreshListViewProps {
   footerNoMoreDataComponent?: any;
   footerEmptyDataComponent?: any;
 
-  renderItem: ListRenderItem<any> | null | undefined;
+  renderItem: ListRenderItem<ItemT> | null | undefined;
 }
 
-export type IListViewProps = {
+export type IListViewProps<ItemT> = {
   /* Is there more */
   hasMore: boolean;
   /* List data */
-  dataSource: any[];
+  dataSource: ReadonlyArray<ItemT>;
   /* Pull-down refresh function */
   refresh: () => void;
   /* Pull up and load product data function */
@@ -35,7 +35,7 @@ export type IListViewProps = {
   /* Empty data display */
   emptyDataComponent?: React.ReactNode;
   /* Render ui */
-  renderRow: ListRenderItem<any> | any;
+  renderItem: ListRenderItem<ItemT> | null | undefined;
   /* Remaining parameters */
   [key: string]: any;
 };

src/common/components/ListView/RefreshListView.tsx

@@ -19,7 +19,7 @@ export enum RefreshState {
 }
 let callOnScrollEnd: boolean;
 
-const RefreshListView = (props: IRefreshListViewProps) => {
+const RefreshListView = <ItemT extends {}>(props: IRefreshListViewProps<ItemT>) => {
   function onHeaderRefresh() {
     if (shouldStartHeaderRefreshing()) {
       props.onHeaderRefresh &&

src/common/components/ListView/index.tsx

@@ -4,7 +4,7 @@ import {IListViewProps} from './ListView.props';
 import {memo} from 'react';
 import isEqual from 'react-fast-compare';
 
-const ListView = (props: IListViewProps) => {
+const ListView = <ItemT extends {}>(props: IListViewProps<ItemT>) => {
   const {
     dataSource,
     refresh,
@@ -15,7 +15,7 @@ const ListView = (props: IListViewProps) => {
     ...args
   } = props;
   const [refreshState, setRefreshState] = useState<number>(RefreshState.Idle);
-  const [listData, setListData] = useState<any[]>([]);
+  const [listData, setListData] = useState<ItemT[]>([]);
   const [loadType, setLoadType] = useState<string>();
 
   useEffect(() => {
@@ -68,7 +68,7 @@ const ListView = (props: IListViewProps) => {
     <RefreshListView
       {...args}
       data={listData}
-      renderItem={({item, index}) => renderRow(item, index)}
+      renderItem={renderRow}
       refreshState={refreshState}
       onHeaderRefresh={onHeaderRefresh}
       onFooterRefresh={onFooterRefresh}