UNPKG

29.6 kBJavaScriptView Raw
1import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
2import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
3import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
4import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
5import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
6import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
7var _excluded = ["id", "defaultMessage"],
8 _excluded2 = ["fixSiderbar", "navTheme", "layout"];
9import { isNeedOpenHash, ProConfigProvider, ProProvider } from '@ant-design/pro-provider';
10import { isBrowser, useDocumentTitle, useMountMergeState } from '@ant-design/pro-utils';
11import { getMatchMenu } from '@umijs/route-utils';
12import { ConfigProvider, Layout } from 'antd';
13import classNames from 'classnames';
14import Omit from 'omit.js';
15import useMergedState from "rc-util/es/hooks/useMergedState";
16import warning from "rc-util/es/warning";
17import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
18import useSWR, { useSWRConfig } from 'swr';
19import useAntdMediaQuery from 'use-media-antd-query';
20import { Logo } from "./assert/Logo";
21import { DefaultFooter as Footer } from "./components/Footer";
22import { DefaultHeader as Header } from "./components/Header";
23import { PageLoading } from "./components/PageLoading";
24import { SiderMenu } from "./components/SiderMenu";
25import { RouteContext } from "./context/RouteContext";
26import { defaultSettings } from "./defaultSettings";
27import { getPageTitleInfo } from "./getPageTitle";
28import { gLocaleObject } from "./locales";
29import { useStyle } from "./style";
30import { getBreadcrumbProps } from "./utils/getBreadcrumbProps";
31import { getMenuData } from "./utils/getMenuData";
32import { useCurrentMenuLayoutProps } from "./utils/useCurrentMenuLayoutProps";
33import { clearMenuItem } from "./utils/utils";
34import { WrapContent } from "./WrapContent";
35import { jsx as _jsx } from "react/jsx-runtime";
36import { Fragment as _Fragment } from "react/jsx-runtime";
37import { jsxs as _jsxs } from "react/jsx-runtime";
38var layoutIndex = 0;
39var headerRender = function headerRender(props, matchMenuKeys) {
40 var _props$stylish;
41 if (props.headerRender === false || props.pure) {
42 return null;
43 }
44 return /*#__PURE__*/_jsx(Header, _objectSpread(_objectSpread({
45 matchMenuKeys: matchMenuKeys
46 }, props), {}, {
47 stylish: (_props$stylish = props.stylish) === null || _props$stylish === void 0 ? void 0 : _props$stylish.header
48 }));
49};
50var footerRender = function footerRender(props) {
51 if (props.footerRender === false || props.pure) {
52 return null;
53 }
54 if (props.footerRender) {
55 return props.footerRender(_objectSpread({}, props), /*#__PURE__*/_jsx(Footer, {}));
56 }
57 return null;
58};
59var renderSiderMenu = function renderSiderMenu(props, matchMenuKeys) {
60 var _props$stylish3;
61 var layout = props.layout,
62 isMobile = props.isMobile,
63 selectedKeys = props.selectedKeys,
64 openKeys = props.openKeys,
65 splitMenus = props.splitMenus,
66 suppressSiderWhenMenuEmpty = props.suppressSiderWhenMenuEmpty,
67 menuRender = props.menuRender;
68 if (props.menuRender === false || props.pure) {
69 return null;
70 }
71 var menuData = props.menuData;
72
73 /** 如果是分割菜单模式，需要专门实现一下 */
74 if (splitMenus && (openKeys !== false || layout === 'mix') && !isMobile) {
75 var _ref = selectedKeys || matchMenuKeys,
76 _ref2 = _slicedToArray(_ref, 1),
77 key = _ref2[0];
78 if (key) {
79 var _props$menuData, _props$menuData$find;
80 menuData = ((_props$menuData = props.menuData) === null || _props$menuData === void 0 ? void 0 : (_props$menuData$find = _props$menuData.find(function (item) {
81 return item.key === key;
82 })) === null || _props$menuData$find === void 0 ? void 0 : _props$menuData$find.children) || [];
83 } else {
84 menuData = [];
85 }
86 }
87 // 这里走了可以少一次循环
88 var clearMenuData = clearMenuItem(menuData || []);
89 if (clearMenuData && (clearMenuData === null || clearMenuData === void 0 ? void 0 : clearMenuData.length) < 1 && (splitMenus || suppressSiderWhenMenuEmpty)) {
90 return null;
91 }
92 if (layout === 'top' && !isMobile) {
93 var _props$stylish2;
94 return /*#__PURE__*/_jsx(SiderMenu, _objectSpread(_objectSpread({
95 matchMenuKeys: matchMenuKeys
96 }, props), {}, {
97 hide: true,
98 stylish: (_props$stylish2 = props.stylish) === null || _props$stylish2 === void 0 ? void 0 : _props$stylish2.sider
99 }));
100 }
101 var defaultDom = /*#__PURE__*/_jsx(SiderMenu, _objectSpread(_objectSpread({
102 matchMenuKeys: matchMenuKeys
103 }, props), {}, {
104 // 这里走了可以少一次循环
105 menuData: clearMenuData,
106 stylish: (_props$stylish3 = props.stylish) === null || _props$stylish3 === void 0 ? void 0 : _props$stylish3.sider
107 }));
108 if (menuRender) {
109 return menuRender(props, defaultDom);
110 }
111 return defaultDom;
112};
113var defaultPageTitleRender = function defaultPageTitleRender(pageProps, props) {
114 var pageTitleRender = props.pageTitleRender;
115 var pageTitleInfo = getPageTitleInfo(pageProps);
116 if (pageTitleRender === false) {
117 return {
118 title: props.title || '',
119 id: '',
120 pageName: ''
121 };
122 }
123 if (pageTitleRender) {
124 var title = pageTitleRender(pageProps, pageTitleInfo.title, pageTitleInfo);
125 if (typeof title === 'string') {
126 return getPageTitleInfo(_objectSpread(_objectSpread({}, pageTitleInfo), {}, {
127 title: title
128 }));
129 }
130 warning(typeof title === 'string', 'pro-layout: renderPageTitle return value should be a string');
131 }
132 return pageTitleInfo;
133};
134var getpaddingInlineStart = function getpaddingInlineStart(hasLeftPadding, collapsed, siderWidth) {
135 if (hasLeftPadding) {
136 return collapsed ? 60 : siderWidth;
137 }
138 return 0;
139};
140
141/**
142 * 🌃 Powerful and easy to use beautiful layout 🏄‍ Support multiple topics and layout types
143 *
144 * @param props
145 */
146var BaseProLayout = function BaseProLayout(props) {
147 var _props$prefixCls, _classNames, _location$pathname, _token$layout, _token$layout$sider, _token$layout2, _token$layout2$sider, _token$layout3, _token$layout3$sider, _token$layout4, _token$layout4$sider, _token$layout5, _token$layout5$sider, _token$layout6, _token$layout6$sider, _token$layout7, _token$layout7$sider, _token$layout8, _token$layout8$sider, _token$layout9, _token$layout9$sider, _token$layout10, _token$layout10$sider, _token$layout11, _token$layout11$heade, _token$layout12, _token$layout12$heade, _token$layout13, _token$layout13$heade, _token$layout14, _token$layout14$heade, _token$layout15, _token$layout15$heade, _token$layout16, _token$layout16$heade, _token$layout17, _token$layout17$heade, _token$layout18, _token$layout18$heade, _token$layout19, _token$layout19$heade, _token$layout20, _token$layout20$heade, _token$layout21, _token$layout21$pageC;
148 var _ref3 = props || {},
149 children = _ref3.children,
150 propsOnCollapse = _ref3.onCollapse,
151 _ref3$location = _ref3.location,
152 location = _ref3$location === void 0 ? {
153 pathname: '/'
154 } : _ref3$location,
155 contentStyle = _ref3.contentStyle,
156 route = _ref3.route,
157 defaultCollapsed = _ref3.defaultCollapsed,
158 style = _ref3.style,
159 propsSiderWidth = _ref3.siderWidth,
160 menu = _ref3.menu,
161 siderMenuType = _ref3.siderMenuType,
162 propsIsChildrenLayout = _ref3.isChildrenLayout,
163 menuDataRender = _ref3.menuDataRender,
164 actionRef = _ref3.actionRef,
165 bgLayoutImgList = _ref3.bgLayoutImgList,
166 propsFormatMessage = _ref3.formatMessage,
167 loading = _ref3.loading;
168 var siderWidth = useMemo(function () {
169 if (propsSiderWidth) return propsSiderWidth;
170 if (props.layout === 'mix') return 215;
171 return 256;
172 }, [props.layout, propsSiderWidth]);
173 var context = useContext(ConfigProvider.ConfigContext);
174 var prefixCls = (_props$prefixCls = props.prefixCls) !== null && _props$prefixCls !== void 0 ? _props$prefixCls : context.getPrefixCls('pro');
175 var _useMountMergeState = useMountMergeState(false, {
176 value: menu === null || menu === void 0 ? void 0 : menu.loading,
177 onChange: menu === null || menu === void 0 ? void 0 : menu.onLoadingChange
178 }),
179 _useMountMergeState2 = _slicedToArray(_useMountMergeState, 2),
180 menuLoading = _useMountMergeState2[0],
181 setMenuLoading = _useMountMergeState2[1];
182
183 // give a default key for swr
184 var _useState = useState(function () {
185 layoutIndex += 1;
186 return "pro-layout-".concat(layoutIndex);
187 }),
188 _useState2 = _slicedToArray(_useState, 1),
189 defaultId = _useState2[0];
190
191 /**
192 * 处理国际化相关 formatMessage
193 * 如果有用户配置的以用户为主
194 * 如果没有用自己实现的
195 */
196 var formatMessage = useCallback(function (_ref4) {
197 var id = _ref4.id,
198 defaultMessage = _ref4.defaultMessage,
199 restParams = _objectWithoutProperties(_ref4, _excluded);
200 if (propsFormatMessage) {
201 return propsFormatMessage(_objectSpread({
202 id: id,
203 defaultMessage: defaultMessage
204 }, restParams));
205 }
206 var locales = gLocaleObject();
207 return locales[id] ? locales[id] : defaultMessage;
208 }, [propsFormatMessage]);
209 var _useSWR = useSWR([defaultId, menu === null || menu === void 0 ? void 0 : menu.params], /*#__PURE__*/function () {
210 var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(_ref5) {
211 var _menu$request;
212 var _ref7, params, menuDataItems;
213 return _regeneratorRuntime().wrap(function _callee$(_context) {
214 while (1) switch (_context.prev = _context.next) {
215 case 0:
216 _ref7 = _slicedToArray(_ref5, 2), params = _ref7[1];
217 setMenuLoading(true);
218 _context.next = 4;
219 return menu === null || menu === void 0 ? void 0 : (_menu$request = menu.request) === null || _menu$request === void 0 ? void 0 : _menu$request.call(menu, params || {}, (route === null || route === void 0 ? void 0 : route.children) || (route === null || route === void 0 ? void 0 : route.routes) || []);
220 case 4:
221 menuDataItems = _context.sent;
222 setMenuLoading(false);
223 return _context.abrupt("return", menuDataItems);
224 case 7:
225 case "end":
226 return _context.stop();
227 }
228 }, _callee);
229 }));
230 return function (_x) {
231 return _ref6.apply(this, arguments);
232 };
233 }(), {
234 revalidateOnFocus: false,
235 shouldRetryOnError: false,
236 revalidateOnReconnect: false
237 }),
238 data = _useSWR.data,
239 mutate = _useSWR.mutate,
240 isLoading = _useSWR.isLoading;
241 useEffect(function () {
242 setMenuLoading(isLoading);
243 // eslint-disable-next-line react-hooks/exhaustive-deps
244 }, [isLoading]);
245 var _useSWRConfig = useSWRConfig(),
246 cache = _useSWRConfig.cache;
247 useEffect(function () {
248 return function () {
249 if (cache instanceof Map) cache.clear();
250 };
251 // eslint-disable-next-line react-hooks/exhaustive-deps
252 }, []);
253 var menuInfoData = useMemo(function () {
254 return getMenuData(data || (route === null || route === void 0 ? void 0 : route.children) || (route === null || route === void 0 ? void 0 : route.routes) || [], menu, formatMessage, menuDataRender);
255 }, [formatMessage, menu, menuDataRender, data, route === null || route === void 0 ? void 0 : route.children, route === null || route === void 0 ? void 0 : route.routes]);
256 var _ref8 = menuInfoData || {},
257 _ref8$breadcrumb = _ref8.breadcrumb,
258 breadcrumb = _ref8$breadcrumb === void 0 ? {} : _ref8$breadcrumb,
259 breadcrumbMap = _ref8.breadcrumbMap,
260 _ref8$menuData = _ref8.menuData,
261 menuData = _ref8$menuData === void 0 ? [] : _ref8$menuData;
262 if (actionRef && menu !== null && menu !== void 0 && menu.request) {
263 actionRef.current = {
264 reload: function reload() {
265 mutate();
266 }
267 };
268 }
269 var matchMenus = useMemo(function () {
270 return getMatchMenu(location.pathname || '/', menuData || [], true);
271 }, [location.pathname, menuData]);
272 var matchMenuKeys = useMemo(function () {
273 return Array.from(new Set(matchMenus.map(function (item) {
274 return item.key || item.path || '';
275 })));
276 }, [matchMenus]);
277
278 // 当前选中的menu，一般不会为空
279 var currentMenu = matchMenus[matchMenus.length - 1] || {};
280 var currentMenuLayoutProps = useCurrentMenuLayoutProps(currentMenu);
281 var _props$currentMenuLay = _objectSpread(_objectSpread({}, props), currentMenuLayoutProps),
282 fixSiderbar = _props$currentMenuLay.fixSiderbar,
283 navTheme = _props$currentMenuLay.navTheme,
284 propsLayout = _props$currentMenuLay.layout,
285 rest = _objectWithoutProperties(_props$currentMenuLay, _excluded2);
286 var colSize = useAntdMediaQuery();
287 var isMobile = (colSize === 'sm' || colSize === 'xs') && !props.disableMobile;
288
289 // If it is a fix menu, calculate padding
290 // don't need padding in phone mode
291 /* Checking if the menu is loading and if it is, it will return a skeleton loading screen. */
292 var hasLeftPadding = propsLayout !== 'top' && !isMobile;
293 var _useMergedState = useMergedState(function () {
294 if (defaultCollapsed !== undefined) return defaultCollapsed;
295 if (isNeedOpenHash() === false) return false;
296 if (isMobile) return true;
297 if (colSize === 'md') return true;
298 return false;
299 }, {
300 value: props.collapsed,
301 onChange: propsOnCollapse
302 }),
303 _useMergedState2 = _slicedToArray(_useMergedState, 2),
304 collapsed = _useMergedState2[0],
305 onCollapse = _useMergedState2[1];
306
307 // Splicing parameters, adding menuData and formatMessage in props
308 var defaultProps = Omit(_objectSpread(_objectSpread(_objectSpread({
309 prefixCls: prefixCls
310 }, props), {}, {
311 siderWidth: siderWidth
312 }, currentMenuLayoutProps), {}, {
313 formatMessage: formatMessage,
314 breadcrumb: breadcrumb,
315 menu: _objectSpread(_objectSpread({}, menu), {}, {
316 type: siderMenuType || (menu === null || menu === void 0 ? void 0 : menu.type),
317 loading: menuLoading
318 }),
319 layout: propsLayout
320 }), ['className', 'style', 'breadcrumbRender']);
321
322 // gen page title
323 var pageTitleInfo = defaultPageTitleRender(_objectSpread(_objectSpread({
324 pathname: location.pathname
325 }, defaultProps), {}, {
326 breadcrumbMap: breadcrumbMap
327 }), props);
328
329 // gen breadcrumbProps, parameter for pageHeader
330 var breadcrumbProps = getBreadcrumbProps(_objectSpread(_objectSpread({}, defaultProps), {}, {
331 breadcrumbRender: props.breadcrumbRender,
332 breadcrumbMap: breadcrumbMap
333 }), props);
334
335 // render sider dom
336 var siderMenuDom = renderSiderMenu(_objectSpread(_objectSpread({}, defaultProps), {}, {
337 menuData: menuData,
338 onCollapse: onCollapse,
339 isMobile: isMobile,
340 collapsed: collapsed
341 }), matchMenuKeys);
342
343 // render header dom
344 var headerDom = headerRender(_objectSpread(_objectSpread({}, defaultProps), {}, {
345 children: null,
346 hasSiderMenu: !!siderMenuDom,
347 menuData: menuData,
348 isMobile: isMobile,
349 collapsed: collapsed,
350 onCollapse: onCollapse
351 }), matchMenuKeys);
352
353 // render footer dom
354 var footerDom = footerRender(_objectSpread({
355 isMobile: isMobile,
356 collapsed: collapsed
357 }, defaultProps));
358 var _useContext = useContext(RouteContext),
359 contextIsChildrenLayout = _useContext.isChildrenLayout;
360
361 // 如果 props 中定义，以 props 为准
362 var isChildrenLayout = propsIsChildrenLayout !== undefined ? propsIsChildrenLayout : contextIsChildrenLayout;
363 var proLayoutClassName = "".concat(prefixCls, "-layout");
364 var _useStyle = useStyle(proLayoutClassName),
365 wrapSSR = _useStyle.wrapSSR,
366 hashId = _useStyle.hashId;
367
368 // gen className
369 var className = classNames(props.className, hashId, 'ant-design-pro', proLayoutClassName, (_classNames = {}, _defineProperty(_classNames, "screen-".concat(colSize), colSize), _defineProperty(_classNames, "".concat(proLayoutClassName, "-top-menu"), propsLayout === 'top'), _defineProperty(_classNames, "".concat(proLayoutClassName, "-is-children"), isChildrenLayout), _defineProperty(_classNames, "".concat(proLayoutClassName, "-fix-siderbar"), fixSiderbar), _defineProperty(_classNames, "".concat(proLayoutClassName, "-").concat(propsLayout), propsLayout), _classNames));
370
371 /** 计算 slider 的宽度 */
372 var leftSiderWidth = getpaddingInlineStart(!!hasLeftPadding, collapsed, siderWidth);
373
374 // siderMenuDom 为空的时候，不需要 padding
375 var genLayoutStyle = {
376 position: 'relative'
377 };
378
379 // if is some layout children, don't need min height
380 if (isChildrenLayout || contentStyle && contentStyle.minHeight) {
381 genLayoutStyle.minHeight = 0;
382 }
383
384 /** 页面切换的时候触发 */
385 useEffect(function () {
386 var _props$onPageChange;
387 (_props$onPageChange = props.onPageChange) === null || _props$onPageChange === void 0 ? void 0 : _props$onPageChange.call(props, props.location);
388 // eslint-disable-next-line react-hooks/exhaustive-deps
389 }, [location.pathname, (_location$pathname = location.pathname) === null || _location$pathname === void 0 ? void 0 : _location$pathname.search]);
390 var _useState3 = useState(false),
391 _useState4 = _slicedToArray(_useState3, 2),
392 hasFooterToolbar = _useState4[0],
393 setHasFooterToolbar = _useState4[1];
394 /**
395 * 使用number是因为多标签页的时候有多个 PageContainer，只有有任意一个就应该展示这个className
396 */
397 var _useState5 = useState(0),
398 _useState6 = _slicedToArray(_useState5, 2),
399 hasPageContainer = _useState6[0],
400 setHasPageContainer = _useState6[1];
401 useDocumentTitle(pageTitleInfo, props.title || false);
402 var bgImgStyleList = useMemo(function () {
403 if (bgLayoutImgList && bgLayoutImgList.length > 0) {
404 return bgLayoutImgList.map(function (item, index) {
405 return /*#__PURE__*/_jsx("img", {
406 src: item.src,
407 style: _objectSpread({
408 position: 'absolute'
409 }, item)
410 }, index);
411 });
412 }
413 return null;
414 }, [bgLayoutImgList]);
415 var _useContext2 = useContext(ProProvider),
416 token = _useContext2.token;
417 return wrapSSR( /*#__PURE__*/_jsx(RouteContext.Provider, {
418 value: _objectSpread(_objectSpread({}, defaultProps), {}, {
419 breadcrumb: breadcrumbProps,
420 menuData: menuData,
421 isMobile: isMobile,
422 collapsed: collapsed,
423 hasPageContainer: hasPageContainer,
424 setHasPageContainer: setHasPageContainer,
425 isChildrenLayout: true,
426 title: pageTitleInfo.pageName,
427 hasSiderMenu: !!siderMenuDom,
428 hasHeader: !!headerDom,
429 siderWidth: leftSiderWidth,
430 hasFooter: !!footerDom,
431 hasFooterToolbar: hasFooterToolbar,
432 setHasFooterToolbar: setHasFooterToolbar,
433 pageTitleInfo: pageTitleInfo,
434 matchMenus: matchMenus,
435 matchMenuKeys: matchMenuKeys,
436 currentMenu: currentMenu
437 }),
438 children: props.pure ? /*#__PURE__*/_jsx(_Fragment, {
439 children: children
440 }) : /*#__PURE__*/_jsxs("div", {
441 className: className,
442 children: [/*#__PURE__*/_jsx("div", {
443 className: classNames("".concat(proLayoutClassName, "-bg-list"), hashId),
444 children: bgImgStyleList
445 }), /*#__PURE__*/_jsxs(Layout, {
446 style: _objectSpread({
447 minHeight: '100%',
448 // hack style
449 flexDirection: siderMenuDom ? 'row' : undefined
450 }, style),
451 children: [/*#__PURE__*/_jsx(ConfigProvider
452 // @ts-ignore
453 , {
454 theme: {
455 hashed: isNeedOpenHash(),
456 components: {
457 Menu: {
458 colorItemBg: (token === null || token === void 0 ? void 0 : (_token$layout = token.layout) === null || _token$layout === void 0 ? void 0 : (_token$layout$sider = _token$layout.sider) === null || _token$layout$sider === void 0 ? void 0 : _token$layout$sider.colorMenuBackground) || 'transparent',
459 colorSubItemBg: (token === null || token === void 0 ? void 0 : (_token$layout2 = token.layout) === null || _token$layout2 === void 0 ? void 0 : (_token$layout2$sider = _token$layout2.sider) === null || _token$layout2$sider === void 0 ? void 0 : _token$layout2$sider.colorMenuBackground) || 'transparent',
460 radiusItem: 4,
461 controlHeightLG: (token === null || token === void 0 ? void 0 : (_token$layout3 = token.layout) === null || _token$layout3 === void 0 ? void 0 : (_token$layout3$sider = _token$layout3.sider) === null || _token$layout3$sider === void 0 ? void 0 : _token$layout3$sider.menuHeight) || (token === null || token === void 0 ? void 0 : token.controlHeightLG),
462 colorItemBgSelected: (token === null || token === void 0 ? void 0 : (_token$layout4 = token.layout) === null || _token$layout4 === void 0 ? void 0 : (_token$layout4$sider = _token$layout4.sider) === null || _token$layout4$sider === void 0 ? void 0 : _token$layout4$sider.colorBgMenuItemSelected) || (token === null || token === void 0 ? void 0 : token.colorBgTextHover),
463 colorItemBgActive: (token === null || token === void 0 ? void 0 : (_token$layout5 = token.layout) === null || _token$layout5 === void 0 ? void 0 : (_token$layout5$sider = _token$layout5.sider) === null || _token$layout5$sider === void 0 ? void 0 : _token$layout5$sider.colorBgMenuItemHover) || (token === null || token === void 0 ? void 0 : token.colorBgTextHover),
464 colorItemBgSelectedHorizontal: (token === null || token === void 0 ? void 0 : (_token$layout6 = token.layout) === null || _token$layout6 === void 0 ? void 0 : (_token$layout6$sider = _token$layout6.sider) === null || _token$layout6$sider === void 0 ? void 0 : _token$layout6$sider.colorBgMenuItemSelected) || (token === null || token === void 0 ? void 0 : token.colorBgTextHover),
465 colorActiveBarWidth: 0,
466 colorActiveBarHeight: 0,
467 colorActiveBarBorderSize: 0,
468 colorItemText: (token === null || token === void 0 ? void 0 : (_token$layout7 = token.layout) === null || _token$layout7 === void 0 ? void 0 : (_token$layout7$sider = _token$layout7.sider) === null || _token$layout7$sider === void 0 ? void 0 : _token$layout7$sider.colorTextMenu) || (token === null || token === void 0 ? void 0 : token.colorTextSecondary),
469 colorItemTextHover: (token === null || token === void 0 ? void 0 : (_token$layout8 = token.layout) === null || _token$layout8 === void 0 ? void 0 : (_token$layout8$sider = _token$layout8.sider) === null || _token$layout8$sider === void 0 ? void 0 : _token$layout8$sider.colorTextMenuActive) || 'rgba(0, 0, 0, 0.85)',
470 colorItemTextSelected: (token === null || token === void 0 ? void 0 : (_token$layout9 = token.layout) === null || _token$layout9 === void 0 ? void 0 : (_token$layout9$sider = _token$layout9.sider) === null || _token$layout9$sider === void 0 ? void 0 : _token$layout9$sider.colorTextMenuSelected) || 'rgba(0, 0, 0, 1)',
471 colorBgElevated: (token === null || token === void 0 ? void 0 : (_token$layout10 = token.layout) === null || _token$layout10 === void 0 ? void 0 : (_token$layout10$sider = _token$layout10.sider) === null || _token$layout10$sider === void 0 ? void 0 : _token$layout10$sider.colorBgMenuItemCollapsedElevated) || '#fff'
472 }
473 }
474 },
475 children: siderMenuDom
476 }), /*#__PURE__*/_jsxs("div", {
477 style: genLayoutStyle,
478 className: "".concat(proLayoutClassName, "-container ").concat(hashId),
479 children: [/*#__PURE__*/_jsx(ConfigProvider
480 // @ts-ignore
481 , {
482 theme: {
483 hashed: isNeedOpenHash(),
484 components: {
485 Layout: {
486 colorBgHeader: 'transparent',
487 colorBgBody: 'transparent'
488 },
489 Menu: {
490 colorItemBg: (token === null || token === void 0 ? void 0 : (_token$layout11 = token.layout) === null || _token$layout11 === void 0 ? void 0 : (_token$layout11$heade = _token$layout11.header) === null || _token$layout11$heade === void 0 ? void 0 : _token$layout11$heade.colorBgHeader) || 'transparent',
491 colorSubItemBg: (token === null || token === void 0 ? void 0 : (_token$layout12 = token.layout) === null || _token$layout12 === void 0 ? void 0 : (_token$layout12$heade = _token$layout12.header) === null || _token$layout12$heade === void 0 ? void 0 : _token$layout12$heade.colorBgHeader) || 'transparent',
492 radiusItem: 4,
493 colorItemBgSelected: (token === null || token === void 0 ? void 0 : (_token$layout13 = token.layout) === null || _token$layout13 === void 0 ? void 0 : (_token$layout13$heade = _token$layout13.header) === null || _token$layout13$heade === void 0 ? void 0 : _token$layout13$heade.colorBgMenuItemSelected) || (token === null || token === void 0 ? void 0 : token.colorBgTextHover),
494 colorItemBgActive: (token === null || token === void 0 ? void 0 : (_token$layout14 = token.layout) === null || _token$layout14 === void 0 ? void 0 : (_token$layout14$heade = _token$layout14.header) === null || _token$layout14$heade === void 0 ? void 0 : _token$layout14$heade.colorBgMenuItemHover) || (token === null || token === void 0 ? void 0 : token.colorBgTextHover),
495 colorItemBgSelectedHorizontal: (token === null || token === void 0 ? void 0 : (_token$layout15 = token.layout) === null || _token$layout15 === void 0 ? void 0 : (_token$layout15$heade = _token$layout15.header) === null || _token$layout15$heade === void 0 ? void 0 : _token$layout15$heade.colorBgMenuItemSelected) || (token === null || token === void 0 ? void 0 : token.colorBgTextHover),
496 colorActiveBarWidth: 0,
497 colorActiveBarHeight: 0,
498 colorActiveBarBorderSize: 0,
499 colorItemText: (token === null || token === void 0 ? void 0 : (_token$layout16 = token.layout) === null || _token$layout16 === void 0 ? void 0 : (_token$layout16$heade = _token$layout16.header) === null || _token$layout16$heade === void 0 ? void 0 : _token$layout16$heade.colorTextMenu) || (token === null || token === void 0 ? void 0 : token.colorTextSecondary),
500 colorItemTextHoverHorizontal: (token === null || token === void 0 ? void 0 : (_token$layout17 = token.layout) === null || _token$layout17 === void 0 ? void 0 : (_token$layout17$heade = _token$layout17.header) === null || _token$layout17$heade === void 0 ? void 0 : _token$layout17$heade.colorTextMenuActive) || (token === null || token === void 0 ? void 0 : token.colorText),
501 colorItemTextSelectedHorizontal: (token === null || token === void 0 ? void 0 : (_token$layout18 = token.layout) === null || _token$layout18 === void 0 ? void 0 : (_token$layout18$heade = _token$layout18.header) === null || _token$layout18$heade === void 0 ? void 0 : _token$layout18$heade.colorTextMenuSelected) || (token === null || token === void 0 ? void 0 : token.colorTextBase),
502 colorItemTextHover: (token === null || token === void 0 ? void 0 : (_token$layout19 = token.layout) === null || _token$layout19 === void 0 ? void 0 : (_token$layout19$heade = _token$layout19.header) === null || _token$layout19$heade === void 0 ? void 0 : _token$layout19$heade.colorTextMenuActive) || 'rgba(0, 0, 0, 0.85)',
503 colorItemTextSelected: (token === null || token === void 0 ? void 0 : (_token$layout20 = token.layout) === null || _token$layout20 === void 0 ? void 0 : (_token$layout20$heade = _token$layout20.header) === null || _token$layout20$heade === void 0 ? void 0 : _token$layout20$heade.colorTextMenuSelected) || 'rgba(0, 0, 0, 1)'
504 }
505 }
506 },
507 children: headerDom
508 }), /*#__PURE__*/_jsx(WrapContent, _objectSpread(_objectSpread({
509 hasPageContainer: hasPageContainer,
510 isChildrenLayout: isChildrenLayout
511 }, rest), {}, {
512 hasHeader: !!headerDom,
513 prefixCls: proLayoutClassName,
514 style: contentStyle,
515 children: loading ? /*#__PURE__*/_jsx(PageLoading, {}) : children
516 })), footerDom, hasFooterToolbar && /*#__PURE__*/_jsx("div", {
517 className: "".concat(proLayoutClassName, "-has-footer"),
518 style: {
519 height: 64,
520 marginBlockStart: token === null || token === void 0 ? void 0 : (_token$layout21 = token.layout) === null || _token$layout21 === void 0 ? void 0 : (_token$layout21$pageC = _token$layout21.pageContainer) === null || _token$layout21$pageC === void 0 ? void 0 : _token$layout21$pageC.paddingBlockPageContainerContent
521 }
522 })]
523 })]
524 })]
525 })
526 }));
527};
528var ProLayout = function ProLayout(props) {
529 var colorPrimary = props.colorPrimary;
530 var darkProps = props.navTheme !== undefined ? {
531 dark: props.navTheme === 'realDark'
532 } : {};
533 return /*#__PURE__*/_jsx(ConfigProvider, {
534 theme: colorPrimary ? {
535 token: {
536 colorPrimary: colorPrimary
537 }
538 } : undefined,
539 children: /*#__PURE__*/_jsx(ProConfigProvider, _objectSpread(_objectSpread({
540 autoClearCache: true
541 }, darkProps), {}, {
542 token: props.token,
543 prefixCls: props.prefixCls,
544 children: /*#__PURE__*/_jsx(BaseProLayout, _objectSpread(_objectSpread({
545 logo: /*#__PURE__*/_jsx(Logo, {})
546 }, defaultSettings), {}, {
547 location: isBrowser() ? window.location : undefined
548 }, props))
549 }))
550 });
551};
552export { ProLayout };
\No newline at end of file