@ant-design/pro-components 3.0.2-0 → 3.1.1-0

package/lib/layout/ProLayout.js

@@ -1,21 +1,14 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ProLayout = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _util = require("@rc-component/util");
 var _routeUtils = require("@umijs/route-utils");
 var _antd = require("antd");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = require("clsx");
 var _react = _interopRequireWildcard(require("react"));
 var _swr = _interopRequireWildcard(require("swr"));
 var _provider = require("../provider");
@@ -36,86 +29,84 @@ var _useCurrentMenuLayoutProps = require("./utils/useCurrentMenuLayoutProps");
 var _utils2 = require("./utils/utils");
 var _WrapContent = require("./WrapContent");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["id", "defaultMessage"],
-  _excluded2 = ["fixSiderbar", "navTheme", "layout"];
-var layoutIndex = 0;
-var headerRender = function headerRender(props, matchMenuKeys) {
-  var _props$stylish;
+let layoutIndex = 0;
+const headerRender = (props, matchMenuKeys) => {
   if (props.headerRender === false || props.pure) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header.DefaultHeader, (0, _objectSpread2.default)((0, _objectSpread2.default)({
-    matchMenuKeys: matchMenuKeys
-  }, props), {}, {
-    stylish: (_props$stylish = props.stylish) === null || _props$stylish === void 0 ? void 0 : _props$stylish.header
-  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header.DefaultHeader, {
+    matchMenuKeys: matchMenuKeys,
+    ...props,
+    stylish: props.stylish?.header
+  });
 };
-var footerRender = function footerRender(props) {
+const footerRender = props => {
   if (props.footerRender === false || props.pure) {
     return null;
   }
   if (props.footerRender) {
-    return props.footerRender((0, _objectSpread2.default)({}, props), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Footer.DefaultFooter, {}));
+    return props.footerRender({
+      ...props
+    }, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Footer.DefaultFooter, {}));
   }
   return null;
 };
-var renderSiderMenu = function renderSiderMenu(props, matchMenuKeys) {
-  var _props$stylish3;
-  var layout = props.layout,
-    isMobile = props.isMobile,
-    selectedKeys = props.selectedKeys,
-    openKeys = props.openKeys,
-    splitMenus = props.splitMenus,
-    suppressSiderWhenMenuEmpty = props.suppressSiderWhenMenuEmpty,
-    menuRender = props.menuRender;
+const renderSiderMenu = (props, matchMenuKeys) => {
+  const {
+    layout,
+    isMobile,
+    selectedKeys,
+    openKeys,
+    splitMenus,
+    suppressSiderWhenMenuEmpty,
+    menuRender
+  } = props;
   if (props.menuRender === false || props.pure) {
     return null;
   }
-  var menuData = props.menuData;
+  let {
+    menuData
+  } = props;
 
   /** 如果是分割菜单模式，需要专门实现一下 */
   if (splitMenus && (openKeys !== false || layout === 'mix') && !isMobile) {
-    var _ref = selectedKeys || matchMenuKeys,
-      _ref2 = (0, _slicedToArray2.default)(_ref, 1),
-      key = _ref2[0];
+    const [key] = selectedKeys || matchMenuKeys;
     if (key) {
-      var _props$menuData;
-      menuData = ((_props$menuData = props.menuData) === null || _props$menuData === void 0 || (_props$menuData = _props$menuData.find(function (item) {
-        return item.key === key;
-      })) === null || _props$menuData === void 0 ? void 0 : _props$menuData.children) || [];
+      menuData = props.menuData?.find(item => item.key === key)?.children || [];
     } else {
       menuData = [];
     }
   }
   // 这里走了可以少一次循环
-  var clearMenuData = (0, _utils2.clearMenuItem)(menuData || []);
-  if (clearMenuData && (clearMenuData === null || clearMenuData === void 0 ? void 0 : clearMenuData.length) < 1 && (splitMenus || suppressSiderWhenMenuEmpty)) {
+  const clearMenuData = (0, _utils2.clearMenuItem)(menuData || []);
+  if (clearMenuData && clearMenuData?.length < 1 && (splitMenus || suppressSiderWhenMenuEmpty)) {
     return null;
   }
   if (layout === 'top' && !isMobile) {
-    var _props$stylish2;
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SiderMenu.SiderMenu, (0, _objectSpread2.default)((0, _objectSpread2.default)({
-      matchMenuKeys: matchMenuKeys
-    }, props), {}, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SiderMenu.SiderMenu, {
+      matchMenuKeys: matchMenuKeys,
+      ...props,
       hide: true,
-      stylish: (_props$stylish2 = props.stylish) === null || _props$stylish2 === void 0 ? void 0 : _props$stylish2.sider
-    }));
+      stylish: props.stylish?.sider
+    });
   }
-  var defaultDom = /*#__PURE__*/(0, _jsxRuntime.jsx)(_SiderMenu.SiderMenu, (0, _objectSpread2.default)((0, _objectSpread2.default)({
-    matchMenuKeys: matchMenuKeys
-  }, props), {}, {
+  const defaultDom = /*#__PURE__*/(0, _jsxRuntime.jsx)(_SiderMenu.SiderMenu, {
+    matchMenuKeys: matchMenuKeys,
+    ...props,
     // 这里走了可以少一次循环
     menuData: clearMenuData,
-    stylish: (_props$stylish3 = props.stylish) === null || _props$stylish3 === void 0 ? void 0 : _props$stylish3.sider
-  }));
+    stylish: props.stylish?.sider
+  });
   if (menuRender) {
     return menuRender(props, defaultDom);
   }
   return defaultDom;
 };
