@ant-design/pro-components 3.1.0-0 → 3.1.1-1

package/lib/layout/components/GlobalFooter/index.js

@@ -1,48 +1,48 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GlobalFooter = void 0;
 var _antd = require("antd");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = require("clsx");
 var _react = _interopRequireWildcard(require("react"));
 var _style = require("./style");
 var _jsxRuntime = require("react/jsx-runtime");
-var GlobalFooter = exports.GlobalFooter = function GlobalFooter(_ref) {
-  var className = _ref.className,
-    prefixCls = _ref.prefixCls,
-    links = _ref.links,
-    copyright = _ref.copyright,
-    style = _ref.style;
-  var context = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
-  var baseClassName = context.getPrefixCls(prefixCls || 'pro-global-footer');
-  var _useStyle = (0, _style.useStyle)(baseClassName),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
+const GlobalFooter = ({
+  className,
+  prefixCls,
+  links,
+  copyright,
+  style
+}) => {
+  const context = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
+  const baseClassName = context.getPrefixCls(prefixCls || 'pro-global-footer');
+  const {
+    wrapSSR,
+    hashId
+  } = (0, _style.useStyle)(baseClassName);
   if ((links == null || links === false || Array.isArray(links) && links.length === 0) && (copyright == null || copyright === false)) {
     return null;
   }
   return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _classnames.default)(baseClassName, hashId, className),
+    className: (0, _clsx.clsx)(baseClassName, hashId, className),
     style: style,
     children: [links && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "".concat(baseClassName, "-list ").concat(hashId).trim(),
-      children: links.map(function (link) {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
-          className: "".concat(baseClassName, "-list-link ").concat(hashId).trim(),
-          title: link.key,
-          target: link.blankTarget ? '_blank' : '_self',
-          href: link.href,
-          rel: "noreferrer",
-          children: link.title
-        }, link.key);
-      })
+      className: `${baseClassName}-list ${hashId}`.trim(),
+      children: links.map(link => /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+        className: `${baseClassName}-list-link ${hashId}`.trim(),
+        title: link.key,
+        target: link.blankTarget ? '_blank' : '_self',
+        href: link.href,
+        rel: "noreferrer",
+        children: link.title
+      }, link.key))
     }), copyright && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "".concat(baseClassName, "-copyright ").concat(hashId).trim(),
+      className: `${baseClassName}-copyright ${hashId}`.trim(),
       children: copyright
     })]
   }));
-};
+};
+exports.GlobalFooter = GlobalFooter;

package/lib/layout/components/GlobalFooter/style.js

