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

chore(client): fix type error due to React integration

Browse Source
This commit is contained in:
Elian Doran 2025-08-27 11:59:07 +03:00
parent 3e213699e0
commit ed320e4e24
No known key found for this signature in database
2 changed files with 24 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
apps/client/src/widgets/react/hooks.tsx
View File

@ -504,6 +504,24 @@ export function useTooltip(elRef: RefObject<HTMLElement>, config: Partial<Toolti
return { showTooltip, hideTooltip };
}
/**
* Similar to {@link useTooltip}, but doesn't expose methods to imperatively hide or show the tooltip.
*
* @param elRef the element to bind the tooltip to.
* @param config optionally, the tooltip configuration.
*/
export function useStaticTooltip(elRef: RefObject<HTMLElement>, config?: Partial<Tooltip.Options>) {
useEffect(() => {
if (!elRef?.current) return;
const $el = $(elRef.current);
$el.tooltip(config);
return () => {
$el.tooltip("dispose");
}
}, [ elRef, config ]);
}
// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
export function useLegacyImperativeHandlers(handlers: Record<string, Function>) {
const parentComponent = useContext(ParentComponent);

8
apps/client/src/widgets/ribbon/Ribbon.tsx
View File

@ -1,6 +1,6 @@
import { useCallback, useEffect, useMemo, useState } from "preact/hooks";
import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks";
import { t } from "../../services/i18n";
import { useNoteContext, useTriliumEvents } from "../react/hooks";
import { useNoteContext, useStaticTooltip, useTooltip, useTriliumEvents } from "../react/hooks";
import "./style.css";
import { VNode } from "preact";
import BasicPropertiesTab from "./BasicPropertiesTab";
@ -233,6 +233,9 @@ export default function Ribbon() {
}
function RibbonTab({ icon, title, active, onClick }: { icon: string; title: string; active: boolean, onClick: () => void }) {
const iconRef = useRef<HTMLDivElement>(null);
useStaticTooltip(iconRef, { });
return (
<>
<div
@ -240,6 +243,7 @@ function RibbonTab({ icon, title, active, onClick }: { icon: string; title: stri
onClick={onClick}
>
<span
ref={iconRef}
className={`ribbon-tab-title-icon ${icon}`}
title={title}
/>