maycur-business/lib/MkLayout/MkHeader/MkHeader.jsx

maycur business react components of web

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

require("maycur-antd/lib/icon/style/css");

var _icon = _interopRequireDefault(require("maycur-antd/lib/icon"));

require("maycur-antd/lib/menu/style/css");

var _menu = _interopRequireDefault(require("maycur-antd/lib/menu"));

require("maycur-antd/lib/layout/style/css");

var _layout = _interopRequireDefault(require("maycur-antd/lib/layout"));

var _react = _interopRequireDefault(require("react"));

var _lodash = _interopRequireDefault(require("lodash"));

var _classnames = _interopRequireDefault(require("classnames"));

var _utils = _interopRequireDefault(require("../../utils/utils"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var prefix = _utils["default"].prefixCls;
var Header = _layout["default"].Header;
var SubMenu = _menu["default"].SubMenu;

var MkHeader = function MkHeader(props) {
  var collapsed = props.collapsed,
      pathArr = props.pathArr,
      onToggleCollapsed = props.onToggleCollapsed,
      leftMenus = props.leftMenus,
      rightMenus = props.rightMenus,
      logo = props.logo;
  var menus = leftMenus.concat(rightMenus);

  var matchedMenu = _lodash["default"].find(menus, function (menu) {
    var pathReg = new RegExp('^' + menu.path);
    return pathReg.test(pathArr.join('/'));
  });

  var selectedKeys = matchedMenu ? [matchedMenu.path] : [];

  var formatMenus = function formatMenus(menu) {
    var menuName = menu.meta && menu.meta.name || '';
    return _objectSpread({}, menu, {
      menuName: menuName
    });
  };

  var toggleCollapsed = function toggleCollapsed() {
    if (onToggleCollapsed && typeof onToggleCollapsed === 'function') {
      onToggleCollapsed(!collapsed);
    }
  };

  var logoAreaClassName = (0, _classnames["default"])("".concat(prefix, "-header-logo"), _defineProperty({}, "".concat(prefix, "-header-logo-collapsed"), collapsed));

  var onOpenChange = function onOpenChange(openKeys) {// debugger
  };

  return _react["default"].createElement(Header, {
    className: "".concat(prefix, "-header")
  }, _react["default"].createElement("div", {
    className: logoAreaClassName
  }, _react["default"].createElement("div", {
    className: "logo-content"
  }, _react["default"].createElement("span", null, _react["default"].createElement("img", {
    src: logo,
    alt: "\u6BCF\u523B\u62A5"
  }))), _react["default"].createElement(_icon["default"], {
    onClick: toggleCollapsed,
    className: "trigger",
    type: collapsed ? 'menu-unfold' : 'menu-fold'
  })), _react["default"].createElement("div", {
    className: "".concat(prefix, "-header-menus")
  }, _react["default"].createElement("div", {
    className: "left-menu"
  }, _react["default"].createElement(_menu["default"], {
    theme: "dark",
    mode: "horizontal",
    defaultSelectedKeys: [menus[0].path],
    selectedKeys: selectedKeys
  }, leftMenus.map(function (menu) {
    var formattedMenus = formatMenus(menu);
    var content = props.renderMenu(formattedMenus);

    if (!content) {
      return null;
    }

    return _react["default"].createElement(_menu["default"].Item, {
      key: menu.path
    }, content);
  }))), rightMenus && rightMenus.length ? _react["default"].createElement("div", {
    className: "right-menu"
  }, _react["default"].createElement(_menu["default"], {
    theme: "dark",
    mode: "horizontal",
    defaultSelectedKeys: [menus[0].path],
    selectedKeys: selectedKeys,
    onOpenChange: onOpenChange
  }, rightMenus.map(function (menu) {
    var formattedMenus = formatMenus(menu);
    var subMenuTitle = props.setSubMenuTitle(menu);
    var MenuContent = menu.hasSub ? _react["default"].createElement(SubMenu, {
      key: menu.path,
      title: subMenuTitle
    }, menu.subRoutes.map(function (subRoute) {
      subRoute.menuName = subRoute.meta.name;
      return _react["default"].createElement(_menu["default"].Item, {
        key: subRoute.path
      }, props.renderMenu(subRoute));
    })) : _react["default"].createElement(_menu["default"].Item, {
      key: menu.path
    }, props.renderMenu(formattedMenus));
    return MenuContent;
  }))) : null));
};

var _default = MkHeader;
exports["default"] = _default;