import React, { FC, useState, Fragment } from "react"; // popper js import { usePopper } from "react-popper"; // ui import { Input, Tooltip } from "@plane/ui"; import { Listbox } from "@headlessui/react"; import { Avatar } from "components/ui"; // icons import { Check, Search, User2 } from "lucide-react"; // types import { IWorkspaceMember } from "types"; export interface IWorkspaceMemberSelect { value: IWorkspaceMember | undefined; onChange: (value: IWorkspaceMember) => void; options: IWorkspaceMember[]; placeholder?: string; disabled?: boolean; } export const WorkspaceMemberSelect: FC = (props) => { const { value, onChange, options, placeholder = "Select Member", disabled = false } = props; // states const [query, setQuery] = useState(""); const [referenceElement, setReferenceElement] = useState(null); const [popperElement, setPopperElement] = useState(null); const { styles, attributes } = usePopper(referenceElement, popperElement, { placement: "auto", }); // const options = workspaceMembers?.map((member: any) => ({ // value: member.member.id, // query: member.member.display_name, // content: ( //
// // {member.member.display_name} //
// ), // })); // const selectedOption = workspaceMembers?.find((member) => member.member.id === value); const filteredOptions = query === "" ? options : options?.filter((option) => option.member.display_name.toLowerCase().includes(query.toLowerCase())); const label = ( 0 ? options.map((assignee) => assignee?.member.display_name).join(", ") : "No Assignee" } position="top" >
{value ? ( <> {value?.member.display_name} ) : ( <> {placeholder} )}
); return (
setQuery(e.target.value)} placeholder="Search" />
{filteredOptions ? ( filteredOptions.length > 0 ? ( filteredOptions.map((workspaceMember: IWorkspaceMember) => ( `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${ active && !selected ? "bg-custom-background-80" : "" } ${selected ? "text-custom-text-100" : "text-custom-text-200"}` } > {({ selected }) => ( <>
{workspaceMember.member.display_name}
{selected && } )}
)) ) : (

No matching results

) ) : (

Loading...

)}
); };