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

package/lib/layout/components/AppsLogoComponents/style/index.js

@@ -1,66 +1,67 @@
 "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 _default = require("./default");
 var _simple = require("./simple");
-var genAppsLogoComponentsStyle = function genAppsLogoComponentsStyle(token) {
-  var _token$layout, _token$layout2, _token$layout3, _token$layout4, _token$layout5;
-  return (0, _defineProperty2.default)({}, token.componentCls, {
-    '&-icon': {
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      paddingInline: 4,
-      paddingBlock: 0,
-      fontSize: 14,
-      lineHeight: '14px',
-      height: 28,
-      width: 28,
-      cursor: 'pointer',
-      color: (_token$layout = token.layout) === null || _token$layout === void 0 ? void 0 : _token$layout.colorTextAppListIcon,
-      borderRadius: token.borderRadius,
-      '&:hover': {
-        color: (_token$layout2 = token.layout) === null || _token$layout2 === void 0 ? void 0 : _token$layout2.colorTextAppListIconHover,
-        backgroundColor: (_token$layout3 = token.layout) === null || _token$layout3 === void 0 ? void 0 : _token$layout3.colorBgAppListIconHover
+const genAppsLogoComponentsStyle = token => {
+  return {
+    [token.componentCls]: {
+      '&-icon': {
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingInline: 4,
+        paddingBlock: 0,
+        fontSize: 14,
+        lineHeight: '14px',
+        height: 28,
+        width: 28,
+        cursor: 'pointer',
+        color: token.layout?.colorTextAppListIcon,
+        borderRadius: token.borderRadius,
+        '&:hover': {
+          color: token.layout?.colorTextAppListIconHover,
+          backgroundColor: token.layout?.colorBgAppListIconHover
+        },
+        '&-active': {
+          color: token.layout?.colorTextAppListIconHover,
+          backgroundColor: token.layout?.colorBgAppListIconHover
+        }
       },
-      '&-active': {
-        color: (_token$layout4 = token.layout) === null || _token$layout4 === void 0 ? void 0 : _token$layout4.colorTextAppListIconHover,
-        backgroundColor: (_token$layout5 = token.layout) === null || _token$layout5 === void 0 ? void 0 : _token$layout5.colorBgAppListIconHover
-      }
-    },
-    '&-item-title': {
-      marginInlineStart: '16px',
-      marginInlineEnd: '8px',
-      marginBlockStart: 0,
-      marginBlockEnd: '12px',
-      fontWeight: 600,
-      color: 'rgba(0, 0, 0, 0.88)',
-      fontSize: 16,
-      opacity: 0.85,
-      lineHeight: 1.5,
-      '&:first-child': {
-        marginBlockStart: 12
-      }
-    },
-    '&-popover': (0, _defineProperty2.default)({}, "".concat(token.antCls, "-popover-arrow"), {
-      display: 'none'
-    }),
-    '&-simple': (0, _simple.genAppsLogoComponentsSimpleListStyle)(token),
-    '&-default': (0, _default.genAppsLogoComponentsDefaultListStyle)(token)
-  });
+      '&-item-title': {
+        marginInlineStart: '16px',
+        marginInlineEnd: '8px',
+        marginBlockStart: 0,
+        marginBlockEnd: '12px',
+        fontWeight: 600,
+        color: 'rgba(0, 0, 0, 0.88)',
+        fontSize: 16,
+        opacity: 0.85,
+        lineHeight: 1.5,
+        '&:first-child': {
+          marginBlockStart: 12
+        }
+      },
+      '&-popover': {
+        [`${token.antCls}-popover-arrow`]: {
+          display: 'none'
+        }
+      },
+      '&-simple': (0, _simple.genAppsLogoComponentsSimpleListStyle)(token),
+      '&-default': (0, _default.genAppsLogoComponentsDefaultListStyle)(token)
+    }
+  };
 };
 function useStyle(prefixCls) {
-  return (0, _provider.useStyle)('AppsLogoComponents', function (token) {
-    var proCardToken = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return (0, _provider.useStyle)('AppsLogoComponents', token => {
+    const proCardToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genAppsLogoComponentsStyle(proCardToken)];
   });
 }

package/lib/layout/components/AppsLogoComponents/style/simple.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.genAppsLogoComponentsSimpleListStyle = void 0;
-var genAppsLogoComponentsSimpleListStyle = exports.genAppsLogoComponentsSimpleListStyle = function genAppsLogoComponentsSimpleListStyle(token) {
+const genAppsLogoComponentsSimpleListStyle = token => {
   return {
     '&-content': {
       maxHeight: 'calc(100vh - 48px)',
@@ -88,4 +88,5 @@ var genAppsLogoComponentsSimpleListStyle = exports.genAppsLogoComponentsSimpleLi
       }
     }
   };
-};
+};
+exports.genAppsLogoComponentsSimpleListStyle = genAppsLogoComponentsSimpleListStyle;

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

@@ -1,28 +1,31 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CollapsedIcon = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = require("clsx");
 var _Arrow = require("../SiderMenu/Arrow");
 var _style = require("./style");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["isMobile", "collapsed"];
-var CollapsedIcon = exports.CollapsedIcon = function CollapsedIcon(props) {
-  var isMobile = props.isMobile,
-    collapsed = props.collapsed,
-    rest = (0, _objectWithoutProperties2.default)(props, _excluded);
-  var _useStyle = (0, _style.useStyle)(props.className),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
+const CollapsedIcon = props => {
+  const {
+    isMobile,
+    collapsed,
+    ...rest
+  } = props;
+  const {
+    wrapSSR,
+    hashId
+  } = (0, _style.useStyle)(props.className);
   if (isMobile && collapsed) return null;
-  return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _objectSpread2.default)((0, _objectSpread2.default)({}, rest), {}, {
-    className: (0, _classnames.default)(props.className, hashId, (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(props.className, "-collapsed"), collapsed), "".concat(props.className, "-is-mobile"), isMobile)),
+  return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    ...rest,
+    className: (0, _clsx.clsx)(props.className, hashId, {
+      [`${props.className}-collapsed`]: collapsed,
+      [`${props.className}-is-mobile`]: isMobile
+    }),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Arrow.ArrowSvgIcon, {})
-  })));
-};
+  }));
+};
+exports.CollapsedIcon = CollapsedIcon;

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

