BucketFilePickerExplorer.tsx45 lines · main

1	import { useParams } from 'common'
2	import { cn } from 'ui'
3
4	import { STORAGE_VIEWS } from '../Storage.constants'
5	import { useStoragePreference } from '../StorageExplorer/useStoragePreference'
6	import { BucketFilePickerColumn } from './BucketFilePickerColumn'
7	import { BucketFilePickerHeader } from './BucketFilePickerHeader'
8	import { BucketFilePickerHeaderSelection } from './BucketFilePickerHeaderSelection'
9	import { PreviewPane } from './BucketFilePickerPreviewPane'
10	import { useBucketFilePickerStateSnapshot } from './BucketFilePickerState'
11
12	export function BucketFilePickerExplorer({ onSelect }: { onSelect: (value: string) => void }) {
13	const { ref: projectRef } = useParams()
14	const { view } = useStoragePreference(projectRef!)
15	const { selectedItems, columns } = useBucketFilePickerStateSnapshot()
16
17	return (
18	<div className="flex-1 min-h-0">
19	<div className="bg-studio border rounded-md border-overlay flex h-full w-full flex-col">
20	{selectedItems.length === 0 ? (
21	<BucketFilePickerHeader />
22	) : (
23	<BucketFilePickerHeaderSelection />
24	)}
25	<div className="flex flex-1 min-h-0">
26	<div
27	className={cn(
28	'file-explorer flex grow overflow-x-auto justify-between h-full w-full relative',
29	view === STORAGE_VIEWS.LIST && 'flex-col'
30	)}
31	>
32	{view === STORAGE_VIEWS.COLUMNS ? (
33	<div className="flex">
34	<BucketFilePickerColumn index={0} />
35	</div>
36	) : (
37	<BucketFilePickerColumn fullWidth index={columns.length} />
38	)}
39	</div>
40	<PreviewPane onSelect={onSelect} />
41	</div>
42	</div>
43	</div>
44	)
45	}