-var defaultPageTitleRender = function defaultPageTitleRender(pageProps, props) {
-  var pageTitleRender = props.pageTitleRender;
-  var pageTitleInfo = (0, _getPageTitle.getPageTitleInfo)(pageProps);
+const defaultPageTitleRender = (pageProps, props) => {
+  const {
+    pageTitleRender
+  } = props;
+  const pageTitleInfo = (0, _getPageTitle.getPageTitleInfo)(pageProps);
   if (pageTitleRender === false) {
     return {
       title: props.title || '',
@@ -124,11 +115,12 @@ var defaultPageTitleRender = function defaultPageTitleRender(pageProps, props) {
     };
   }
   if (pageTitleRender) {
-    var title = pageTitleRender(pageProps, pageTitleInfo.title, pageTitleInfo);
+    const title = pageTitleRender(pageProps, pageTitleInfo.title, pageTitleInfo);
     if (typeof title === 'string') {
-      return (0, _getPageTitle.getPageTitleInfo)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, pageTitleInfo), {}, {
-        title: title
-      }));
+      return (0, _getPageTitle.getPageTitleInfo)({
+        ...pageTitleInfo,
+        title
+      });
     }
     (0, _util.warning)(typeof title === 'string', 'pro-layout: renderPageTitle return value should be a string');
     // 当 pageTitleRender 返回非字符串值时，返回默认的 pageTitleInfo
@@ -137,7 +129,7 @@ var defaultPageTitleRender = function defaultPageTitleRender(pageProps, props) {
   }
   return pageTitleInfo;
 };