@@ -1,47 +1,47 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useStyle = useStyle;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _provider = require("../../../provider");
-var genFooterToolBarStyle = function genFooterToolBarStyle(token) {
-  return (0, _defineProperty2.default)({}, token.componentCls, {
-    marginBlock: 0,
-    marginBlockStart: 48,
-    marginBlockEnd: 24,
-    marginInline: 0,
-    paddingBlock: 0,
-    paddingInline: 16,
-    textAlign: 'center',
-    '&-list': {
-      marginBlockEnd: 8,
-      color: token.colorTextSecondary,
-      '&-link': {
+const genFooterToolBarStyle = token => {
+  return {
+    [token.componentCls]: {
+      marginBlock: 0,
+      marginBlockStart: 48,
+      marginBlockEnd: 24,
+      marginInline: 0,
+      paddingBlock: 0,
+      paddingInline: 16,
+      textAlign: 'center',
+      '&-list': {
+        marginBlockEnd: 8,
         color: token.colorTextSecondary,
-        textDecoration: token.linkDecoration
+        '&-link': {
+          color: token.colorTextSecondary,
+          textDecoration: token.linkDecoration
+        },
+        '*:not(:last-child)': {
+          marginInlineEnd: 8
+        },
+        '&:hover': {
+          color: token.colorPrimary
+        }
       },
-      '*:not(:last-child)': {
-        marginInlineEnd: 8
-      },
-      '&:hover': {
-        color: token.colorPrimary
+      '&-copyright': {
+        fontSize: '14px',
+        color: token.colorText
       }
-    },
-    '&-copyright': {
-      fontSize: '14px',
-      color: token.colorText
     }
-  });
+  };
 };
 function useStyle(prefixCls) {
-  return (0, _provider.useStyle)('ProLayoutFooter', function (token) {
-    var proCardToken = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return (0, _provider.useStyle)('ProLayoutFooter', token => {
+    const proCardToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genFooterToolBarStyle(proCardToken)];
   });
 }

package/lib/layout/components/GlobalHeader/ActionsContent.js

@@ -1,55 +1,50 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ActionsContent = void 0;
-var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _resizeObserver = _interopRequireDefault(require("@rc-component/resize-observer"));
 var _antd = require("antd");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _rcResizeObserver = _interopRequireDefault(require("rc-resize-observer"));
+var _clsx = require("clsx");
 var _react = _interopRequireWildcard(require("react"));
 var _utils = require("../../../utils");
 var _rightContentStyle = require("./rightContentStyle");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["avatarProps", "actionsRender", "headerContentRender"],
-  _excluded2 = ["title", "render"];
 /**
  * 抽离出来是为了防止 rightSize 经常改变导致菜单 render
  *
  * @param param0
  */
-var ActionsContent = exports.ActionsContent = function ActionsContent(_ref) {
-  var avatarProps = _ref.avatarProps,
-    actionsRender = _ref.actionsRender,
-    headerContentRender = _ref.headerContentRender,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var _useContext = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext),
-    getPrefixCls = _useContext.getPrefixCls;
-  var prefixCls = "".concat(getPrefixCls(), "-pro-global-header");
-  var _useStyle = (0, _rightContentStyle.useStyle)(prefixCls),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
-  var _useState = (0, _react.useState)('auto'),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    rightSize = _useState2[0],
-    setRightSize = _useState2[1];
-  var avatarDom = (0, _react.useMemo)(function () {
+const ActionsContent = ({
+  avatarProps,
+  actionsRender,
+  headerContentRender,
+  ...props
+}) => {
+  const {
+    getPrefixCls
+  } = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
+  const prefixCls = `${getPrefixCls()}-pro-global-header`;
+  const {
+    wrapSSR,
+    hashId
+  } = (0, _rightContentStyle.useStyle)(prefixCls);
+  const [rightSize, setRightSize] = (0, _react.useState)('auto');
+  const avatarDom = (0, _react.useMemo)(() => {
     if (!avatarProps) return null;
-    var title = avatarProps.title,
-      render = avatarProps.render,
-      rest = (0, _objectWithoutProperties2.default)(avatarProps, _excluded2);
-    var domList = [rest !== null && rest !== void 0 && rest.src || rest !== null && rest !== void 0 && rest.srcSet || rest.icon || rest.children ? /*#__PURE__*/(0, _react.createElement)(_antd.Avatar, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, rest), {}, {
+    const {
+      title,
+      render,
+      ...rest
+    } = avatarProps;
+    const domList = [rest?.src || rest?.srcSet || rest.icon || rest.children ? /*#__PURE__*/(0, _react.createElement)(_antd.Avatar, {
+      ...rest,
       size: 28,
       key: "avatar"
-    })) : null, title ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    }) : null, title ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       style: {
         marginInlineStart: 8
       },
@@ -64,55 +59,43 @@ var ActionsContent = exports.ActionsContent = function ActionsContent(_ref) {
       children: domList
     });
   }, [avatarProps]);
-  var rightActionsRender = actionsRender || avatarDom ? function (restParams) {
-    var doms = actionsRender && (actionsRender === null || actionsRender === void 0 ? void 0 : actionsRender(restParams));
+  const rightActionsRender = actionsRender || avatarDom ? restParams => {
+    const doms = actionsRender && actionsRender?.(restParams);
     if (!doms && !avatarDom) return null;
     if (!Array.isArray(doms)) return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "".concat(prefixCls, "-header-actions ").concat(hashId).trim(),
+      className: `${prefixCls}-header-actions ${hashId}`.trim(),
       children: [doms, avatarDom && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: "".concat(prefixCls, "-header-actions-avatar ").concat(hashId).trim(),
+        className: `${prefixCls}-header-actions-avatar ${hashId}`.trim(),
         children: avatarDom
       })]
     }));
     return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "".concat(prefixCls, "-header-actions ").concat(hashId).trim(),
-      children: [doms.filter(Boolean).map(function (dom, index) {
-        var hideHover = false;
+      className: `${prefixCls}-header-actions ${hashId}`.trim(),
+      children: [doms.filter(Boolean).map((dom, index) => {
+        let hideHover = false;
         // 如果配置了 hideHover 就不展示 hover 效果了
         if ( /*#__PURE__*/_react.default.isValidElement(dom)) {
-          var _dom$props;
-          hideHover = !!(dom !== null && dom !== void 0 && (_dom$props = dom.props) !== null && _dom$props !== void 0 && _dom$props['aria-hidden']);
+          hideHover = !!dom?.props?.['aria-hidden'];
         }
         return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: (0, _classnames.default)("".concat(prefixCls, "-header-actions-item ").concat(hashId), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-header-actions-hover"), !hideHover)),
+          className: (0, _clsx.clsx)(`${prefixCls}-header-actions-item ${hashId}`, {
+            [`${prefixCls}-header-actions-hover`]: !hideHover
+          }),
           children: dom
         }, index);
       }), avatarDom && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: "".concat(prefixCls, "-header-actions-avatar ").concat(hashId).trim(),
+        className: `${prefixCls}-header-actions-avatar ${hashId}`.trim(),
         children: avatarDom
       })]
     }));
   } : undefined;
   /** 减少一下渲染的次数 */
