mirror of https://github.com/usememos/memos
fix(web): improve destructive flows, i18n specificity, and remove unused attachments dialog
- Attachments: reverted unused bulk "Delete all unused" ConfirmDialog and pruned related unused vars (flow not user-triggered) - Members: capture username before clearing archive/delete targets to avoid brittle state reads - Access tokens: capture fields before clearing delete target; safe toast + functional state update - Sessions: use “Revoke” label instead of generic delete wording - Tags: replace incorrect generic deletion success message with tag.delete-success i18n key - ConfirmDialog: restructured into its own folder (index + module + README) to align with component organization guidelines - General: eliminate reliance on reading state immediately after reset; tighten handler robustnesspull/5111/head
Nic Luckie
3 weeks ago
parent
30795d1d9c
commit
9beb6ca5c1
@ -0,0 +1,95 @@
|
||||
import DOMPurify from "dompurify";
|
||||
import { marked } from "marked";
|
||||
import * as React from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
||||
import styles from "./ConfirmDialog.module.scss";
|
||||
|
||||
export interface ConfirmDialogProps {
|
||||
/** Whether the dialog is open */
|
||||
open: boolean;
|
||||
/** Open state change callback (closing disabled while loading) */
|
||||
onOpenChange: (open: boolean) => void;
|
||||
/** Title content (plain text or React nodes) */
|
||||
title: React.ReactNode;
|
||||
/** Optional description as React nodes (ignored if descriptionMarkdown provided) */
|
||||
description?: React.ReactNode;
|
||||
/** Optional description in Markdown. Sanitized & rendered as HTML if provided */
|
||||
descriptionMarkdown?: string;
|
||||
/** Confirm / primary action button label */
|
||||
confirmLabel: string;
|
||||
/** Cancel button label */
|
||||
cancelLabel: string;
|
||||
/** Async or sync confirm handler. Dialog auto-closes on resolve, stays open on reject */
|
||||
onConfirm: () => void | Promise<void>;
|
||||
/** Variant style of confirm button */
|
||||
confirmVariant?: "default" | "destructive";
|
||||
}
|
||||
|
||||
/**
|
||||
* Accessible confirmation dialog with optional Markdown description.
|
||||
* - Renders description from either React nodes or sanitized Markdown
|
||||
* - Prevents closing while async confirm action is in-flight
|
||||
* - Minimal opinionated styling; leverages existing UI primitives
|
||||
*/
|
||||
export default function ConfirmDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
title,
|
||||
description,
|
||||
descriptionMarkdown,
|
||||
confirmLabel,
|
||||
cancelLabel,
|
||||
onConfirm,
|
||||
confirmVariant = "default",
|
||||
}: ConfirmDialogProps) {
|
||||
const [loading, setLoading] = React.useState(false);
|
||||
|
||||
const handleConfirm = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
await onConfirm();
|
||||
onOpenChange(false);
|
||||
} catch (e) {
|
||||
// Intentionally swallow errors so user can retry; surface via caller's toast/logging
|
||||
// TODO: Replace with a proper error reporting service, e.g., Sentry or custom logger
|
||||
console.error("ConfirmDialog error:", e);
|
||||
// reportError(e);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Prepare sanitized HTML if Markdown was provided, memoized for performance
|
||||
const descriptionHtml = React.useMemo(() => {
|
||||
return typeof descriptionMarkdown === "string" ? DOMPurify.sanitize(String(marked.parse(descriptionMarkdown))) : null;
|
||||
}, [descriptionMarkdown]);
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={(o: boolean) => !loading && onOpenChange(o)}>
|
||||
<DialogContent size="sm" className={styles.container}>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{title}</DialogTitle>
|
||||
{/*
|
||||
Rendering sanitized Markdown as HTML.
|
||||
This is considered safe because DOMPurify removes any potentially dangerous content.
|
||||
Ensure that Markdown input is trusted or validated upstream.
|
||||
*/}
|
||||
{descriptionHtml ? (
|
||||
<DialogDescription dangerouslySetInnerHTML={{ __html: descriptionHtml }} />
|
||||
) : description ? (
|
||||
<DialogDescription>{description}</DialogDescription>
|
||||
) : null}
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<Button variant="ghost" disabled={loading} onClick={() => onOpenChange(false)}>
|
||||
{cancelLabel}
|
||||
</Button>
|
||||
<Button variant={confirmVariant} disabled={loading} onClick={handleConfirm} data-loading={loading ? true : undefined}>
|
||||
{confirmLabel}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue