forked from github/plane
801f75f406
* chore: dropdowns should close on selecting an option * style: @plane/ui dropdown styling * refactor: @plane/ui dropdowns * fix: build errors * fix: list layout dropdowns positioning * fix: priority dropdown text in dark mode
77 lines
2.2 KiB
TypeScript
77 lines
2.2 KiB
TypeScript
import React from "react";
|
|
import { observer } from "mobx-react-lite";
|
|
import { Ban } from "lucide-react";
|
|
// hooks
|
|
import { useMember } from "hooks/store";
|
|
// ui
|
|
import { Avatar, CustomSearchSelect } from "@plane/ui";
|
|
|
|
type Props = {
|
|
value: any;
|
|
onChange: (val: string) => void;
|
|
isDisabled?: boolean;
|
|
};
|
|
|
|
export const MemberSelect: React.FC<Props> = observer((props) => {
|
|
const { value, onChange, isDisabled = false } = props;
|
|
// store hooks
|
|
const {
|
|
project: { projectMemberIds, getProjectMemberDetails },
|
|
} = useMember();
|
|
|
|
const options = projectMemberIds?.map((userId) => {
|
|
const memberDetails = getProjectMemberDetails(userId);
|
|
|
|
return {
|
|
value: `${memberDetails?.member.id}`,
|
|
query: `${memberDetails?.member.display_name}`,
|
|
content: (
|
|
<div className="flex items-center gap-2">
|
|
<Avatar name={memberDetails?.member.display_name} src={memberDetails?.member.avatar} />
|
|
{memberDetails?.member.display_name}
|
|
</div>
|
|
),
|
|
};
|
|
});
|
|
const selectedOption = getProjectMemberDetails(value);
|
|
|
|
return (
|
|
<CustomSearchSelect
|
|
value={value}
|
|
label={
|
|
<div className="flex items-center gap-2">
|
|
{selectedOption && <Avatar name={selectedOption.member.display_name} src={selectedOption.member.avatar} />}
|
|
{selectedOption ? (
|
|
selectedOption.member.display_name
|
|
) : (
|
|
<div className="flex items-center gap-2">
|
|
<Ban className="h-3.5 w-3.5 rotate-90 text-custom-sidebar-text-400" />
|
|
<span className="py-0.5 text-sm text-custom-sidebar-text-400">None</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
}
|
|
buttonClassName="!px-3 !py-2"
|
|
options={
|
|
options &&
|
|
options && [
|
|
...options,
|
|
{
|
|
value: "none",
|
|
query: "none",
|
|
content: (
|
|
<div className="flex items-center gap-2">
|
|
<Ban className="h-3.5 w-3.5 rotate-90 text-custom-sidebar-text-400" />
|
|
<span className="py-0.5 text-sm text-custom-sidebar-text-400">None</span>
|
|
</div>
|
|
),
|
|
},
|
|
]
|
|
}
|
|
maxHeight="md"
|
|
onChange={onChange}
|
|
disabled={isDisabled}
|
|
/>
|
|
);
|
|
});
|