-  var setRightSizeDebounceFn = (0, _utils.useDebounceFn)( /*#__PURE__*/function () {
-    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(width) {
-      return (0, _regeneratorRuntime2.default)().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);
-  var contentRender = rightActionsRender;
+  const setRightSizeDebounceFn = (0, _utils.useDebounceFn)(async width => {
+    setRightSize(width);
+  }, 160);
+  const contentRender = rightActionsRender;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: "".concat(prefixCls, "-right-content ").concat(hashId).trim(),
+    className: `${prefixCls}-right-content ${hashId}`.trim(),
     style: {
       minWidth: rightSize,
       height: '100%'
@@ -121,28 +104,29 @@ var ActionsContent = exports.ActionsContent = function ActionsContent(_ref) {
       style: {
         height: '100%'
       },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_rcResizeObserver.default, {
-        onResize: function onResize(_ref3) {
-          var width = _ref3.width;
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_resizeObserver.default, {
+        onResize: ({
+          width
+        }) => {
           setRightSizeDebounceFn.run(width);
         },
-        children: function children(ref) {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            ref: ref,
-            style: {
-              display: 'flex',
-              alignItems: 'center',
-              height: '100%',
-              justifyContent: 'flex-end'
-            },
-            children: contentRender ? contentRender((0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
-              // 测试专用
-              //@ts-ignore
-              rightContentSize: rightSize
-            })) : null
-          });
-        }
+        children: ref => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          ref: ref,
+          style: {
+            display: 'flex',
+            alignItems: 'center',
+            height: '100%',
+            justifyContent: 'flex-end'
+          },
+          children: contentRender ? contentRender({
+            ...props,
+            // 测试专用
+            //@ts-ignore
+            rightContentSize: rightSize
+          }) : null
+        })
       })
     }) : null
   });
-};
+};
+exports.ActionsContent = ActionsContent;

package/lib/layout/components/GlobalHeader/index.js

@@ -1,16 +1,13 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GlobalHeader = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _icons = require("@ant-design/icons");
 var _antd = require("antd");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = require("clsx");
 var _react = _interopRequireWildcard(require("react"));
 var _utils = require("../../utils/utils");
 var _AppsLogoComponents = require("../AppsLogoComponents");
@@ -19,7 +16,7 @@ var _TopNavHeader = require("../TopNavHeader");
 var _ActionsContent = require("./ActionsContent");
 var _style = require("./style");
 var _jsxRuntime = require("react/jsx-runtime");
