konnosDashboard
BucketsTable.tsx117 lines · main
1import { useRef } from 'react'
2import { Table, TableBody } from 'ui'
3
4import { LoadMoreRow } from './BucketsTable.LoadMoreRow'
5import type { BucketsTablePaginationProps } from './BucketsTable.types'
6import { BucketTableEmptyState, BucketTableHeader, BucketTableRow } from './BucketTable'
7import { VirtualizedTable, VirtualizedTableBody } from '@/components/ui/VirtualizedTable'
8import { Bucket } from '@/data/storage/buckets-query'
9
10type BucketsTableProps = {
11 buckets: Bucket[]
12 projectRef: string
13 filterString: string
14 formattedGlobalUploadLimit: string
15 pagination: BucketsTablePaginationProps
16}
17
18export const BucketsTable = (props: BucketsTableProps) => {
19 const isVirtualized = props.buckets.length > 50
20 return isVirtualized ? (
21 <BucketsTableVirtualized {...props} />
22 ) : (
23 <BucketsTableUnvirtualized {...props} />
24 )
25}
26
27const BucketsTableUnvirtualized = ({
28 buckets,
29 projectRef,
30 filterString,
31 formattedGlobalUploadLimit,
32 pagination: { hasMore = false, isLoadingMore = false, onLoadMore },
33}: BucketsTableProps) => {
34 const showSearchEmptyState = buckets.length === 0 && filterString.length > 0
35
36 return (
37 <Table
38 containerProps={{
39 containerClassName: 'h-full overflow-auto',
40 className: 'overflow-visible',
41 }}
42 >
43 <BucketTableHeader mode="standard" hasBuckets={buckets.length > 0} />
44 <TableBody>
45 {showSearchEmptyState ? (
46 <BucketTableEmptyState mode="standard" filterString={filterString} />
47 ) : (
48 buckets.map((bucket) => (
49 <BucketTableRow
50 mode="standard"
51 key={bucket.id}
52 bucket={bucket}
53 projectRef={projectRef}
54 formattedGlobalUploadLimit={formattedGlobalUploadLimit}
55 />
56 ))
57 )}
58 <LoadMoreRow
59 mode="standard"
60 colSpan={6}
61 hasMore={hasMore}
62 isLoadingMore={isLoadingMore}
63 onLoadMore={onLoadMore}
64 />
65 </TableBody>
66 </Table>
67 )
68}
69
70const BucketsTableVirtualized = ({
71 buckets,
72 projectRef,
73 filterString,
74 formattedGlobalUploadLimit,
75 pagination: { hasMore = false, isLoadingMore = false, onLoadMore },
76}: BucketsTableProps) => {
77 const showSearchEmptyState = buckets.length === 0 && filterString.length > 0
78 const scrollContainerRef = useRef<HTMLDivElement>(null)
79
80 return (
81 <VirtualizedTable
82 data={buckets}
83 estimateSize={() => 59}
84 getItemKey={(bucket) => bucket.id}
85 scrollContainerRef={scrollContainerRef}
86 >
87 <BucketTableHeader mode="virtualized" hasBuckets={buckets.length > 0} />
88 <VirtualizedTableBody<Bucket>
89 paddingColSpan={5}
90 emptyContent={
91 showSearchEmptyState ? (
92 <BucketTableEmptyState mode="virtualized" filterString={filterString} />
93 ) : undefined
94 }
95 trailingContent={
96 <LoadMoreRow
97 mode="virtualized"
98 colSpan={6}
99 hasMore={hasMore}
100 isLoadingMore={isLoadingMore}
101 onLoadMore={onLoadMore}
102 />
103 }
104 >
105 {(bucket) => (
106 <BucketTableRow
107 mode="virtualized"
108 key={bucket.id}
109 bucket={bucket}
110 projectRef={projectRef}
111 formattedGlobalUploadLimit={formattedGlobalUploadLimit}
112 />
113 )}
114 </VirtualizedTableBody>
115 </VirtualizedTable>
116 )
117}