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 { ParentComponent } from "./react/react_utils";
import Component from "../components/component";
import { VNode } from "preact";
interface FloatingButtonContext {
parentComponent: Component;
@ -16,18 +17,14 @@ interface FloatingButtonContext {
}
interface FloatingButtonDefinition {
title: string;
icon: string;
component: (context: FloatingButtonContext) => VNode;
isEnabled: (context: FloatingButtonContext) => boolean;
onClick: (context: FloatingButtonContext) => void;
}
const FLOATING_BUTTON_DEFINITIONS: FloatingButtonDefinition[] = [
{
title: t("backend_log.refresh"),
icon: "bx bx-refresh",
component: RefreshBackendLogButton,
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 (
<div className="floating-buttons no-print">
<div className="floating-buttons-children">
{context && definitions.map(({ title, icon, onClick }) => (
<ActionButton
text={title}
icon={icon}
onClick={() => onClick(context)}
/>
{context && definitions.map(({ component: Component }) => (
<Component {...context} />
))}
</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
*/