import React from "react"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; import useSWR from "swr"; import { Ban } from "lucide-react"; // mobx store import { useMobxStore } from "lib/mobx/store-provider"; // ui import { Avatar, CustomSearchSelect } from "@plane/ui"; type Props = { value: any; onChange: (val: string) => void; isDisabled?: boolean; }; export const MemberSelect: React.FC = observer((props) => { const { value, onChange, isDisabled = false } = props; // router const router = useRouter(); const { workspaceSlug, projectId } = router.query; // store const { project: projectStore } = useMobxStore(); useSWR( workspaceSlug && projectId ? `PROJECT_MEMBERS_${projectId.toString().toUpperCase()}` : null, workspaceSlug && projectId ? () => projectStore.fetchProjectMembers(workspaceSlug.toString(), projectId.toString()) : null ); const members = projectStore.members?.[projectId?.toString()!]; const options = members?.map((member) => ({ value: member.member.id, query: member.member.display_name, content: (
{member.member.display_name}
), })); const selectedOption = members?.find((m) => m.member.id === value)?.member; return ( {selectedOption && } {selectedOption ? ( selectedOption?.display_name ) : (
None
)} } buttonClassName="!px-3 !py-2" options={ options && options && [ ...options, { value: "none", query: "none", content: (
None
), }, ] } maxHeight="md" width="w-full" onChange={onChange} disabled={isDisabled} /> ); });