Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-09 23:05:51 +01:00
Code Issues Packages Projects Releases Activity

refactor(react/floating_buttons): use enabled at component level

Browse Source
This commit is contained in:
Elian Doran
2025-08-28 19:56:53 +03:00
parent e4900ce87b
commit 0c0504ffd1
2 changed files with 112 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,22 +1,12 @@
import { t } from "i18next";
import "./FloatingButtons.css";
import { useNoteContext, useNoteProperty, useTriliumEvent, useTriliumEvents } from "./react/hooks";
import { useNoteContext, useNoteLabel, useNoteLabelBoolean } from "./react/hooks";
import { useContext, useEffect, useMemo, useState } from "preact/hooks";
import { ParentComponent } from "./react/react_utils";
import attributes from "../services/attributes";
import { EventData, EventNames } from "../components/app_context";
import { FLOATING_BUTTON_DEFINITIONS, FloatingButtonContext, FloatingButtonDefinition } from "./FloatingButtonsDefinitions";
import { FLOATING_BUTTONS, type FloatingButtonContext } from "./FloatingButtonsDefinitions";
import ActionButton from "./react/ActionButton";
async function getFloatingButtonDefinitions(context: FloatingButtonContext) {
const defs: FloatingButtonDefinition[] = [];
for (const def of FLOATING_BUTTON_DEFINITIONS) {
if (await def.isEnabled(context)) {
defs.push(def);
}
}
return defs;
}
import { ViewTypeOptions } from "../services/note_list_renderer";
/*
* Note:
@@ -28,6 +18,8 @@ async function getFloatingButtonDefinitions(context: FloatingButtonContext) {
export default function FloatingButtons() {
const { note, noteContext } = useNoteContext();
const parentComponent = useContext(ParentComponent);
const [ viewType ] = useNoteLabel(note, "viewType");
const [ isReadOnly ] = useNoteLabelBoolean(note, "readOnly");
const context = useMemo<FloatingButtonContext | null>(() => {
if (!note || !noteContext || !parentComponent) return null;
@@ -35,6 +27,9 @@ export default function FloatingButtons() {
note,
noteContext,
parentComponent,
isDefaultViewMode: noteContext.viewScope?.viewMode === "default",
viewType: viewType as ViewTypeOptions,
isReadOnly,
triggerEvent<T extends EventNames>(name: T, data?: Omit<EventData<T>, "ntxId">) {
parentComponent.triggerEvent(name, {
ntxId: noteContext.ntxId,
@@ -42,33 +37,7 @@ export default function FloatingButtons() {
} as EventData<T>);
}
};
}, [ note, noteContext, parentComponent ]);
// Refresh on any note attribute change.
const [ refreshCounter, setRefreshCounter ] = useState(0);
useTriliumEvent("entitiesReloaded", ({ loadResults }) => {
if (loadResults.getAttributeRows().find(attrRow => attributes.isAffecting(attrRow, note))) {
setRefreshCounter(refreshCounter + 1);
}
});
useTriliumEvent("readOnlyTemporarilyDisabled", ({ noteContext: eventNoteContext }) => {
if (noteContext?.ntxId === eventNoteContext.ntxId) {
setRefreshCounter(refreshCounter + 1);
}
});
useTriliumEvents(["reEvaluateTocWidgetVisibility", "reEvaluateHighlightsListWidgetVisibility"], ({ noteId }) => {
if (noteId === note?.noteId) {
setRefreshCounter(refreshCounter + 1);
}
});
// Manage the list of items
const noteMime = useNoteProperty(note, "mime");
const [ definitions, setDefinitions ] = useState<FloatingButtonDefinition[]>([]);
useEffect(() => {
if (!context) return;
getFloatingButtonDefinitions(context).then(setDefinitions);
}, [ context, refreshCounter, noteMime ]);
}, [ note, noteContext, parentComponent, viewType, isReadOnly ]);
// Manage the user-adjustable visibility of the floating buttons.
const [ visible, setVisible ] = useState(true);
@@ -77,14 +46,14 @@ export default function FloatingButtons() {
return (
<div className="floating-buttons no-print">
<div className={`floating-buttons-children ${!visible ? "temporarily-hidden" : ""}`}>
{context && definitions.map(({ component: Component }) => (
{context && FLOATING_BUTTONS.map((Component) => (
<Component {...context} />
))}
{definitions.length && <CloseFloatingButton setVisible={setVisible} />}
{visible && <CloseFloatingButton setVisible={setVisible} />}
</div>
{!visible && definitions.length && <ShowFloatingButton setVisible={setVisible} /> }
{!visible && <ShowFloatingButton setVisible={setVisible} /> }
</div>
)
}