plane/web/components/inbox/inbox-issue-status.tsx

57 lines
1.7 KiB
TypeScript
Raw Normal View History

import React from "react";
import { observer } from "mobx-react";
// hooks
import { INBOX_STATUS } from "constants/inbox";
import { useInboxIssues } from "hooks/store";
// constants
type Props = {
workspaceSlug: string;
projectId: string;
inboxId: string;
issueId: string;
iconSize?: number;
showDescription?: boolean;
};
export const InboxIssueStatus: React.FC<Props> = observer((props) => {
const { workspaceSlug, projectId, inboxId, issueId, iconSize = 18, showDescription = false } = props;
// hooks
const {
issues: { getInboxIssueByIssueId },
} = useInboxIssues();
const inboxIssueDetail = getInboxIssueByIssueId(inboxId, issueId);
if (!inboxIssueDetail) return <></>;
const inboxIssueStatusDetail = INBOX_STATUS.find((s) => s.status === inboxIssueDetail.status);
if (!inboxIssueStatusDetail) return <></>;
const isSnoozedDatePassed =
inboxIssueDetail.status === 0 && new Date(inboxIssueDetail.snoozed_till ?? "") < new Date();
return (
<div
className={`flex items-center ${inboxIssueStatusDetail.textColor(isSnoozedDatePassed)} ${
showDescription
? `p-3 gap-2 text-sm rounded-md border ${inboxIssueStatusDetail.bgColor(
isSnoozedDatePassed
)} ${inboxIssueStatusDetail.borderColor(isSnoozedDatePassed)} `
: "w-full justify-end gap-1 text-xs"
}`}
>
<inboxIssueStatusDetail.icon size={iconSize} strokeWidth={2} />
{showDescription ? (
inboxIssueStatusDetail.description(
workspaceSlug,
projectId,
inboxIssueDetail.duplicate_to ?? "",
new Date(inboxIssueDetail.snoozed_till ?? "")
)
) : (
<span>{inboxIssueStatusDetail.title}</span>
)}
</div>
);
});