import { Group } from 'common/group' import { Combobox } from '@headlessui/react' import { InfoTooltip } from 'web/components/info-tooltip' import { CheckIcon, PlusCircleIcon, SelectorIcon, } from '@heroicons/react/outline' import clsx from 'clsx' import { CreateGroupButton } from 'web/components/groups/create-group-button' import { useState } from 'react' import { useMemberGroups } from 'web/hooks/use-group' import { User } from 'common/user' import { searchInAny } from 'common/util/parse' export function GroupSelector(props: { selectedGroup?: Group setSelectedGroup: (group: Group) => void creator: User | null | undefined showSelector?: boolean }) { const { selectedGroup, setSelectedGroup, creator, showSelector } = props const [isCreatingNewGroup, setIsCreatingNewGroup] = useState(false) const [query, setQuery] = useState('') const memberGroups = useMemberGroups(creator?.id) ?? [] const filteredGroups = memberGroups.filter((group) => searchInAny(query, group.name) ) if (!showSelector || !creator) { return ( <>
In Group: {selectedGroup ? ( {selectedGroup?.name} ) : ( (None) )}
) } return (
{({ open }) => ( <> {!open && setQuery('')} Add to Group
setQuery(event.target.value)} displayValue={(group: Group) => group && group.name} placeholder={'None'} /> {filteredGroups.map((group: Group) => ( clsx( 'relative h-12 cursor-pointer select-none py-2 pl-4 pr-9', active ? 'bg-indigo-500 text-white' : 'text-gray-900' ) } > {({ active, selected }) => ( <> {selected && ( )} {group.name} )} ))} } />
)}
) }