51 lines
1.2 KiB
TypeScript
51 lines
1.2 KiB
TypeScript
import React from 'react'
|
|
import { cn } from '../lib/utils'
|
|
|
|
interface MyFlatListProps<T> {
|
|
data: T[]
|
|
renderItem: (item: T, index: number) => React.ReactNode
|
|
keyExtractor: (item: T, index: number) => string
|
|
className?: string
|
|
gridCols?: number
|
|
onRefresh?: () => void
|
|
refreshing?: boolean
|
|
ListEmptyComponent?: React.ReactNode
|
|
ListHeaderComponent?: React.ReactNode
|
|
ListFooterComponent?: React.ReactNode
|
|
}
|
|
|
|
export function MyFlatList<T>({
|
|
data,
|
|
renderItem,
|
|
keyExtractor,
|
|
className,
|
|
gridCols,
|
|
onRefresh,
|
|
ListEmptyComponent,
|
|
ListHeaderComponent,
|
|
ListFooterComponent,
|
|
}: MyFlatListProps<T>) {
|
|
return (
|
|
<div className={cn('flex-1', className)}>
|
|
{ListHeaderComponent}
|
|
{data.length === 0 && ListEmptyComponent ? (
|
|
ListEmptyComponent
|
|
) : (
|
|
<div
|
|
className={
|
|
gridCols
|
|
? `grid grid-cols-${gridCols} gap-4`
|
|
: 'flex flex-col gap-4'
|
|
}
|
|
>
|
|
{data.map((item, index) => (
|
|
<div key={keyExtractor(item, index)}>
|
|
{renderItem(item, index)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
{ListFooterComponent}
|
|
</div>
|
|
)
|
|
}
|