import React, { useRef, useState, useEffect } from "react"; import PropTypes from "prop-types"; import DomHelpers from "../../utils/domHelpers"; import ObjectUtils from "../../utils/objectUtils"; import { classNames } from "../../utils/classNames"; import { CSSTransition } from "react-transition-group"; import { ReactSVG } from "react-svg"; import ArrowIcon from "../svg/arrow.right.react.svg"; const SubMenu = (props) => { const { onLeafClick, root, resetMenu, model } = props; const [activeItem, setActiveItem] = useState(null); const subMenuRef = useRef(); const onItemMouseEnter = (e, item) => { if (item.disabled) { e.preventDefault(); return; } setActiveItem(item); }; const onItemClick = (e, item) => { const { disabled, url, onClick, items, action } = item; if (disabled) { e.preventDefault(); return; } if (!url) { e.preventDefault(); } if (onClick) { onClick({ originalEvent: e, action: action, }); } if (!items) { onLeafClick(e); } }; const position = () => { const parentItem = subMenuRef.current.parentElement; const containerOffset = DomHelpers.getOffset( subMenuRef.current.parentElement ); const viewport = DomHelpers.getViewport(); const subListWidth = subMenuRef.current.offsetParent ? subMenuRef.current.offsetWidth : DomHelpers.getHiddenElementOuterWidth(subMenuRef.current); const itemOuterWidth = DomHelpers.getOuterWidth(parentItem.children[0]); subMenuRef.current.style.top = "0px"; if ( parseInt(containerOffset.left, 10) + itemOuterWidth + subListWidth > viewport.width - DomHelpers.calculateScrollbarWidth() ) { subMenuRef.current.style.left = -1 * subListWidth + "px"; } else { subMenuRef.current.style.left = itemOuterWidth + "px"; } }; const onEnter = () => { position(); }; const isActive = () => { return root || !resetMenu; }; useEffect(() => { if (isActive()) { position(); } }); const renderSeparator = (index) => (
); const renderSubMenu = (item) => { if (item.items) { return (