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/floating_buttons): use component-driven approach

Browse Source
This commit is contained in:
Elian Doran 2025-08-27 21:37:48 +03:00
parent 4c70d72ba2
commit 2d950e8f3a
No known key found for this signature in database
1 changed files with 13 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
apps/client/src/widgets/FloatingButtons.tsx
View File

@ -8,6 +8,7 @@ import { useNoteContext } from "./react/hooks";
import { useContext, useEffect, useMemo } from "preact/hooks"; import { useContext, useEffect, useMemo } from "preact/hooks";
import { ParentComponent } from "./react/react_utils"; import { ParentComponent } from "./react/react_utils";
import Component from "../components/component"; import Component from "../components/component";
import { VNode } from "preact";
interface FloatingButtonContext { interface FloatingButtonContext {
parentComponent: Component; parentComponent: Component;
@ -16,18 +17,14 @@ interface FloatingButtonContext {
} }
interface FloatingButtonDefinition { interface FloatingButtonDefinition {
title: string; component: (context: FloatingButtonContext) => VNode;
icon: string;
isEnabled: (context: FloatingButtonContext) => boolean; isEnabled: (context: FloatingButtonContext) => boolean;
onClick: (context: FloatingButtonContext) => void;
} }
const FLOATING_BUTTON_DEFINITIONS: FloatingButtonDefinition[] = [ const FLOATING_BUTTON_DEFINITIONS: FloatingButtonDefinition[] = [
{ {
title: t("backend_log.refresh"), component: RefreshBackendLogButton,
icon: "bx bx-refresh",
isEnabled: ({ note, noteContext }) => note.noteId === "_backendLog" && noteContext.viewScope?.viewMode === "default", isEnabled: ({ note, noteContext }) => note.noteId === "_backendLog" && noteContext.viewScope?.viewMode === "default",
onClick: ({ parentComponent, noteContext }) => parentComponent.triggerEvent("refreshData", { ntxId: noteContext.ntxId })
} }
]; ];
@ -59,12 +56,8 @@ export default function FloatingButtons() {
return ( return (
<div className="floating-buttons no-print"> <div className="floating-buttons no-print">
<div className="floating-buttons-children"> <div className="floating-buttons-children">
{context && definitions.map(({ title, icon, onClick }) => ( {context && definitions.map(({ component: Component }) => (
<ActionButton <Component {...context} />
text={title}
icon={icon}
onClick={() => onClick(context)}
/>
))} ))}
</div> </div>
@ -73,6 +66,14 @@ export default function FloatingButtons() {
) )
} }
function RefreshBackendLogButton({ parentComponent, noteContext }: FloatingButtonContext) {
return <ActionButton
text={t("backend_log.refresh")}
icon="bx bx-refresh"
onClick={() => parentComponent.triggerEvent("refreshData", { ntxId: noteContext.ntxId })}
/>
}
/** /**
* Show button that displays floating button after click on close button * Show button that displays floating button after click on close button
*/ */