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

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

@@ -1,59 +1,61 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { useStyle as useAntdStyle } from "../../../../provider";
 import { genAppsLogoComponentsDefaultListStyle } from "./default";
 import { genAppsLogoComponentsSimpleListStyle } from "./simple";
-var genAppsLogoComponentsStyle = function genAppsLogoComponentsStyle(token) {
-  var _token$layout, _token$layout2, _token$layout3, _token$layout4, _token$layout5;
-  return _defineProperty({}, 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': _defineProperty({}, "".concat(token.antCls, "-popover-arrow"), {
-      display: 'none'
-    }),
-    '&-simple': genAppsLogoComponentsSimpleListStyle(token),
-    '&-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': genAppsLogoComponentsSimpleListStyle(token),
+      '&-default': genAppsLogoComponentsDefaultListStyle(token)
+    }
+  };
 };
 export function useStyle(prefixCls) {
-  return useAntdStyle('AppsLogoComponents', function (token) {
-    var proCardToken = _objectSpread(_objectSpread({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return useAntdStyle('AppsLogoComponents', token => {
+    const proCardToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genAppsLogoComponentsStyle(proCardToken)];
   });
 }

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

@@ -1,4 +1,4 @@
-var genAppsLogoComponentsSimpleListStyle = function genAppsLogoComponentsSimpleListStyle(token) {
+const genAppsLogoComponentsSimpleListStyle = token => {
   return {
     '&-content': {
       maxHeight: 'calc(100vh - 48px)',

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

@@ -1,21 +1,24 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["isMobile", "collapsed"];
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { ArrowSvgIcon } from "../SiderMenu/Arrow";
 import { useStyle } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
-export var CollapsedIcon = function CollapsedIcon(props) {
-  var isMobile = props.isMobile,
-    collapsed = props.collapsed,
-    rest = _objectWithoutProperties(props, _excluded);
-  var _useStyle = useStyle(props.className),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
+export const CollapsedIcon = props => {
+  const {
+    isMobile,
+    collapsed,
+    ...rest
+  } = props;
+  const {
+    wrapSSR,
+    hashId
+  } = useStyle(props.className);
   if (isMobile && collapsed) return null;
-  return wrapSSR( /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({}, rest), {}, {
-    className: classNames(props.className, hashId, _defineProperty(_defineProperty({}, "".concat(props.className, "-collapsed"), collapsed), "".concat(props.className, "-is-mobile"), isMobile)),
+  return wrapSSR( /*#__PURE__*/_jsx("div", {
+    ...rest,
+    className: clsx(props.className, hashId, {
+      [`${props.className}-collapsed`]: collapsed,
+      [`${props.className}-is-mobile`]: isMobile
+    }),
     children: /*#__PURE__*/_jsx(ArrowSvgIcon, {})
-  })));
+  }));
 };

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

@@ -1,49 +1,49 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { useStyle as useAntdStyle } from "../../../provider";
-var genSiderMenuStyle = function genSiderMenuStyle(token) {
-  var _token$layout, _token$layout2, _token$layout3;
-  return _defineProperty({}, 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)'
+        }
       }
     }
-  });
+  };
 };
 export function useStyle(prefixCls) {
-  return useAntdStyle('SiderMenuCollapsedIcon', function (token) {
-    var siderMenuToken = _objectSpread(_objectSpread({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return useAntdStyle('SiderMenuCollapsedIcon', token => {
+    const siderMenuToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genSiderMenuStyle(siderMenuToken)];
   });
 }

package/es/layout/components/Footer.js

@@ -1,29 +1,30 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { CopyrightOutlined } from '@ant-design/icons';
 import { Layout } from 'antd';
 import React, { Fragment } from 'react';
 import { GlobalFooter } from "./GlobalFooter";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var Footer = Layout.Footer;
-var DefaultFooter = function DefaultFooter(_ref) {
-  var links = _ref.links,
-    copyright = _ref.copyright,
-    style = _ref.style,
-    className = _ref.className,
-    prefixCls = _ref.prefixCls;
-  return /*#__PURE__*/_jsx(Footer, {
-    className: className,
-    style: _objectSpread({
-      padding: 0
-    }, style),
-    children: /*#__PURE__*/_jsx(GlobalFooter, {
-      links: links,
-      prefixCls: prefixCls,
-      copyright: copyright === false ? null : /*#__PURE__*/_jsxs(Fragment, {
-        children: [/*#__PURE__*/_jsx(CopyrightOutlined, {}), " ", copyright]
-      })
+const {
+  Footer
+} = Layout;
+const DefaultFooter = ({
+  links,
+  copyright,
+  style,
+  className,
+  prefixCls
+}) => /*#__PURE__*/_jsx(Footer, {
+  className: className,
+  style: {
+    padding: 0,
+    ...style
+  },
+  children: /*#__PURE__*/_jsx(GlobalFooter, {
+    links: links,
+    prefixCls: prefixCls,
+    copyright: copyright === false ? null : /*#__PURE__*/_jsxs(Fragment, {
+      children: [/*#__PURE__*/_jsx(CopyrightOutlined, {}), " ", copyright]
     })
-  });
-};
+  })
+});
 export { DefaultFooter };

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

@@ -1,10 +1,7 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "className", "extra", "portalDom", "style", "renderContent"];
-/* eslint-disable react-hooks/exhaustive-deps */import { omit } from '@rc-component/util';
+/* eslint-disable react-hooks/exhaustive-deps */
+import { omit } from '@rc-component/util';
 import { ConfigProvider } from 'antd';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React, { useContext, useEffect, useMemo } from 'react';
 import { createPortal } from 'react-dom';
 import { isBrowser } from "../../../utils";
@@ -14,28 +11,33 @@ import { useStylish } from "./style/stylish";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var 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 = _objectWithoutProperties(props, _excluded);
-  var _useContext = useContext(ConfigProvider.ConfigContext),
-    getPrefixCls = _useContext.getPrefixCls,
-    getTargetContainer = _useContext.getTargetContainer;
-  var prefixCls = props.prefixCls || getPrefixCls('pro');
-  var baseClassName = "".concat(prefixCls, "-footer-bar");
-  var _useStyle = useStyle(baseClassName),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
-  var value = useContext(RouteContext);
-  var width = 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
+  } = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = props.prefixCls || getPrefixCls('pro');
+  const baseClassName = `${prefixCls}-footer-bar`;
+  const {
+    wrapSSR,
+    hashId
+  } = useStyle(baseClassName);
+  const value = useContext(RouteContext);
+  const width = useMemo(() => {
+    const {
+      hasSiderMenu,
+      isMobile,
+      siderWidth
+    } = value;
     if (!hasSiderMenu) {
       return undefined;
     }
@@ -43,50 +45,54 @@ var 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 = useMemo(function () {
+  const containerDom = 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 = useStylish("".concat(baseClassName, ".").concat(baseClassName, "-stylish"), {
+  const stylish = useStylish(`${baseClassName}.${baseClassName}-stylish`, {
     stylish: props.stylish
   });
-  var dom = /*#__PURE__*/_jsxs(_Fragment, {
+  const dom = /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx("div", {
-      className: "".concat(baseClassName, "-left ").concat(hashId).trim(),
+      className: `${baseClassName}-left ${hashId}`.trim(),
       children: extra
     }), /*#__PURE__*/_jsx("div", {
-      className: "".concat(baseClassName, "-right ").concat(hashId).trim(),
+      className: `${baseClassName}-right ${hashId}`.trim(),
       children: children
     })]
   });
 
   /** 告诉 props 是否存在 footerBar */
-  useEffect(function () {
-    if (!value || !(value !== null && value !== void 0 && value.setHasFooterToolbar)) {
-      return function () {};
+  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__*/_jsx("div", _objectSpread(_objectSpread({
-    className: classNames(className, hashId, baseClassName, _defineProperty({}, "".concat(baseClassName, "-stylish"), !!props.stylish)),
-    style: _objectSpread({
-      width: width
-    }, style)
-  }, omit(restProps, ['prefixCls'])), {}, {
-    children: renderContent ? renderContent(_objectSpread(_objectSpread(_objectSpread({}, props), value), {}, {
+  const renderDom = /*#__PURE__*/_jsx("div", {
+    className: clsx(className, hashId, baseClassName, {
+      [`${baseClassName}-stylish`]: !!props.stylish
+    }),
+    style: {
+      width,
+      ...style
+    },
+    ...omit(restProps, ['prefixCls']),
+    children: renderContent ? renderContent({
+      ...props,
+      ...value,
       leftWidth: width
-    }), dom) : dom
-  }));
-  var ssrDom = !isBrowser() || !portalDom || !containerDom ? renderDom : /*#__PURE__*/createPortal(renderDom, containerDom, baseClassName);
+    }, dom) : dom
+  });
+  const ssrDom = !isBrowser() || !portalDom || !containerDom ? renderDom : /*#__PURE__*/createPortal(renderDom, containerDom, baseClassName);
   return stylish.wrapSSR(wrapSSR( /*#__PURE__*/_jsx(React.Fragment, {
     children: ssrDom
   }, baseClassName)));

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

@@ -1,47 +1,48 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { setAlpha, useStyle as useAntdStyle } from "../../../../provider";
-var genFooterToolBarStyle = function genFooterToolBarStyle(token) {
-  return _defineProperty({}, 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: 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: 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
+          }
         }
       }
     }
-  });
+  };
 };
 export function useStyle(prefixCls) {
-  return useAntdStyle('ProLayoutFooterToolbar', function (token) {
-    var proCardToken = _objectSpread(_objectSpread({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return useAntdStyle('ProLayoutFooterToolbar', token => {
+    const proCardToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genFooterToolBarStyle(proCardToken)];
   });
 }

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

@@ -1,13 +1,15 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { useStyle as useAntdStyle } from "../../../../provider";
-export function useStylish(prefixCls, _ref) {
-  var stylish = _ref.stylish;
-  return useAntdStyle('ProLayoutFooterToolbarStylish', function (token) {
-    var stylishToken = _objectSpread(_objectSpread({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+export function useStylish(prefixCls, {
+  stylish
+}) {
+  return useAntdStyle('ProLayoutFooterToolbarStylish', token => {
+    const stylishToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     if (!stylish) return [];
-    return [_defineProperty({}, "".concat(stylishToken.componentCls), stylish === null || stylish === void 0 ? void 0 : stylish(stylishToken))];
+    return [{
+      [`${stylishToken.componentCls}`]: stylish?.(stylishToken)
+    }];
   });
 }

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

@@ -1,40 +1,40 @@
 import { ConfigProvider } from 'antd';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React, { useContext } from 'react';
 import { useStyle } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var GlobalFooter = function GlobalFooter(_ref) {
-  var className = _ref.className,
-    prefixCls = _ref.prefixCls,
-    links = _ref.links,
-    copyright = _ref.copyright,
-    style = _ref.style;
-  var context = useContext(ConfigProvider.ConfigContext);
-  var baseClassName = context.getPrefixCls(prefixCls || 'pro-global-footer');
-  var _useStyle = useStyle(baseClassName),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
+const GlobalFooter = ({
+  className,
+  prefixCls,
+  links,
+  copyright,
+  style
+}) => {
+  const context = useContext(ConfigProvider.ConfigContext);
+  const baseClassName = context.getPrefixCls(prefixCls || 'pro-global-footer');
+  const {
+    wrapSSR,
+    hashId
+  } = useStyle(baseClassName);
   if ((links == null || links === false || Array.isArray(links) && links.length === 0) && (copyright == null || copyright === false)) {
     return null;
   }
   return wrapSSR( /*#__PURE__*/_jsxs("div", {
-    className: classNames(baseClassName, hashId, className),
+    className: clsx(baseClassName, hashId, className),
     style: style,
     children: [links && /*#__PURE__*/_jsx("div", {
-      className: "".concat(baseClassName, "-list ").concat(hashId).trim(),
-      children: links.map(function (link) {
-        return /*#__PURE__*/_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__*/_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__*/_jsx("div", {
-      className: "".concat(baseClassName, "-copyright ").concat(hashId).trim(),
+      className: `${baseClassName}-copyright ${hashId}`.trim(),
       children: copyright
     })]
   }));