import React , { useEffect } from 'react' ; import Loading from '@app/components/ui/loading' ; import Pagination from '@app/components/pagination' ; interface Load { id : string ; args : object ; fields : string ; restart : boolean ; } interface Props { id : string ; query : { page_number ? : number ; } ; fields : string ; load : ( load : Load ) => void ; data : Array < any > ; loading : boolean ; count : number ; more : boolean ; showPagination : boolean ; scrollLoad : boolean ; nothing : string ; filters : { page_size : number ; page_number : number ; } ; renderHead ? : ( args : object ) => object ; renderFooter ? : ( args : object ) => object ; renderItem : ( data : Array < any > ) => { } ; } export default function List ( { id , query , fields = '' , load , data = [ ] , loading = true , count = 0 , more = true , showPagination = false , scrollLoad = false , nothing = '--- 无数据 ---' , filters , renderItem , renderHead , renderFooter } ) { const loadData = ( restart = false ) => { load ( { id , args : query , fields , restart } ) ; } ; useEffect ( ( ) => { if ( data . length == 0 && more ) loadData ( ) ; if ( scrollLoad ) ArriveFooter . add ( id , loadData ) ; return ( ) => { if ( scrollLoad ) ArriveFooter . remove ( id ) ; } ; } , [ id ] ) ; if ( ! loading && data && data . length == 0 && ! more && nothing ) { return ( < div className = "text-center text-secondary pt-3 pb-3" > { nothing } < /div>); } return ( < > { renderHead ? renderHead ( { loadData } ) : null } { data . map ( renderItem ) } { loading && showPagination || more && scrollLoad ? < div className = "text-center pt-3 pb-3" > < Loading /></div > : null } { showPagination && filters ? < Pagination count = { count || 0 } pageSize = { filters . page_size || 0 } pageNumber = { filters . page_number || 0 } onSelect = { ( s ) => { query . page_number = s ; loadData ( true ) ; } } /> : null } { renderFooter ? renderFooter ( { loadData } ) : null } < />); }