@activecollab/components
Version:
ActiveCollab Components
111 lines • 5.76 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import React, { useRef, useMemo, useEffect, useState } from "react";
import { StyledNavElement, StyledOList, StyledMenuList, StyledListWrapper, StyledBreadcrumbListItem } from "./Styles";
import { useForkRef, useResizeObserver } from "../../utils";
import { IconButton } from "../IconButton";
import { TreeDotsIcon } from "../Icons";
import { ListItem } from "../List";
import { Menu } from "../Menu";
export const Breadcrumbs = /*#__PURE__*/React.forwardRef((_ref, ref) => {
var _dimensions$width, _childDimensions$widt;
let {
children,
className,
separator = "/",
...rest
} = _ref;
const internalRef = useRef(null);
const listWrapperRef = useRef(null);
const olRef = useRef(null);
const widthCollectionRef = useRef([]);
const handleRef = useForkRef(ref, internalRef);
const [menuBreadcrumbs, setMenuBreadcrumbs] = useState(0);
const dimensions = useResizeObserver(internalRef);
const childDimensions = useResizeObserver(listWrapperRef);
const parentWidth = (_dimensions$width = dimensions == null ? void 0 : dimensions.width) != null ? _dimensions$width : 0;
const childWidth = (_childDimensions$widt = childDimensions == null ? void 0 : childDimensions.width) != null ? _childDimensions$widt : 0;
const childrenCollection = useMemo(() => React.Children.toArray(children), [children]);
const [menuCollection, listCollection] = useMemo(() => {
return [childrenCollection.slice(0, menuBreadcrumbs), childrenCollection.slice(menuBreadcrumbs, childrenCollection.length)];
}, [childrenCollection, menuBreadcrumbs]);
useEffect(() => {
widthCollectionRef.current = [];
setMenuBreadcrumbs(0);
}, [childrenCollection.length]);
useEffect(() => {
const diffWidth = childWidth - parentWidth;
if (diffWidth > 0) {
var _offsetWidth, _olRef$current, _olRef$current$queryS, _olRef$current2, _breadcrumbItems$leng;
const separatorWidth = (_offsetWidth = (_olRef$current = olRef.current) == null || (_olRef$current = _olRef$current.querySelectorAll("[data-role=\"separator\"]")[0]) == null ? void 0 : _olRef$current.offsetWidth) != null ? _offsetWidth : 0;
const breadcrumbItems = (_olRef$current$queryS = (_olRef$current2 = olRef.current) == null ? void 0 : _olRef$current2.querySelectorAll("[data-role=\"item\"]")) != null ? _olRef$current$queryS : [];
const childWidthCollection = [];
const maxIndex = ((_breadcrumbItems$leng = breadcrumbItems == null ? void 0 : breadcrumbItems.length) != null ? _breadcrumbItems$leng : 1) - 1;
let currentIndex = 0;
let childSumWidth = 0;
while (diffWidth > childSumWidth && maxIndex >= currentIndex) {
var _offsetWidth2, _breadcrumbItems$curr;
const childWidth = (_offsetWidth2 = (_breadcrumbItems$curr = breadcrumbItems[currentIndex]) == null ? void 0 : _breadcrumbItems$curr.offsetWidth) != null ? _offsetWidth2 : 0;
const result = separatorWidth + childWidth;
childWidthCollection.push(result);
childSumWidth += result;
currentIndex += 1;
}
if (childWidthCollection.length === listCollection.length) {
childWidthCollection.pop();
}
widthCollectionRef.current = [...widthCollectionRef.current, ...childWidthCollection];
setMenuBreadcrumbs(oldVal => oldVal + childWidthCollection.length);
}
}, [listCollection.length, parentWidth, childWidth]);
useEffect(() => {
const diffWidth = parentWidth - childWidth;
if (diffWidth > 0 && widthCollectionRef.current.length > 0) {
const total = widthCollectionRef.current.length;
const collection = [...widthCollectionRef.current];
let sumWidth = 0;
while (diffWidth > sumWidth && collection.length > 0) {
var _collection;
const lastWidth = (_collection = collection[collection.length - 1]) != null ? _collection : 0;
if (diffWidth < lastWidth + sumWidth) {
sumWidth = diffWidth;
} else {
var _collection$pop;
sumWidth += (_collection$pop = collection.pop()) != null ? _collection$pop : 0;
}
}
const totalToDecrease = total - collection.length;
setMenuBreadcrumbs(oldVal => {
const newValue = oldVal - totalToDecrease;
return newValue > 0 ? newValue : 0;
});
const end = total - totalToDecrease;
widthCollectionRef.current = end > 0 ? widthCollectionRef.current.slice(0, end) : [];
}
}, [parentWidth, childWidth]);
return /*#__PURE__*/React.createElement(StyledNavElement, _extends({
className: className,
ref: handleRef
}, rest), /*#__PURE__*/React.createElement(StyledListWrapper, {
ref: listWrapperRef
}, /*#__PURE__*/React.createElement(StyledOList, {
ref: olRef
}, menuCollection.length > 0 ? /*#__PURE__*/React.createElement(StyledBreadcrumbListItem, {
"data-role": "menu"
}, /*#__PURE__*/React.createElement(Menu, {
target: /*#__PURE__*/React.createElement(IconButton, {
variant: "text gray"
}, /*#__PURE__*/React.createElement(TreeDotsIcon, null))
}, /*#__PURE__*/React.createElement(StyledMenuList, null, menuCollection.map((child, index) => /*#__PURE__*/React.createElement(ListItem, {
key: index
}, child))))) : null, listCollection.map((child, index) => {
return /*#__PURE__*/React.createElement(React.Fragment, {
key: index
}, index > 0 || menuCollection.length > 0 ? /*#__PURE__*/React.createElement(StyledBreadcrumbListItem, {
"data-role": "separator"
}, separator) : null, /*#__PURE__*/React.createElement(StyledBreadcrumbListItem, {
"data-role": "item"
}, child));
}))));
});
Breadcrumbs.displayName = "Breadcrumbs";
//# sourceMappingURL=Breadcrumbs.js.map