CollectionAutocomplete.tsx 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. // Collection picker autocomplete component
  2. import { useMemo } from 'react'
  3. import useCollections from '@/hooks/useCollections'
  4. import Autocomplete from './Autocomplete'
  5. interface CollectionOption {
  6. name: string
  7. displayName: string
  8. }
  9. interface CollectionAutocompleteProps {
  10. workspaceId?: string
  11. value: string
  12. onChange: (value: string) => void
  13. placeholder?: string
  14. label?: string
  15. disabled?: boolean
  16. allowWildcard?: boolean
  17. includeSystem?: boolean
  18. }
  19. export function CollectionAutocomplete({
  20. workspaceId,
  21. value,
  22. onChange,
  23. placeholder = 'Select collection...',
  24. label,
  25. disabled = false,
  26. allowWildcard = true,
  27. includeSystem = false,
  28. }: CollectionAutocompleteProps) {
  29. const { collections, isLoading } = useCollections({
  30. workspaceId,
  31. includeSystem,
  32. })
  33. const options = useMemo(() => {
  34. const opts: CollectionOption[] = []
  35. // Add wildcard option if allowed
  36. if (allowWildcard) {
  37. opts.push({ name: '*', displayName: '* (All collections)' })
  38. }
  39. // Add collections
  40. for (const col of collections) {
  41. opts.push({ name: col.name, displayName: col.name })
  42. }
  43. return opts
  44. }, [collections, allowWildcard])
  45. return (
  46. <Autocomplete<CollectionOption>
  47. value={value}
  48. onChange={onChange}
  49. options={options}
  50. getDisplayValue={(item) => item.displayName}
  51. getValue={(item) => item.name}
  52. placeholder={placeholder}
  53. label={label}
  54. disabled={disabled || !workspaceId}
  55. loading={isLoading}
  56. allowCustomValue={true}
  57. />
  58. )
  59. }
  60. export default CollectionAutocomplete