@ant-design/pro-layout
Version:
97 lines • 4.14 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import { MenuOutlined } from '@ant-design/icons';
import { ConfigProvider } from 'antd';
import classNames from 'classnames';
import React, { useContext } from 'react';
import { clearMenuItem } from "../../utils/utils";
import { AppsLogoComponents, defaultRenderLogo } from "../AppsLogoComponents";
import { renderLogoAndTitle } from "../SiderMenu/SiderMenu";
import { TopNavHeader } from "../TopNavHeader";
import { ActionsContent } from "./ActionsContent";
import { useStyle } from "./style";
import { jsx as _jsx } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var renderLogo = function renderLogo(menuHeaderRender, logoDom) {
if (menuHeaderRender === false) {
return null;
}
if (menuHeaderRender) {
return menuHeaderRender(logoDom, null);
}
return logoDom;
};
var GlobalHeader = function GlobalHeader(props) {
var isMobile = props.isMobile,
logo = props.logo,
collapsed = props.collapsed,
onCollapse = props.onCollapse,
rightContentRender = props.rightContentRender,
menuHeaderRender = props.menuHeaderRender,
onMenuHeaderClick = props.onMenuHeaderClick,
propClassName = props.className,
style = props.style,
layout = props.layout,
children = props.children,
splitMenus = props.splitMenus,
menuData = props.menuData,
prefixCls = props.prefixCls;
var _useContext = useContext(ConfigProvider.ConfigContext),
getPrefixCls = _useContext.getPrefixCls,
direction = _useContext.direction;
var baseClassName = "".concat(prefixCls || getPrefixCls('pro'), "-global-header");
var _useStyle = useStyle(baseClassName),
wrapSSR = _useStyle.wrapSSR,
hashId = _useStyle.hashId;
var className = classNames(propClassName, baseClassName, hashId);
if (layout === 'mix' && !isMobile && splitMenus) {
var noChildrenMenuData = (menuData || []).map(function (item) {
return _objectSpread(_objectSpread({}, item), {}, {
children: undefined,
routes: undefined
});
});
var clearMenuData = clearMenuItem(noChildrenMenuData);
return /*#__PURE__*/_jsx(TopNavHeader, _objectSpread(_objectSpread({
mode: "horizontal"
}, props), {}, {
splitMenus: false,
menuData: clearMenuData
}));
}
var logoClassNames = classNames("".concat(baseClassName, "-logo"), hashId, _defineProperty(_defineProperty(_defineProperty({}, "".concat(baseClassName, "-logo-rtl"), direction === 'rtl'), "".concat(baseClassName, "-logo-mix"), layout === 'mix'), "".concat(baseClassName, "-logo-mobile"), isMobile));
var logoDom = /*#__PURE__*/_jsx("span", {
className: logoClassNames,
children: /*#__PURE__*/_jsx("a", {
children: defaultRenderLogo(logo)
})
}, "logo");
return wrapSSR( /*#__PURE__*/_jsxs("div", {
className: className,
style: _objectSpread({}, style),
children: [isMobile && /*#__PURE__*/_jsx("span", {
className: "".concat(baseClassName, "-collapsed-button ").concat(hashId).trim(),
onClick: function onClick() {
onCollapse === null || onCollapse === void 0 || onCollapse(!collapsed);
},
children: /*#__PURE__*/_jsx(MenuOutlined, {})
}), isMobile && renderLogo(menuHeaderRender, logoDom), layout === 'mix' && !isMobile && /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(AppsLogoComponents, _objectSpread({}, props)), /*#__PURE__*/_jsx("div", {
className: logoClassNames,
onClick: onMenuHeaderClick,
children: renderLogoAndTitle(_objectSpread(_objectSpread({}, props), {}, {
collapsed: false
}), 'headerTitleRender')
})]
}), /*#__PURE__*/_jsx("div", {
style: {
flex: 1
},
children: children
}), (rightContentRender || props.actionsRender || props.avatarProps) && /*#__PURE__*/_jsx(ActionsContent, _objectSpread({
rightContentRender: rightContentRender
}, props))]
}));
};
export { GlobalHeader };