menu.js 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. "use client";
  2. var __rest = this && this.__rest || function (s, e) {
  3. var t = {};
  4. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  5. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  6. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  7. }
  8. return t;
  9. };
  10. import * as React from 'react';
  11. import { forwardRef } from 'react';
  12. import EllipsisOutlined from "@ant-design/icons/es/icons/EllipsisOutlined";
  13. import classNames from 'classnames';
  14. import RcMenu from 'rc-menu';
  15. import useEvent from "rc-util/es/hooks/useEvent";
  16. import omit from "rc-util/es/omit";
  17. import initCollapseMotion from '../_util/motion';
  18. import { cloneElement } from '../_util/reactNode';
  19. import { devUseWarning } from '../_util/warning';
  20. import { ConfigContext } from '../config-provider';
  21. import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
  22. import MenuContext from './MenuContext';
  23. import Divider from './MenuDivider';
  24. import MenuItem from './MenuItem';
  25. import OverrideContext from './OverrideContext';
  26. import useStyle from './style';
  27. import SubMenu from './SubMenu';
  28. function isEmptyIcon(icon) {
  29. return icon === null || icon === false;
  30. }
  31. const MENU_COMPONENTS = {
  32. item: MenuItem,
  33. submenu: SubMenu,
  34. divider: Divider
  35. };
  36. const InternalMenu = /*#__PURE__*/forwardRef((props, ref) => {
  37. var _a;
  38. const override = React.useContext(OverrideContext);
  39. const overrideObj = override || {};
  40. const {
  41. getPrefixCls,
  42. getPopupContainer,
  43. direction,
  44. menu
  45. } = React.useContext(ConfigContext);
  46. const rootPrefixCls = getPrefixCls();
  47. const {
  48. prefixCls: customizePrefixCls,
  49. className,
  50. style,
  51. theme = 'light',
  52. expandIcon,
  53. _internalDisableMenuItemTitleTooltip,
  54. inlineCollapsed,
  55. siderCollapsed,
  56. rootClassName,
  57. mode,
  58. selectable,
  59. onClick,
  60. overflowedIndicatorPopupClassName
  61. } = props,
  62. restProps = __rest(props, ["prefixCls", "className", "style", "theme", "expandIcon", "_internalDisableMenuItemTitleTooltip", "inlineCollapsed", "siderCollapsed", "rootClassName", "mode", "selectable", "onClick", "overflowedIndicatorPopupClassName"]);
  63. const passedProps = omit(restProps, ['collapsedWidth']);
  64. // ======================== Warning ==========================
  65. if (process.env.NODE_ENV !== 'production') {
  66. const warning = devUseWarning('Menu');
  67. process.env.NODE_ENV !== "production" ? warning(!('inlineCollapsed' in props && mode !== 'inline'), 'usage', '`inlineCollapsed` should only be used when `mode` is inline.') : void 0;
  68. warning.deprecated('items' in props && !props.children, 'children', 'items');
  69. }
  70. (_a = overrideObj.validator) === null || _a === void 0 ? void 0 : _a.call(overrideObj, {
  71. mode
  72. });
  73. // ========================== Click ==========================
  74. // Tell dropdown that item clicked
  75. const onItemClick = useEvent((...args) => {
  76. var _a;
  77. onClick === null || onClick === void 0 ? void 0 : onClick.apply(void 0, args);
  78. (_a = overrideObj.onClick) === null || _a === void 0 ? void 0 : _a.call(overrideObj);
  79. });
  80. // ========================== Mode ===========================
  81. const mergedMode = overrideObj.mode || mode;
  82. // ======================= Selectable ========================
  83. const mergedSelectable = selectable !== null && selectable !== void 0 ? selectable : overrideObj.selectable;
  84. // ======================== Collapsed ========================
  85. // Inline Collapsed
  86. const mergedInlineCollapsed = inlineCollapsed !== null && inlineCollapsed !== void 0 ? inlineCollapsed : siderCollapsed;
  87. const defaultMotions = {
  88. horizontal: {
  89. motionName: `${rootPrefixCls}-slide-up`
  90. },
  91. inline: initCollapseMotion(rootPrefixCls),
  92. other: {
  93. motionName: `${rootPrefixCls}-zoom-big`
  94. }
  95. };
  96. const prefixCls = getPrefixCls('menu', customizePrefixCls || overrideObj.prefixCls);
  97. const rootCls = useCSSVarCls(prefixCls);
  98. const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls, !override);
  99. const menuClassName = classNames(`${prefixCls}-${theme}`, menu === null || menu === void 0 ? void 0 : menu.className, className);
  100. // ====================== ExpandIcon ========================
  101. const mergedExpandIcon = React.useMemo(() => {
  102. var _a, _b;
  103. if (typeof expandIcon === 'function' || isEmptyIcon(expandIcon)) {
  104. return expandIcon || null;
  105. }
  106. if (typeof overrideObj.expandIcon === 'function' || isEmptyIcon(overrideObj.expandIcon)) {
  107. return overrideObj.expandIcon || null;
  108. }
  109. if (typeof (menu === null || menu === void 0 ? void 0 : menu.expandIcon) === 'function' || isEmptyIcon(menu === null || menu === void 0 ? void 0 : menu.expandIcon)) {
  110. return (menu === null || menu === void 0 ? void 0 : menu.expandIcon) || null;
  111. }
  112. const mergedIcon = (_a = expandIcon !== null && expandIcon !== void 0 ? expandIcon : overrideObj === null || overrideObj === void 0 ? void 0 : overrideObj.expandIcon) !== null && _a !== void 0 ? _a : menu === null || menu === void 0 ? void 0 : menu.expandIcon;
  113. return cloneElement(mergedIcon, {
  114. className: classNames(`${prefixCls}-submenu-expand-icon`, /*#__PURE__*/React.isValidElement(mergedIcon) ? (_b = mergedIcon.props) === null || _b === void 0 ? void 0 : _b.className : undefined)
  115. });
  116. }, [expandIcon, overrideObj === null || overrideObj === void 0 ? void 0 : overrideObj.expandIcon, menu === null || menu === void 0 ? void 0 : menu.expandIcon, prefixCls]);
  117. // ======================== Context ==========================
  118. const contextValue = React.useMemo(() => ({
  119. prefixCls,
  120. inlineCollapsed: mergedInlineCollapsed || false,
  121. direction,
  122. firstLevel: true,
  123. theme,
  124. mode: mergedMode,
  125. disableMenuItemTitleTooltip: _internalDisableMenuItemTitleTooltip
  126. }), [prefixCls, mergedInlineCollapsed, direction, _internalDisableMenuItemTitleTooltip, theme]);
  127. // ========================= Render ==========================
  128. return wrapCSSVar(/*#__PURE__*/React.createElement(OverrideContext.Provider, {
  129. value: null
  130. }, /*#__PURE__*/React.createElement(MenuContext.Provider, {
  131. value: contextValue
  132. }, /*#__PURE__*/React.createElement(RcMenu, Object.assign({
  133. getPopupContainer: getPopupContainer,
  134. overflowedIndicator: /*#__PURE__*/React.createElement(EllipsisOutlined, null),
  135. overflowedIndicatorPopupClassName: classNames(prefixCls, `${prefixCls}-${theme}`, overflowedIndicatorPopupClassName),
  136. mode: mergedMode,
  137. selectable: mergedSelectable,
  138. onClick: onItemClick
  139. }, passedProps, {
  140. inlineCollapsed: mergedInlineCollapsed,
  141. style: Object.assign(Object.assign({}, menu === null || menu === void 0 ? void 0 : menu.style), style),
  142. className: menuClassName,
  143. prefixCls: prefixCls,
  144. direction: direction,
  145. defaultMotions: defaultMotions,
  146. expandIcon: mergedExpandIcon,
  147. ref: ref,
  148. rootClassName: classNames(rootClassName, hashId, overrideObj.rootClassName, cssVarCls, rootCls),
  149. _internalComponents: MENU_COMPONENTS
  150. })))));
  151. });
  152. export default InternalMenu;