@@ -1,56 +1,55 @@
 "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 genSiderMenuStyle = function genSiderMenuStyle(token) {
-  var _token$layout, _token$layout2, _token$layout3;
-  return (0, _defineProperty2.default)({}, token.componentCls, {
-    position: 'absolute',
-    insetBlockStart: '18px',
-    zIndex: '101',
-    width: '24px',
-    height: '24px',
-    fontSize: ['14px', '16px'],
-    textAlign: 'center',
-    borderRadius: '40px',
-    insetInlineEnd: '-13px',
-    transition: 'transform 0.3s',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    cursor: 'pointer',
-    color: (_token$layout = token.layout) === null || _token$layout === void 0 || (_token$layout = _token$layout.sider) === null || _token$layout === void 0 ? void 0 : _token$layout.colorTextCollapsedButton,
-    backgroundColor: (_token$layout2 = token.layout) === null || _token$layout2 === void 0 || (_token$layout2 = _token$layout2.sider) === null || _token$layout2 === void 0 ? void 0 : _token$layout2.colorBgCollapsedButton,
-    boxShadow: '0 2px 8px -2px rgba(0,0,0,0.05), 0 1px 4px -1px rgba(25,15,15,0.07), 0 0 1px 0 rgba(0,0,0,0.08)',
-    '&:hover': {
-      color: (_token$layout3 = token.layout) === null || _token$layout3 === void 0 || (_token$layout3 = _token$layout3.sider) === null || _token$layout3 === void 0 ? void 0 : _token$layout3.colorTextCollapsedButtonHover,
-      boxShadow: '0 4px 16px -4px rgba(0,0,0,0.05), 0 2px 8px -2px rgba(25,15,15,0.07), 0 1px 2px 0 rgba(0,0,0,0.08)'
-    },
-    '.anticon': {
-      fontSize: '14px'
-    },
-    '& > svg': {
-      transition: 'transform  0.3s',
-      transform: 'rotate(90deg)'
-    },
-    '&-collapsed': {
+const genSiderMenuStyle = token => {
+  return {
+    [token.componentCls]: {
+      position: 'absolute',
+      insetBlockStart: '18px',
+      zIndex: '101',
+      width: '24px',
+      height: '24px',
+      fontSize: ['14px', '16px'],
+      textAlign: 'center',
+      borderRadius: '40px',
+      insetInlineEnd: '-13px',
+      transition: 'transform 0.3s',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      cursor: 'pointer',
+      color: token.layout?.sider?.colorTextCollapsedButton,
+      backgroundColor: token.layout?.sider?.colorBgCollapsedButton,
+      boxShadow: '0 2px 8px -2px rgba(0,0,0,0.05), 0 1px 4px -1px rgba(25,15,15,0.07), 0 0 1px 0 rgba(0,0,0,0.08)',
+      '&:hover': {
+        color: token.layout?.sider?.colorTextCollapsedButtonHover,
+        boxShadow: '0 4px 16px -4px rgba(0,0,0,0.05), 0 2px 8px -2px rgba(25,15,15,0.07), 0 1px 2px 0 rgba(0,0,0,0.08)'
+      },
+      '.anticon': {
+        fontSize: '14px'
+      },
       '& > svg': {
-        transform: 'rotate(-90deg)'
+        transition: 'transform  0.3s',
+        transform: 'rotate(90deg)'
+      },
+      '&-collapsed': {
+        '& > svg': {
+          transform: 'rotate(-90deg)'
+        }
       }
     }
-  });
+  };
 };
 function useStyle(prefixCls) {
-  return (0, _provider.useStyle)('SiderMenuCollapsedIcon', function (token) {
-    var siderMenuToken = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return (0, _provider.useStyle)('SiderMenuCollapsedIcon', token => {
+    const siderMenuToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genSiderMenuStyle(siderMenuToken)];
   });
 }

package/lib/layout/components/Footer.js

@@ -1,35 +1,36 @@
 "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.DefaultFooter = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _icons = require("@ant-design/icons");
 var _antd = require("antd");
 var _react = _interopRequireWildcard(require("react"));
 var _GlobalFooter = require("./GlobalFooter");
 var _jsxRuntime = require("react/jsx-runtime");
-var Footer = _antd.Layout.Footer;
-var DefaultFooter = exports.DefaultFooter = function DefaultFooter(_ref) {
-  var links = _ref.links,
-    copyright = _ref.copyright,
-    style = _ref.style,
-    className = _ref.className,
-    prefixCls = _ref.prefixCls;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Footer, {
-    className: className,
-    style: (0, _objectSpread2.default)({
-      padding: 0
-    }, style),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GlobalFooter.GlobalFooter, {
-      links: links,
-      prefixCls: prefixCls,
-      copyright: copyright === false ? null : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.CopyrightOutlined, {}), " ", copyright]
-      })
+const {
+  Footer
+} = _antd.Layout;
+const DefaultFooter = ({
+  links,
+  copyright,
+  style,
+  className,
+  prefixCls
+}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Footer, {
+  className: className,
+  style: {
+    padding: 0,
+    ...style
+  },
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GlobalFooter.GlobalFooter, {
+    links: links,
+    prefixCls: prefixCls,
+    copyright: copyright === false ? null : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.CopyrightOutlined, {}), " ", copyright]
     })
