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

@ant-design/pro-layout

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["rightContentRender", "prefixCls"];
import React, { useRef, useState } from 'react';
import classNames from 'classnames';
import ResizeObserver from 'rc-resize-observer';
import { defaultRenderLogoAndTitle } from '../SiderMenu/SiderMenu';
import './index.less';
import BaseMenu from '../SiderMenu/BaseMenu';
import { useDebounceFn } from '@ant-design/pro-utils';
/**
 * 抽离出来是为了防止 rightSize 经常改变导致菜单 render
 *
 * @param param0
 */

export var RightContent = function RightContent(_ref) {
  var rightContentRender = _ref.rightContentRender,
      prefixCls = _ref.prefixCls,
      props = _objectWithoutProperties(_ref, _excluded);

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


  var setRightSizeDebounceFn = useDebounceFn( /*#__PURE__*/function () {
    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(width) {
      return _regeneratorRuntime.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.createElement("div", {
    className: "".concat(prefixCls, "-right-content"),
    style: {
      minWidth: rightSize
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      paddingRight: 8
    }
  }, /*#__PURE__*/React.createElement(ResizeObserver, {
    onResize: function onResize(_ref3) {
      var width = _ref3.width;
      setRightSizeDebounceFn.run(width);
    }
  }, rightContentRender && /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-right-content-resize")
  }, rightContentRender(_objectSpread(_objectSpread({}, props), {}, {
    // 测试专用
    //@ts-ignore
    rightContentSize: rightSize
  }))))));
};

var TopNavHeader = function TopNavHeader(props) {
  var ref = 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 = defaultRenderLogoAndTitle(_objectSpread(_objectSpread({}, props), {}, {
    collapsed: false
  }), layout === 'mix' ? 'headerTitleRender' : undefined);
  var className = classNames(prefixCls, propsClassName, {
    light: theme === 'light'
  });
  var defaultDom = /*#__PURE__*/React.createElement(BaseMenu, _extends({}, props, props.menuProps));
  var headerContentDom = headerContentRender ? headerContentRender === null || headerContentRender === void 0 ? void 0 : headerContentRender(props, defaultDom) : defaultDom;
  return /*#__PURE__*/React.createElement("div", {
    className: className,
    style: style
  }, /*#__PURE__*/React.createElement("div", {
    ref: ref,
    className: "".concat(prefixCls, "-main ").concat(contentWidth === 'Fixed' ? 'wide' : '')
  }, headerDom && /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-main-left"),
    onClick: onMenuHeaderClick
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-logo"),
    key: "logo",
    id: "logo"
  }, headerDom)), /*#__PURE__*/React.createElement("div", {
    style: {
      flex: 1
    },
    className: "".concat(prefixCls, "-menu")
  }, headerContentDom), rightContentRender && /*#__PURE__*/React.createElement(RightContent, _extends({
    rightContentRender: rightContentRender,
    prefixCls: prefixCls
  }, props))));
};

export default TopNavHeader;