-var getPaddingInlineStart = function getPaddingInlineStart(hasLeftPadding, collapsed, siderWidth) {
+const getPaddingInlineStart = (hasLeftPadding, collapsed, siderWidth) => {
   if (hasLeftPadding) {
     return collapsed ? 64 : siderWidth;
   }
@@ -149,237 +141,232 @@ var getPaddingInlineStart = function getPaddingInlineStart(hasLeftPadding, colla
  *
  * @param props
  */
-var BaseProLayout = function BaseProLayout(props) {
-  var _props$prefixCls, _location$pathname, _token$layout, _token$layout2, _token$layout3, _token$layout4, _token$layout5, _token$layout6, _token$layout7, _token$layout8, _token$layout9, _token$layout10, _token$layout11, _token$layout12;
-  var _ref3 = props || {},
-    children = _ref3.children,
-    propsOnCollapse = _ref3.onCollapse,
-    _ref3$location = _ref3.location,
-    location = _ref3$location === void 0 ? {
+const BaseProLayout = props => {
+  const {
+    children,
+    onCollapse: propsOnCollapse,
+    location = {
       pathname: '/'
-    } : _ref3$location,
-    contentStyle = _ref3.contentStyle,
-    route = _ref3.route,
-    defaultCollapsed = _ref3.defaultCollapsed,
-    style = _ref3.style,
-    propsSiderWidth = _ref3.siderWidth,
-    menu = _ref3.menu,
-    siderMenuType = _ref3.siderMenuType,
-    propsIsChildrenLayout = _ref3.isChildrenLayout,
-    menuDataRender = _ref3.menuDataRender,
-    actionRef = _ref3.actionRef,
-    bgLayoutImgList = _ref3.bgLayoutImgList,
-    propsFormatMessage = _ref3.formatMessage,
-    loading = _ref3.loading;
-  var siderWidth = (0, _react.useMemo)(function () {
+    },
+    contentStyle,
+    route,
+    defaultCollapsed,
+    style,
+    siderWidth: propsSiderWidth,
+    menu,
+    siderMenuType,
+    isChildrenLayout: propsIsChildrenLayout,
+    menuDataRender,
+    actionRef,
+    bgLayoutImgList,
+    formatMessage: propsFormatMessage,
+    loading
+  } = props || {};
+  const siderWidth = (0, _react.useMemo)(() => {
     if (propsSiderWidth) return propsSiderWidth;
     if (props.layout === 'mix') return 215;
     return 256;
   }, [props.layout, propsSiderWidth]);
-  var context = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
-  var prefixCls = (_props$prefixCls = props.prefixCls) !== null && _props$prefixCls !== void 0 ? _props$prefixCls : context.getPrefixCls('pro');
-  var _useMountMergeState = (0, _utils.useMountMergeState)(false, {
-      value: menu === null || menu === void 0 ? void 0 : menu.loading,
-      onChange: menu === null || menu === void 0 ? void 0 : menu.onLoadingChange
-    }),
-    _useMountMergeState2 = (0, _slicedToArray2.default)(_useMountMergeState, 2),
-    menuLoading = _useMountMergeState2[0],
-    setMenuLoading = _useMountMergeState2[1];
+  const context = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
+  const prefixCls = props.prefixCls ?? context.getPrefixCls('pro');
+  const [menuLoading, setMenuLoadingInner] = (0, _util.useControlledState)(false, menu?.loading);
+  const setMenuLoading = (0, _react.useCallback)(updater => {
+    setMenuLoadingInner(prev => {
+      const next = typeof updater === 'function' ? updater(prev) : updater;
+      menu?.onLoadingChange?.(next);
+      return next;
+    });
+  }, [menu?.onLoadingChange]);
 
   // give a default key for swr
-  var _useState = (0, _react.useState)(function () {
-      layoutIndex += 1;
-      return "pro-layout-".concat(layoutIndex);
-    }),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 1),
-    defaultId = _useState2[0];
+  const [defaultId] = (0, _react.useState)(() => {
+    layoutIndex += 1;
+    return `pro-layout-${layoutIndex}`;
+  });
 
   /**
    * 处理国际化相关 formatMessage
    * 如果有用户配置的以用户为主
    * 如果没有用自己实现的
    */
-  var formatMessage = (0, _react.useCallback)(function (_ref4) {
-    var id = _ref4.id,
-      defaultMessage = _ref4.defaultMessage,
-      restParams = (0, _objectWithoutProperties2.default)(_ref4, _excluded);
+  const formatMessage = (0, _react.useCallback)(({
+    id,
+    defaultMessage,
+    ...restParams
+  }) => {
     if (propsFormatMessage) {
-      return propsFormatMessage((0, _objectSpread2.default)({
-        id: id,
-        defaultMessage: defaultMessage
-      }, restParams));
+      return propsFormatMessage({
+        id,
+        defaultMessage,
+        ...restParams
+      });
     }
-    var locales = (0, _locales.gLocaleObject)();
+    const locales = (0, _locales.gLocaleObject)();
     return locales[id] ? locales[id] : defaultMessage;
   }, [propsFormatMessage]);
-  var _useSWR = (0, _swr.default)([defaultId, menu === null || menu === void 0 ? void 0 : menu.params], /*#__PURE__*/function () {
-      var _ref6 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(_ref5) {
-        var _menu$request;
-        var _ref7, params, menuDataItems;
-        return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              _ref7 = (0, _slicedToArray2.default)(_ref5, 2), params = _ref7[1];
-              setMenuLoading(true);
-              _context.next = 4;
-              return menu === null || menu === 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) || []);
-            case 4:
-              menuDataItems = _context.sent;
-              setMenuLoading(false);
-              return _context.abrupt("return", menuDataItems);
-            case 7:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee);
-      }));
-      return function (_x) {
-        return _ref6.apply(this, arguments);
-      };
-    }(), {
-      revalidateOnFocus: false,
-      shouldRetryOnError: false,
-      revalidateOnReconnect: false
-    }),
-    data = _useSWR.data,
-    mutate = _useSWR.mutate,
-    isLoading = _useSWR.isLoading;
-  (0, _react.useEffect)(function () {
+  const {
+    data,
+    mutate,
+    isLoading
+  } = (0, _swr.default)([defaultId, menu?.params], async ([, params]) => {
+    setMenuLoading(true);
+    const menuDataItems = await menu?.request?.(params || {}, route?.children || route?.routes || []);
+    setMenuLoading(false);
+    return menuDataItems;
+  }, {
+    revalidateOnFocus: false,
+    shouldRetryOnError: false,
+    revalidateOnReconnect: false
+  });
+  (0, _react.useEffect)(() => {
     setMenuLoading(isLoading);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isLoading]);
-  var _useSWRConfig = (0, _swr.useSWRConfig)(),
-    cache = _useSWRConfig.cache;
-  (0, _react.useEffect)(function () {
-    return function () {
+  const {
+    cache
+  } = (0, _swr.useSWRConfig)();
+  (0, _react.useEffect)(() => {
+    return () => {
       if (cache instanceof Map) cache.delete(defaultId);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  var menuInfoData = (0, _react.useMemo)(function () {
-    return (0, _getMenuData.getMenuData)(data || (route === null || route === void 0 ? void 0 : route.children) || (route === null || route === void 0 ? void 0 : route.routes) || [], menu, formatMessage, menuDataRender);
-  }, [formatMessage, menu, menuDataRender, data, route === null || route === void 0 ? void 0 : route.children]);
-  var _ref8 = menuInfoData || {},
-    breadcrumb = _ref8.breadcrumb,
-    breadcrumbMap = _ref8.breadcrumbMap,
-    _ref8$menuData = _ref8.menuData,
-    menuData = _ref8$menuData === void 0 ? [] : _ref8$menuData;
-  if (actionRef && menu !== null && menu !== void 0 && menu.request) {
+  const menuInfoData = (0, _react.useMemo)(() => (0, _getMenuData.getMenuData)(data || route?.children || route?.routes || [], menu, formatMessage, menuDataRender), [formatMessage, menu, menuDataRender, data, route?.children]);
+  const {
+    breadcrumb,
+    breadcrumbMap,
+    menuData = []
+  } = menuInfoData || {};
+  if (actionRef && menu?.request) {
     actionRef.current = {
-      reload: function reload() {
+      reload: () => {
         mutate();
       }
     };
   }
-  var matchMenus = (0, _react.useMemo)(function () {
+  const matchMenus = (0, _react.useMemo)(() => {
     return (0, _routeUtils.getMatchMenu)(location.pathname || '/', menuData || [], true);
   }, [location.pathname, menuData]);
-  var matchMenuKeys = (0, _react.useMemo)(function () {
-    return Array.from(new Set(matchMenus.map(function (item) {
-      return item.key || item.path || '';
-    })));
-  }, [matchMenus]);
+  const matchMenuKeys = (0, _react.useMemo)(() => Array.from(new Set(matchMenus.map(item => item.key || item.path || ''))), [matchMenus]);
 
   // 当前选中的menu，一般不会为空
-  var currentMenu = matchMenus[matchMenus.length - 1] || {};
-  var currentMenuLayoutProps = (0, _useCurrentMenuLayoutProps.useCurrentMenuLayoutProps)(currentMenu);
-  var _props$currentMenuLay = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), currentMenuLayoutProps),
-    fixSiderbar = _props$currentMenuLay.fixSiderbar,
-    navTheme = _props$currentMenuLay.navTheme,
-    propsLayout = _props$currentMenuLay.layout,
-    rest = (0, _objectWithoutProperties2.default)(_props$currentMenuLay, _excluded2);
-  var colSize = (0, _utils.useBreakpoint)();
-  var isMobile = (0, _react.useMemo)(function () {
+  const currentMenu = matchMenus[matchMenus.length - 1] || {};
+  const currentMenuLayoutProps = (0, _useCurrentMenuLayoutProps.useCurrentMenuLayoutProps)(currentMenu);
+  const {
+    fixSiderbar,
+    navTheme,
+    layout: propsLayout,
+    ...rest
+  } = {
+    ...props,
+    ...currentMenuLayoutProps
+  };
+  const colSize = (0, _utils.useBreakpoint)();
+  const isMobile = (0, _react.useMemo)(() => {
     return (colSize === 'sm' || colSize === 'xs') && !props.disableMobile;
   }, [colSize, props.disableMobile]);
 
   // If it is a fix menu, calculate padding
   // don't need padding in phone mode
   /* Checking if the menu is loading and if it is, it will return a skeleton loading screen. */
-  var hasLeftPadding = propsLayout !== 'top' && !isMobile;
-  var _useMergedState = (0, _util.useMergedState)(function () {
-      if (defaultCollapsed !== undefined) return defaultCollapsed;
-      if (process.env.NODE_ENV === 'TEST') return false;
-      if (isMobile) return true;
-      if (colSize === 'md') return true;
-      return false;
-    }, {
-      value: props.collapsed,
-      onChange: propsOnCollapse
-    }),
-    _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
-    collapsed = _useMergedState2[0],
-    onCollapse = _useMergedState2[1];
+  const hasLeftPadding = propsLayout !== 'top' && !isMobile;
+  const [collapsed, onCollapseInner] = (0, _util.useControlledState)(() => {
+    if (defaultCollapsed !== undefined) return defaultCollapsed;
+    if (process.env.NODE_ENV === 'TEST') return false;
+    if (isMobile) return true;
+    if (colSize === 'md') return true;
+    return false;
+  }, props.collapsed);
+  const onCollapse = (0, _react.useCallback)(updater => {
+    onCollapseInner(prev => {
+      const next = typeof updater === 'function' ? updater(prev) : updater;
+      propsOnCollapse?.(next);
+      return next;
+    });
+  }, [propsOnCollapse]);
 
   // Splicing parameters, adding menuData and formatMessage in props
-  var defaultProps = (0, _util.omit)((0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({
-    prefixCls: prefixCls
-  }, props), {}, {
-    siderWidth: siderWidth
-  }, currentMenuLayoutProps), {}, {
-    formatMessage: formatMessage,
-    breadcrumb: breadcrumb,
-    menu: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, menu), {}, {
-      type: siderMenuType || (menu === null || menu === void 0 ? void 0 : menu.type),
+  const defaultProps = (0, _util.omit)({
+    prefixCls,
+    ...props,
+    siderWidth,
+    ...currentMenuLayoutProps,
+    formatMessage,
+    breadcrumb,
+    menu: {
+      ...menu,
+      type: siderMenuType || menu?.type,
       loading: menuLoading
-    }),
+    },
     layout: propsLayout
-  }), ['className', 'style', 'breadcrumbRender']);
+  }, ['className', 'style', 'breadcrumbRender']);
 
   // gen page title
-  var pageTitleInfo = defaultPageTitleRender((0, _objectSpread2.default)((0, _objectSpread2.default)({
-    pathname: location.pathname
-  }, defaultProps), {}, {
-    breadcrumbMap: breadcrumbMap
-  }), props);
+  const pageTitleInfo = defaultPageTitleRender({
+    pathname: location.pathname,
+    ...defaultProps,
+    breadcrumbMap
+  }, props);
 
   // gen breadcrumbProps, parameter for pageHeader
-  var breadcrumbProps = (0, _getBreadcrumbProps.getBreadcrumbProps)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, defaultProps), {}, {
+  const breadcrumbProps = (0, _getBreadcrumbProps.getBreadcrumbProps)({
+    ...defaultProps,
     breadcrumbRender: props.breadcrumbRender,
-    breadcrumbMap: breadcrumbMap
-  }), props);
+    breadcrumbMap
+  }, props);
 
   // render sider dom
-  var siderMenuDom = renderSiderMenu((0, _objectSpread2.default)((0, _objectSpread2.default)({}, defaultProps), {}, {
-    menuData: menuData,
-    onCollapse: onCollapse,
-    isMobile: isMobile,
-    collapsed: collapsed
-  }), matchMenuKeys);
+  const siderMenuDom = renderSiderMenu({
+    ...defaultProps,
+    menuData,
+    onCollapse,
+    isMobile,
+    collapsed
+  }, matchMenuKeys);
 
   // render header dom
-  var headerDom = headerRender((0, _objectSpread2.default)((0, _objectSpread2.default)({}, defaultProps), {}, {
+  const headerDom = headerRender({
+    ...defaultProps,
     children: null,
     hasSiderMenu: !!siderMenuDom,
-    menuData: menuData,
-    isMobile: isMobile,
-    collapsed: collapsed,
-    onCollapse: onCollapse
-  }), matchMenuKeys);
+    menuData,
+    isMobile,
+    collapsed,
+    onCollapse
+  }, matchMenuKeys);
 
   // render footer dom
-  var footerDom = footerRender((0, _objectSpread2.default)({
-    isMobile: isMobile,
-    collapsed: collapsed
-  }, defaultProps));
-  var _useContext = (0, _react.useContext)(_RouteContext.RouteContext),
-    contextIsChildrenLayout = _useContext.isChildrenLayout;
+  const footerDom = footerRender({
+    isMobile,
+    collapsed,
+    ...defaultProps
+  });
+  const {
+    isChildrenLayout: contextIsChildrenLayout
+  } = (0, _react.useContext)(_RouteContext.RouteContext);
 
   // 如果 props 中定义，以 props 为准
-  var isChildrenLayout = propsIsChildrenLayout !== undefined ? propsIsChildrenLayout : contextIsChildrenLayout;
-  var proLayoutClassName = "".concat(prefixCls, "-layout");
-  var _useStyle = (0, _style.useStyle)(proLayoutClassName),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
+  const isChildrenLayout = propsIsChildrenLayout !== undefined ? propsIsChildrenLayout : contextIsChildrenLayout;
+  const proLayoutClassName = `${prefixCls}-layout`;
+  const {
+    wrapSSR,
+    hashId
+  } = (0, _style.useStyle)(proLayoutClassName);
 
   // gen className
-  var className = (0, _classnames.default)(props.className, hashId, 'ant-design-pro', proLayoutClassName, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "screen-".concat(colSize), colSize), "".concat(proLayoutClassName, "-top-menu"), propsLayout === 'top'), "".concat(proLayoutClassName, "-is-children"), isChildrenLayout), "".concat(proLayoutClassName, "-fix-siderbar"), fixSiderbar), "".concat(proLayoutClassName, "-").concat(propsLayout), propsLayout));
+  const className = (0, _clsx.clsx)(props.className, hashId, 'ant-design-pro', proLayoutClassName, {
+    [`screen-${colSize}`]: colSize,
+    [`${proLayoutClassName}-top-menu`]: propsLayout === 'top',
+    [`${proLayoutClassName}-is-children`]: isChildrenLayout,
+    [`${proLayoutClassName}-fix-siderbar`]: fixSiderbar,
+    [`${proLayoutClassName}-${propsLayout}`]: propsLayout
+  });
 
   /** 计算 slider 的宽度 */
-  var leftSiderWidth = getPaddingInlineStart(!!hasLeftPadding, collapsed, siderWidth);
+  const leftSiderWidth = getPaddingInlineStart(!!hasLeftPadding, collapsed, siderWidth);
 
   // siderMenuDom 为空的时候，不需要 padding
-  var genLayoutStyle = {
+  const genLayoutStyle = {
     position: 'relative'
   };
 
@@ -389,119 +376,116 @@ var BaseProLayout = function BaseProLayout(props) {
   }
 
   /** 页面切换的时候触发 */
-  (0, _react.useEffect)(function () {
-    var _props$onPageChange;
-    (_props$onPageChange = props.onPageChange) === null || _props$onPageChange === void 0 || _props$onPageChange.call(props, props.location);
+  (0, _react.useEffect)(() => {
+    props.onPageChange?.(props.location);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [location.pathname, (_location$pathname = location.pathname) === null || _location$pathname === void 0 ? void 0 : _location$pathname.search]);
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    hasFooterToolbar = _useState4[0],
-    setHasFooterToolbar = _useState4[1];
+  }, [location.pathname, location.pathname?.search]);
+  const [hasFooterToolbar, setHasFooterToolbar] = (0, _react.useState)(false);
   /**
    * 使用number是因为多标签页的时候有多个 PageContainer，只有有任意一个就应该展示这个className
    */
-  var _useState5 = (0, _react.useState)(0),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    hasPageContainer = _useState6[0],
-    setHasPageContainer = _useState6[1];
+  const [hasPageContainer, setHasPageContainer] = (0, _react.useState)(0);
   (0, _utils.useDocumentTitle)(pageTitleInfo, props.title || false);
-  var _useContext2 = (0, _react.useContext)(_provider.ProProvider),
-    token = _useContext2.token;
-  var bgImgStyleList = (0, _react.useMemo)(function () {
+  const {
+    token
+  } = (0, _react.useContext)(_provider.ProProvider);
+  const bgImgStyleList = (0, _react.useMemo)(() => {
     if (bgLayoutImgList && bgLayoutImgList.length > 0) {
-      return bgLayoutImgList === null || bgLayoutImgList === void 0 ? void 0 : bgLayoutImgList.map(function (item, index) {
+      return bgLayoutImgList?.map((item, index) => {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
           src: item.src,
-          style: (0, _objectSpread2.default)({
-            position: 'absolute'
-          }, item)
+          style: {
+            position: 'absolute',
+            ...item
+          }
         }, index);
       });
     }
     return null;
   }, [bgLayoutImgList]);
   return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)(_RouteContext.RouteContext.Provider, {
-    value: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, defaultProps), {}, {
+    value: {
+      ...defaultProps,
       breadcrumb: breadcrumbProps,
-      menuData: menuData,
-      isMobile: isMobile,
-      collapsed: collapsed,
-      hasPageContainer: hasPageContainer,
-      setHasPageContainer: setHasPageContainer,
+      menuData,
+      isMobile,
+      collapsed,
+      hasPageContainer,
+      setHasPageContainer,
       isChildrenLayout: true,
       title: pageTitleInfo.pageName,
       hasSiderMenu: !!siderMenuDom,
       hasHeader: !!headerDom,
       siderWidth: leftSiderWidth,
       hasFooter: !!footerDom,
-      hasFooterToolbar: hasFooterToolbar,
-      setHasFooterToolbar: setHasFooterToolbar,
-      pageTitleInfo: pageTitleInfo,
-      matchMenus: matchMenus,
-      matchMenuKeys: matchMenuKeys,
-      currentMenu: currentMenu
-    }),
+      hasFooterToolbar,
+      setHasFooterToolbar,
+      pageTitleInfo,
+      matchMenus,
+      matchMenuKeys,
+      currentMenu
+    },
     children: props.pure ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
       children: children
     }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: className,
-      children: [bgImgStyleList || (_token$layout = token.layout) !== null && _token$layout !== void 0 && _token$layout.bgLayout ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: (0, _classnames.default)("".concat(proLayoutClassName, "-bg-list"), hashId),
+      children: [bgImgStyleList || token.layout?.bgLayout ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _clsx.clsx)(`${proLayoutClassName}-bg-list`, hashId),
         children: bgImgStyleList
       }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Layout, {
-        style: (0, _objectSpread2.default)({
+        style: {
           minHeight: '100%',
           // hack style
-          flexDirection: siderMenuDom ? 'row' : undefined
-        }, style),
+          flexDirection: siderMenuDom ? 'row' : undefined,
+          ...style
+        },
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.ConfigProvider
         // @ts-ignore
         , {
           theme: {
             hashed: (0, _provider.isNeedOpenHash)(),
             token: {
-              controlHeightLG: ((_token$layout2 = token.layout) === null || _token$layout2 === void 0 || (_token$layout2 = _token$layout2.sider) === null || _token$layout2 === void 0 ? void 0 : _token$layout2.menuHeight) || (token === null || token === void 0 ? void 0 : token.controlHeightLG)
+              controlHeightLG: token.layout?.sider?.menuHeight || token?.controlHeightLG
             },
             components: {
               Menu: {
-                itemBg: ((_token$layout3 = token.layout) === null || _token$layout3 === void 0 || (_token$layout3 = _token$layout3.sider) === null || _token$layout3 === void 0 ? void 0 : _token$layout3.colorMenuBackground) || 'transparent',
-                subMenuItemBg: ((_token$layout4 = token.layout) === null || _token$layout4 === void 0 || (_token$layout4 = _token$layout4.sider) === null || _token$layout4 === void 0 ? void 0 : _token$layout4.colorMenuBackground) || 'transparent',
+                itemBg: token.layout?.sider?.colorMenuBackground || 'transparent',
+                subMenuItemBg: token.layout?.sider?.colorMenuBackground || 'transparent',
                 itemBorderRadius: token.borderRadius,
-                itemSelectedBg: ((_token$layout5 = token.layout) === null || _token$layout5 === void 0 || (_token$layout5 = _token$layout5.sider) === null || _token$layout5 === void 0 ? void 0 : _token$layout5.colorBgMenuItemSelected) || (token === null || token === void 0 ? void 0 : token.colorBgTextHover),
-                itemHoverBg: ((_token$layout6 = token.layout) === null || _token$layout6 === void 0 || (_token$layout6 = _token$layout6.sider) === null || _token$layout6 === void 0 ? void 0 : _token$layout6.colorBgMenuItemHover) || (token === null || token === void 0 ? void 0 : token.colorBgTextHover),
-                itemActiveBg: ((_token$layout7 = token.layout) === null || _token$layout7 === void 0 || (_token$layout7 = _token$layout7.sider) === null || _token$layout7 === void 0 ? void 0 : _token$layout7.colorBgMenuItemActive) || (token === null || token === void 0 ? void 0 : token.colorBgTextActive),
-                horizontalItemSelectedBg: ((_token$layout8 = token.layout) === null || _token$layout8 === void 0 || (_token$layout8 = _token$layout8.sider) === null || _token$layout8 === void 0 ? void 0 : _token$layout8.colorBgMenuItemSelected) || (token === null || token === void 0 ? void 0 : token.colorBgTextHover),
+                itemSelectedBg: token.layout?.sider?.colorBgMenuItemSelected || token?.colorBgTextHover,
+                itemHoverBg: token.layout?.sider?.colorBgMenuItemHover || token?.colorBgTextHover,
+                itemActiveBg: token.layout?.sider?.colorBgMenuItemActive || token?.colorBgTextActive,
+                horizontalItemSelectedBg: token.layout?.sider?.colorBgMenuItemSelected || token?.colorBgTextHover,
                 activeBarWidth: 0,
                 activeBarHeight: 0,
                 activeBarBorderWidth: 0,
-                itemColor: ((_token$layout9 = token.layout) === null || _token$layout9 === void 0 || (_token$layout9 = _token$layout9.sider) === null || _token$layout9 === void 0 ? void 0 : _token$layout9.colorTextMenu) || (token === null || token === void 0 ? void 0 : token.colorTextSecondary),
-                itemHoverColor: ((_token$layout10 = token.layout) === null || _token$layout10 === void 0 || (_token$layout10 = _token$layout10.sider) === null || _token$layout10 === void 0 ? void 0 : _token$layout10.colorTextMenuItemHover) || 'rgba(0, 0, 0, 0.85)',
+                itemColor: token.layout?.sider?.colorTextMenu || token?.colorTextSecondary,
+                itemHoverColor: token.layout?.sider?.colorTextMenuItemHover || 'rgba(0, 0, 0, 0.85)',
                 // 悬浮态
-                itemSelectedColor: ((_token$layout11 = token.layout) === null || _token$layout11 === void 0 || (_token$layout11 = _token$layout11.sider) === null || _token$layout11 === void 0 ? void 0 : _token$layout11.colorTextMenuSelected) || 'rgba(0, 0, 0, 1)',
-                popupBg: token === null || token === void 0 ? void 0 : token.colorBgElevated,
+                itemSelectedColor: token.layout?.sider?.colorTextMenuSelected || 'rgba(0, 0, 0, 1)',
+                popupBg: token?.colorBgElevated,
                 darkSubMenuItemBg: 'transparent',
-                darkPopupBg: token === null || token === void 0 ? void 0 : token.colorBgElevated
+                darkPopupBg: token?.colorBgElevated
               }
             }
           },
           children: siderMenuDom
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           style: genLayoutStyle,
-          className: "".concat(proLayoutClassName, "-container ").concat(hashId).trim(),
-          children: [headerDom, /*#__PURE__*/(0, _jsxRuntime.jsx)(_WrapContent.WrapContent, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+          className: `${proLayoutClassName}-container ${hashId}`.trim(),
+          children: [headerDom, /*#__PURE__*/(0, _jsxRuntime.jsx)(_WrapContent.WrapContent, {
             hasPageContainer: hasPageContainer,
-            isChildrenLayout: isChildrenLayout
-          }, rest), {}, {
+            isChildrenLayout: isChildrenLayout,
+            ...rest,
             hasHeader: !!headerDom,
             prefixCls: proLayoutClassName,
             style: contentStyle,
             children: loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_PageLoading.PageLoading, {}) : children
-          })), footerDom, hasFooterToolbar && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "".concat(proLayoutClassName, "-has-footer"),
+          }), footerDom, hasFooterToolbar && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: `${proLayoutClassName}-has-footer`,
             style: {
               height: 64,
-              marginBlockStart: (_token$layout12 = token.layout) === null || _token$layout12 === void 0 || (_token$layout12 = _token$layout12.pageContainer) === null || _token$layout12 === void 0 ? void 0 : _token$layout12.paddingBlockPageContainerContent
+              marginBlockStart: token.layout?.pageContainer?.paddingBlockPageContainerContent
             }
           })]
         })]