-  });
-};
+  })
+});
+exports.DefaultFooter = DefaultFooter;

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

@@ -1,17 +1,13 @@
 "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.FooterToolbar = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _util = require("@rc-component/util");
 var _antd = require("antd");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = require("clsx");
 var _react = _interopRequireWildcard(require("react"));
 var _reactDom = require("react-dom");
 var _utils = require("../../../utils");
@@ -19,30 +15,35 @@ var _index = require("../../index");
 var _style = require("./style");
 var _stylish = require("./style/stylish");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["children", "className", "extra", "portalDom", "style", "renderContent"];
 /* eslint-disable react-hooks/exhaustive-deps */
-var FooterToolbar = exports.FooterToolbar = function FooterToolbar(props) {
-  var children = props.children,
-    className = props.className,
-    extra = props.extra,
-    _props$portalDom = props.portalDom,
-    portalDom = _props$portalDom === void 0 ? true : _props$portalDom,
-    style = props.style,
-    renderContent = props.renderContent,
-    restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
-  var _useContext = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext),
-    getPrefixCls = _useContext.getPrefixCls,
-    getTargetContainer = _useContext.getTargetContainer;
-  var prefixCls = props.prefixCls || getPrefixCls('pro');
-  var baseClassName = "".concat(prefixCls, "-footer-bar");
-  var _useStyle = (0, _style.useStyle)(baseClassName),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
-  var value = (0, _react.useContext)(_index.RouteContext);
-  var width = (0, _react.useMemo)(function () {
-    var hasSiderMenu = value.hasSiderMenu,
-      isMobile = value.isMobile,
-      siderWidth = value.siderWidth;
+
+const FooterToolbar = props => {
+  const {
+    children,
+    className,
+    extra,
+    portalDom = true,
+    style,
+    renderContent,
+    ...restProps
+  } = props;
+  const {
+    getPrefixCls,
+    getTargetContainer
+  } = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
+  const prefixCls = props.prefixCls || getPrefixCls('pro');
+  const baseClassName = `${prefixCls}-footer-bar`;
+  const {
+    wrapSSR,
+    hashId
+  } = (0, _style.useStyle)(baseClassName);
+  const value = (0, _react.useContext)(_index.RouteContext);
+  const width = (0, _react.useMemo)(() => {
+    const {
+      hasSiderMenu,
+      isMobile,
+      siderWidth
+    } = value;
     if (!hasSiderMenu) {
       return undefined;
     }
@@ -50,51 +51,56 @@ var FooterToolbar = exports.FooterToolbar = function FooterToolbar(props) {
     if (!siderWidth) {
       return '100%';
     }
-    return isMobile ? '100%' : "calc(100% - ".concat(siderWidth, "px)");
+    return isMobile ? '100%' : `calc(100% - ${siderWidth}px)`;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value.collapsed, value.hasSiderMenu, value.isMobile, value.siderWidth]);
-  var containerDom = (0, _react.useMemo)(function () {
+  const containerDom = (0, _react.useMemo)(() => {
     if (typeof window === 'undefined' || typeof document === 'undefined') return null;
     // 只读取一次就行了，不然总是的渲染
-    return (getTargetContainer === null || getTargetContainer === void 0 ? void 0 : getTargetContainer()) || document.body;
+    return getTargetContainer?.() || document.body;
   }, []);
-  var stylish = (0, _stylish.useStylish)("".concat(baseClassName, ".").concat(baseClassName, "-stylish"), {
+  const stylish = (0, _stylish.useStylish)(`${baseClassName}.${baseClassName}-stylish`, {
     stylish: props.stylish
   });
-  var dom = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+  const dom = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "".concat(baseClassName, "-left ").concat(hashId).trim(),
+      className: `${baseClassName}-left ${hashId}`.trim(),
       children: extra
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "".concat(baseClassName, "-right ").concat(hashId).trim(),
+      className: `${baseClassName}-right ${hashId}`.trim(),
       children: children
     })]
   });
 
   /** 告诉 props 是否存在 footerBar */
-  (0, _react.useEffect)(function () {
-    if (!value || !(value !== null && value !== void 0 && value.setHasFooterToolbar)) {
-      return function () {};
+  (0, _react.useEffect)(() => {
+    if (!value || !value?.setHasFooterToolbar) {
+      return () => {};
     }
-    value === null || value === void 0 || value.setHasFooterToolbar(true);
-    return function () {
-      var _value$setHasFooterTo;
-      value === null || value === void 0 || (_value$setHasFooterTo = value.setHasFooterToolbar) === null || _value$setHasFooterTo === void 0 || _value$setHasFooterTo.call(value, false);
+    value?.setHasFooterToolbar(true);
+    return () => {
+      value?.setHasFooterToolbar?.(false);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  var renderDom = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _objectSpread2.default)((0, _objectSpread2.default)({
-    className: (0, _classnames.default)(className, hashId, baseClassName, (0, _defineProperty2.default)({}, "".concat(baseClassName, "-stylish"), !!props.stylish)),
-    style: (0, _objectSpread2.default)({
-      width: width
-    }, style)
-  }, (0, _util.omit)(restProps, ['prefixCls'])), {}, {
-    children: renderContent ? renderContent((0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), value), {}, {
+  const renderDom = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _clsx.clsx)(className, hashId, baseClassName, {
+      [`${baseClassName}-stylish`]: !!props.stylish
+    }),
+    style: {
+      width,
+      ...style
+    },
+    ...(0, _util.omit)(restProps, ['prefixCls']),
+    children: renderContent ? renderContent({
+      ...props,
+      ...value,
       leftWidth: width
-    }), dom) : dom
-  }));
-  var ssrDom = !(0, _utils.isBrowser)() || !portalDom || !containerDom ? renderDom : /*#__PURE__*/(0, _reactDom.createPortal)(renderDom, containerDom, baseClassName);
+    }, dom) : dom
+  });
+  const ssrDom = !(0, _utils.isBrowser)() || !portalDom || !containerDom ? renderDom : /*#__PURE__*/(0, _reactDom.createPortal)(renderDom, containerDom, baseClassName);
   return stylish.wrapSSR(wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
     children: ssrDom
   }, baseClassName)));
