126 lines
3.4 KiB
TypeScript
126 lines
3.4 KiB
TypeScript
|
|
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
|
|
}
|
|
|
|
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;
|
|
setRefreshData({
|
|
...tRefreshDataRef,
|
|
...startStatus,
|
|
loading: true
|
|
})
|
|
const result = await props.fetchData({
|
|
...query,
|
|
page: tRefreshDataRef.page,
|
|
size: tRefreshDataRef.size,
|
|
});
|
|
if(result.success){
|
|
// 返回数据
|
|
props.change&&props.change(result);
|
|
if(result.data.total<=0){
|
|
setRefreshData({
|
|
...tRefreshDataRef,
|
|
...endStatus,
|
|
loading: false
|
|
})
|
|
}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
|
|
})
|
|
setRefreshData({
|
|
...tRefreshDataRef,
|
|
refreshStatus: false,
|
|
moreStatus: false,
|
|
loading: false
|
|
})
|
|
}
|
|
}else{
|
|
alert.none(result.msg);
|
|
setRefreshData({
|
|
...tRefreshDataRef,
|
|
refreshStatus: false,
|
|
moreStatus: true,
|
|
loading: false
|
|
})
|
|
}
|
|
}
|
|
// 加载刷新数据
|
|
const [refreshData, setRefreshData] = useState({
|
|
refreshStatus: false,
|
|
moreStatus: false,
|
|
page: 1,
|
|
size: 10,
|
|
loading: false
|
|
})
|
|
const refreshDataRef = useRef({});
|
|
// 渲染（数据）
|
|
const [data, setData] = useState({
|
|
list: [],
|
|
total: 0
|
|
});
|
|
const dataRef = useRef({});
|
|
// 下拉刷新
|
|
const handleRefresh = async ()=>{
|
|
let tRefreshData = refreshDataRef.current as any;
|
|
setRefreshData({
|
|
...tRefreshData,
|
|
page: 1,
|
|
size: 10,
|
|
})
|
|
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){
|
|
setRefreshData({
|
|
...tRefreshData,
|
|
page: ++tRefreshData.page,
|
|
size: ++tRefreshData.page*tRefreshData.size,
|
|
})
|
|
getData({
|
|
moreStatus: true
|
|
},{
|
|
moreStatus: true
|
|
});
|
|
}
|
|
}
|
|
//数据加载状态
|
|
const statusMore = useMemo(() => {
|
|
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>
|
|
)
|
|
}
|