linkmore-design/lib/menu/index.js

🌈 🚀lm组件库。🚀

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _EllipsisOutlined = _interopRequireDefault(require("@ant-design/icons/EllipsisOutlined"));
var _classnames = _interopRequireDefault(require("classnames"));
var _rcMenu = _interopRequireWildcard(require("rc-menu"));
var _useEvent = _interopRequireDefault(require("rc-util/lib/hooks/useEvent"));
var _omit = _interopRequireDefault(require("rc-util/lib/omit"));
var React = _interopRequireWildcard(require("react"));
var _configProvider = require("../config-provider");
var _Sider = require("../layout/Sider");
var _motion = _interopRequireDefault(require("../_util/motion"));
var _reactNode = require("../_util/reactNode");
var _warning = _interopRequireDefault(require("../_util/warning"));
var _useItems = _interopRequireDefault(require("./hooks/useItems"));
var _MenuContext = _interopRequireDefault(require("./MenuContext"));
var _MenuDivider = _interopRequireDefault(require("./MenuDivider"));
var _MenuItem = _interopRequireDefault(require("./MenuItem"));
var _OverrideContext = _interopRequireDefault(require("./OverrideContext"));
var _SubMenu = _interopRequireDefault(require("./SubMenu"));
const InternalMenu = /*#__PURE__*/(0, React.forwardRef)((props, ref) => {
  const override = React.useContext(_OverrideContext.default) || {};
  const {
    getPrefixCls,
    getPopupContainer,
    direction
  } = React.useContext(_configProvider.ConfigContext);
  const rootPrefixCls = getPrefixCls();
  const {
    prefixCls: customizePrefixCls,
    className,
    theme = 'light',
    expandIcon,
    _internalDisableMenuItemTitleTooltip,
    inlineCollapsed,
    siderCollapsed,
    items,
    children,
    mode,
    selectable,
    onClick,
    ...restProps
  } = props;
  const passedProps = (0, _omit.default)(restProps, ['collapsedWidth']);

  // ========================= Items ===========================
  const mergedChildren = (0, _useItems.default)(items) || children;

  // ======================== Warning ==========================
  (0, _warning.default)(!('inlineCollapsed' in props && mode !== 'inline'), 'Menu', '`inlineCollapsed` should only be used when `mode` is inline.');
  (0, _warning.default)(!(props.siderCollapsed !== undefined && 'inlineCollapsed' in props), 'Menu', '`inlineCollapsed` not control Menu under Sider. Should set `collapsed` on Sider instead.');
  (0, _warning.default)('items' in props && !children, 'Menu', '`children` will be removed in next major version. Please use `items` instead.');
  override.validator?.({
    mode
  });

  // ========================== Click ==========================
  // Tell dropdown that item clicked
  const onItemClick = (0, _useEvent.default)((...args) => {
    onClick?.(...args);
    override?.onClick?.();
  });

  // ========================== Mode ===========================
  const mergedMode = override.mode || mode;

  // ======================= Selectable ========================
  const mergedSelectable = selectable ?? override.selectable;

  // ======================== Collapsed ========================
  // Inline Collapsed
  const mergedInlineCollapsed = React.useMemo(() => {
    if (siderCollapsed !== undefined) {
      return siderCollapsed;
    }
    return inlineCollapsed;
  }, [inlineCollapsed, siderCollapsed]);
  const defaultMotions = {
    horizontal: {
      motionName: `${rootPrefixCls}-slide-up`
    },
    inline: _motion.default,
    other: {
      motionName: `${rootPrefixCls}-zoom-big`
    }
  };
  const prefixCls = getPrefixCls('menu', customizePrefixCls || override.prefixCls);
  const menuClassName = (0, _classnames.default)(`${prefixCls}-${theme}`, className);

  // ====================== Expand Icon ========================
  let mergedExpandIcon;
  if (typeof expandIcon === 'function') {
    mergedExpandIcon = expandIcon;
  } else {
    mergedExpandIcon = (0, _reactNode.cloneElement)(expandIcon || override.expandIcon, {
      className: `${prefixCls}-submenu-expand-icon`
    });
  }

  // ======================== Context ==========================
  const contextValue = React.useMemo(() => ({
    prefixCls,
    inlineCollapsed: mergedInlineCollapsed || false,
    antdMenuTheme: theme,
    direction,
    firstLevel: true,
    disableMenuItemTitleTooltip: _internalDisableMenuItemTitleTooltip
  }), [prefixCls, mergedInlineCollapsed, theme, direction, _internalDisableMenuItemTitleTooltip]);

  // ========================= Render ==========================
  return /*#__PURE__*/React.createElement(_OverrideContext.default.Provider, {
    value: null
  }, /*#__PURE__*/React.createElement(_MenuContext.default.Provider, {
    value: contextValue
  }, /*#__PURE__*/React.createElement(_rcMenu.default, (0, _extends2.default)({
    getPopupContainer: getPopupContainer,
    overflowedIndicator: /*#__PURE__*/React.createElement(_EllipsisOutlined.default, null),
    overflowedIndicatorPopupClassName: `${prefixCls}-${theme}`,
    mode: mergedMode,
    selectable: mergedSelectable,
    onClick: onItemClick
  }, passedProps, {
    inlineCollapsed: mergedInlineCollapsed,
    className: menuClassName,
    prefixCls: prefixCls,
    direction: direction,
    defaultMotions: defaultMotions,
    expandIcon: mergedExpandIcon,
    ref: ref
  }), mergedChildren)));
});

// We should keep this as ref-able
class Menu extends React.Component {
  static Divider = _MenuDivider.default;
  static Item = _MenuItem.default;
  static SubMenu = _SubMenu.default;
  static ItemGroup = _rcMenu.ItemGroup;
  menu;
  focus = options => {
    this.menu?.focus(options);
  };
  render() {
    return /*#__PURE__*/React.createElement(_Sider.SiderContext.Consumer, null, context => /*#__PURE__*/React.createElement(InternalMenu, (0, _extends2.default)({
      ref: node => {
        this.menu = node;
      }
    }, this.props, context)));
  }
}
var _default = Menu;
exports.default = _default;