import * as React from 'react' ; import { NativeScrollEvent , NativeSyntheticEvent , } from 'react-native' ; import Columns , { IColumnsHandles , IColumnsProps , } from './Columns' ; import { checkScrollEnd , isPromise } from './utils' ; export interface IWaterflowProps < T > { data : T [ ] ; numColumns : number ; keyForItem : IColumnsProps < T > [ 'keyForItem' ] ; heightForItem ? : IColumnsProps < T > [ 'heightForItem' ] ; renderItem : IColumnsProps < T > [ 'renderItem' ] ; columnsFlatListProps ? : IColumnsProps < T > [ 'columnsFlatListProps' ] ; columnFlatListProps : IColumnsProps < T > [ 'columnFlatListProps' ] ; onEndReached : ( ) => Promise < any > ; } const WaterFlow = < T extends { } > ( props , ref ) => { const data = props . data || [ ] ; const WaterflowRef = React . useRef ( { } as IColumnsHandles ) ; /**
     * 上拉加载, 传入一个 Promise 回调, 请求完成后才允许再次触发回调
     * 如果回调不为一个 Promise 对象, 则不做拦截处理
     */ const onEndReached = React . useCallback ( ( ( ) => { let loading = false ; return async ( event , cb ) => { if ( loading || WaterflowRef . current ?. addIteming ) { return ; } ; if ( checkScrollEnd ( event ) ) { loading = true ; if ( typeof cb === 'function' ) { const tempCb = cb ( ) ; if ( isPromise ( tempCb ) ) { try { await tempCb ; } catch ( err ) { console . error ( err ) ; } loading = false ; } else { loading = false ; } } } } ; } ) ( ) , [ ] ) ; React . useImperativeHandle ( ref , ( ) => ( { clear : WaterflowRef . current ?. clear , addIteming : WaterflowRef . current ?. addIteming , } ) ) ; return ( < Columns { ... props } ref = { WaterflowRef } data = { data } onEndReached = { ( e ) => onEndReached ( e , props . onEndReached ) } />); } ; export default React . forwardRef ( WaterFlow as unknown as React . RefForwardingComponent < IColumnsHandles , IColumnsProps < any > > ) ;