@ducor/react
Version:
admin template ui interface
61 lines (60 loc) • 3.27 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { useRef, } from "react";
import { useTreeView } from "./hook";
import { twMerge } from "tailwind-merge";
const ItemGroup = ({ children, parentDept, parentPath, rect, }) => {
const ref = useRef(null);
const dept = parentDept + 1;
const { sidebar_type, sidebar_position, expandedPaths } = useTreeView();
const isExpanded = children ? expandedPaths.includes(parentPath) : false;
const isTop = rect.top < window.innerHeight / 2; // Near top?
const isLeft = rect.left < window.innerWidth / 2; // Near left?
let childPosition = "top_left"; // Default
if (isTop && !isLeft) {
childPosition = "top_right"; // Top-Right
}
else if (!isTop && isLeft) {
childPosition = "bottom_left"; // Bottom-Left
}
else if (!isTop && !isLeft) {
childPosition = "bottom_right"; // Bottom-Right
}
const submenuPositionClass = twMerge(sidebar_position === "static" &&
sidebar_type !== "full" &&
childPosition === "top_left" &&
"top-0",
// sidebar_position === "static" && sidebar_type !== "full" && childPosition === "top_right" && "top-0",
sidebar_position === "static" &&
sidebar_type !== "full" &&
childPosition === "bottom_left" &&
"bottom-0"
// sidebar_position === "static" && sidebar_type !== "full" && childPosition === "bottom_right" && "bottom-0 right-0",
// sidebar_position === "fixed" && sidebar_type !== "full" && childPosition === "top_left" && "",
// sidebar_position === "fixed" && sidebar_type !== "full" && childPosition === "top_right" && "fixed top-0 right-0",
// sidebar_position === "fixed" && sidebar_type !== "full" && childPosition === "bottom_left" && "bottom-0 -translate-y-full",
// sidebar_position === "fixed" && sidebar_type !== "full" && childPosition === "bottom_right" && "fixed bottom-0 right-0"
);
// const [isTop, setIsTop] = useState(true);
return (_jsx("ul", { ref: ref, "data-expanded": isExpanded, "data-dept": dept, className: twMerge("z-50 bg-white h-fit ",
// sidebar_type === "mini" && "left-[var(--du-sidebar-vertical-mini)]",
// !isExpanded && "hidden",
sidebar_type === "full" ? (isExpanded ? "" : "hidden") : "", sidebar_type !== "full" &&
"absolute border min-w-40 max-h-32 overflow-y-auto hidden group-hover:block group-focus-within:block",
// sidebar_position !== "fixed" && isTop && "top-0",
// sidebar_position !== "fixed" && !isTop && "bottom-0",
// sidebar_position === "fixed" ? "" : "inset-0"
// sidebar_position === 'static' && sidebar_type !== "full" ? isTop ? "top-0" : "-translate-y-full" : "",
sidebar_position === "fixed" && sidebar_type !== "full"
? isTop
? ""
: "absolute bottom-0 -translate-y-1/2"
: "", submenuPositionClass), style: sidebar_type !== "full"
? Object.assign({
// left: "calc(var(--du-sidebar-vertical-mini) - 8px)",
left: "95%" }, (sidebar_position === "fixed"
? {
top: "",
}
: {})) : {}, children: children }));
};
export default ItemGroup;