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;
|
||||
footer?: ComponentChildren;
|
||||
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.
|
||||
* Especially useful for user input that can be submitted with Enter key.
|
||||
@ -22,7 +30,7 @@ interface ModalProps {
|
||||
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);
|
||||
|
||||
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) {
|
||||
style.maxWidth = `${maxWidth}px`;
|
||||
documentStyle.maxWidth = `${maxWidth}px`;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`modal fade mx-auto ${className}`} tabIndex={-1} role="dialog" ref={modalRef}>
|
||||
<div className={`modal-dialog modal-${size}`} style={style} role="document">
|
||||
<div className={`modal fade mx-auto ${className}`} tabIndex={-1} style={dialogStyle} role="dialog" ref={modalRef}>
|
||||
<div className={`modal-dialog modal-${size} ${scrollable ? "modal-dialog-scrollable" : ""}`} style={documentStyle} role="document">
|
||||
<div className="modal-content">
|
||||
<div className="modal-header">
|
||||
{typeof title === "string" ? (
|
||||
<h5 className="modal-title">{title}</h5>
|
||||
{!title || typeof title === "string" ? (
|
||||
<h5 className="modal-title">{title ?? <> </>}</h5>
|
||||
) : (
|
||||
title
|
||||
)}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user