From 4c70d72ba2143138486c9364989f51184fbdadbc Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Wed, 27 Aug 2025 21:29:49 +0300 Subject: [PATCH] feat(react/floating_buttons): port refresh button --- apps/client/src/widgets/FloatingButtons.tsx | 54 ++++++++++++++++++- .../floating_buttons/refresh_button.ts | 21 -------- 2 files changed, 53 insertions(+), 22 deletions(-) delete mode 100644 apps/client/src/widgets/floating_buttons/refresh_button.ts diff --git a/apps/client/src/widgets/FloatingButtons.tsx b/apps/client/src/widgets/FloatingButtons.tsx index d19ccfa49..c0677ab9c 100644 --- a/apps/client/src/widgets/FloatingButtons.tsx +++ b/apps/client/src/widgets/FloatingButtons.tsx @@ -1,6 +1,35 @@ import { t } from "i18next"; import "./FloatingButtons.css"; import Button from "./react/Button"; +import ActionButton from "./react/ActionButton"; +import FNote from "../entities/fnote"; +import NoteContext from "../components/note_context"; +import { useNoteContext } from "./react/hooks"; +import { useContext, useEffect, useMemo } from "preact/hooks"; +import { ParentComponent } from "./react/react_utils"; +import Component from "../components/component"; + +interface FloatingButtonContext { + parentComponent: Component; + note: FNote; + noteContext: NoteContext; +} + +interface FloatingButtonDefinition { + title: string; + icon: string; + isEnabled: (context: FloatingButtonContext) => boolean; + onClick: (context: FloatingButtonContext) => void; +} + +const FLOATING_BUTTON_DEFINITIONS: FloatingButtonDefinition[] = [ + { + title: t("backend_log.refresh"), + icon: "bx bx-refresh", + isEnabled: ({ note, noteContext }) => note.noteId === "_backendLog" && noteContext.viewScope?.viewMode === "default", + onClick: ({ parentComponent, noteContext }) => parentComponent.triggerEvent("refreshData", { ntxId: noteContext.ntxId }) + } +]; /* * Note: @@ -10,10 +39,33 @@ import Button from "./react/Button"; * properly handle rounded corners, as defined by the --border-radius CSS variable. */ export default function FloatingButtons() { + const { note, noteContext } = useNoteContext(); + const parentComponent = useContext(ParentComponent); + const context = useMemo(() => { + if (!note || !noteContext || !parentComponent) return null; + + return { + note, + noteContext, + parentComponent + }; + }, [ note, noteContext, parentComponent ]); + + const definitions = useMemo(() => { + if (!context) return []; + return FLOATING_BUTTON_DEFINITIONS.filter(def => def.isEnabled(context)); + }, [ context ]); + return (
- + {context && definitions.map(({ title, icon, onClick }) => ( + onClick(context)} + /> + ))}
diff --git a/apps/client/src/widgets/floating_buttons/refresh_button.ts b/apps/client/src/widgets/floating_buttons/refresh_button.ts deleted file mode 100644 index 0f834434e..000000000 --- a/apps/client/src/widgets/floating_buttons/refresh_button.ts +++ /dev/null @@ -1,21 +0,0 @@ -import appContext from "../../components/app_context.js"; -import { t } from "../../services/i18n.js"; -import OnClickButtonWidget from "../buttons/onclick_button.js"; - -export default class RefreshButton extends OnClickButtonWidget { - constructor() { - super(); - - this - .title(t("backend_log.refresh")) - .icon("bx-refresh") - .onClick(() => this.triggerEvent("refreshData", { ntxId: this.noteContext?.ntxId })) - } - - isEnabled(): boolean | null | undefined { - return super.isEnabled() - && this.note?.noteId === "_backendLog" - && this.noteContext?.viewScope?.viewMode === "default"; - } - -}