mirror of
https://github.com/zadam/trilium.git
synced 2025-10-21 07:38:53 +02:00
feat(react/dialogs): port confirm dialog partially
This commit is contained in:
Elian Doran
parent
134c869b07
commit
93fae9cc8c
@ -1,151 +0,0 @@
|
|||||||
import BasicWidget from "../basic_widget.js";
|
|
||||||
import { t } from "../../services/i18n.js";
|
|
||||||
import { Modal } from "bootstrap";
|
|
||||||
|
|
||||||
const DELETE_NOTE_BUTTON_CLASS = "confirm-dialog-delete-note";
|
|
||||||
|
|
||||||
const TPL = /*html*/`
|
|
||||||
<div class="confirm-dialog modal mx-auto" tabindex="-1" role="dialog" style="z-index: 2000;">
|
|
||||||
<div class="modal-dialog modal-dialog-scrollable" role="document">
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="modal-header">
|
|
||||||
<h5 class="modal-title">${t("confirm.confirmation")}</h5>
|
|
||||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="${t("confirm.close")}"></button>
|
|
||||||
</div>
|
|
||||||
<div class="modal-body">
|
|
||||||
<div class="confirm-dialog-content"></div>
|
|
||||||
|
|
||||||
<div class="confirm-dialog-custom"></div>
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer">
|
|
||||||
<button class="confirm-dialog-cancel-button btn btn-sm">${t("confirm.cancel")}</button>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<button class="confirm-dialog-ok-button btn btn-primary btn-sm">${t("confirm.ok")}</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>`;
|
|
||||||
|
|
||||||
export type ConfirmDialogResult = false | ConfirmDialogOptions;
|
|
||||||
export type ConfirmDialogCallback = (val?: ConfirmDialogResult) => void;
|
|
||||||
|
|
||||||
export interface ConfirmDialogOptions {
|
|
||||||
confirmed: boolean;
|
|
||||||
isDeleteNoteChecked: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
// For "showConfirmDialog"
|
|
||||||
|
|
||||||
export interface ConfirmWithMessageOptions {
|
|
||||||
message: string | HTMLElement | JQuery<HTMLElement>;
|
|
||||||
callback: ConfirmDialogCallback;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface ConfirmWithTitleOptions {
|
|
||||||
title: string;
|
|
||||||
callback: ConfirmDialogCallback;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default class ConfirmDialog extends BasicWidget {
|
|
||||||
private resolve: ConfirmDialogCallback | null;
|
|
||||||
|
|
||||||
private modal!: Modal;
|
|
||||||
private $originallyFocused!: JQuery<HTMLElement> | null;
|
|
||||||
private $confirmContent!: JQuery<HTMLElement>;
|
|
||||||
private $okButton!: JQuery<HTMLElement>;
|
|
||||||
private $cancelButton!: JQuery<HTMLElement>;
|
|
||||||
private $custom!: JQuery<HTMLElement>;
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
super();
|
|
||||||
|
|
||||||
this.resolve = null;
|
|
||||||
this.$originallyFocused = null; // element focused before the dialog was opened, so we can return to it afterward
|
|
||||||
}
|
|
||||||
|
|
||||||
doRender() {
|
|
||||||
this.$widget = $(TPL);
|
|
||||||
this.modal = Modal.getOrCreateInstance(this.$widget[0]);
|
|
||||||
this.$confirmContent = this.$widget.find(".confirm-dialog-content");
|
|
||||||
this.$okButton = this.$widget.find(".confirm-dialog-ok-button");
|
|
||||||
this.$cancelButton = this.$widget.find(".confirm-dialog-cancel-button");
|
|
||||||
this.$custom = this.$widget.find(".confirm-dialog-custom");
|
|
||||||
|
|
||||||
this.$widget.on("shown.bs.modal", () => this.$okButton.trigger("focus"));
|
|
||||||
|
|
||||||
this.$widget.on("hidden.bs.modal", () => {
|
|
||||||
if (this.resolve) {
|
|
||||||
this.resolve(false);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.$originallyFocused) {
|
|
||||||
this.$originallyFocused.trigger("focus");
|
|
||||||
this.$originallyFocused = null;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
this.$cancelButton.on("click", () => this.doResolve(false));
|
|
||||||
this.$okButton.on("click", () => this.doResolve(true));
|
|
||||||
}
|
|
||||||
|
|
||||||
showConfirmDialogEvent({ message, callback }: ConfirmWithMessageOptions) {
|
|
||||||
this.$originallyFocused = $(":focus");
|
|
||||||
|
|
||||||
this.$custom.hide();
|
|
||||||
|
|
||||||
glob.activeDialog = this.$widget;
|
|
||||||
|
|
||||||
if (typeof message === "string") {
|
|
||||||
message = $("<div>").text(message);
|
|
||||||
}
|
|
||||||
|
|
||||||
this.$confirmContent.empty().append(message);
|
|
||||||
|
|
||||||
this.modal.show();
|
|
||||||
|
|
||||||
this.resolve = callback;
|
|
||||||
}
|
|
||||||
|
|
||||||
showConfirmDeleteNoteBoxWithNoteDialogEvent({ title, callback }: ConfirmWithTitleOptions) {
|
|
||||||
glob.activeDialog = this.$widget;
|
|
||||||
|
|
||||||
this.$confirmContent.text(`${t("confirm.are_you_sure_remove_note", { title: title })}`);
|
|
||||||
|
|
||||||
this.$custom
|
|
||||||
.empty()
|
|
||||||
.append("<br/>")
|
|
||||||
.append(
|
|
||||||
$("<div>")
|
|
||||||
.addClass("form-check")
|
|
||||||
.append(
|
|
||||||
$("<label>")
|
|
||||||
.addClass("form-check-label")
|
|
||||||
.attr("style", "text-decoration: underline dotted var(--main-text-color)")
|
|
||||||
.attr("title", `${t("confirm.if_you_dont_check")}`)
|
|
||||||
.append($("<input>").attr("type", "checkbox").addClass(`form-check-input ${DELETE_NOTE_BUTTON_CLASS}`))
|
|
||||||
.append(`${t("confirm.also_delete_note")}`)
|
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
this.$custom.show();
|
|
||||||
|
|
||||||
this.modal.show();
|
|
||||||
|
|
||||||
this.resolve = callback;
|
|
||||||
}
|
|
||||||
|
|
||||||
doResolve(ret: boolean) {
|
|
||||||
if (this.resolve) {
|
|
||||||
this.resolve({
|
|
||||||
confirmed: ret,
|
|
||||||
isDeleteNoteChecked: this.$widget.find(`.${DELETE_NOTE_BUTTON_CLASS}:checked`).length > 0
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
this.resolve = null;
|
|
||||||
|
|
||||||
this.modal.hide();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
78
apps/client/src/widgets/dialogs/confirm.tsx
Normal file
78
apps/client/src/widgets/dialogs/confirm.tsx
Normal file
@ -0,0 +1,78 @@
|
|||||||
|
import ReactBasicWidget from "../react/ReactBasicWidget";
|
||||||
|
import Modal from "../react/Modal";
|
||||||
|
import Button from "../react/Button";
|
||||||
|
import { closeActiveDialog, openDialog } from "../../services/dialog";
|
||||||
|
import { t } from "../../services/i18n";
|
||||||
|
import { useState } from "react";
|
||||||
|
|
||||||
|
interface ConfirmDialogProps {
|
||||||
|
message?: string | HTMLElement;
|
||||||
|
callback?: ConfirmDialogCallback;
|
||||||
|
lastElementToFocus?: HTMLElement | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function ConfirmDialogComponent({ message, callback, lastElementToFocus }: ConfirmDialogProps) {
|
||||||
|
|
||||||
|
const [ confirmed, setConfirmed ] = useState<boolean>(false);
|
||||||
|
|
||||||
|
return (message &&
|
||||||
|
<Modal
|
||||||
|
title={t("confirm.confirmation")}
|
||||||
|
size="md"
|
||||||
|
zIndex={2000}
|
||||||
|
scrollable={true}
|
||||||
|
onHidden={() => {
|
||||||
|
callback?.({
|
||||||
|
confirmed,
|
||||||
|
isDeleteNoteChecked: false // This can be extended to include more options if needed
|
||||||
|
});
|
||||||
|
lastElementToFocus?.focus();
|
||||||
|
}}
|
||||||
|
footer={<>
|
||||||
|
<Button text={t("confirm.cancel")} onClick={() => closeActiveDialog()} />
|
||||||
|
<Button text={t("confirm.ok")} onClick={() => {
|
||||||
|
setConfirmed(true);
|
||||||
|
closeActiveDialog();
|
||||||
|
}} />
|
||||||
|
</>}
|
||||||
|
>
|
||||||
|
{typeof message === "string"
|
||||||
|
? <div>{message ?? ""}</div>
|
||||||
|
: <div dangerouslySetInnerHTML={{ __html: message.outerHTML ?? "" }} />}
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export type ConfirmDialogResult = false | ConfirmDialogOptions;
|
||||||
|
export type ConfirmDialogCallback = (val?: ConfirmDialogResult) => void;
|
||||||
|
type MessageType = string | HTMLElement | JQuery<HTMLElement>;
|
||||||
|
|
||||||
|
export interface ConfirmDialogOptions {
|
||||||
|
confirmed: boolean;
|
||||||
|
isDeleteNoteChecked: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ConfirmWithMessageOptions {
|
||||||
|
message: MessageType;
|
||||||
|
callback: ConfirmDialogCallback;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class ConfirmDialog extends ReactBasicWidget {
|
||||||
|
|
||||||
|
private props: ConfirmDialogProps = {};
|
||||||
|
|
||||||
|
get component() {
|
||||||
|
return <ConfirmDialogComponent {...this.props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
showConfirmDialogEvent({ message, callback }: ConfirmWithMessageOptions) {
|
||||||
|
this.props = {
|
||||||
|
message: (typeof message === "object" && "length" in message ? message[0] : message),
|
||||||
|
lastElementToFocus: (document.activeElement as HTMLElement),
|
||||||
|
callback
|
||||||
|
};
|
||||||
|
this.doRender();
|
||||||
|
openDialog(this.$widget);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@ -10,6 +10,14 @@ interface ModalProps {
|
|||||||
children: ComponentChildren;
|
children: ComponentChildren;
|
||||||
footer?: ComponentChildren;
|
footer?: ComponentChildren;
|
||||||
maxWidth?: number;
|
maxWidth?: number;
|
||||||
|
zIndex?: number;
|
||||||
|
/**
|
||||||
|
* If true, the modal body will be scrollable if the content overflows.
|
||||||
|
* This is useful for larger modals where you want to keep the header and footer visible
|
||||||
|
* while allowing the body content to scroll.
|
||||||
|
* Defaults to false.
|
||||||
|
*/
|
||||||
|
scrollable?: boolean;
|
||||||
/**
|
/**
|
||||||
* If set, the modal body and footer will be wrapped in a form and the submit event will call this function.
|
* If set, the modal body and footer will be wrapped in a form and the submit event will call this function.
|
||||||
* Especially useful for user input that can be submitted with Enter key.
|
* Especially useful for user input that can be submitted with Enter key.
|
||||||
@ -22,7 +30,7 @@ interface ModalProps {
|
|||||||
helpPageId?: string;
|
helpPageId?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function Modal({ children, className, size, title, footer, onShown, onSubmit, helpPageId, maxWidth, onHidden: onHidden }: ModalProps) {
|
export default function Modal({ children, className, size, title, footer, onShown, onSubmit, helpPageId, maxWidth, zIndex, scrollable, onHidden: onHidden }: ModalProps) {
|
||||||
const modalRef = useRef<HTMLDivElement>(null);
|
const modalRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
if (onShown || onHidden) {
|
if (onShown || onHidden) {
|
||||||
@ -48,18 +56,23 @@ export default function Modal({ children, className, size, title, footer, onShow
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
const style: CSSProperties = {};
|
const dialogStyle: CSSProperties = {};
|
||||||
|
if (zIndex) {
|
||||||
|
dialogStyle.zIndex = zIndex;
|
||||||
|
}
|
||||||
|
|
||||||
|
const documentStyle: CSSProperties = {};
|
||||||
if (maxWidth) {
|
if (maxWidth) {
|
||||||
style.maxWidth = `${maxWidth}px`;
|
documentStyle.maxWidth = `${maxWidth}px`;
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={`modal fade mx-auto ${className}`} tabIndex={-1} role="dialog" ref={modalRef}>
|
<div className={`modal fade mx-auto ${className}`} tabIndex={-1} style={dialogStyle} role="dialog" ref={modalRef}>
|
||||||
<div className={`modal-dialog modal-${size}`} style={style} role="document">
|
<div className={`modal-dialog modal-${size} ${scrollable ? "modal-dialog-scrollable" : ""}`} style={documentStyle} role="document">
|
||||||
<div className="modal-content">
|
<div className="modal-content">
|
||||||
<div className="modal-header">
|
<div className="modal-header">
|
||||||
{typeof title === "string" ? (
|
{!title || typeof title === "string" ? (
|
||||||
<h5 className="modal-title">{title}</h5>
|
<h5 className="modal-title">{title ?? <> </>}</h5>
|
||||||
) : (
|
) : (
|
||||||
title
|
title
|
||||||
)}
|
)}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user