@ant-design/pro-layout
Version:
88 lines • 3.84 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import { ProProvider } from '@ant-design/pro-provider';
import { ConfigProvider } from 'antd';
import classNames from 'classnames';
import React, { useContext, useMemo, useRef } from 'react';
import { AppsLogoComponents } from "../AppsLogoComponents";
import { ActionsContent } from "../GlobalHeader/ActionsContent";
import { BaseMenu } from "../SiderMenu/BaseMenu";
import { renderLogoAndTitle } from "../SiderMenu/SiderMenu";
import { useStyle } from "./style";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var TopNavHeader = function TopNavHeader(props) {
var ref = useRef(null);
var onMenuHeaderClick = props.onMenuHeaderClick,
contentWidth = props.contentWidth,
rightContentRender = props.rightContentRender,
propsClassName = props.className,
style = props.style,
headerContentRender = props.headerContentRender,
layout = props.layout,
actionsRender = props.actionsRender;
var _useContext = useContext(ConfigProvider.ConfigContext),
getPrefixCls = _useContext.getPrefixCls;
var _useContext2 = useContext(ProProvider),
dark = _useContext2.dark;
var prefixCls = "".concat(props.prefixCls || getPrefixCls('pro'), "-top-nav-header");
var _useStyle = useStyle(prefixCls),
wrapSSR = _useStyle.wrapSSR,
hashId = _useStyle.hashId;
var renderKey = undefined;
if (props.menuHeaderRender !== undefined) {
renderKey = 'menuHeaderRender';
} else if (layout === 'mix' || layout === 'top') {
renderKey = 'headerTitleRender';
}
var headerDom = renderLogoAndTitle(_objectSpread(_objectSpread({}, props), {}, {
collapsed: false
}), renderKey);
var contentDom = useMemo(function () {
var _props$menuProps;
var defaultDom = /*#__PURE__*/_jsx(BaseMenu, _objectSpread(_objectSpread(_objectSpread({
theme: dark ? 'dark' : 'light'
}, props), {}, {
className: "".concat(prefixCls, "-base-menu ").concat(hashId)
}, props.menuProps), {}, {
style: _objectSpread({
width: '100%'
}, (_props$menuProps = props.menuProps) === null || _props$menuProps === void 0 ? void 0 : _props$menuProps.style),
collapsed: false,
menuRenderType: "header",
mode: "horizontal"
}));
if (headerContentRender) {
return headerContentRender(props, defaultDom);
}
return defaultDom;
}, [props, prefixCls, hashId, headerContentRender]);
return wrapSSR( /*#__PURE__*/_jsx("div", {
className: classNames(prefixCls, hashId, propsClassName, _defineProperty({}, "".concat(prefixCls, "-light"), true)),
style: style,
children: /*#__PURE__*/_jsxs("div", {
ref: ref,
className: classNames("".concat(prefixCls, "-main"), hashId, _defineProperty({}, "".concat(prefixCls, "-wide"), contentWidth === 'Fixed')),
children: [headerDom && /*#__PURE__*/_jsxs("div", {
className: classNames("".concat(prefixCls, "-main-left ").concat(hashId)),
onClick: onMenuHeaderClick,
children: [/*#__PURE__*/_jsx(AppsLogoComponents, _objectSpread({}, props)), /*#__PURE__*/_jsx("div", {
className: "".concat(prefixCls, "-logo ").concat(hashId),
id: "logo",
children: headerDom
}, "logo")]
}), /*#__PURE__*/_jsx("div", {
style: {
flex: 1
},
className: "".concat(prefixCls, "-menu ").concat(hashId),
children: contentDom
}), (rightContentRender || actionsRender || props.avatarProps) && /*#__PURE__*/_jsx(ActionsContent, _objectSpread(_objectSpread({
rightContentRender: rightContentRender
}, props), {}, {
prefixCls: prefixCls
}))]
})
}));
};
export { TopNavHeader };