@ant-design/pro-layout/lib/Header.js

@ant-design/pro-layout

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));

require("antd/es/layout/style");

var _layout = _interopRequireDefault(require("antd/es/layout"));

require("./Header.less");

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

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

var _GlobalHeader = _interopRequireDefault(require("./components/GlobalHeader"));

var _TopNavHeader = _interopRequireDefault(require("./components/TopNavHeader"));

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

var Header = _layout.default.Header;

var HeaderView = /*#__PURE__*/function (_Component) {
  (0, _inherits2.default)(HeaderView, _Component);

  var _super = (0, _createSuper2.default)(HeaderView);

  function HeaderView() {
    var _this;

    (0, _classCallCheck2.default)(this, HeaderView);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _super.call.apply(_super, [this].concat(args));

    _this.renderContent = function () {
      var _this$props = _this.props,
          isMobile = _this$props.isMobile,
          onCollapse = _this$props.onCollapse,
          navTheme = _this$props.navTheme,
          layout = _this$props.layout,
          headerRender = _this$props.headerRender,
          headerContentRender = _this$props.headerContentRender;
      var isTop = layout === 'top';
      var clearMenuData = (0, _utils.clearMenuItem)(_this.props.menuData || []);

      var defaultDom = /*#__PURE__*/_react.default.createElement(_GlobalHeader.default, (0, _extends2.default)({
        onCollapse: onCollapse
      }, _this.props, {
        menuData: clearMenuData
      }), headerContentRender && headerContentRender(_this.props, null));

      if (isTop && !isMobile) {
        defaultDom = /*#__PURE__*/_react.default.createElement(_TopNavHeader.default, (0, _extends2.default)({
          theme: navTheme,
          mode: "horizontal",
          onCollapse: onCollapse
        }, _this.props, {
          menuData: clearMenuData
        }));
      }

      if (headerRender && typeof headerRender === 'function') {
        return headerRender(_this.props, defaultDom);
      }

      return defaultDom;
    };

    return _this;
  }

  (0, _createClass2.default)(HeaderView, [{
    key: "render",
    value: function render() {
      var _classNames;

      var _this$props2 = this.props,
          fixedHeader = _this$props2.fixedHeader,
          layout = _this$props2.layout,
          propsClassName = _this$props2.className,
          style = _this$props2.style,
          navTheme = _this$props2.navTheme,
          collapsed = _this$props2.collapsed,
          siderWidth = _this$props2.siderWidth,
          hasSiderMenu = _this$props2.hasSiderMenu,
          isMobile = _this$props2.isMobile,
          prefixCls = _this$props2.prefixCls,
          headerHeight = _this$props2.headerHeight;
      var needFixedHeader = fixedHeader || layout === 'mix';
      var isTop = layout === 'top';
      var needSettingWidth = needFixedHeader && hasSiderMenu && !isTop && !isMobile;
      var className = (0, _classnames.default)(propsClassName, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-fixed-header"), needFixedHeader), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-fixed-header-action"), !collapsed), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-top-menu"), isTop), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-header-").concat(navTheme), navTheme && layout !== 'mix'), _classNames));
      /** 计算侧边栏的宽度，不然导致左边的样式会出问题 */

      var width = layout !== 'mix' && needSettingWidth ? "calc(100% - ".concat(collapsed ? 48 : siderWidth, "px)") : '100%';
      var right = needFixedHeader ? 0 : undefined;
      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, needFixedHeader && /*#__PURE__*/_react.default.createElement(Header, {
        style: {
          height: headerHeight,
          lineHeight: "".concat(headerHeight, "px"),
          background: 'transparent'
        }
      }), /*#__PURE__*/_react.default.createElement(Header, {
        style: (0, _objectSpread2.default)({
          padding: 0,
          height: headerHeight,
          lineHeight: "".concat(headerHeight, "px"),
          width: width,
          zIndex: layout === 'mix' ? 100 : 19,
          right: right
        }, style),
        className: className
      }, this.renderContent()));
    }
  }]);
  return HeaderView;
}(_react.Component);

var _default = HeaderView;
exports.default = _default;