import React, { FC, useState, Fragment } from "react"; // popper js import { usePopper } from "react-popper"; // ui import { Avatar, Input } from "@plane/ui"; import { Listbox } from "@headlessui/react"; // icons import { Check, Search, User2 } from "lucide-react"; // types import { IWorkspaceMember } from "types"; export interface IWorkspaceMemberSelect { value: IWorkspaceMember | undefined; onChange: (value: string) => 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 = (
{value ? ( <> {value?.member.display_name} ) : ( <> {placeholder} )}
); return (
setQuery(e.target.value)} placeholder="Search" />
{filteredOptions ? ( filteredOptions.length > 0 ? ( <> {filteredOptions.map((workspaceMember: IWorkspaceMember) => ( `flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 ${ active && !selected ? "bg-custom-background-80" : "" } ${selected ? "text-custom-text-100" : "text-custom-text-200"}` } > {() => ( <>
{workspaceMember.member.display_name}
{value && value.member.id === workspaceMember.member.id && } )}
))} No Lead ) : (

No matching results

) ) : (

Loading...

)}
); };