acud/es/menu/MenuItemCustom.js

acg react 组件库

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
/**
 * @file
 * @author chenxin35
 */
import React, { useContext, useMemo } from 'react';
import { OutlinedAppstore } from 'acud-icon';
import classnames from 'classnames';
import Tooltip from '../tooltip';
import MenuContext from './MenuContext';
import { MenuContext as BaseMenuContext } from './rc-menu/context/MenuContext';
import { cloneElement } from '../_util/reactNode';
;
var ItemCustom = function ItemCustom(props) {
  var children = props.children,
    icon = props.icon,
    popup = props.popup,
    popupClassName = props.popupClassName;
  var _useContext = useContext(MenuContext),
    prefixCls = _useContext.prefixCls;
  var _useContext2 = useContext(BaseMenuContext),
    inlineCollapsed = _useContext2.inlineCollapsed;
  // 折叠时hover提示
  var renderPopup = useMemo(function () {
    if (inlineCollapsed && popup) {
      return popup;
    }
    return null;
  }, [inlineCollapsed, children]);
  var renderItemChildren = useMemo(function () {
    if (!inlineCollapsed) {
      return children;
    }
    // 折叠时展示icon
    var copyIcon = cloneElement(icon || /*#__PURE__*/React.createElement(OutlinedAppstore, null), {
      // 有hover提示时高亮icon
      className: classnames(_defineProperty({}, "".concat(prefixCls, "-item-custom-popup-icon"), popup))
    });
    return copyIcon;
  }, [inlineCollapsed, children, icon, prefixCls]);
  return /*#__PURE__*/React.createElement(Tooltip, {
    title: renderPopup,
    placement: "right",
    overlayClassName: popupClassName
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-item-custom")
  }, renderItemChildren));
};
export default ItemCustom;