137 lines
3.5 KiB
TypeScript
137 lines
3.5 KiB
TypeScript
import type { ReactNode } from 'react'
|
|
import { useEffect, useMemo, useRef, useState } from 'react'
|
|
import InfiniteScroll from '@/components/infiniteScroll'
|
|
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
|
|
}
|
|
const InfiniteScrollPaging = (props: Params) => {
|
|
const { query = {} } = props
|
|
|
|
// 加载刷新数据
|
|
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 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 dataRef = useRef({})
|
|
// 下拉刷新
|
|
const handleRefresh = async() => {
|
|
const tRefreshData = refreshDataRef.current as any
|
|
setRefreshData({
|
|
...tRefreshData,
|
|
page: 1,
|
|
size: 10,
|
|
})
|
|
getData({ refreshStatus: true, moreStatus: false }, { refreshStatus: false, moreStatus: true })
|
|
}
|
|
// 加载更多
|
|
const handleMoreLoad = async() => {
|
|
const t = dataRef.current as any
|
|
const 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])
|
|
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])
|
|
return (
|
|
<InfiniteScroll
|
|
refresherEnabled
|
|
refresherTriggered={refreshData.refreshStatus}
|
|
moreStatus={refreshData.moreStatus}
|
|
selfOnRefresherRefresh={handleRefresh}
|
|
selfonScrollToLower={handleMoreLoad}
|
|
statusMore={statusMore}
|
|
>
|
|
{props.children}
|
|
</InfiniteScroll>
|
|
)
|
|
}
|
|
|
|
export default InfiniteScrollPaging
|