-var renderLogo = function renderLogo(menuHeaderRender, logoDom) {
+const renderLogo = (menuHeaderRender, logoDom) => {
   if (menuHeaderRender === false) {
     return null;
   }
@@ -28,45 +25,52 @@ var renderLogo = function renderLogo(menuHeaderRender, logoDom) {
   }
   return logoDom;
 };
-var GlobalHeader = exports.GlobalHeader = function GlobalHeader(props) {
-  var isMobile = props.isMobile,
-    logo = props.logo,
-    collapsed = props.collapsed,
-    onCollapse = props.onCollapse,
-    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 = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext),
-    getPrefixCls = _useContext.getPrefixCls,
-    direction = _useContext.direction;
-  var baseClassName = "".concat(prefixCls || getPrefixCls('pro'), "-global-header");
-  var _useStyle = (0, _style.useStyle)(baseClassName),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
-  var className = (0, _classnames.default)(propClassName, baseClassName, hashId);
+const GlobalHeader = props => {
+  const {
+    isMobile,
+    logo,
+    collapsed,
+    onCollapse,
+    menuHeaderRender,
+    onMenuHeaderClick,
+    className: propClassName,
+    style,
+    layout,
+    children,
+    splitMenus,
+    menuData,
+    prefixCls
+  } = props;
+  const {
+    getPrefixCls,
+    direction
+  } = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
+  const baseClassName = `${prefixCls || getPrefixCls('pro')}-global-header`;
+  const {
+    wrapSSR,
+    hashId
+  } = (0, _style.useStyle)(baseClassName);
+  const className = (0, _clsx.clsx)(propClassName, baseClassName, hashId);
   if (layout === 'mix' && !isMobile && splitMenus) {
-    var noChildrenMenuData = (menuData || []).map(function (item) {
-      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
-        children: undefined,
-        routes: undefined
-      });
-    });
-    var clearMenuData = (0, _utils.clearMenuItem)(noChildrenMenuData);
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TopNavHeader.TopNavHeader, (0, _objectSpread2.default)((0, _objectSpread2.default)({
-      mode: "horizontal"
-    }, props), {}, {
+    const noChildrenMenuData = (menuData || []).map(item => ({
+      ...item,
+      children: undefined,
+      routes: undefined
+    }));
+    const clearMenuData = (0, _utils.clearMenuItem)(noChildrenMenuData);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TopNavHeader.TopNavHeader, {
+      mode: "horizontal",
+      ...props,
       splitMenus: false,
       menuData: clearMenuData
-    }));
+    });
   }
-  var logoClassNames = (0, _classnames.default)("".concat(baseClassName, "-logo"), hashId, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(baseClassName, "-logo-rtl"), direction === 'rtl'), "".concat(baseClassName, "-logo-mix"), layout === 'mix'), "".concat(baseClassName, "-logo-mobile"), isMobile));
-  var logoDom = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+  const logoClassNames = (0, _clsx.clsx)(`${baseClassName}-logo`, hashId, {
+    [`${baseClassName}-logo-rtl`]: direction === 'rtl',
+    [`${baseClassName}-logo-mix`]: layout === 'mix',
+    [`${baseClassName}-logo-mobile`]: isMobile
+  });
+  const logoDom = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
     className: logoClassNames,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
       children: (0, _AppsLogoComponents.defaultRenderLogo)(logo)
@@ -74,26 +78,34 @@ var GlobalHeader = exports.GlobalHeader = function GlobalHeader(props) {
   }, "logo");
   return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: className,
-    style: (0, _objectSpread2.default)({}, style),
+    style: {
+      ...style
+    },
     children: [isMobile && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      className: "".concat(baseClassName, "-collapsed-button ").concat(hashId).trim(),
-      onClick: function onClick() {
-        onCollapse === null || onCollapse === void 0 || onCollapse(!collapsed);
+      className: `${baseClassName}-collapsed-button ${hashId}`.trim(),
+      onClick: () => {
+        onCollapse?.(!collapsed);
       },
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.MenuOutlined, {})
     }), isMobile && renderLogo(menuHeaderRender, logoDom), layout === 'mix' && !isMobile && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AppsLogoComponents.AppsLogoComponents, (0, _objectSpread2.default)({}, props)), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AppsLogoComponents.AppsLogoComponents, {
+        ...props
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: logoClassNames,
         onClick: onMenuHeaderClick,
-        children: (0, _SiderMenu.renderLogoAndTitle)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+        children: (0, _SiderMenu.renderLogoAndTitle)({
+          ...props,
           collapsed: false
-        }), 'headerTitleRender')
+        }, 'headerTitleRender')
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       style: {
         flex: 1
       },
       children: children
-    }), (props.actionsRender || props.avatarProps) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionsContent.ActionsContent, (0, _objectSpread2.default)({}, props))]
+    }), (props.actionsRender || props.avatarProps) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionsContent.ActionsContent, {
+      ...props
+    })]
   }));
-};
+};
+exports.GlobalHeader = GlobalHeader;

