@ant-design/pro-layout/lib/components/TopNavHeader/index.js

@ant-design/pro-layout

"use strict";

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

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

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

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

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

var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

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

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

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

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

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

var _rcResizeObserver = _interopRequireDefault(require("rc-resize-observer"));

var _SiderMenu = require("../SiderMenu/SiderMenu");

require("./index.less");

var _BaseMenu = _interopRequireDefault(require("../SiderMenu/BaseMenu"));

var _proUtils = require("@ant-design/pro-utils");

var _excluded = ["rightContentRender", "prefixCls"];

/**
 * 抽离出来是为了防止 rightSize 经常改变导致菜单 render
 *
 * @param param0
 */
var RightContent = function RightContent(_ref) {
  var rightContentRender = _ref.rightContentRender,
      prefixCls = _ref.prefixCls,
      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);

  var _useState = (0, _react.useState)('auto'),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      rightSize = _useState2[0],
      setRightSize = _useState2[1];
  /** 减少一下渲染的次数 */


  var setRightSizeDebounceFn = (0, _proUtils.useDebounceFn)( /*#__PURE__*/function () {
    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(width) {
      return _regenerator.default.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              setRightSize(width);

            case 1:
            case "end":
              return _context.stop();
          }
        }
      }, _callee);
    }));

    return function (_x) {
      return _ref2.apply(this, arguments);
    };
  }(), 160);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "".concat(prefixCls, "-right-content"),
    style: {
      minWidth: rightSize
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    style: {
      paddingRight: 8
    }
  }, /*#__PURE__*/_react.default.createElement(_rcResizeObserver.default, {
    onResize: function onResize(_ref3) {
      var width = _ref3.width;
      setRightSizeDebounceFn.run(width);
    }
  }, rightContentRender && /*#__PURE__*/_react.default.createElement("div", {
    className: "".concat(prefixCls, "-right-content-resize")
  }, rightContentRender((0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
    // 测试专用
    //@ts-ignore
    rightContentSize: rightSize
  }))))));
};

exports.RightContent = RightContent;

var TopNavHeader = function TopNavHeader(props) {
  var ref = (0, _react.useRef)(null);
  var theme = props.theme,
      onMenuHeaderClick = props.onMenuHeaderClick,
      contentWidth = props.contentWidth,
      rightContentRender = props.rightContentRender,
      propsClassName = props.className,
      style = props.style,
      headerContentRender = props.headerContentRender,
      layout = props.layout;
  var prefixCls = "".concat(props.prefixCls || 'ant-pro', "-top-nav-header");
  var headerDom = (0, _SiderMenu.defaultRenderLogoAndTitle)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
    collapsed: false
  }), layout === 'mix' ? 'headerTitleRender' : undefined);
  var className = (0, _classnames.default)(prefixCls, propsClassName, {
    light: theme === 'light'
  });

  var defaultDom = /*#__PURE__*/_react.default.createElement(_BaseMenu.default, (0, _extends2.default)({}, props, props.menuProps));

  var headerContentDom = headerContentRender ? headerContentRender === null || headerContentRender === void 0 ? void 0 : headerContentRender(props, defaultDom) : defaultDom;
  return /*#__PURE__*/_react.default.createElement("div", {
    className: className,
    style: style
  }, /*#__PURE__*/_react.default.createElement("div", {
    ref: ref,
    className: "".concat(prefixCls, "-main ").concat(contentWidth === 'Fixed' ? 'wide' : '')
  }, headerDom && /*#__PURE__*/_react.default.createElement("div", {
    className: "".concat(prefixCls, "-main-left"),
    onClick: onMenuHeaderClick
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "".concat(prefixCls, "-logo"),
    key: "logo",
    id: "logo"
  }, headerDom)), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      flex: 1
    },
    className: "".concat(prefixCls, "-menu")
  }, headerContentDom), rightContentRender && /*#__PURE__*/_react.default.createElement(RightContent, (0, _extends2.default)({
    rightContentRender: rightContentRender,
    prefixCls: prefixCls
  }, props))));
};

var _default = TopNavHeader;
exports.default = _default;