41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
import { Select } from '@/components/inputs/Select'
|
|
import { Input, Tooltip } from '@chakra-ui/react'
|
|
import { useSpreadsheets } from '../hooks/useSpreadsheets'
|
|
|
|
type Props = {
|
|
credentialsId: string
|
|
spreadsheetId?: string
|
|
onSelectSpreadsheetId: (id: string | undefined) => void
|
|
}
|
|
|
|
export const SpreadsheetsDropdown = ({
|
|
credentialsId,
|
|
spreadsheetId,
|
|
onSelectSpreadsheetId,
|
|
}: Props) => {
|
|
const { spreadsheets, isLoading } = useSpreadsheets({
|
|
credentialsId,
|
|
})
|
|
|
|
if (isLoading) return <Input value="Loading..." isDisabled />
|
|
if (!spreadsheets || spreadsheets.length === 0)
|
|
return (
|
|
<Tooltip label="No spreadsheets found, make sure you have at least one spreadsheet that contains a header row">
|
|
<span>
|
|
<Input value="No spreadsheets found" isDisabled />
|
|
</span>
|
|
</Tooltip>
|
|
)
|
|
return (
|
|
<Select
|
|
selectedItem={spreadsheetId}
|
|
items={(spreadsheets ?? []).map((spreadsheet) => ({
|
|
label: spreadsheet.name,
|
|
value: spreadsheet.id,
|
|
}))}
|
|
onSelect={onSelectSpreadsheetId}
|
|
placeholder={'Search for spreadsheet'}
|
|
/>
|
|
)
|
|
}
|