aurora-topu
Version:
React component library
90 lines (89 loc) • 4.09 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 { MenuContext } from './AuroraMenu';
import AuroraIcon from '../AuroraIcon/AuroraIcon';
import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';
import AuroraTransition from '../AuroraTransition/AuroraTransition';
library.add(fas);
var AuroraSubMenu = function (props) {
var context = useContext(MenuContext);
var index = props.index, title = props.title, children = props.children, className = props.className, _a = props.icon, icon = _a === void 0 ? 'angle-up' : _a, _b = props.size, size = _b === void 0 ? '1x' : _b, color = props.color;
var openSubMenuArray = context.defaultOpenSubMenus;
var isOpen = index && context.mode === 'vertical' ? openSubMenuArray.includes(index) : false;
var _c = useState(isOpen), menuOpen = _c[0], setOpen = _c[1];
var classes = classNames('menu-item submenu-item', className, {
'is-active': index === context.index,
'is-opened': menuOpen,
'is-vertical': context.mode === 'vertical',
});
var handleClick = function (e) {
setOpen(!menuOpen);
};
var timer;
// 防抖
var handleMouse = function (e, toggle) {
clearTimeout(timer);
timer = setTimeout(function () {
setOpen(toggle);
}, 300);
};
// vertical模式下绑定点击事件
var clickEvents = context.mode === 'vertical'
? {
onClick: handleClick,
}
: {};
// horizontal模式下绑定鼠标指向和离开的事件
var hoverEvent = context.mode !== 'vertical'
? {
onMouseEnter: function (e) {
handleMouse(e, true);
},
onMouseLeave: function (e) {
handleMouse(e, false);
},
}
: {};
var renderChildren = function () {
var subMenuClasses = classNames('viking-submenu', {
'menu-opened': menuOpen,
});
// 判断传入的是不是AuroraMenuItem组件,是就遍历每一个然后包装在ul标签里面，否则报错
// Children让您可以操纵和转换作为 prop 收到的 TSX,这里的children是tsx代码，用Children进行循环然后进行操作
var childrenComponent = React.Children.map(children, function (child, i) {
var childElement = child;
if (childElement.type.displayName === 'AuroraMenuItem') {
return React.cloneElement(childElement, {
// 将下拉框的子元素序号设置为1-1的形式
index: "".concat(index, "-").concat(i),
});
}
else {
console.error('Warning:Menu has a child which is not a menuItem component');
}
});
return (
// unMountOnExit 属性让li进行动态添加，最开始li不会被渲染，点击后才会被添加到DOM
React.createElement(AuroraTransition, { in: menuOpen, timeout: 300, animation: "zoom-in-top" },
React.createElement("ul", { className: subMenuClasses }, childrenComponent)));
};
return (React.createElement("li", __assign({ key: index, className: classes }, hoverEvent, clickEvents),
React.createElement("div", { className: "submenu-title" },
title,
React.createElement(AuroraIcon, { icon: icon, className: "arrow-icon", size: size, color: color })),
renderChildren()));
};
AuroraSubMenu.displayName = 'AuroraSubMenu';
export default AuroraSubMenu;