123 lines
3.5 KiB
TypeScript
123 lines
3.5 KiB
TypeScript
/**
|
|
* Copyright (c) 2023-present Plane Software, Inc. and contributors
|
|
* SPDX-License-Identifier: AGPL-3.0-only
|
|
* See the LICENSE file for details.
|
|
*/
|
|
|
|
import type { LucideIcon } from "lucide-react";
|
|
import { AlertTriangle, Info } from "lucide-react";
|
|
import React from "react";
|
|
// components
|
|
import { useTranslation } from "@plane/i18n";
|
|
import type { TButtonVariant } from "@plane/propel/button";
|
|
import { Button } from "@plane/propel/button";
|
|
import { cn } from "../utils";
|
|
import { EModalPosition, EModalWidth } from "./constants";
|
|
import { ModalCore } from "./modal-core";
|
|
// constants
|
|
// helpers
|
|
|
|
export type TModalVariant = "danger" | "primary";
|
|
|
|
type Props = {
|
|
content: React.ReactNode | string;
|
|
handleClose: () => void;
|
|
handleSubmit: () => void;
|
|
hideIcon?: boolean;
|
|
isSubmitting: boolean;
|
|
isOpen: boolean;
|
|
position?: EModalPosition;
|
|
primaryButtonText?: {
|
|
loading: string;
|
|
default: string;
|
|
};
|
|
secondaryButtonText?: string;
|
|
title: string;
|
|
variant?: TModalVariant;
|
|
width?: EModalWidth;
|
|
customIcon?: React.ReactNode;
|
|
};
|
|
|
|
const VARIANT_ICONS: Record<TModalVariant, LucideIcon> = {
|
|
danger: AlertTriangle,
|
|
primary: Info,
|
|
};
|
|
|
|
const BUTTON_VARIANTS: Record<TModalVariant, TButtonVariant> = {
|
|
danger: "primary",
|
|
primary: "primary",
|
|
};
|
|
|
|
const VARIANT_CLASSES: Record<TModalVariant, string> = {
|
|
danger: "nodedc-modal-alert-icon nodedc-modal-alert-icon-danger",
|
|
primary: "nodedc-modal-alert-icon nodedc-modal-alert-icon-primary",
|
|
};
|
|
|
|
export function AlertModalCore(props: Props) {
|
|
const { t } = useTranslation();
|
|
const {
|
|
content,
|
|
handleClose,
|
|
handleSubmit,
|
|
hideIcon = false,
|
|
isSubmitting,
|
|
isOpen,
|
|
position = EModalPosition.CENTER,
|
|
primaryButtonText = {
|
|
loading: t("deleting"),
|
|
default: t("delete"),
|
|
},
|
|
secondaryButtonText = t("cancel"),
|
|
title,
|
|
variant = "danger",
|
|
width = EModalWidth.XL,
|
|
customIcon,
|
|
} = props;
|
|
|
|
const Icon = VARIANT_ICONS[variant];
|
|
|
|
return (
|
|
<ModalCore
|
|
isOpen={isOpen}
|
|
handleClose={handleClose}
|
|
position={position}
|
|
width={width}
|
|
className="transition-[width] ease-linear"
|
|
>
|
|
<div className="flex flex-col items-center gap-4 px-6 pt-6 pb-5 sm:flex-row sm:items-start">
|
|
{!hideIcon && (
|
|
<span
|
|
className={cn(
|
|
"grid size-12 flex-shrink-0 place-items-center rounded-full sm:size-10",
|
|
VARIANT_CLASSES[variant]
|
|
)}
|
|
>
|
|
{customIcon ? <>{customIcon}</> : <Icon className="size-5" aria-hidden="true" />}
|
|
</span>
|
|
)}
|
|
<div className="text-center sm:text-left">
|
|
<h3 className="text-18 font-medium text-primary">{title}</h3>
|
|
<p className="mt-1 text-13 text-secondary">{content}</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col-reverse gap-3 px-6 py-4 sm:flex-row sm:justify-end">
|
|
<Button variant="secondary" onClick={handleClose} className="nodedc-modal-secondary-button min-w-[8.25rem]">
|
|
{secondaryButtonText}
|
|
</Button>
|
|
<Button
|
|
variant={BUTTON_VARIANTS[variant]}
|
|
tabIndex={1}
|
|
onClick={handleSubmit}
|
|
loading={isSubmitting}
|
|
className={cn("min-w-[8.25rem]", {
|
|
"nodedc-modal-primary-button": variant === "primary",
|
|
"nodedc-modal-danger-button": variant === "danger",
|
|
})}
|
|
>
|
|
{isSubmitting ? primaryButtonText.loading : primaryButtonText.default}
|
|
</Button>
|
|
</div>
|
|
</ModalCore>
|
|
);
|
|
}
|