forked from github/plane
58 lines
1.7 KiB
TypeScript
58 lines
1.7 KiB
TypeScript
import { FC } from "react";
|
|
import { X } from "lucide-react";
|
|
// types
|
|
import { TLabelOperations } from "./root";
|
|
import { useIssueDetail, useLabel } from "hooks/store";
|
|
|
|
type TLabelListItem = {
|
|
workspaceSlug: string;
|
|
projectId: string;
|
|
issueId: string;
|
|
labelId: string;
|
|
labelOperations: TLabelOperations;
|
|
disabled: boolean;
|
|
};
|
|
|
|
export const LabelListItem: FC<TLabelListItem> = (props) => {
|
|
const { workspaceSlug, projectId, issueId, labelId, labelOperations, disabled } = props;
|
|
// hooks
|
|
const {
|
|
issue: { getIssueById },
|
|
} = useIssueDetail();
|
|
const { getLabelById } = useLabel();
|
|
|
|
const issue = getIssueById(issueId);
|
|
const label = getLabelById(labelId);
|
|
|
|
const handleLabel = async () => {
|
|
if (issue && !disabled) {
|
|
const currentLabels = issue.label_ids.filter((_labelId) => _labelId !== labelId);
|
|
await labelOperations.updateIssue(workspaceSlug, projectId, issueId, { label_ids: currentLabels });
|
|
}
|
|
};
|
|
|
|
if (!label) return <></>;
|
|
return (
|
|
<div
|
|
key={labelId}
|
|
className={`transition-all relative flex items-center gap-1 truncate border border-custom-border-100 rounded-full text-xs p-0.5 px-1 group ${
|
|
!disabled ? "cursor-pointer hover:border-red-500/50 hover:bg-red-500/20" : "cursor-not-allowed"
|
|
} `}
|
|
onClick={handleLabel}
|
|
>
|
|
<div
|
|
className="rounded-full h-2 w-2 flex-shrink-0"
|
|
style={{
|
|
backgroundColor: label.color ?? "#000000",
|
|
}}
|
|
/>
|
|
<div className="truncate">{label.name}</div>
|
|
{!disabled && (
|
|
<div className="flex-shrink-0">
|
|
<X className="transition-all h-2.5 w-2.5 group-hover:text-red-500" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|