1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192 |
- "use strict";
- "use client";
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
- Object.defineProperty(exports, "__esModule", {
- value: true
- });
- exports.default = void 0;
- var React = _interopRequireWildcard(require("react"));
- var _classnames = _interopRequireDefault(require("classnames"));
- var _rcMenu = require("rc-menu");
- var _toArray = _interopRequireDefault(require("rc-util/lib/Children/toArray"));
- var _omit = _interopRequireDefault(require("rc-util/lib/omit"));
- var _reactNode = require("../_util/reactNode");
- var _Sider = require("../layout/Sider");
- var _tooltip = _interopRequireDefault(require("../tooltip"));
- var _MenuContext = _interopRequireDefault(require("./MenuContext"));
- const MenuItem = props => {
- var _a;
- const {
- className,
- children,
- icon,
- title,
- danger,
- extra
- } = props;
- const {
- prefixCls,
- firstLevel,
- direction,
- disableMenuItemTitleTooltip,
- inlineCollapsed: isInlineCollapsed
- } = React.useContext(_MenuContext.default);
- const renderItemChildren = inlineCollapsed => {
- const label = children === null || children === void 0 ? void 0 : children[0];
- const wrapNode = /*#__PURE__*/React.createElement("span", {
- className: (0, _classnames.default)(`${prefixCls}-title-content`, {
- [`${prefixCls}-title-content-with-extra`]: !!extra || extra === 0
- })
- }, children);
- // inline-collapsed.md demo 依赖 span 来隐藏文字,有 icon 属性,则内部包裹一个 span
- // ref: https://github.com/ant-design/ant-design/pull/23456
- if (!icon || /*#__PURE__*/React.isValidElement(children) && children.type === 'span') {
- if (children && inlineCollapsed && firstLevel && typeof label === 'string') {
- return /*#__PURE__*/React.createElement("div", {
- className: `${prefixCls}-inline-collapsed-noicon`
- }, label.charAt(0));
- }
- }
- return wrapNode;
- };
- const {
- siderCollapsed
- } = React.useContext(_Sider.SiderContext);
- let tooltipTitle = title;
- if (typeof title === 'undefined') {
- tooltipTitle = firstLevel ? children : '';
- } else if (title === false) {
- tooltipTitle = '';
- }
- const tooltipProps = {
- title: tooltipTitle
- };
- if (!siderCollapsed && !isInlineCollapsed) {
- tooltipProps.title = null;
- // Reset `open` to fix control mode tooltip display not correct
- // ref: https://github.com/ant-design/ant-design/issues/16742
- tooltipProps.open = false;
- }
- const childrenLength = (0, _toArray.default)(children).length;
- let returnNode = /*#__PURE__*/React.createElement(_rcMenu.Item, Object.assign({}, (0, _omit.default)(props, ['title', 'icon', 'danger']), {
- className: (0, _classnames.default)({
- [`${prefixCls}-item-danger`]: danger,
- [`${prefixCls}-item-only-child`]: (icon ? childrenLength + 1 : childrenLength) === 1
- }, className),
- title: typeof title === 'string' ? title : undefined
- }), (0, _reactNode.cloneElement)(icon, {
- className: (0, _classnames.default)(/*#__PURE__*/React.isValidElement(icon) ? (_a = icon.props) === null || _a === void 0 ? void 0 : _a.className : undefined, `${prefixCls}-item-icon`)
- }), renderItemChildren(isInlineCollapsed));
- if (!disableMenuItemTitleTooltip) {
- returnNode = /*#__PURE__*/React.createElement(_tooltip.default, Object.assign({}, tooltipProps, {
- placement: direction === 'rtl' ? 'left' : 'right',
- classNames: {
- root: `${prefixCls}-inline-collapsed-tooltip`
- }
- }), returnNode);
- }
- return returnNode;
- };
- var _default = exports.default = MenuItem;
|