aurora-topu
Version:
React component library
51 lines (50 loc) • 2.16 kB
JavaScript
import React, { createContext, useState } from 'react';
import { memo } from 'react';
import classNames from 'classnames';
export var MenuContext = createContext({ index: '0' });
var AuroraMenu = function (props) {
var className = props.className, style = props.style, onSelect = props.onSelect, mode = props.mode, defaultIndex = props.defaultIndex, defaultOpenSubMenus = props.defaultOpenSubMenus, children = props.children;
var _a = useState(defaultIndex), currentActive = _a[0], setActive = _a[1];
var classes = classNames('viking-menu', className, {
'menu-vertical': mode === 'vertical',
'menu-horizontal': mode !== 'vertical',
});
// 设置点击事件
var handleClick = function (index) {
setActive(index);
if (onSelect) {
onSelect(index);
}
};
// 传递给menuItem的数据
var passedContext = {
index: currentActive ? currentActive : '0',
onSelect: handleClick,
mode: mode,
defaultOpenSubMenus: defaultOpenSubMenus,
};
// 多个MenuItem构成一个数组，然后使用map进行遍历
var renderChildren = function () {
return React.Children.map(children, function (child, index) {
var childElement = child;
var displayName = childElement.type.displayName;
if (displayName === 'AuroraMenuItem' || displayName === 'AuroraSubMenu') {
// 克隆组件，然后传递index参数到组件
return React.cloneElement(childElement, {
index: index.toString(),
});
}
else {
console.error('Warning:Menu has a child which is not a menuItem component');
}
});
};
return (React.createElement("ul", { className: classes, style: style, "data-testid": "test-menu" },
React.createElement(MenuContext.Provider, { value: passedContext }, renderChildren())));
};
AuroraMenu.defaultProps = {
defaultIndex: '0',
mode: 'vertical',
defaultOpenSubMenus: [],
};
export default memo(AuroraMenu);