-};
+};
+exports.FooterToolbar = FooterToolbar;

package/lib/layout/components/FooterToolbar/style/index.js

@@ -1,54 +1,54 @@
 "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, {
-    position: 'fixed',
-    insetInlineEnd: 0,
-    bottom: 0,
-    zIndex: 99,
-    display: 'flex',
-    alignItems: 'center',
-    width: '100%',
-    paddingInline: 24,
-    paddingBlock: 0,
-    boxSizing: 'border-box',
-    lineHeight: '64px',
-    /* A way to reset the style of the component. */
-    backgroundColor: (0, _provider.setAlpha)(token.colorBgElevated, 0.6),
-    borderBlockStart: "1px solid ".concat(token.colorSplit),
-    '-webkit-backdrop-filter': 'blur(8px)',
-    backdropFilter: 'blur(8px)',
-    color: token.colorText,
-    transition: 'all 0.2s ease 0s',
-    '&-left': {
-      flex: 1,
-      color: token.colorText
-    },
-    '&-right': {
+const genFooterToolBarStyle = token => {
+  return {
+    [token.componentCls]: {
+      position: 'fixed',
+      insetInlineEnd: 0,
+      bottom: 0,
+      zIndex: 99,
+      display: 'flex',
+      alignItems: 'center',
+      width: '100%',
+      paddingInline: 24,
+      paddingBlock: 0,
+      boxSizing: 'border-box',
+      lineHeight: '64px',
+      /* A way to reset the style of the component. */
+      backgroundColor: (0, _provider.setAlpha)(token.colorBgElevated, 0.6),
+      borderBlockStart: `1px solid ${token.colorSplit}`,
+      '-webkit-backdrop-filter': 'blur(8px)',
+      backdropFilter: 'blur(8px)',
       color: token.colorText,
-      '> *': {
-        marginInlineEnd: 8,
-        '&:last-child': {
-          marginBlock: 0,
-          marginInline: 0
+      transition: 'all 0.2s ease 0s',
+      '&-left': {
+        flex: 1,
+        color: token.colorText
+      },
+      '&-right': {
+        color: token.colorText,
+        '> *': {
+          marginInlineEnd: 8,
+          '&:last-child': {
+            marginBlock: 0,
+            marginInline: 0
+          }
         }
       }
     }
-  });
+  };
 };
 function useStyle(prefixCls) {
-  return (0, _provider.useStyle)('ProLayoutFooterToolbar', function (token) {
-    var proCardToken = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return (0, _provider.useStyle)('ProLayoutFooterToolbar', token => {
+    const proCardToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genFooterToolBarStyle(proCardToken)];
   });
 }

package/lib/layout/components/FooterToolbar/style/stylish.js

@@ -1,20 +1,21 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useStylish = useStylish;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _provider = require("../../../../provider");
-function useStylish(prefixCls, _ref) {
-  var stylish = _ref.stylish;
-  return (0, _provider.useStyle)('ProLayoutFooterToolbarStylish', function (token) {
-    var stylishToken = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+function useStylish(prefixCls, {
+  stylish
+}) {
+  return (0, _provider.useStyle)('ProLayoutFooterToolbarStylish', token => {
+    const stylishToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     if (!stylish) return [];
-    return [(0, _defineProperty2.default)({}, "".concat(stylishToken.componentCls), stylish === null || stylish === void 0 ? void 0 : stylish(stylishToken))];
+    return [{
+      [`${stylishToken.componentCls}`]: stylish?.(stylishToken)
+    }];
   });
 }