added id-s to breadcrumbs, for easier styling
Massimo Melina committed
Sep 26, 2024 at 13:22 UTC
dfc505311468a4ea0fb3cbdb57c14d1eec7ba9ac
1 file changed
+5
-5
frontend/src/Breadcrumbs.ts
+5
-5
@@ -1,6 +1,6 @@
1
// This file is part of HFS - Copyright 2021-2023, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
2
3
-import { Link } from 'react-router-dom'
3
+import { Link, LinkProps } from 'react-router-dom'
4
import { createElement as h, Fragment, ReactElement } from 'react'
5
import { getPrefixUrl, hIcon } from './misc'
6
import { DirEntry, state, useSnapState } from './state'
@@ -17,8 +17,8 @@ export function Breadcrumbs() {
17
const breadcrumbs = currentPath ? currentPath.split('/').map(x => [prev += x + '/', decodeURIComponent(x)]) : []
18
const {t} = useI18N()
19
return h(Fragment, {},
20
- h(Breadcrumb, { label: hIcon('parent', { alt: t`parent folder` }), path: parent }),
21
- h(Breadcrumb, { label: hIcon('home', { alt: t`home` }), path: base, current: !currentPath }),
20
+ h(Breadcrumb, { id: 'breadcrumb-parent', label: hIcon('parent', { alt: t`parent folder` }), path: parent }),
21
+ h(Breadcrumb, { id: 'breadcrumb-home', label: hIcon('home', { alt: t`home` }), path: base, current: !currentPath }),
22
breadcrumbs.map(([path,label], i) =>
23
h(Breadcrumb, {
24
key: path,
@@ -32,7 +32,7 @@ export function Breadcrumbs() {
32
)
33
}
34
35
-function Breadcrumb({ path, label, current, title }:{ current?: boolean, path: string, label?: string | ReactElement, title?: string }) {
35
+function Breadcrumb({ path, label, current, ...rest }: { current?: boolean, path: string, label?: string | ReactElement } & Omit<LinkProps,'to'>) {
36
const PAD = '\u00A0\u00A0' // make small elements easier to tap. Don't use min-width 'cause it requires display-inline that breaks word-wrapping
37
if (typeof label === 'string' && label.length < 3)
38
label = PAD + label + PAD
@@ -42,7 +42,7 @@ function Breadcrumb({ path, label, current, title }:{ current?: boolean, path: s
42
return h(Link, {
43
className: 'breadcrumb',
44
to: path || '/',
45
- title,
45
+ ...rest,
46
async onClick(ev) {
47
if (!current) return
48
ev.preventDefault()