From a507991808d2bfd408b45a939b81b4fe9ab4f5a7 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sun, 24 Aug 2025 20:57:23 +0300 Subject: [PATCH] refactor(react/modals): use classless components --- apps/client/src/layouts/desktop_layout.tsx | 4 +- apps/client/src/layouts/layout_commons.tsx | 48 +++++++++---------- apps/client/src/widgets/dialogs/about.tsx | 15 ++---- apps/client/src/widgets/dialogs/add_link.tsx | 14 ++---- .../src/widgets/dialogs/branch_prefix.tsx | 15 ++---- .../src/widgets/dialogs/bulk_actions.tsx | 18 ++----- .../src/widgets/dialogs/call_to_action.tsx | 17 ++----- apps/client/src/widgets/dialogs/clone_to.tsx | 15 ++---- apps/client/src/widgets/dialogs/confirm.tsx | 17 ++----- .../src/widgets/dialogs/delete_notes.tsx | 14 ++---- apps/client/src/widgets/dialogs/export.tsx | 14 ++---- apps/client/src/widgets/dialogs/help.tsx | 15 ++---- apps/client/src/widgets/dialogs/import.tsx | 14 ++---- .../src/widgets/dialogs/include_note.tsx | 11 +---- .../widgets/dialogs/incorrect_cpu_arch.tsx | 15 ++---- apps/client/src/widgets/dialogs/info.tsx | 15 ++---- .../src/widgets/dialogs/jump_to_note.tsx | 17 ++----- .../src/widgets/dialogs/markdown_import.tsx | 17 ++----- apps/client/src/widgets/dialogs/move_to.tsx | 14 ++---- .../src/widgets/dialogs/note_type_chooser.tsx | 15 ++---- .../src/widgets/dialogs/password_not_set.tsx | 14 ++---- apps/client/src/widgets/dialogs/prompt.tsx | 16 ++----- .../dialogs/protected_session_password.tsx | 17 ++----- .../src/widgets/dialogs/recent_changes.tsx | 15 ++---- apps/client/src/widgets/dialogs/revisions.tsx | 10 +--- .../src/widgets/dialogs/sort_child_notes.tsx | 15 ++---- .../widgets/dialogs/upload_attachments.tsx | 14 ++---- apps/client/src/widgets/react/FormGroup.tsx | 2 +- 28 files changed, 106 insertions(+), 321 deletions(-) diff --git a/apps/client/src/layouts/desktop_layout.tsx b/apps/client/src/layouts/desktop_layout.tsx index 64e0c0d08..fece6efd0 100644 --- a/apps/client/src/layouts/desktop_layout.tsx +++ b/apps/client/src/layouts/desktop_layout.tsx @@ -196,8 +196,8 @@ export default class DesktopLayout { .child(new CloseZenButton()) // Desktop-specific dialogs. - .child(new PasswordNoteSetDialog()) - .child(new UploadAttachmentsDialog()); + .child() + .child(); applyModals(rootContainer); return rootContainer; diff --git a/apps/client/src/layouts/layout_commons.tsx b/apps/client/src/layouts/layout_commons.tsx index 0239e7db0..8468b47f7 100644 --- a/apps/client/src/layouts/layout_commons.tsx +++ b/apps/client/src/layouts/layout_commons.tsx @@ -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() + .child() + .child() + .child() + .child() + .child() + .child() + .child() + .child() + .child() + .child() + .child() + .child() + .child() + .child() + .child() + .child() + .child() + .child() + .child() + .child() + .child() .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(); } diff --git a/apps/client/src/widgets/dialogs/about.tsx b/apps/client/src/widgets/dialogs/about.tsx index 2b49add70..ec12de3ab 100644 --- a/apps/client/src/widgets/dialogs/about.tsx +++ b/apps/client/src/widgets/dialogs/about.tsx @@ -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(null); let [shown, setShown] = useState(false); const forceWordBreak: CSSProperties = { wordBreak: "break-all" }; - useTriliumEvent("openAboutDialog", () => setShown(true)); + useTriliumEventBeta("openAboutDialog", () => setShown(true)); return ( {directory}; } } - -export default class AboutDialog extends ReactBasicWidget { - - get component() { - return ; - } - -} \ No newline at end of file diff --git a/apps/client/src/widgets/dialogs/add_link.tsx b/apps/client/src/widgets/dialogs/add_link.tsx index e20e5a80e..682015b0f 100644 --- a/apps/client/src/widgets/dialogs/add_link.tsx +++ b/apps/client/src/widgets/dialogs/add_link.tsx @@ -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(); const initialText = useRef(); const [ linkTitle, setLinkTitle ] = useState(""); @@ -24,7 +24,7 @@ function AddLinkDialogComponent() { const [ suggestion, setSuggestion ] = useState(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() { ); } - -export default class AddLinkDialog extends ReactBasicWidget { - - get component() { - return ; - } - -} diff --git a/apps/client/src/widgets/dialogs/branch_prefix.tsx b/apps/client/src/widgets/dialogs/branch_prefix.tsx index f73feb125..849988ad8 100644 --- a/apps/client/src/widgets/dialogs/branch_prefix.tsx +++ b/apps/client/src/widgets/dialogs/branch_prefix.tsx @@ -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(); const [ prefix, setPrefix ] = useState(branch?.prefix ?? ""); const branchInput = useRef(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 ; - } - -} - async function savePrefix(branchId: string, prefix: string) { await server.put(`branches/${branchId}/set-prefix`, { prefix: prefix }); toast.showMessage(t("branch_prefix.branch_prefix_saved")); diff --git a/apps/client/src/widgets/dialogs/bulk_actions.tsx b/apps/client/src/widgets/dialogs/bulk_actions.tsx index 8d184433f..25b490218 100644 --- a/apps/client/src/widgets/dialogs/bulk_actions.tsx +++ b/apps/client/src/widgets/dialogs/bulk_actions.tsx @@ -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(); const [ bulkActionNote, setBulkActionNote ] = useState(); const [ includeDescendants, setIncludeDescendants ] = useState(false); @@ -22,7 +22,7 @@ function BulkActionComponent() { const [ existingActions, setExistingActions ] = useState([]); 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 ( ); } - -export default class BulkActionsDialog extends ReactBasicWidget { - - get component() { - return - } - -} \ No newline at end of file diff --git a/apps/client/src/widgets/dialogs/call_to_action.tsx b/apps/client/src/widgets/dialogs/call_to_action.tsx index d493611e3..9b4668856 100644 --- a/apps/client/src/widgets/dialogs/call_to_action.tsx +++ b/apps/client/src/widgets/dialogs/call_to_action.tsx @@ -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 ) } - -export class CallToActionDialog extends ReactBasicWidget { - - get component() { - return - } - -} \ No newline at end of file diff --git a/apps/client/src/widgets/dialogs/clone_to.tsx b/apps/client/src/widgets/dialogs/clone_to.tsx index 173169858..f6e538b0b 100644 --- a/apps/client/src/widgets/dialogs/clone_to.tsx +++ b/apps/client/src/widgets/dialogs/clone_to.tsx @@ -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(); const [ prefix, setPrefix ] = useState(""); const [ suggestion, setSuggestion ] = useState(null); const [ shown, setShown ] = useState(false); const autoCompleteRef = useRef(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 ; - } - -} - async function cloneNotesTo(notePath: string, clonedNoteIds: string[], prefix?: string) { const { noteId, parentNoteId } = tree.getNoteIdAndParentIdFromUrl(notePath); if (!noteId || !parentNoteId) { diff --git a/apps/client/src/widgets/dialogs/confirm.tsx b/apps/client/src/widgets/dialogs/confirm.tsx index a4ab173fd..6e83bebff 100644 --- a/apps/client/src/widgets/dialogs/confirm.tsx +++ b/apps/client/src/widgets/dialogs/confirm.tsx @@ -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(); 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 ( ; - } - -} \ No newline at end of file diff --git a/apps/client/src/widgets/dialogs/delete_notes.tsx b/apps/client/src/widgets/dialogs/delete_notes.tsx index 54afbb752..ca4143e68 100644 --- a/apps/client/src/widgets/dialogs/delete_notes.tsx +++ b/apps/client/src/widgets/dialogs/delete_notes.tsx @@ -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({}); 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(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 ; - } - -} \ No newline at end of file diff --git a/apps/client/src/widgets/dialogs/export.tsx b/apps/client/src/widgets/dialogs/export.tsx index 3543e3b35..26ca4d537 100644 --- a/apps/client/src/widgets/dialogs/export.tsx +++ b/apps/client/src/widgets/dialogs/export.tsx @@ -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(); const [ exportType, setExportType ] = useState(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 - } - -} - 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}`); diff --git a/apps/client/src/widgets/dialogs/help.tsx b/apps/client/src/widgets/dialogs/help.tsx index e4b72750d..474b70745 100644 --- a/apps/client/src/widgets/dialogs/help.tsx +++ b/apps/client/src/widgets/dialogs/help.tsx @@ -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 ( ) } - -export default class HelpDialog extends ReactBasicWidget { - - get component() { - return ; - } - -} diff --git a/apps/client/src/widgets/dialogs/import.tsx b/apps/client/src/widgets/dialogs/import.tsx index df648b7fb..dc0a774fc 100644 --- a/apps/client/src/widgets/dialogs/import.tsx +++ b/apps/client/src/widgets/dialogs/import.tsx @@ -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(); const [ noteTitle, setNoteTitle ] = useState(); const [ files, setFiles ] = useState(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 - } - -} - function boolToString(value: boolean) { return value ? "true" : "false"; } \ No newline at end of file diff --git a/apps/client/src/widgets/dialogs/include_note.tsx b/apps/client/src/widgets/dialogs/include_note.tsx index 234fc7646..49c650521 100644 --- a/apps/client/src/widgets/dialogs/include_note.tsx +++ b/apps/client/src/widgets/dialogs/include_note.tsx @@ -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(); const [suggestion, setSuggestion] = useState(null); const [boxSize, setBoxSize] = useState("medium"); @@ -70,14 +69,6 @@ function IncludeNoteDialogComponent() { ) } -export default class IncludeNoteDialog extends ReactBasicWidget { - - get component() { - return ; - } - -} - async function includeNote(notePath: string, textTypeWidget: EditableTextTypeWidget) { const noteId = tree.getNoteIdFromUrl(notePath); if (!noteId) { diff --git a/apps/client/src/widgets/dialogs/incorrect_cpu_arch.tsx b/apps/client/src/widgets/dialogs/incorrect_cpu_arch.tsx index e0165b7d0..112d7efc8 100644 --- a/apps/client/src/widgets/dialogs/incorrect_cpu_arch.tsx +++ b/apps/client/src/widgets/dialogs/incorrect_cpu_arch.tsx @@ -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(null); - useTriliumEvent("showCpuArchWarning", () => setShown(true)); + useTriliumEventBeta("showCpuArchWarning", () => setShown(true)); return ( ) } - -export default class IncorrectCpuArchDialog extends ReactBasicWidget { - - get component() { - return - } - -} diff --git a/apps/client/src/widgets/dialogs/info.tsx b/apps/client/src/widgets/dialogs/info.tsx index 9eaf81b50..9f9907fbf 100644 --- a/apps/client/src/widgets/dialogs/info.tsx +++ b/apps/client/src/widgets/dialogs/info.tsx @@ -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>(); const [ shown, setShown ] = useState(false); const okButtonRef = useRef(null); - useTriliumEvent("showInfoDialog", (opts) => { + useTriliumEventBeta("showInfoDialog", (opts) => { setOpts(opts); setShown(true); }); @@ -37,11 +36,3 @@ function ShowInfoDialogComponent() { ); } - -export default class InfoDialog extends ReactBasicWidget { - - get component() { - return ; - } - -} diff --git a/apps/client/src/widgets/dialogs/jump_to_note.tsx b/apps/client/src/widgets/dialogs/jump_to_note.tsx index 3af1b1aba..20d0c3e2e 100644 --- a/apps/client/src/widgets/dialogs/jump_to_note.tsx +++ b/apps/client/src/widgets/dialogs/jump_to_note.tsx @@ -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(); const [ lastOpenedTs, setLastOpenedTs ] = useState(0); const containerRef = useRef(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() { ); } - -export default class JumpToNoteDialog extends ReactBasicWidget { - - get component() { - return ; - } - -} \ No newline at end of file diff --git a/apps/client/src/widgets/dialogs/markdown_import.tsx b/apps/client/src/widgets/dialogs/markdown_import.tsx index 4f91278d9..8049e98da 100644 --- a/apps/client/src/widgets/dialogs/markdown_import.tsx +++ b/apps/client/src/widgets/dialogs/markdown_import.tsx @@ -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(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 ; - } - -} - async function convertMarkdownToHtml(markdownContent: string) { const { htmlContent } = await server.post("other/render-markdown", { markdownContent }); diff --git a/apps/client/src/widgets/dialogs/move_to.tsx b/apps/client/src/widgets/dialogs/move_to.tsx index c80ffc0d0..92cd20c37 100644 --- a/apps/client/src/widgets/dialogs/move_to.tsx +++ b/apps/client/src/widgets/dialogs/move_to.tsx @@ -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(); const [ suggestion, setSuggestion ] = useState(null); const [ shown, setShown ] = useState(false); const autoCompleteRef = useRef(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 ; - } - -} - async function moveNotesTo(movedBranchIds: string[] | undefined, parentBranchId: string) { if (movedBranchIds) { await branches.moveToParentNote(movedBranchIds, parentBranchId); diff --git a/apps/client/src/widgets/dialogs/note_type_chooser.tsx b/apps/client/src/widgets/dialogs/note_type_chooser.tsx index 993ffc6ef..70cf9a7d8 100644 --- a/apps/client/src/widgets/dialogs/note_type_chooser.tsx +++ b/apps/client/src/widgets/dialogs/note_type_chooser.tsx @@ -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(); const [ shown, setShown ] = useState(false); const [ parentNote, setParentNote ] = useState(); const [ noteTypes, setNoteTypes ] = useState[]>([]); - useTriliumEvent("chooseNoteType", ({ callback }) => { + useTriliumEventBeta("chooseNoteType", ({ callback }) => { setCallback(() => callback); setShown(true); }); @@ -120,11 +119,3 @@ function NoteTypeChooserDialogComponent() { ); } - -export default class NoteTypeChooserDialog extends ReactBasicWidget { - - get component() { - return - } - -} diff --git a/apps/client/src/widgets/dialogs/password_not_set.tsx b/apps/client/src/widgets/dialogs/password_not_set.tsx index 79aaa4fc8..bc225f798 100644 --- a/apps/client/src/widgets/dialogs/password_not_set.tsx +++ b/apps/client/src/widgets/dialogs/password_not_set.tsx @@ -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 ( ; - } - -} diff --git a/apps/client/src/widgets/dialogs/prompt.tsx b/apps/client/src/widgets/dialogs/prompt.tsx index 8af41ef44..baf62ec3f 100644 --- a/apps/client/src/widgets/dialogs/prompt.tsx +++ b/apps/client/src/widgets/dialogs/prompt.tsx @@ -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(null); const formRef = useRef(null); const labelRef = useRef(null); @@ -38,7 +36,7 @@ function PromptDialogComponent() { const [ shown, setShown ] = useState(false); const submitValue = useRef(null); - useTriliumEvent("showPromptDialog", (newOpts) => { + useTriliumEventBeta("showPromptDialog", (newOpts) => { opts.current = newOpts; setValue(newOpts.defaultValue ?? ""); setShown(true); @@ -84,11 +82,3 @@ function PromptDialogComponent() { ); } - -export default class PromptDialog extends ReactBasicWidget { - - get component() { - return ; - } - -} diff --git a/apps/client/src/widgets/dialogs/protected_session_password.tsx b/apps/client/src/widgets/dialogs/protected_session_password.tsx index 137b0b0d4..afbd4fdff 100644 --- a/apps/client/src/widgets/dialogs/protected_session_password.tsx +++ b/apps/client/src/widgets/dialogs/protected_session_password.tsx @@ -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(null); - useTriliumEvent("showProtectedSessionPasswordDialog", () => setShown(true)); - useTriliumEvent("closeProtectedSessionPasswordDialog", () => setShown(false)); + useTriliumEventBeta("showProtectedSessionPasswordDialog", () => setShown(true)); + useTriliumEventBeta("closeProtectedSessionPasswordDialog", () => setShown(false)); return ( ) } - -export default class ProtectedSessionPasswordDialog extends ReactBasicWidget { - - get component() { - return ; - } - -} \ No newline at end of file diff --git a/apps/client/src/widgets/dialogs/recent_changes.tsx b/apps/client/src/widgets/dialogs/recent_changes.tsx index 264d2f15d..4c708519c 100644 --- a/apps/client/src/widgets/dialogs/recent_changes.tsx +++ b/apps/client/src/widgets/dialogs/recent_changes.tsx @@ -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(); const [ groupedByDate, setGroupedByDate ] = useState>(); 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 - } - -} - function groupByDate(rows: RecentChangeRow[]) { const groupedByDate = new Map(); diff --git a/apps/client/src/widgets/dialogs/revisions.tsx b/apps/client/src/widgets/dialogs/revisions.tsx index 4d6377bba..77d019814 100644 --- a/apps/client/src/widgets/dialogs/revisions.tsx +++ b/apps/client/src/widgets/dialogs/revisions.tsx @@ -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(); const [ revisions, setRevisions ] = useState(); const [ currentRevision, setCurrentRevision ] = useState(); @@ -291,14 +291,6 @@ function RevisionFooter({ note }: { note?: FNote }) { ; } -export default class RevisionsDialog extends ReactBasicWidget { - - get component() { - return - } - -} - async function getNote(noteId?: string | null) { if (noteId) { return await froca.getNote(noteId); diff --git a/apps/client/src/widgets/dialogs/sort_child_notes.tsx b/apps/client/src/widgets/dialogs/sort_child_notes.tsx index d73b84cae..522096a12 100644 --- a/apps/client/src/widgets/dialogs/sort_child_notes.tsx +++ b/apps/client/src/widgets/dialogs/sort_child_notes.tsx @@ -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(); 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() { ) } - -export default class SortChildNotesDialog extends ReactBasicWidget { - - get component() { - return ; - } - -} \ No newline at end of file diff --git a/apps/client/src/widgets/dialogs/upload_attachments.tsx b/apps/client/src/widgets/dialogs/upload_attachments.tsx index 8f53dd0fe..fb18efa36 100644 --- a/apps/client/src/widgets/dialogs/upload_attachments.tsx +++ b/apps/client/src/widgets/dialogs/upload_attachments.tsx @@ -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(); const [ files, setFiles ] = useState(null); const [ shrinkImages, setShrinkImages ] = useState(options.is("compressImages")); @@ -19,7 +19,7 @@ function UploadAttachmentsDialogComponent() { const [ description, setDescription ] = useState(undefined); const [ shown, setShown ] = useState(false); - useTriliumEvent("showUploadAttachmentsDialog", ({ noteId }) => { + useTriliumEventBeta("showUploadAttachmentsDialog", ({ noteId }) => { setParentNoteId(noteId); setShown(true); }); @@ -64,11 +64,3 @@ function UploadAttachmentsDialogComponent() { ); } - -export default class UploadAttachmentsDialog extends ReactBasicWidget { - - get component() { - return ; - } - -} diff --git a/apps/client/src/widgets/react/FormGroup.tsx b/apps/client/src/widgets/react/FormGroup.tsx index 45394563b..400a2ef7f 100644 --- a/apps/client/src/widgets/react/FormGroup.tsx +++ b/apps/client/src/widgets/react/FormGroup.tsx @@ -25,7 +25,7 @@ export default function FormGroup({ name, label, title, className, children, des {childWithId} - {description && {description}} + {description &&
{description}
} ); }