TriliumNext/Trilium
1
0
Fork 0
mirror of https://github.com/TriliumNext/Trilium.git synced 2025-12-10 03:53:37 -06:00
Code Issues 1.1k Packages Projects Releases 10 Wiki Activity

refactor(breadcrumb): fix eslint issues

Browse Source
This commit is contained in:
Elian Doran 2025-12-08 23:09:00 +02:00
parent b16893c4d2
commit ef3cbcac6d
No known key found for this signature in database
1 changed files with 50 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
apps/client/src/widgets/Breadcrumb.tsx
View File

@ -1,14 +1,16 @@
import { Fragment } from "preact/jsx-runtime";
import "./Breadcrumb.css"; import "./Breadcrumb.css";
import { useChildNotes, useNoteContext, useNoteLabel, useNoteProperty, useStaticTooltip } from "./react/hooks";
import NoteLink from "./react/NoteLink";
import Dropdown from "./react/Dropdown";
import Icon from "./react/Icon";
import { FormListItem } from "./react/FormList";
import NoteContext from "../components/note_context";
import ActionButton from "./react/ActionButton";
import { useMemo } from "preact/hooks"; import { useMemo } from "preact/hooks";
import { Fragment } from "preact/jsx-runtime";
import NoteContext from "../components/note_context";
import froca from "../services/froca"; import froca from "../services/froca";
import ActionButton from "./react/ActionButton";
import Dropdown from "./react/Dropdown";
import { FormListItem } from "./react/FormList";
import { useChildNotes, useNoteContext, useNoteLabel, useNoteProperty } from "./react/hooks";
import Icon from "./react/Icon";
import NoteLink from "./react/NoteLink";
const COLLAPSE_THRESHOLD = 5; const COLLAPSE_THRESHOLD = 5;
const INITIAL_ITEMS = 2; const INITIAL_ITEMS = 2;
@ -21,38 +23,38 @@ export default function Breadcrumb() {
return ( return (
<div className="breadcrumb"> <div className="breadcrumb">
{notePath.length > COLLAPSE_THRESHOLD ? ( {notePath.length > COLLAPSE_THRESHOLD ? (
<> <>
{notePath.slice(0, INITIAL_ITEMS).map((item, index) => ( {notePath.slice(0, INITIAL_ITEMS).map((item, index) => (
<Fragment key={item}> <Fragment key={item}>
{index === 0 && notePath.length > 1 {index === 0 && notePath.length > 1
? <BreadcrumbRoot noteContext={noteContext} /> ? <BreadcrumbRoot noteContext={noteContext} />
: <BreadcrumbItem notePath={item} activeNotePath={noteContext?.notePath ?? ""} /> : <BreadcrumbItem notePath={item} activeNotePath={noteContext?.notePath ?? ""} />
} }
<BreadcrumbSeparator notePath={item} activeNotePath={notePath[index+1]} noteContext={noteContext} /> <BreadcrumbSeparator notePath={item} activeNotePath={notePath[index + 1]} noteContext={noteContext} />
</Fragment> </Fragment>
))} ))}
<BreadcrumbCollapsed items={notePath.slice(INITIAL_ITEMS, -FINAL_ITEMS)} noteContext={noteContext} /> <BreadcrumbCollapsed items={notePath.slice(INITIAL_ITEMS, -FINAL_ITEMS)} noteContext={noteContext} />
{notePath.slice(-FINAL_ITEMS).map((item, index) => ( {notePath.slice(-FINAL_ITEMS).map((item, index) => (
<Fragment key={item}> <Fragment key={item}>
<BreadcrumbSeparator notePath={notePath[notePath.length - FINAL_ITEMS - (1 - index)]} activeNotePath={item} noteContext={noteContext} /> <BreadcrumbSeparator notePath={notePath[notePath.length - FINAL_ITEMS - (1 - index)]} activeNotePath={item} noteContext={noteContext} />
<BreadcrumbItem notePath={item} activeNotePath={noteContext?.notePath ?? ""} /> <BreadcrumbItem notePath={item} activeNotePath={noteContext?.notePath ?? ""} />
</Fragment> </Fragment>
))} ))}
</> </>
) : ( ) : (
notePath.map((item, index) => ( notePath.map((item, index) => (
<Fragment key={item}> <Fragment key={item}>
{index === 0 && notePath.length > 1 {index === 0 && notePath.length > 1
? <BreadcrumbRoot noteContext={noteContext} /> ? <BreadcrumbRoot noteContext={noteContext} />
: <BreadcrumbItem notePath={item} activeNotePath={noteContext?.notePath ?? ""} /> : <BreadcrumbItem notePath={item} activeNotePath={noteContext?.notePath ?? ""} />
} }
{(index < notePath.length - 1 || note?.hasChildren()) && {(index < notePath.length - 1 || note?.hasChildren()) &&
<BreadcrumbSeparator notePath={item} activeNotePath={notePath[index+1]} noteContext={noteContext} />} <BreadcrumbSeparator notePath={item} activeNotePath={notePath[index + 1]} noteContext={noteContext} />}
</Fragment> </Fragment>
)) ))
)} )}
</div> </div>
) );
} }
function BreadcrumbRoot({ noteContext }: { noteContext: NoteContext | undefined }) { function BreadcrumbRoot({ noteContext }: { noteContext: NoteContext | undefined }) {
@ -66,7 +68,7 @@ function BreadcrumbRoot({ noteContext }: { noteContext: NoteContext | undefined
text={title ?? ""} text={title ?? ""}
onClick={() => noteContext?.setNote("root")} onClick={() => noteContext?.setNote("root")}
/> />
) );
} }
function BreadcrumbItem({ notePath, activeNotePath }: { notePath: string, activeNotePath: string }) { function BreadcrumbItem({ notePath, activeNotePath }: { notePath: string, activeNotePath: string }) {
@ -78,7 +80,7 @@ function BreadcrumbItem({ notePath, activeNotePath }: { notePath: string, active
title={isRootNote && activeNotePath !== "root" ? "" : undefined} title={isRootNote && activeNotePath !== "root" ? "" : undefined}
showNoteIcon={isRootNote} showNoteIcon={isRootNote}
/> />
) );
} }
function BreadcrumbSeparator({ notePath, noteContext, activeNotePath }: { notePath: string, activeNotePath: string, noteContext: NoteContext | undefined }) { function BreadcrumbSeparator({ notePath, noteContext, activeNotePath }: { notePath: string, activeNotePath: string, noteContext: NoteContext | undefined }) {
@ -92,7 +94,7 @@ function BreadcrumbSeparator({ notePath, noteContext, activeNotePath }: { notePa
> >
<BreadcrumbSeparatorDropdownContent notePath={notePath} noteContext={noteContext} activeNotePath={activeNotePath} /> <BreadcrumbSeparatorDropdownContent notePath={notePath} noteContext={noteContext} activeNotePath={activeNotePath} />
</Dropdown> </Dropdown>
) );
} }
function BreadcrumbSeparatorDropdownContent({ notePath, noteContext, activeNotePath }: { notePath: string, activeNotePath: string, noteContext: NoteContext | undefined }) { function BreadcrumbSeparatorDropdownContent({ notePath, noteContext, activeNotePath }: { notePath: string, activeNotePath: string, noteContext: NoteContext | undefined }) {
@ -104,20 +106,20 @@ function BreadcrumbSeparatorDropdownContent({ notePath, noteContext, activeNoteP
return ( return (
<ul class="breadcrumb-child-list"> <ul class="breadcrumb-child-list">
{childNotes.map((note) => { {childNotes.map((note) => {
const childNotePath = `${notePathPrefix}/${note.noteId}` const childNotePath = `${notePathPrefix}/${note.noteId}`;
return <li key={note.noteId}> return <li key={note.noteId}>
<FormListItem <FormListItem
icon={note.getIcon()} icon={note.getIcon()}
onClick={() => noteContext?.setNote(childNotePath)} onClick={() => noteContext?.setNote(childNotePath)}
> >
{childNotePath !== activeNotePath {childNotePath !== activeNotePath
? <span>{note.title}</span> ? <span>{note.title}</span>
: <strong>{note.title}</strong>} : <strong>{note.title}</strong>}
</FormListItem> </FormListItem>
</li> </li>;
})} })}
</ul> </ul>
) );
} }
function BreadcrumbCollapsed({ items, noteContext }: { items: string[], noteContext: NoteContext | undefined }) { function BreadcrumbCollapsed({ items, noteContext }: { items: string[], noteContext: NoteContext | undefined }) {
@ -143,11 +145,11 @@ function BreadcrumbCollapsed({ items, noteContext }: { items: string[], noteCont
> >
<span>{note.title}</span> <span>{note.title}</span>
</FormListItem> </FormListItem>
</li> </li>;
})} })}
</ul> </ul>
</Dropdown> </Dropdown>
) );
} }
function buildNotePaths(notePathArray: string[] | undefined) { function buildNotePaths(notePathArray: string[] | undefined) {