@kisstar/rc-ui
Version:
UI component library built with React Hooks.
91 lines (90 loc) • 4.42 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);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React, { useContext, useState, useCallback } from 'react';
import classNames from 'classnames';
import { ConfigContext } from '../config-provider';
import { noop } from '../../lib/utils';
import MenuContext from './MenuContext';
import { SubMenu } from './SubMenu';
import { MenuItem as Item } from './MenuItem';
export { default as SubMenu } from './SubMenu';
export { default as Item } from './MenuItem';
/**
* 为页面和功能提供导航的菜单列表。
*
* 导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。
*
* 通常，导航分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。
*/
export var Menu = function (props) {
var _a;
var mode = props.mode, defaultSelectedKey = props.defaultSelectedKey, customizePrefixCls = props.prefixCls, _b = props.className, className = _b === void 0 ? '' : _b, style = props.style, children = props.children, onSelect = props.onSelect, restProps = __rest(props, ["mode", "defaultSelectedKey", "prefixCls", "className", "style", "children", "onSelect"]);
var _c = useState(defaultSelectedKey || ''), selectedKey = _c[0], setSelectedKey = _c[1];
var _d = useState(false), shouldShow = _d[0], setShouldShow = _d[1];
var getPrefixCls = useContext(ConfigContext).getPrefixCls;
var prefixCls = getPrefixCls('menu', customizePrefixCls);
var needResponsive = mode === 'responsive';
var navClasses = classNames(prefixCls + "-navbar", className);
var classes = classNames(prefixCls, prefixCls + "-" + mode, (_a = {},
_a[className] = !needResponsive,
_a[prefixCls + "-show"] = shouldShow,
_a));
var handleClick = useCallback(function (info) {
setSelectedKey(info.key);
if (onSelect) {
onSelect(info);
}
}, [onSelect]);
var renderChild = function () {
return React.Children.map(children, function (child) {
var childElement = child;
var type = childElement.type, key = childElement.key;
var displayName = type.displayName;
var strKey = key;
if (displayName === 'MenuItem') {
return React.cloneElement(childElement, {
eventKey: strKey,
rootPrefixCls: prefixCls,
});
}
if (displayName === 'SubMenu') {
var subChildElement = child;
return React.cloneElement(subChildElement, {
rootPrefixCls: prefixCls,
});
}
throw Error("Menu's child can only be SubMenu or MenuItem");
});
};
return (React.createElement(MenuContext.Provider, { value: { selectedKey: selectedKey, onSelect: handleClick, mode: mode } }, needResponsive ? (React.createElement("nav", __assign({ className: navClasses, style: style }, restProps),
React.createElement("button", { className: prefixCls + "-toggler", type: "button", onClick: function () { return setShouldShow(!shouldShow); } },
React.createElement("span", { className: prefixCls + "-icon" })),
React.createElement("ul", { role: "menu", className: classes }, renderChild()))) : (React.createElement("ul", __assign({ role: "menu", className: classes, style: style }, restProps), renderChild()))));
};
Menu.Item = Item;
Menu.SubMenu = SubMenu;
Menu.defaultProps = {
mode: 'horizontal',
onSelect: noop,
};
export default Menu;