商城测试版v8_1

src/components/InfiniteScrollPaging/index.tsx

@@ -1,72 +1,71 @@
+import InfiniteScroll from '@/components/infiniteScroll'
+import { ReactNode, useEffect, useMemo, useRef, useState } from 'react'
+import { dataLoadingStatus, getFilterData } from '@/common/util'
+import { alert, isEmptyObject } from '@/common/common'
 
-import InfiniteScroll from "@/components/infiniteScroll"
-import { ReactNode, useEffect, useMemo, useRef, useState } from "react"
-import { dataLoadingStatus, getFilterData } from "@/common/util";
-import { alert, isEmptyObject } from "@/common/common";
-
-interface Params{
-    children?: ReactNode,
-    query?: object,
-    fetchData: (data: object)=>any,
-    change?: (data: any)=>void
+interface Params {
+  children?: ReactNode
+  query?: object
+  fetchData: (data: object) => any
+  change?: (data: any) => void
 }
 
-export default (props: Params)=>{
-	const { query={} } = props;
-  useEffect(()=>{
-    refreshDataRef.current = refreshData;
-    dataRef.current = data;
-    getData({moreStatus: true},{moreStatus: true});
+export default (props: Params) => {
+  const { query = {} } = props
+  useEffect(() => {
+    refreshDataRef.current = refreshData
+    dataRef.current = data
+    getData({ moreStatus: true }, { moreStatus: true })
   }, [])
-	useEffect(()=>{
-		if(!isEmptyObject(query)){
-			setData({list: [],total: 0});
-			getData({moreStatus: true},{moreStatus: true});
-		}
-	},[query])
-  const getData = async (startStatus, endStatus)=>{
-    const tRefreshDataRef = refreshDataRef.current as any;
+  useEffect(() => {
+    if (!isEmptyObject(query)) {
+      setData({ list: [], total: 0 })
+      getData({ moreStatus: true }, { moreStatus: true })
+    }
+  }, [query])
+  const getData = async (startStatus, endStatus) => {
+    const tRefreshDataRef = refreshDataRef.current as any
     setRefreshData({
       ...tRefreshDataRef,
       ...startStatus,
-			loading: true
+      loading: true,
     })
     const result = await props.fetchData({
-			...query,
+      ...query,
       page: tRefreshDataRef.page,
       size: tRefreshDataRef.size,
-    });
-    if(result.success){
+    })
+    if (result.success) {
       // 返回数据
-      props.change&&props.change(result);
-      if(result.data.total<=0){
+      props.change && props.change(result)
+      if (result.data.total <= 0) {
         setRefreshData({
           ...tRefreshDataRef,
           ...endStatus,
-					loading: false
+          loading: false,
         })
-      }else{
+      } else {
         setData({
           list: result.data.list,
           // list: tRefreshDataRef.page>1?(dataRef.current as any).list.concat(result.data.list):result.data.list,
-          total: result.data.total
+          total: result.data.total,
         })
         setRefreshData({
           ...tRefreshDataRef,
           refreshStatus: false,
           moreStatus: false,
-					loading: false
+          loading: false,
         })
       }
-    }else{
-      alert.none(result.msg);
-			setRefreshData({
-				...tRefreshDataRef,
-				refreshStatus: false,
-				moreStatus: true,
-				loading: false
-			})
-		}
+    } else {
+      alert.none(result.msg)
+      setRefreshData({
+        ...tRefreshDataRef,
+        refreshStatus: false,
+        moreStatus: true,
+        loading: false,
+      })
+    }
   }
   // 加载刷新数据
   const [refreshData, setRefreshData] = useState({
@@ -74,52 +73,59 @@ export default (props: Params)=>{
     moreStatus: false,
     page: 1,
     size: 10,
-		loading: false
+    loading: false,
   })
-  const refreshDataRef = useRef({});
+  const refreshDataRef = useRef({})
   // 渲染（数据）
   const [data, setData] = useState({
     list: [],
-    total: 0
-  });
-  const dataRef = useRef({});
+    total: 0,
+  })
+  const dataRef = useRef({})
   // 下拉刷新
-  const handleRefresh = async ()=>{
-    let tRefreshData = refreshDataRef.current as any;
+  const handleRefresh = async () => {
+    let tRefreshData = refreshDataRef.current as any
     setRefreshData({
       ...tRefreshData,
       page: 1,
       size: 10,
     })
-    getData({refreshStatus: true,moreStatus: false},{refreshStatus: false,moreStatus: true});
+    getData({ refreshStatus: true, moreStatus: false }, { refreshStatus: false, moreStatus: true })
   }
   // 加载更多
-  const handleMoreLoad = async ()=>{
-    let t = (dataRef.current as any);
-    let tRefreshData = refreshDataRef.current as any;
-    if(t.list.length<t.total){
+  const handleMoreLoad = async () => {
+    let t = dataRef.current as any
+    let tRefreshData = refreshDataRef.current as any
+    if (t.list.length < t.total) {
       setRefreshData({
         ...tRefreshData,
         page: ++tRefreshData.page,
-        size: ++tRefreshData.page*tRefreshData.size,
+        size: ++tRefreshData.page * tRefreshData.size,
       })
-      getData({
-        moreStatus: true
-      },{
-        moreStatus: true
-      });
+      getData(
+        {
+          moreStatus: true,
+        },
+        {
+          moreStatus: true,
+        },
+      )
     }
   }
   //数据加载状态
   const statusMore = useMemo(() => {
-    return dataLoadingStatus({list:data.list, total: data.total, status: refreshData.loading})
+    return dataLoadingStatus({ list: data.list, total: data.total, status: refreshData.loading })
   }, [refreshData.loading])
-  
 
   return (
-    <InfiniteScroll refresherEnabled={true} refresherTriggered={refreshData.refreshStatus} moreStatus={refreshData.moreStatus} 
-    selfOnRefresherRefresh={handleRefresh} selfonScrollToLower={handleMoreLoad} statusMore={statusMore}>
-        {props.children}
+    <InfiniteScroll
+      refresherEnabled={true}
+      refresherTriggered={refreshData.refreshStatus}
+      moreStatus={refreshData.moreStatus}
+      selfOnRefresherRefresh={handleRefresh}
+      selfonScrollToLower={handleMoreLoad}
+      statusMore={statusMore}>
+      {props.children}
     </InfiniteScroll>
   )
 }