UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: миграция P0 action-menu на ActionDropdown
This commit is contained in:
@@ -8,7 +8,8 @@ import { MoreHorizontal, Bell, BellOff } from "lucide-react";
|
||||
import { useTranslation } from "@plane/i18n";
|
||||
import { getIconButtonStyling } from "@plane/propel/icon-button";
|
||||
import { CheckCircleFilledIcon, CloseCircleFilledIcon, CopyLinkIcon, NewTabIcon } from "@plane/propel/icons";
|
||||
import { CustomMenu } from "@plane/ui";
|
||||
import type { TContextMenuItem } from "@plane/ui";
|
||||
import { ActionDropdown } from "@plane/ui";
|
||||
|
||||
type Props = {
|
||||
canOpenTargetWorkItem: boolean;
|
||||
@@ -38,54 +39,70 @@ export const ExternalContourActionsMenu = (props: Props) => {
|
||||
} = props;
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<CustomMenu
|
||||
customButton={<MoreHorizontal className="size-4" />}
|
||||
customButtonClassName={getIconButtonStyling("secondary", "lg")}
|
||||
placement="bottom-start"
|
||||
>
|
||||
{includeDecisionActions && canReviewClosedRequest && onAccept && (
|
||||
<CustomMenu.MenuItem onClick={onAccept}>
|
||||
<div className="flex items-center gap-2 text-success-secondary">
|
||||
<CheckCircleFilledIcon width={14} height={14} />
|
||||
{t("external_contours_page.actions.accept")}
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
)}
|
||||
|
||||
{includeDecisionActions && canReviewClosedRequest && onDecline && (
|
||||
<CustomMenu.MenuItem onClick={onDecline}>
|
||||
<div className="flex items-center gap-2 text-danger-secondary">
|
||||
<CloseCircleFilledIcon width={14} height={14} />
|
||||
{t("external_contours_page.actions.decline")}
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
)}
|
||||
|
||||
<CustomMenu.MenuItem onClick={onCopy}>
|
||||
const items: TContextMenuItem[] = [
|
||||
{
|
||||
key: "accept",
|
||||
action: () => onAccept?.(),
|
||||
shouldRender: includeDecisionActions && canReviewClosedRequest && !!onAccept,
|
||||
customContent: (
|
||||
<div className="flex items-center gap-2 text-success-secondary">
|
||||
<CheckCircleFilledIcon width={14} height={14} />
|
||||
{t("external_contours_page.actions.accept")}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "decline",
|
||||
action: () => onDecline?.(),
|
||||
shouldRender: includeDecisionActions && canReviewClosedRequest && !!onDecline,
|
||||
customContent: (
|
||||
<div className="flex items-center gap-2 text-danger-secondary">
|
||||
<CloseCircleFilledIcon width={14} height={14} />
|
||||
{t("external_contours_page.actions.decline")}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "copy",
|
||||
action: onCopy,
|
||||
customContent: (
|
||||
<div className="flex items-center gap-2">
|
||||
<CopyLinkIcon width={14} height={14} />
|
||||
{t("external_contours_page.actions.copy")}
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "open",
|
||||
action: () => onOpenTarget?.(),
|
||||
shouldRender: canOpenTargetWorkItem && !!onOpenTarget,
|
||||
customContent: (
|
||||
<div className="flex items-center gap-2">
|
||||
<NewTabIcon width={14} height={14} />
|
||||
{t("external_contours_page.actions.open")}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "toggle-subscription",
|
||||
action: () => onToggleSubscription?.(),
|
||||
shouldRender: canOpenTargetWorkItem && !!onToggleSubscription,
|
||||
disabled: isSubscriptionLoading || isSubscribed === undefined,
|
||||
customContent: (
|
||||
<div className="flex items-center gap-2">
|
||||
{isSubscribed ? <BellOff width={14} height={14} /> : <Bell width={14} height={14} />}
|
||||
{isSubscribed ? t("common.actions.unsubscribe") : t("common.actions.subscribe")}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
{canOpenTargetWorkItem && onOpenTarget && (
|
||||
<CustomMenu.MenuItem onClick={onOpenTarget}>
|
||||
<div className="flex items-center gap-2">
|
||||
<NewTabIcon width={14} height={14} />
|
||||
{t("external_contours_page.actions.open")}
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
)}
|
||||
|
||||
{canOpenTargetWorkItem && onToggleSubscription && (
|
||||
<CustomMenu.MenuItem onClick={onToggleSubscription} disabled={isSubscriptionLoading || isSubscribed === undefined}>
|
||||
<div className="flex items-center gap-2">
|
||||
{isSubscribed ? <BellOff width={14} height={14} /> : <Bell width={14} height={14} />}
|
||||
{isSubscribed ? t("common.actions.unsubscribe") : t("common.actions.subscribe")}
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
)}
|
||||
</CustomMenu>
|
||||
return (
|
||||
<ActionDropdown
|
||||
items={items}
|
||||
button={<MoreHorizontal className="size-4" />}
|
||||
buttonClassName={getIconButtonStyling("secondary", "lg")}
|
||||
placement="bottom-start"
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user