qt-public-ui/es/Nav/nav.js

新设计规范下业务组件库

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
var _excluded = ["options", "className", "mode", "appSelect", "style", "selected", "openKeys", "navHeightOffset"];
/**
 * @module 菜单配置
 * @author lize
 *
 * 默认渲染为<Link>，仅以下情况渲染为 <a>
 * 1. link 参数以 https:// 或 http:// 或 // 开头
 * 2. menu 配置具有 target 属性且 target 不等于 _self
 */

import React, { useState, useEffect, useCallback, useMemo, useContext } from 'react';
import { useLocation, Link } from 'react-router-dom';
import { IconSlim as Icon } from '..';
import { Menu, Tooltip } from 'antd';
import classnames from 'classnames';
import Simple from './simple';
import { isAnchor, isMenuTitle, matchMenu } from './utils';
import globalContext from '../UmProvider/globalContext';
import './style';
export default (function (props) {
  var _ref = props,
    _ref$options = _ref.options,
    options = _ref$options === void 0 ? [] : _ref$options,
    className = _ref.className,
    _ref$mode = _ref.mode,
    mode = _ref$mode === void 0 ? 'inline' : _ref$mode,
    appSelect = _ref.appSelect,
    style = _ref.style,
    _ref$selected = _ref.selected,
    selected = _ref$selected === void 0 ? '' : _ref$selected,
    showKeys = _ref.openKeys,
    navHeightOffset = _ref.navHeightOffset,
    menuProps = _objectWithoutPropertiesLoose(_ref, _excluded); // cxw 觉得styleType无用
  var controlled = ('selected' in props);
  var _useState = useState([]),
    openKeys = _useState[0],
    setOpenKeys = _useState[1];
  var _useState2 = useState(controlled ? [selected] : []),
    selectedKeys = _useState2[0],
    setSelectedKeys = _useState2[1];
  var location = useLocation();
  var gContext = useContext(globalContext);
  var calcNavHeight = navHeightOffset || (appSelect ? 66 : 0);
  var tempStyle = calcNavHeight ? {
    height: "calc(100% - " + calcNavHeight + "px)"
  } : {};
  var renderLink = useCallback(function (menu) {
    if (!menu.link) return null;
    var title = menu.title,
      link = menu.link,
      target = menu.target,
      icon = menu.icon,
      node = menu.node,
      _menu$disabled = menu.disabled,
      disabled = _menu$disabled === void 0 ? false : _menu$disabled;
    var content = icon ? /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Icon, {
      type: icon
    }), /*#__PURE__*/React.createElement("span", null, title)) : /*#__PURE__*/React.createElement("span", null, title);
    if (isAnchor(menu)) {
      return /*#__PURE__*/React.createElement("a", {
        href: link,
        target: target
      }, content);
    }
    if (disabled) {
      return content;
    }
    return /*#__PURE__*/React.createElement(Link, {
      to: link
    }, content, node);
  }, []);
  var renderMenu = useCallback(function (menu) {
    if (isMenuTitle(menu)) {
      var children = menu.children,
        icon = menu.icon,
        title = menu.title,
        _menu$disabled2 = menu.disabled,
        disabled = _menu$disabled2 === void 0 ? false : _menu$disabled2,
        _menu$tip = menu.tip,
        tip = _menu$tip === void 0 ? '' : _menu$tip;
      return /*#__PURE__*/React.createElement(Menu.SubMenu, {
        key: menu.title,
        disabled: disabled,
        title: /*#__PURE__*/React.createElement(Tooltip, {
          title: tip
        }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Icon, {
          type: icon
        }), title, menu.isNew && /*#__PURE__*/React.createElement("span", {
          className: "nav-new-icon"
        }, /*#__PURE__*/React.createElement(Icon, {
          type: "umicon-NEW"
        }))))
      }, children.map(renderMenu));
    } else {
      return /*#__PURE__*/React.createElement(Menu.Item, {
        key: menu.title,
        disabled: menu.disabled
      }, /*#__PURE__*/React.createElement(Tooltip, {
        title: menu.tip
      }, renderLink(menu), menu.isNew && /*#__PURE__*/React.createElement("span", {
        className: "nav-new-icon"
      }, /*#__PURE__*/React.createElement(Icon, {
        type: "umicon-NEW"
      }))));
    }
  }, []);
  var openKeysResult = useMemo(function () {
    return Array.isArray(showKeys) ? [].concat(showKeys) : [].concat(openKeys);
  }, [openKeys, showKeys]);
  useEffect(function () {
    controlled && selected && setSelectedKeys([selected]);
  }, [controlled, selected]);
  useEffect(function () {
    var _matchMenu = matchMenu(options, location.pathname),
      openKey = _matchMenu.openKey,
      selectedKey = _matchMenu.selectedKey;
    openKey ? setOpenKeys([openKey]) : setOpenKeys([]);
    if (!controlled) {
      selectedKey ? setSelectedKeys([selectedKey]) : setSelectedKeys([]);
    }
    props.handleSelectedChange && props.handleSelectedChange(selectedKey);
  }, [controlled, location.pathname, options]);
  if (gContext.theme === 'operational' && mode !== 'horizontal') {
    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Simple, _extends({}, props, {
      selected: selectedKeys
    })), props.extraRender && props.extraRender());
  }
  return /*#__PURE__*/React.createElement(React.Fragment, null, mode !== 'horizontal' && appSelect, /*#__PURE__*/React.createElement("div", {
    className: classnames('umui-nav', className),
    style: _extends({}, tempStyle, style)
  }, /*#__PURE__*/React.createElement(Menu, _extends({}, menuProps, {
    mode: mode,
    openKeys: openKeysResult,
    selectedKeys: selectedKeys,
    onOpenChange: function onOpenChange(_openKeys) {
      setOpenKeys(_openKeys);
      menuProps.onOpenChange && menuProps.onOpenChange(_openKeys);
      // setOpenKeys as (_openKeys: string[]) => void;
    }
  }), options.map(renderMenu), props.extraRender && props.extraRender())));
});