ango-react-components
Version:
73 lines (72 loc) • 3.03 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import React, { useContext, useState } from "react";
import classNames from "classnames";
import Icon from '../Icon/icon';
import Transition from "../Transition/transition";
import { MenuContext } from './menu';
var SubMenu = function (_a) {
var index = _a.index, title = _a.title, children = _a.children, className = _a.className;
var context = useContext(MenuContext);
var openedSubMenus = context.defaultOpenSumMenus;
var isOpend = (index && context.mode === 'vertical') ? openedSubMenus.includes(index) : false;
var _b = useState(isOpend), menuOpen = _b[0], setOpen = _b[1];
var classes = classNames('menu-item submenu-item', className, {
'is-active': context.index.split('-')[0] === index,
'is-opened': menuOpen,
'is-vertical': context.mode === 'vertical'
});
var handleClick = function (e) {
e.preventDefault();
setOpen(!menuOpen);
};
var timer;
var handleMouse = function (e, toggle) {
clearTimeout(timer);
e.preventDefault();
timer = setTimeout(function () {
setOpen(toggle);
}, 300);
};
var clickEvents = context.mode === 'vertical' ? {
onClick: handleClick
} : {};
var hoverEvents = context.mode !== 'vertical' ? {
onMouseEnter: function (e) { handleMouse(e, true); },
onMouseLeave: function (e) { handleMouse(e, false); },
} : {};
var renderChildren = function () {
var subMenuClasses = classNames('ango-submenu', {
'menu-opened': menuOpen
});
var childrenComponent = React.Children.map(children, function (child, i) {
var childElement = child;
if (childElement.type.displayName === 'MenuItem') {
return React.cloneElement(childElement, {
index: index + "-" + i
});
}
else {
console.error('Warning: is not a MenuItem');
}
});
return (React.createElement(Transition, { in: menuOpen, timeout: 300, animation: "zoom-in-top" },
React.createElement("ul", { className: subMenuClasses }, childrenComponent)));
};
return (React.createElement("li", __assign({ key: index, className: classes }, hoverEvents),
React.createElement("div", __assign({ className: "submenu-title" }, clickEvents),
title,
React.createElement(Icon, { icon: "angle-down", className: "arrow-icon" })),
renderChildren()));
};
SubMenu.displayName = 'SubMenu';
export default SubMenu;