gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-20 15:19:01 +02:00
Code Issues Actions 19 Packages Projects Releases Wiki Activity

refactor(react/modals): use classless components

Browse Source
This commit is contained in:
Elian Doran 2025-08-24 20:57:23 +03:00
parent 7c86f90ac6
commit a507991808
No known key found for this signature in database
28 changed files with 106 additions and 321 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/client/src/layouts/desktop_layout.tsx
View File

@ -196,8 +196,8 @@ export default class DesktopLayout {
.child(new CloseZenButton())
// Desktop-specific dialogs.
.child(new PasswordNoteSetDialog())
.child(new UploadAttachmentsDialog());
.child(<PasswordNoteSetDialog />)
.child(<UploadAttachmentsDialog />);
applyModals(rootContainer);
return rootContainer;

48
apps/client/src/layouts/layout_commons.tsx
View File

@ -28,33 +28,33 @@ import NoteIconWidget from "../widgets/note_icon";
import PromotedAttributesWidget from "../widgets/promoted_attributes.js";
import NoteDetailWidget from "../widgets/note_detail.js";
import NoteListWidget from "../widgets/note_list.js";
import { CallToActionDialog } from "../widgets/dialogs/call_to_action.jsx";
import CallToActionDialog from "../widgets/dialogs/call_to_action.jsx";
import NoteTitleWidget from "../widgets/note_title.jsx";
export function applyModals(rootContainer: RootContainer) {
rootContainer
.child(new BulkActionsDialog())
.child(new AboutDialog())
.child(new HelpDialog())
.child(new RecentChangesDialog())
.child(new BranchPrefixDialog())
.child(new SortChildNotesDialog())
.child(new IncludeNoteDialog())
.child(new NoteTypeChooserDialog())
.child(new JumpToNoteDialog())
.child(new AddLinkDialog())
.child(new CloneToDialog())
.child(new MoveToDialog())
.child(new ImportDialog())
.child(new ExportDialog())
.child(new MarkdownImportDialog())
.child(new ProtectedSessionPasswordDialog())
.child(new RevisionsDialog())
.child(new DeleteNotesDialog())
.child(new InfoDialog())
.child(new ConfirmDialog())
.child(new PromptDialog())
.child(new IncorrectCpuArchDialog())
.child(<BulkActionsDialog />)
.child(<AboutDialog />)
.child(<HelpDialog />)
.child(<RecentChangesDialog />)
.child(<BranchPrefixDialog />)
.child(<SortChildNotesDialog />)
.child(<IncludeNoteDialog />)
.child(<NoteTypeChooserDialog />)
.child(<JumpToNoteDialog />)
.child(<AddLinkDialog />)
.child(<CloneToDialog />)
.child(<MoveToDialog />)
.child(<ImportDialog />)
.child(<ExportDialog />)
.child(<MarkdownImportDialog />)
.child(<ProtectedSessionPasswordDialog />)
.child(<RevisionsDialog />)
.child(<DeleteNotesDialog />)
.child(<InfoDialog />)
.child(<ConfirmDialog />)
.child(<PromptDialog />)
.child(<IncorrectCpuArchDialog />)
.child(new PopupEditorDialog()
.child(new FlexContainer("row")
.class("title-row")
@ -66,5 +66,5 @@ export function applyModals(rootContainer: RootContainer) {
.child(new PromotedAttributesWidget())
.child(new NoteDetailWidget())
.child(new NoteListWidget(true)))
.child(new CallToActionDialog());
.child(<CallToActionDialog />);
}

15
apps/client/src/widgets/dialogs/about.tsx
View File

@ -1,4 +1,3 @@
import ReactBasicWidget from "../react/ReactBasicWidget.js";
import Modal from "../react/Modal.js";
import { t } from "../../services/i18n.js";
import { formatDateTime } from "../../utils/formatters.js";
@ -8,14 +7,14 @@ import openService from "../../services/open.js";
import { useState } from "preact/hooks";
import type { CSSProperties } from "preact/compat";
import type { AppInfo } from "@triliumnext/commons";
import useTriliumEvent from "../react/hooks.jsx";
import { useTriliumEventBeta } from "../react/hooks.jsx";
function AboutDialogComponent() {
export default function AboutDialog() {
let [appInfo, setAppInfo] = useState<AppInfo | null>(null);
let [shown, setShown] = useState(false);
const forceWordBreak: CSSProperties = { wordBreak: "break-all" };
useTriliumEvent("openAboutDialog", () => setShown(true));
useTriliumEventBeta("openAboutDialog", () => setShown(true));
return (
<Modal className="about-dialog"
@ -82,11 +81,3 @@ function DirectoryLink({ directory, style }: { directory: string, style?: CSSPro
return <span style={style}>{directory}</span>;
}
}
export default class AboutDialog extends ReactBasicWidget {
get component() {
return <AboutDialogComponent />;
}
}

14
apps/client/src/widgets/dialogs/add_link.tsx
View File

@ -11,11 +11,11 @@ import { default as TextTypeWidget } from "../type_widgets/editable_text.js";
import { logError } from "../../services/ws";
import FormGroup from "../react/FormGroup.js";
import { refToJQuerySelector } from "../react/react_utils";
import useTriliumEvent from "../react/hooks";
import { useTriliumEventBeta } from "../react/hooks";
type LinkType = "reference-link" | "external-link" | "hyper-link";
function AddLinkDialogComponent() {
export default function AddLinkDialog() {
const [ textTypeWidget, setTextTypeWidget ] = useState<TextTypeWidget>();
const initialText = useRef<string>();
const [ linkTitle, setLinkTitle ] = useState("");
@ -24,7 +24,7 @@ function AddLinkDialogComponent() {
const [ suggestion, setSuggestion ] = useState<Suggestion | null>(null);
const [ shown, setShown ] = useState(false);
useTriliumEvent("showAddLinkDialog", ( { textTypeWidget, text }) => {
useTriliumEventBeta("showAddLinkDialog", ( { textTypeWidget, text }) => {
setTextTypeWidget(textTypeWidget);
initialText.current = text;
setShown(true);
@ -152,11 +152,3 @@ function AddLinkDialogComponent() {
</Modal>
);
}
export default class AddLinkDialog extends ReactBasicWidget {
get component() {
return <AddLinkDialogComponent />;
}
}

15
apps/client/src/widgets/dialogs/branch_prefix.tsx
View File

@ -4,21 +4,20 @@ import { t } from "../../services/i18n.js";
import server from "../../services/server.js";
import toast from "../../services/toast.js";
import Modal from "../react/Modal.jsx";
import ReactBasicWidget from "../react/ReactBasicWidget.js";
import froca from "../../services/froca.js";
import tree from "../../services/tree.js";
import Button from "../react/Button.jsx";
import FormGroup from "../react/FormGroup.js";
import useTriliumEvent from "../react/hooks.jsx";
import { useTriliumEventBeta } from "../react/hooks.jsx";
import FBranch from "../../entities/fbranch.js";
function BranchPrefixDialogComponent() {
export default function BranchPrefixDialog() {
const [ shown, setShown ] = useState(false);
const [ branch, setBranch ] = useState<FBranch>();
const [ prefix, setPrefix ] = useState(branch?.prefix ?? "");
const branchInput = useRef<HTMLInputElement>(null);
useTriliumEvent("editBranchPrefix", async () => {
useTriliumEventBeta("editBranchPrefix", async () => {
const notePath = appContext.tabManager.getActiveContextNotePath();
if (!notePath) {
return;
@ -75,14 +74,6 @@ function BranchPrefixDialogComponent() {
);
}
export default class BranchPrefixDialog extends ReactBasicWidget {
get component() {
return <BranchPrefixDialogComponent />;
}
}
async function savePrefix(branchId: string, prefix: string) {
await server.put(`branches/${branchId}/set-prefix`, { prefix: prefix });
toast.showMessage(t("branch_prefix.branch_prefix_saved"));

18
apps/client/src/widgets/dialogs/bulk_actions.tsx
View File

@ -12,9 +12,9 @@ import toast from "../../services/toast";
import RenameNoteBulkAction from "../bulk_actions/note/rename_note";
import FNote from "../../entities/fnote";
import froca from "../../services/froca";
import useTriliumEvent from "../react/hooks";
import { useTriliumEventBeta } from "../react/hooks";
function BulkActionComponent() {
export default function BulkActionsDialog() {
const [ selectedOrActiveNoteIds, setSelectedOrActiveNoteIds ] = useState<string[]>();
const [ bulkActionNote, setBulkActionNote ] = useState<FNote | null>();
const [ includeDescendants, setIncludeDescendants ] = useState(false);
@ -22,7 +22,7 @@ function BulkActionComponent() {
const [ existingActions, setExistingActions ] = useState<RenameNoteBulkAction[]>([]);
const [ shown, setShown ] = useState(false);
useTriliumEvent("openBulkActionsDialog", async ({ selectedOrActiveNoteIds }) => {
useTriliumEventBeta("openBulkActionsDialog", async ({ selectedOrActiveNoteIds }) => {
setSelectedOrActiveNoteIds(selectedOrActiveNoteIds);
setBulkActionNote(await froca.getNote("_bulkAction"));
setShown(true);
@ -46,12 +46,12 @@ function BulkActionComponent() {
refreshExistingActions();
}, [refreshExistingActions]);
useTriliumEvent("entitiesReloaded", ({ loadResults }) => {
useTriliumEventBeta("entitiesReloaded", ({ loadResults }) => {
if (loadResults.getAttributeRows().find((row) =>
row.type === "label" && row.name === "action" && row.noteId === "_bulkAction")) {
refreshExistingActions();
}
}, shown);
});
return (
<Modal
@ -117,11 +117,3 @@ function ExistingActionsList({ existingActions }: { existingActions?: RenameNote
</table>
);
}
export default class BulkActionsDialog extends ReactBasicWidget {
get component() {
return <BulkActionComponent />
}
}

17
apps/client/src/widgets/dialogs/call_to_action.tsx
View File

@ -1,11 +1,12 @@
import { useState } from "preact/hooks";
import { useMemo, useState } from "preact/hooks";
import Button from "../react/Button";
import Modal from "../react/Modal";
import ReactBasicWidget from "../react/ReactBasicWidget";
import { CallToAction, dismissCallToAction, getCallToActions } from "./call_to_action_definitions";
import { dismissCallToAction, getCallToActions } from "./call_to_action_definitions";
import { t } from "../../services/i18n";
function CallToActionDialogComponent({ activeCallToActions }: { activeCallToActions: CallToAction[] }) {
export default function CallToActionDialog() {
const activeCallToActions = useMemo(() => getCallToActions(), []);
if (!activeCallToActions.length) {
return <></>;
}
@ -48,11 +49,3 @@ function CallToActionDialogComponent({ activeCallToActions }: { activeCallToActi
</Modal>
)
}
export class CallToActionDialog extends ReactBasicWidget {
get component() {
return <CallToActionDialogComponent activeCallToActions={getCallToActions()} />
}
}

15
apps/client/src/widgets/dialogs/clone_to.tsx
View File

@ -2,7 +2,6 @@ import { useRef, useState } from "preact/hooks";
import appContext from "../../components/app_context";
import { t } from "../../services/i18n";
import Modal from "../react/Modal";
import ReactBasicWidget from "../react/ReactBasicWidget";
import NoteAutocomplete from "../react/NoteAutocomplete";
import froca from "../../services/froca";
import FormGroup from "../react/FormGroup";
@ -14,16 +13,16 @@ import tree from "../../services/tree";
import branches from "../../services/branches";
import toast from "../../services/toast";
import NoteList from "../react/NoteList";
import useTriliumEvent from "../react/hooks";
import { useTriliumEventBeta } from "../react/hooks";
function CloneToDialogComponent() {
export default function CloneToDialog() {
const [ clonedNoteIds, setClonedNoteIds ] = useState<string[]>();
const [ prefix, setPrefix ] = useState("");
const [ suggestion, setSuggestion ] = useState<Suggestion | null>(null);
const [ shown, setShown ] = useState(false);
const autoCompleteRef = useRef<HTMLInputElement>(null);
useTriliumEvent("cloneNoteIdsTo", ({ noteIds }) => {
useTriliumEventBeta("cloneNoteIdsTo", ({ noteIds }) => {
if (!noteIds || noteIds.length === 0) {
noteIds = [appContext.tabManager.getActiveContextNoteId() ?? ""];
}
@ -83,14 +82,6 @@ function CloneToDialogComponent() {
)
}
export default class CloneToDialog extends ReactBasicWidget {
get component() {
return <CloneToDialogComponent />;
}
}
async function cloneNotesTo(notePath: string, clonedNoteIds: string[], prefix?: string) {
const { noteId, parentNoteId } = tree.getNoteIdAndParentIdFromUrl(notePath);
if (!noteId || !parentNoteId) {

17
apps/client/src/widgets/dialogs/confirm.tsx
View File

@ -1,10 +1,9 @@
import ReactBasicWidget from "../react/ReactBasicWidget";
import Modal from "../react/Modal";
import Button from "../react/Button";
import { t } from "../../services/i18n";
import { useState } from "preact/hooks";
import FormCheckbox from "../react/FormCheckbox";
import useTriliumEvent from "../react/hooks";
import { useTriliumEventBeta } from "../react/hooks";
interface ConfirmDialogProps {
title?: string;
@ -13,7 +12,7 @@ interface ConfirmDialogProps {
isConfirmDeleteNoteBox?: boolean;
}
function ConfirmDialogComponent() {
export default function ConfirmDialog() {
const [ opts, setOpts ] = useState<ConfirmDialogProps>();
const [ isDeleteNoteChecked, setIsDeleteNoteChecked ] = useState(false);
const [ shown, setShown ] = useState(false);
@ -28,8 +27,8 @@ function ConfirmDialogComponent() {
setShown(true);
}
useTriliumEvent("showConfirmDialog", ({ message, callback }) => showDialog(null, message, callback, false));
useTriliumEvent("showConfirmDeleteNoteBoxWithNoteDialog", ({ title, callback }) => showDialog(title, t("confirm.are_you_sure_remove_note", { title: title }), callback, true));
useTriliumEventBeta("showConfirmDialog", ({ message, callback }) => showDialog(null, message, callback, false));
useTriliumEventBeta("showConfirmDeleteNoteBoxWithNoteDialog", ({ title, callback }) => showDialog(title, t("confirm.are_you_sure_remove_note", { title: title }), callback, true));
return (
<Modal
@ -92,11 +91,3 @@ export interface ConfirmWithTitleOptions {
title: string;
callback: ConfirmDialogCallback;
}
export default class ConfirmDialog extends ReactBasicWidget {
get component() {
return <ConfirmDialogComponent />;
}
}

14
apps/client/src/widgets/dialogs/delete_notes.tsx
View File

@ -10,7 +10,7 @@ import FNote from "../../entities/fnote.js";
import link from "../../services/link.js";
import Button from "../react/Button.jsx";
import Alert from "../react/Alert.jsx";
import useTriliumEvent from "../react/hooks.jsx";
import useTriliumEvent, { useTriliumEventBeta } from "../react/hooks.jsx";
export interface ResolveOptions {
proceed: boolean;
@ -30,7 +30,7 @@ interface BrokenRelationData {
source: string;
}
function DeleteNotesDialogComponent() {
export default function DeleteNotesDialog() {
const [ opts, setOpts ] = useState<ShowDeleteNotesDialogOpts>({});
const [ deleteAllClones, setDeleteAllClones ] = useState(false);
const [ eraseNotes, setEraseNotes ] = useState(!!opts.forceDeleteAllClones);
@ -39,7 +39,7 @@ function DeleteNotesDialogComponent() {
const [ shown, setShown ] = useState(false);
const okButtonRef = useRef<HTMLButtonElement>(null);
useTriliumEvent("showDeleteNotesDialog", (opts) => {
useTriliumEventBeta("showDeleteNotesDialog", (opts) => {
setOpts(opts);
setShown(true);
})
@ -171,11 +171,3 @@ function BrokenRelations({ brokenRelations }: { brokenRelations: DeleteNotesPrev
return <></>;
}
}
export default class DeleteNotesDialog extends ReactBasicWidget {
get component() {
return <DeleteNotesDialogComponent />;
}
}

14
apps/client/src/widgets/dialogs/export.tsx
View File

@ -11,7 +11,7 @@ import toastService, { ToastOptions } from "../../services/toast";
import utils from "../../services/utils";
import open from "../../services/open";
import froca from "../../services/froca";
import useTriliumEvent from "../react/hooks";
import { useTriliumEventBeta } from "../react/hooks";
interface ExportDialogProps {
branchId?: string | null;
@ -19,7 +19,7 @@ interface ExportDialogProps {
defaultType?: "subtree" | "single";
}
function ExportDialogComponent() {
export default function ExportDialog() {
const [ opts, setOpts ] = useState<ExportDialogProps>();
const [ exportType, setExportType ] = useState<string>(opts?.defaultType ?? "subtree");
const [ subtreeFormat, setSubtreeFormat ] = useState("html");
@ -27,7 +27,7 @@ function ExportDialogComponent() {
const [ opmlVersion, setOpmlVersion ] = useState("2.0");
const [ shown, setShown ] = useState(false);
useTriliumEvent("showExportDialog", async ({ notePath, defaultType }) => {
useTriliumEventBeta("showExportDialog", async ({ notePath, defaultType }) => {
const { noteId, parentNoteId } = tree.getNoteIdAndParentIdFromUrl(notePath);
if (!parentNoteId) {
return;
@ -125,14 +125,6 @@ function ExportDialogComponent() {
);
}
export default class ExportDialog extends ReactBasicWidget {
get component() {
return <ExportDialogComponent />
}
}
function exportBranch(branchId: string, type: string, format: string, version: string) {
const taskId = utils.randomString(10);
const url = open.getUrlForDownload(`api/branches/${branchId}/export/${type}/${format}/${version}/${taskId}`);

15
apps/client/src/widgets/dialogs/help.tsx
View File

@ -1,4 +1,3 @@
import ReactBasicWidget from "../react/ReactBasicWidget.js";
import Modal from "../react/Modal.jsx";
import { t } from "../../services/i18n.js";
import { ComponentChildren } from "preact";
@ -6,11 +5,11 @@ import { CommandNames } from "../../components/app_context.js";
import RawHtml from "../react/RawHtml.jsx";
import { useEffect, useState } from "preact/hooks";
import keyboard_actions from "../../services/keyboard_actions.js";
import useTriliumEvent from "../react/hooks.jsx";
import { useTriliumEventBeta } from "../react/hooks.jsx";
function HelpDialogComponent() {
export default function HelpDialog() {
const [ shown, setShown ] = useState(false);
useTriliumEvent("showCheatsheet", () => setShown(true));
useTriliumEventBeta("showCheatsheet", () => setShown(true));
return (
<Modal
@ -161,11 +160,3 @@ function Card({ title, children }: { title: string, children: ComponentChildren
</div>
)
}
export default class HelpDialog extends ReactBasicWidget {
get component() {
return <HelpDialogComponent />;
}
}

14
apps/client/src/widgets/dialogs/import.tsx
View File

@ -9,9 +9,9 @@ import Modal from "../react/Modal";
import RawHtml from "../react/RawHtml";
import ReactBasicWidget from "../react/ReactBasicWidget";
import importService, { UploadFilesOptions } from "../../services/import";
import useTriliumEvent from "../react/hooks";
import { useTriliumEventBeta } from "../react/hooks";
function ImportDialogComponent() {
export default function ImportDialog() {
const [ parentNoteId, setParentNoteId ] = useState<string>();
const [ noteTitle, setNoteTitle ] = useState<string>();
const [ files, setFiles ] = useState<FileList | null>(null);
@ -23,7 +23,7 @@ function ImportDialogComponent() {
const [ replaceUnderscoresWithSpaces, setReplaceUnderscoresWithSpaces ] = useState(true);
const [ shown, setShown ] = useState(false);
useTriliumEvent("showImportDialog", ({ noteId }) => {
useTriliumEventBeta("showImportDialog", ({ noteId }) => {
setParentNoteId(noteId);
tree.getNoteTitle(noteId).then(setNoteTitle);
setShown(true);
@ -89,14 +89,6 @@ function ImportDialogComponent() {
);
}
export default class ImportDialog extends ReactBasicWidget {
get component() {
return <ImportDialogComponent />
}
}
function boolToString(value: boolean) {
return value ? "true" : "false";
}

11
apps/client/src/widgets/dialogs/include_note.tsx
View File

@ -4,7 +4,6 @@ import FormGroup from "../react/FormGroup";
import FormRadioGroup from "../react/FormRadioGroup";
import Modal from "../react/Modal";
import NoteAutocomplete from "../react/NoteAutocomplete";
import ReactBasicWidget from "../react/ReactBasicWidget";
import Button from "../react/Button";
import { Suggestion, triggerRecentNotes } from "../../services/note_autocomplete";
import tree from "../../services/tree";
@ -12,7 +11,7 @@ import froca from "../../services/froca";
import EditableTextTypeWidget from "../type_widgets/editable_text";
import useTriliumEvent from "../react/hooks";
function IncludeNoteDialogComponent() {
export default function IncludeNoteDialog() {
const [textTypeWidget, setTextTypeWidget] = useState<EditableTextTypeWidget>();
const [suggestion, setSuggestion] = useState<Suggestion | null>(null);
const [boxSize, setBoxSize] = useState("medium");
@ -70,14 +69,6 @@ function IncludeNoteDialogComponent() {
)
}
export default class IncludeNoteDialog extends ReactBasicWidget {
get component() {
return <IncludeNoteDialogComponent />;
}
}
async function includeNote(notePath: string, textTypeWidget: EditableTextTypeWidget) {
const noteId = tree.getNoteIdFromUrl(notePath);
if (!noteId) {

15
apps/client/src/widgets/dialogs/incorrect_cpu_arch.tsx
View File

@ -3,14 +3,13 @@ import { t } from "../../services/i18n.js";
import utils from "../../services/utils.js";
import Button from "../react/Button.js";
import Modal from "../react/Modal.js";
import ReactBasicWidget from "../react/ReactBasicWidget.js";
import { useState } from "preact/hooks";
import useTriliumEvent from "../react/hooks.jsx";
import { useTriliumEventBeta } from "../react/hooks.jsx";
function IncorrectCpuArchDialogComponent() {
export default function IncorrectCpuArchDialogComponent() {
const [ shown, setShown ] = useState(false);
const downloadButtonRef = useRef<HTMLButtonElement>(null);
useTriliumEvent("showCpuArchWarning", () => setShown(true));
useTriliumEventBeta("showCpuArchWarning", () => setShown(true));
return (
<Modal
@ -44,11 +43,3 @@ function IncorrectCpuArchDialogComponent() {
</Modal>
)
}
export default class IncorrectCpuArchDialog extends ReactBasicWidget {
get component() {
return <IncorrectCpuArchDialogComponent />
}
}

15
apps/client/src/widgets/dialogs/info.tsx
View File

@ -1,18 +1,17 @@
import { EventData } from "../../components/app_context";
import ReactBasicWidget from "../react/ReactBasicWidget";
import Modal from "../react/Modal";
import { t } from "../../services/i18n";
import Button from "../react/Button";
import { useRef, useState } from "preact/hooks";
import { RawHtmlBlock } from "../react/RawHtml";
import useTriliumEvent from "../react/hooks";
import { useTriliumEventBeta } from "../react/hooks";
function ShowInfoDialogComponent() {
export default function InfoDialog() {
const [ opts, setOpts ] = useState<EventData<"showInfoDialog">>();
const [ shown, setShown ] = useState(false);
const okButtonRef = useRef<HTMLButtonElement>(null);
useTriliumEvent("showInfoDialog", (opts) => {
useTriliumEventBeta("showInfoDialog", (opts) => {
setOpts(opts);
setShown(true);
});
@ -37,11 +36,3 @@ function ShowInfoDialogComponent() {
<RawHtmlBlock className="info-dialog-content" html={opts?.message ?? ""} />
</Modal>);
}
export default class InfoDialog extends ReactBasicWidget {
get component() {
return <ShowInfoDialogComponent />;
}
}

17
apps/client/src/widgets/dialogs/jump_to_note.tsx
View File

@ -1,4 +1,3 @@
import ReactBasicWidget from "../react/ReactBasicWidget";
import Modal from "../react/Modal";
import Button from "../react/Button";
import NoteAutocomplete from "../react/NoteAutocomplete";
@ -8,13 +7,13 @@ import note_autocomplete, { Suggestion } from "../../services/note_autocomplete"
import appContext from "../../components/app_context";
import commandRegistry from "../../services/command_registry";
import { refToJQuerySelector } from "../react/react_utils";
import useTriliumEvent from "../react/hooks";
import { useTriliumEventBeta } from "../react/hooks";
const KEEP_LAST_SEARCH_FOR_X_SECONDS = 120;
type Mode = "last-search" | "recent-notes" | "commands";
function JumpToNoteDialogComponent() {
export default function JumpToNoteDialogComponent() {
const [ mode, setMode ] = useState<Mode>();
const [ lastOpenedTs, setLastOpenedTs ] = useState<number>(0);
const containerRef = useRef<HTMLDivElement>(null);
@ -51,8 +50,8 @@ function JumpToNoteDialogComponent() {
setLastOpenedTs(Date.now());
}
useTriliumEvent("jumpToNote", () => openDialog(false));
useTriliumEvent("commandPalette", () => openDialog(true));
useTriliumEventBeta("jumpToNote", () => openDialog(false));
useTriliumEventBeta("commandPalette", () => openDialog(true));
async function onItemSelected(suggestion?: Suggestion | null) {
if (!suggestion) {
@ -115,11 +114,3 @@ function JumpToNoteDialogComponent() {
</Modal>
);
}
export default class JumpToNoteDialog extends ReactBasicWidget {
get component() {
return <JumpToNoteDialogComponent />;
}
}

17
apps/client/src/widgets/dialogs/markdown_import.tsx
View File

@ -5,15 +5,14 @@ import server from "../../services/server";
import toast from "../../services/toast";
import utils from "../../services/utils";
import Modal from "../react/Modal";
import ReactBasicWidget from "../react/ReactBasicWidget";
import Button from "../react/Button";
import useTriliumEvent from "../react/hooks";
import { useTriliumEventBeta } from "../react/hooks";
interface RenderMarkdownResponse {
htmlContent: string;
}
function MarkdownImportDialogComponent() {
export default function MarkdownImportDialog() {
const markdownImportTextArea = useRef<HTMLTextAreaElement>(null);
let [ text, setText ] = useState("");
let [ shown, setShown ] = useState(false);
@ -33,8 +32,8 @@ function MarkdownImportDialogComponent() {
}
}, []);
useTriliumEvent("importMarkdownInline", triggerImport);
useTriliumEvent("pasteMarkdownIntoText", triggerImport);
useTriliumEventBeta("importMarkdownInline", triggerImport);
useTriliumEventBeta("pasteMarkdownIntoText", triggerImport);
async function sendForm() {
await convertMarkdownToHtml(text);
@ -64,14 +63,6 @@ function MarkdownImportDialogComponent() {
)
}
export default class MarkdownImportDialog extends ReactBasicWidget {
get component() {
return <MarkdownImportDialogComponent />;
}
}
async function convertMarkdownToHtml(markdownContent: string) {
const { htmlContent } = await server.post<RenderMarkdownResponse>("other/render-markdown", { markdownContent });

14
apps/client/src/widgets/dialogs/move_to.tsx
View File

@ -11,15 +11,15 @@ import tree from "../../services/tree";
import froca from "../../services/froca";
import branches from "../../services/branches";
import toast from "../../services/toast";
import useTriliumEvent from "../react/hooks";
import { useTriliumEventBeta } from "../react/hooks";
function MoveToDialogComponent() {
export default function MoveToDialog() {
const [ movedBranchIds, setMovedBranchIds ] = useState<string[]>();
const [ suggestion, setSuggestion ] = useState<Suggestion | null>(null);
const [ shown, setShown ] = useState(false);
const autoCompleteRef = useRef<HTMLInputElement>(null);
useTriliumEvent("moveBranchIdsTo", ({ branchIds }) => {
useTriliumEventBeta("moveBranchIdsTo", ({ branchIds }) => {
setMovedBranchIds(branchIds);
setShown(true);
});
@ -67,14 +67,6 @@ function MoveToDialogComponent() {
)
}
export default class MoveToDialog extends ReactBasicWidget {
get component() {
return <MoveToDialogComponent />;
}
}
async function moveNotesTo(movedBranchIds: string[] | undefined, parentBranchId: string) {
if (movedBranchIds) {
await branches.moveToParentNote(movedBranchIds, parentBranchId);

15
apps/client/src/widgets/dialogs/note_type_chooser.tsx
View File

@ -1,4 +1,3 @@
import ReactBasicWidget from "../react/ReactBasicWidget";
import Modal from "../react/Modal";
import { t } from "../../services/i18n";
import FormGroup from "../react/FormGroup";
@ -10,7 +9,7 @@ import { MenuCommandItem, MenuItem } from "../../menus/context_menu";
import { TreeCommandNames } from "../../menus/tree_context_menu";
import { Suggestion } from "../../services/note_autocomplete";
import Badge from "../react/Badge";
import useTriliumEvent from "../react/hooks";
import { useTriliumEventBeta } from "../react/hooks";
export interface ChooseNoteTypeResponse {
success: boolean;
@ -26,13 +25,13 @@ const SEPARATOR_TITLE_REPLACEMENTS = [
t("note_type_chooser.templates")
];
function NoteTypeChooserDialogComponent() {
export default function NoteTypeChooserDialogComponent() {
const [ callback, setCallback ] = useState<ChooseNoteTypeCallback>();
const [ shown, setShown ] = useState(false);
const [ parentNote, setParentNote ] = useState<Suggestion | null>();
const [ noteTypes, setNoteTypes ] = useState<MenuItem<TreeCommandNames>[]>([]);
useTriliumEvent("chooseNoteType", ({ callback }) => {
useTriliumEventBeta("chooseNoteType", ({ callback }) => {
setCallback(() => callback);
setShown(true);
});
@ -120,11 +119,3 @@ function NoteTypeChooserDialogComponent() {
</Modal>
);
}
export default class NoteTypeChooserDialog extends ReactBasicWidget {
get component() {
return <NoteTypeChooserDialogComponent />
}
}

14
apps/client/src/widgets/dialogs/password_not_set.tsx
View File

@ -1,14 +1,13 @@
import ReactBasicWidget from "../react/ReactBasicWidget";
import Modal from "../react/Modal";
import { t } from "../../services/i18n";
import Button from "../react/Button";
import appContext from "../../components/app_context";
import { useState } from "preact/hooks";
import useTriliumEvent from "../react/hooks";
import { useTriliumEventBeta } from "../react/hooks";
function PasswordNotSetDialogComponent() {
export default function PasswordNotSetDialog() {
const [ shown, setShown ] = useState(false);
useTriliumEvent("showPasswordNotSet", () => setShown(true));
useTriliumEventBeta("showPasswordNotSet", () => setShown(true));
return (
<Modal
@ -27,10 +26,3 @@ function PasswordNotSetDialogComponent() {
);
}
export default class PasswordNotSetDialog extends ReactBasicWidget {
get component() {
return <PasswordNotSetDialogComponent />;
}
}

16
apps/client/src/widgets/dialogs/prompt.tsx
View File

@ -2,12 +2,10 @@ import { useRef, useState } from "preact/hooks";
import { t } from "../../services/i18n";
import Button from "../react/Button";
import Modal from "../react/Modal";
import { Modal as BootstrapModal } from "bootstrap";
import ReactBasicWidget from "../react/ReactBasicWidget";
import FormTextBox from "../react/FormTextBox";
import FormGroup from "../react/FormGroup";
import { refToJQuerySelector } from "../react/react_utils";
import useTriliumEvent from "../react/hooks";
import { useTriliumEventBeta } from "../react/hooks";
// JQuery here is maintained for compatibility with existing code.
interface ShownCallbackData {
@ -28,7 +26,7 @@ export interface PromptDialogOptions {
readOnly?: boolean;
}
function PromptDialogComponent() {
export default function PromptDialog() {
const modalRef = useRef<HTMLDivElement>(null);
const formRef = useRef<HTMLFormElement>(null);
const labelRef = useRef<HTMLLabelElement>(null);
@ -38,7 +36,7 @@ function PromptDialogComponent() {
const [ shown, setShown ] = useState(false);
const submitValue = useRef<string>(null);
useTriliumEvent("showPromptDialog", (newOpts) => {
useTriliumEventBeta("showPromptDialog", (newOpts) => {
opts.current = newOpts;
setValue(newOpts.defaultValue ?? "");
setShown(true);
@ -84,11 +82,3 @@ function PromptDialogComponent() {
</Modal>
);
}
export default class PromptDialog extends ReactBasicWidget {
get component() {
return <PromptDialogComponent />;
}
}

17
apps/client/src/widgets/dialogs/protected_session_password.tsx
View File

@ -3,17 +3,16 @@ import { t } from "../../services/i18n";
import Button from "../react/Button";
import FormTextBox from "../react/FormTextBox";
import Modal from "../react/Modal";
import ReactBasicWidget from "../react/ReactBasicWidget";
import protected_session from "../../services/protected_session";
import useTriliumEvent from "../react/hooks";
import { useTriliumEventBeta } from "../react/hooks";
function ProtectedSessionPasswordDialogComponent() {
export default function ProtectedSessionPasswordDialog() {
const [ shown, setShown ] = useState(false);
const [ password, setPassword ] = useState("");
const inputRef = useRef<HTMLInputElement>(null);
useTriliumEvent("showProtectedSessionPasswordDialog", () => setShown(true));
useTriliumEvent("closeProtectedSessionPasswordDialog", () => setShown(false));
useTriliumEventBeta("showProtectedSessionPasswordDialog", () => setShown(true));
useTriliumEventBeta("closeProtectedSessionPasswordDialog", () => setShown(false));
return (
<Modal
@ -38,11 +37,3 @@ function ProtectedSessionPasswordDialogComponent() {
</Modal>
)
}
export default class ProtectedSessionPasswordDialog extends ReactBasicWidget {
get component() {
return <ProtectedSessionPasswordDialogComponent />;
}
}

15
apps/client/src/widgets/dialogs/recent_changes.tsx
View File

@ -6,7 +6,6 @@ import server from "../../services/server";
import toast from "../../services/toast";
import Button from "../react/Button";
import Modal from "../react/Modal";
import ReactBasicWidget from "../react/ReactBasicWidget";
import hoisted_note from "../../services/hoisted_note";
import type { RecentChangeRow } from "@triliumnext/commons";
import froca from "../../services/froca";
@ -14,15 +13,15 @@ import { formatDateTime } from "../../utils/formatters";
import link from "../../services/link";
import RawHtml from "../react/RawHtml";
import ws from "../../services/ws";
import useTriliumEvent from "../react/hooks";
import { useTriliumEventBeta } from "../react/hooks";
function RecentChangesDialogComponent() {
export default function RecentChangesDialog() {
const [ ancestorNoteId, setAncestorNoteId ] = useState<string>();
const [ groupedByDate, setGroupedByDate ] = useState<Map<String, RecentChangeRow[]>>();
const [ needsRefresh, setNeedsRefresh ] = useState(false);
const [ shown, setShown ] = useState(false);
useTriliumEvent("showRecentChanges", ({ ancestorNoteId }) => {
useTriliumEventBeta("showRecentChanges", ({ ancestorNoteId }) => {
setNeedsRefresh(true);
setAncestorNoteId(ancestorNoteId ?? hoisted_note.getHoistedNoteId());
setShown(true);
@ -156,14 +155,6 @@ function DeletedNoteLink({ change, setShown }: { change: RecentChangeRow, setSho
);
}
export default class RecentChangesDialog extends ReactBasicWidget {
get component() {
return <RecentChangesDialogComponent />
}
}
function groupByDate(rows: RecentChangeRow[]) {
const groupedByDate = new Map<String, RecentChangeRow[]>();

10
apps/client/src/widgets/dialogs/revisions.tsx
View File

@ -20,7 +20,7 @@ import ActionButton from "../react/ActionButton";
import options from "../../services/options";
import useTriliumEvent from "../react/hooks";
function RevisionsDialogComponent() {
export default function RevisionsDialog() {
const [ note, setNote ] = useState<FNote>();
const [ revisions, setRevisions ] = useState<RevisionItem[]>();
const [ currentRevision, setCurrentRevision ] = useState<RevisionItem>();
@ -291,14 +291,6 @@ function RevisionFooter({ note }: { note?: FNote }) {
</>;
}
export default class RevisionsDialog extends ReactBasicWidget {
get component() {
return <RevisionsDialogComponent />
}
}
async function getNote(noteId?: string | null) {
if (noteId) {
return await froca.getNote(noteId);

15
apps/client/src/widgets/dialogs/sort_child_notes.tsx
View File

@ -5,12 +5,11 @@ import FormCheckbox from "../react/FormCheckbox";
import FormRadioGroup from "../react/FormRadioGroup";
import FormTextBox from "../react/FormTextBox";
import Modal from "../react/Modal";
import ReactBasicWidget from "../react/ReactBasicWidget";
import server from "../../services/server";
import FormGroup from "../react/FormGroup";
import useTriliumEvent from "../react/hooks";
import { useTriliumEventBeta } from "../react/hooks";
function SortChildNotesDialogComponent() {
export default function SortChildNotesDialog() {
const [ parentNoteId, setParentNoteId ] = useState<string>();
const [ sortBy, setSortBy ] = useState("title");
const [ sortDirection, setSortDirection ] = useState("asc");
@ -19,7 +18,7 @@ function SortChildNotesDialogComponent() {
const [ sortLocale, setSortLocale ] = useState("");
const [ shown, setShown ] = useState(false);
useTriliumEvent("sortChildNotes", ({ node }) => {
useTriliumEventBeta("sortChildNotes", ({ node }) => {
setParentNoteId(node.data.noteId);
setShown(true);
});
@ -89,11 +88,3 @@ function SortChildNotesDialogComponent() {
</Modal>
)
}
export default class SortChildNotesDialog extends ReactBasicWidget {
get component() {
return <SortChildNotesDialogComponent />;
}
}

14
apps/client/src/widgets/dialogs/upload_attachments.tsx
View File

@ -9,9 +9,9 @@ import ReactBasicWidget from "../react/ReactBasicWidget";
import options from "../../services/options";
import importService from "../../services/import.js";
import tree from "../../services/tree";
import useTriliumEvent from "../react/hooks";
import { useTriliumEventBeta } from "../react/hooks";
function UploadAttachmentsDialogComponent() {
export default function UploadAttachmentsDialog() {
const [ parentNoteId, setParentNoteId ] = useState<string>();
const [ files, setFiles ] = useState<FileList | null>(null);
const [ shrinkImages, setShrinkImages ] = useState(options.is("compressImages"));
@ -19,7 +19,7 @@ function UploadAttachmentsDialogComponent() {
const [ description, setDescription ] = useState<string | undefined>(undefined);
const [ shown, setShown ] = useState(false);
useTriliumEvent("showUploadAttachmentsDialog", ({ noteId }) => {
useTriliumEventBeta("showUploadAttachmentsDialog", ({ noteId }) => {
setParentNoteId(noteId);
setShown(true);
});
@ -64,11 +64,3 @@ function UploadAttachmentsDialogComponent() {
</Modal>
);
}
export default class UploadAttachmentsDialog extends ReactBasicWidget {
get component() {
return <UploadAttachmentsDialogComponent />;
}
}

2
apps/client/src/widgets/react/FormGroup.tsx
View File

@ -25,7 +25,7 @@ export default function FormGroup({ name, label, title, className, children, des
{childWithId}
{description && <small className="form-text">{description}</small>}
{description && <div><small className="form-text">{description}</small></div>}
</div>
);
}