package/lib/layout/components/GlobalHeader/rightContentStyle.js

@@ -1,70 +1,69 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useStyle = useStyle;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _utils = require("../../../utils");
-var genTopNavHeaderStyle = function genTopNavHeaderStyle(token) {
-  var _token$layout, _token$layout2, _token$layout3, _token$layout4, _token$layout5;
-  return (0, _defineProperty2.default)({}, token.componentCls, {
-    '&-header-actions': {
-      display: 'flex',
-      height: '100%',
-      alignItems: 'center',
-      '&-item': {
-        display: 'inline-flex',
+const genTopNavHeaderStyle = token => {
+  return {
+    [token.componentCls]: {
+      '&-header-actions': {
+        display: 'flex',
+        height: '100%',
         alignItems: 'center',
-        justifyContent: 'center',
-        paddingBlock: 0,
-        paddingInline: 2,
-        color: (_token$layout = token.layout) === null || _token$layout === void 0 || (_token$layout = _token$layout.header) === null || _token$layout === void 0 ? void 0 : _token$layout.colorTextRightActionsItem,
-        fontSize: '16px',
-        cursor: 'pointer',
-        borderRadius: token.borderRadius,
-        '> *': {
-          paddingInline: 6,
-          paddingBlock: 6,
+        '&-item': {
+          display: 'inline-flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          paddingBlock: 0,
+          paddingInline: 2,
+          color: token.layout?.header?.colorTextRightActionsItem,
+          fontSize: '16px',
+          cursor: 'pointer',
           borderRadius: token.borderRadius,
-          '&:hover': {
-            backgroundColor: (_token$layout2 = token.layout) === null || _token$layout2 === void 0 || (_token$layout2 = _token$layout2.header) === null || _token$layout2 === void 0 ? void 0 : _token$layout2.colorBgRightActionsItemHover
+          '> *': {
+            paddingInline: 6,
+            paddingBlock: 6,
+            borderRadius: token.borderRadius,
+            '&:hover': {
+              backgroundColor: token.layout?.header?.colorBgRightActionsItemHover
+            }
           }
-        }
-      },
-      '&-avatar': {
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingInlineStart: token.padding,
-        paddingInlineEnd: token.padding,
-        cursor: 'pointer',
-        color: (_token$layout3 = token.layout) === null || _token$layout3 === void 0 || (_token$layout3 = _token$layout3.header) === null || _token$layout3 === void 0 ? void 0 : _token$layout3.colorTextRightActionsItem,
-        '> div': {
-          height: '44px',
-          color: (_token$layout4 = token.layout) === null || _token$layout4 === void 0 || (_token$layout4 = _token$layout4.header) === null || _token$layout4 === void 0 ? void 0 : _token$layout4.colorTextRightActionsItem,
-          paddingInline: 8,
-          paddingBlock: 8,
-          cursor: 'pointer',
-          display: 'flex',
+        },
+        '&-avatar': {
+          display: 'inline-flex',
           alignItems: 'center',
-          lineHeight: '44px',
-          borderRadius: token.borderRadius,
-          '&:hover': {
-            backgroundColor: (_token$layout5 = token.layout) === null || _token$layout5 === void 0 || (_token$layout5 = _token$layout5.header) === null || _token$layout5 === void 0 ? void 0 : _token$layout5.colorBgRightActionsItemHover
+          justifyContent: 'center',
+          paddingInlineStart: token.padding,
+          paddingInlineEnd: token.padding,
+          cursor: 'pointer',
+          color: token.layout?.header?.colorTextRightActionsItem,
+          '> div': {
+            height: '44px',
+            color: token.layout?.header?.colorTextRightActionsItem,
+            paddingInline: 8,
+            paddingBlock: 8,
+            cursor: 'pointer',
+            display: 'flex',
+            alignItems: 'center',
+            lineHeight: '44px',
+            borderRadius: token.borderRadius,
+            '&:hover': {
+              backgroundColor: token.layout?.header?.colorBgRightActionsItemHover
+            }
           }
         }
       }
     }
-  });
+  };
 };
 function useStyle(prefixCls) {
-  return (0, _utils.useStyle)('ProLayoutRightContent', function (token) {
-    var proToken = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return (0, _utils.useStyle)('ProLayoutRightContent', token => {
+    const proToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genTopNavHeaderStyle(proToken)];
   });
 }