@festo-ui/react 9.0.1-dev.767 → 9.0.1-dev.769
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { ClassNamePropsWithChildren } from '../../utils/types';
|
|
3
|
+
export interface BreadcrumbLocation {
|
|
4
|
+
label: string;
|
|
5
|
+
url: string;
|
|
6
|
+
}
|
|
3
7
|
export interface BreadcrumbProps extends ClassNamePropsWithChildren {
|
|
4
|
-
readonly locations?:
|
|
5
|
-
label: string;
|
|
6
|
-
url: string;
|
|
7
|
-
}[];
|
|
8
|
+
readonly locations?: BreadcrumbLocation[];
|
|
8
9
|
readonly onClick?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
|
|
9
10
|
}
|
|
10
11
|
/**
|
|
@@ -2,31 +2,83 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import classnames from "classnames";
|
|
3
3
|
import react from "react";
|
|
4
4
|
function Breadcrumb({ locations, onClick, children, className }) {
|
|
5
|
-
const
|
|
6
|
-
react.
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
5
|
+
const containerRef = react.useRef(null);
|
|
6
|
+
const measureRef = react.useRef(null);
|
|
7
|
+
const [isMobile, setIsMobile] = react.useState(false);
|
|
8
|
+
const childrenList = react.Children.toArray(children).filter((child)=>/*#__PURE__*/ react.isValidElement(child));
|
|
9
|
+
const listItems = locations ? locations.map((location, index)=>{
|
|
10
|
+
const isCurrent = index === locations.length - 1;
|
|
11
|
+
return /*#__PURE__*/ jsx("li", {
|
|
12
|
+
children: /*#__PURE__*/ jsx("a", {
|
|
13
|
+
href: location.url,
|
|
14
|
+
onClick: (e)=>onClick ? onClick(e) : void 0,
|
|
15
|
+
"aria-current": isCurrent ? 'page' : void 0,
|
|
16
|
+
children: location.label
|
|
17
|
+
})
|
|
18
|
+
}, location.url);
|
|
19
|
+
}) : childrenList.map((child, index)=>{
|
|
20
|
+
const isCurrent = index === childrenList.length - 1;
|
|
21
|
+
const content = isCurrent ? /*#__PURE__*/ react.cloneElement(child, {
|
|
22
|
+
'aria-current': child.props['aria-current'] ?? 'page'
|
|
23
|
+
}) : child;
|
|
24
|
+
return /*#__PURE__*/ jsx("li", {
|
|
25
|
+
children: content
|
|
26
|
+
}, child.key ?? index);
|
|
14
27
|
});
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
28
|
+
const measure = react.useCallback(()=>{
|
|
29
|
+
const container = containerRef.current;
|
|
30
|
+
const measureElement = measureRef.current;
|
|
31
|
+
if (!container || !measureElement) return;
|
|
32
|
+
const availableWidth = container.clientWidth;
|
|
33
|
+
const contentWidth = measureElement.scrollWidth;
|
|
34
|
+
const nextIsMobile = contentWidth > availableWidth;
|
|
35
|
+
setIsMobile((previous)=>previous === nextIsMobile ? previous : nextIsMobile);
|
|
36
|
+
}, []);
|
|
37
|
+
react.useEffect(()=>{
|
|
38
|
+
measure();
|
|
39
|
+
});
|
|
40
|
+
react.useEffect(()=>{
|
|
41
|
+
const container = containerRef.current;
|
|
42
|
+
const measureElement = measureRef.current;
|
|
43
|
+
if (!container || !measureElement) return;
|
|
44
|
+
if ('undefined' == typeof ResizeObserver) {
|
|
45
|
+
window.addEventListener('resize', measure);
|
|
46
|
+
return ()=>window.removeEventListener('resize', measure);
|
|
47
|
+
}
|
|
48
|
+
const observer = new ResizeObserver(()=>measure());
|
|
49
|
+
observer.observe(container);
|
|
50
|
+
observer.observe(measureElement);
|
|
51
|
+
return ()=>observer.disconnect();
|
|
52
|
+
}, [
|
|
53
|
+
measure
|
|
54
|
+
]);
|
|
55
|
+
return /*#__PURE__*/ jsxs("div", {
|
|
56
|
+
children: [
|
|
57
|
+
/*#__PURE__*/ jsx("nav", {
|
|
58
|
+
className: classnames('fwe-breadcrumb'),
|
|
59
|
+
ref: measureRef,
|
|
60
|
+
style: {
|
|
61
|
+
position: 'absolute',
|
|
62
|
+
visibility: 'hidden',
|
|
63
|
+
pointerEvents: 'none',
|
|
64
|
+
whiteSpace: 'nowrap',
|
|
65
|
+
height: 0,
|
|
66
|
+
overflow: 'hidden'
|
|
67
|
+
},
|
|
68
|
+
"aria-hidden": "true",
|
|
69
|
+
children: /*#__PURE__*/ jsx("ol", {
|
|
70
|
+
children: listItems
|
|
71
|
+
})
|
|
72
|
+
}),
|
|
73
|
+
/*#__PURE__*/ jsx("nav", {
|
|
74
|
+
className: classnames('fwe-breadcrumb', isMobile && 'fwe-breadcrumb--mobile', className),
|
|
75
|
+
ref: containerRef,
|
|
76
|
+
"aria-label": "Breadcrumb",
|
|
77
|
+
children: /*#__PURE__*/ jsx("ol", {
|
|
78
|
+
children: listItems
|
|
23
79
|
})
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
child,
|
|
27
|
-
" "
|
|
28
|
-
]
|
|
29
|
-
}, child.props.children))
|
|
80
|
+
})
|
|
81
|
+
]
|
|
30
82
|
});
|
|
31
83
|
}
|
|
32
84
|
export { Breadcrumb };
|
package/package.json
CHANGED