@@ -509,9 +493,11 @@ var BaseProLayout = function BaseProLayout(props) {
     })
   }));
 };
-var ProLayout = exports.ProLayout = function ProLayout(props) {
-  var colorPrimary = props.colorPrimary;
-  var darkProps = props.navTheme !== undefined ? {
+const ProLayout = props => {
+  const {
+    colorPrimary
+  } = props;
+  const darkProps = props.navTheme !== undefined ? {
     dark: props.navTheme === 'realDark'
   } : {};
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.ConfigProvider, {
@@ -520,14 +506,17 @@ var ProLayout = exports.ProLayout = function ProLayout(props) {
         colorPrimary: colorPrimary
       }
     } : undefined,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_provider.ProConfigProvider, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, darkProps), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_provider.ProConfigProvider, {
+      ...darkProps,
       token: props.token,
       prefixCls: props.prefixCls,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BaseProLayout, (0, _objectSpread2.default)((0, _objectSpread2.default)({
-        logo: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Logo.Logo, {})
-      }, _defaultSettings.defaultSettings), {}, {
-        location: (0, _utils.isBrowser)() ? window.location : undefined
-      }, props))
-    }))
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BaseProLayout, {
+        logo: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Logo.Logo, {}),
+        ..._defaultSettings.defaultSettings,
+        location: (0, _utils.isBrowser)() ? window.location : undefined,
+        ...props
+      })
+    })
   });
-};
+};
+exports.ProLayout = ProLayout;