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

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

@@ -1,6 +1,5 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { ConfigProvider } from 'antd';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React, { useContext } from 'react';
 import { RouteContext } from "../../context/RouteContext";
 import { useStyle } from "./style";
@@ -11,26 +10,32 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *
  * @param props
  */
-var GridContent = function GridContent(props) {
-  var value = useContext(RouteContext);
-  var children = props.children,
-    propsContentWidth = props.contentWidth,
-    propsClassName = props.className,
-    style = props.style;
-  var _useContext = useContext(ConfigProvider.ConfigContext),
-    getPrefixCls = _useContext.getPrefixCls;
-  var prefixCls = props.prefixCls || getPrefixCls('pro');
-  var contentWidth = propsContentWidth || value.contentWidth;
-  var className = "".concat(prefixCls, "-grid-content");
-  var _useStyle = useStyle(className),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
-  var isWide = contentWidth === 'Fixed' && value.layout === 'top';
+const GridContent = props => {
+  const value = useContext(RouteContext);
+  const {
+    children,
+    contentWidth: propsContentWidth,
+    className: propsClassName,
+    style
+  } = props;
+  const {
+    getPrefixCls
+  } = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = props.prefixCls || getPrefixCls('pro');
+  const contentWidth = propsContentWidth || value.contentWidth;
+  const className = `${prefixCls}-grid-content`;
+  const {
+    wrapSSR,
+    hashId
+  } = useStyle(className);
+  const isWide = contentWidth === 'Fixed' && value.layout === 'top';
   return wrapSSR( /*#__PURE__*/_jsx("div", {
-    className: classNames(className, hashId, propsClassName, _defineProperty({}, "".concat(className, "-wide"), isWide)),
+    className: clsx(className, hashId, propsClassName, {
+      [`${className}-wide`]: isWide
+    }),
     style: style,
     children: /*#__PURE__*/_jsx("div", {
-      className: "".concat(prefixCls, "-grid-content-children ").concat(hashId).trim(),
+      className: `${prefixCls}-grid-content-children ${hashId}`.trim(),
       children: children
     })
   }));

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

@@ -1,20 +1,21 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { useStyle as useAntdStyle } from "../../../provider";
-var genGridContentStyle = function genGridContentStyle(token) {
-  return _defineProperty({}, token.componentCls, {
-    width: '100%',
-    '&-wide': {
-      maxWidth: 1152,
-      margin: '0 auto'
+const genGridContentStyle = token => {
+  return {
+    [token.componentCls]: {
+      width: '100%',
+      '&-wide': {
+        maxWidth: 1152,
+        margin: '0 auto'
+      }
     }
-  });
+  };
 };
 export function useStyle(prefixCls) {
-  return useAntdStyle('ProLayoutGridContent', function (token) {
-    var GridContentToken = _objectSpread(_objectSpread({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return useAntdStyle('ProLayoutGridContent', token => {
+    const GridContentToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genGridContentStyle(GridContentToken)];
   });
 }

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

@@ -1,8 +1,5 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { ConfigProvider, Layout } from 'antd';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { isNeedOpenHash, ProProvider } from "../../../provider";
 import { clearMenuItem } from "../../utils/utils";
@@ -13,56 +10,55 @@ import { useStylish } from "./style/stylish";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-var Header = Layout.Header;
-var DefaultHeader = function DefaultHeader(props) {
-  var _token$layout2, _token$layout3, _token$layout4;
-  var isMobile = props.isMobile,
-    fixedHeader = props.fixedHeader,
-    propsClassName = props.className,
-    style = props.style,
-    collapsed = props.collapsed,
-    prefixCls = props.prefixCls,
-    onCollapse = props.onCollapse,
-    layout = props.layout,
-    headerRender = props.headerRender,
-    headerContentRender = props.headerContentRender;
-  var _useContext = useContext(ProProvider),
-    token = _useContext.token;
-  var context = useContext(ConfigProvider.ConfigContext);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isFixedHeaderScroll = _useState2[0],
-    setIsFixedHeaderScroll = _useState2[1];
-  var needFixedHeader = fixedHeader || layout === 'mix';
-  var renderContent = useCallback(function () {
-    var isTop = layout === 'top';
-    var clearMenuData = clearMenuItem(props.menuData || []);
-    var defaultDom = /*#__PURE__*/_jsx(GlobalHeader, _objectSpread(_objectSpread({
-      onCollapse: onCollapse
-    }, props), {}, {
+const {
+  Header
+} = Layout;
+const DefaultHeader = props => {
+  const {
+    isMobile,
+    fixedHeader,
+    className: propsClassName,
+    style,
+    collapsed,
+    prefixCls,
+    onCollapse,
+    layout,
+    headerRender,
+    headerContentRender
+  } = props;
+  const {
+    token
+  } = useContext(ProProvider);
+  const context = useContext(ConfigProvider.ConfigContext);
+  const [isFixedHeaderScroll, setIsFixedHeaderScroll] = useState(false);
+  const needFixedHeader = fixedHeader || layout === 'mix';
+  const renderContent = useCallback(() => {
+    const isTop = layout === 'top';
+    const clearMenuData = clearMenuItem(props.menuData || []);
+    let defaultDom = /*#__PURE__*/_jsx(GlobalHeader, {
+      onCollapse: onCollapse,
+      ...props,
       menuData: clearMenuData,
       children: headerContentRender && headerContentRender(props, null)
-    }));
+    });
     if (isTop && !isMobile) {
-      defaultDom = /*#__PURE__*/_jsx(TopNavHeader, _objectSpread(_objectSpread({
+      defaultDom = /*#__PURE__*/_jsx(TopNavHeader, {
         mode: "horizontal",
-        onCollapse: onCollapse
-      }, props), {}, {
+        onCollapse: onCollapse,
+        ...props,
         menuData: clearMenuData
-      }));
+      });
     }
     if (headerRender && typeof headerRender === 'function') {
       return headerRender(props, defaultDom);
     }
     return defaultDom;
   }, [headerContentRender, headerRender, isMobile, layout, onCollapse, props]);
-  useEffect(function () {
-    var _context$getTargetCon;
-    var dom = (context === null || context === void 0 || (_context$getTargetCon = context.getTargetContainer) === null || _context$getTargetCon === void 0 ? void 0 : _context$getTargetCon.call(context)) || document.body;
-    var isFixedHeaderFn = function isFixedHeaderFn() {
-      var _token$layout;
-      var scrollTop = dom.scrollTop;
-      if (scrollTop > (((_token$layout = token.layout) === null || _token$layout === void 0 || (_token$layout = _token$layout.header) === null || _token$layout === void 0 ? void 0 : _token$layout.heightLayoutHeader) || 56) && !isFixedHeaderScroll) {
+  useEffect(() => {
+    const dom = context?.getTargetContainer?.() || document.body;
+    const isFixedHeaderFn = () => {
+      const scrollTop = dom.scrollTop;
+      if (scrollTop > (token.layout?.header?.heightLayoutHeader || 56) && !isFixedHeaderScroll) {
         setIsFixedHeaderScroll(true);
         return true;
       }
@@ -76,20 +72,29 @@ var DefaultHeader = function DefaultHeader(props) {
     dom.addEventListener('scroll', isFixedHeaderFn, {
       passive: true
     });
-    return function () {
+    return () => {
       dom.removeEventListener('scroll', isFixedHeaderFn);
     };
-  }, [(_token$layout2 = token.layout) === null || _token$layout2 === void 0 || (_token$layout2 = _token$layout2.header) === null || _token$layout2 === void 0 ? void 0 : _token$layout2.heightLayoutHeader, needFixedHeader, isFixedHeaderScroll]);
-  var isTop = layout === 'top';
-  var baseClassName = "".concat(prefixCls, "-layout-header");
-  var _useStyle = useStyle(baseClassName),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
-  var stylish = useStylish("".concat(baseClassName, ".").concat(baseClassName, "-stylish"), {
+  }, [token.layout?.header?.heightLayoutHeader, needFixedHeader, isFixedHeaderScroll]);
+  const isTop = layout === 'top';
+  const baseClassName = `${prefixCls}-layout-header`;
+  const {
+    wrapSSR,
+    hashId
+  } = useStyle(baseClassName);
+  const stylish = useStylish(`${baseClassName}.${baseClassName}-stylish`, {
     proLayoutCollapsedWidth: 64,
     stylish: props.stylish
   });
-  var className = classNames(propsClassName, hashId, baseClassName, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(baseClassName, "-fixed-header"), needFixedHeader), "".concat(baseClassName, "-fixed-header-scroll"), isFixedHeaderScroll), "".concat(baseClassName, "-mix"), layout === 'mix'), "".concat(baseClassName, "-fixed-header-action"), !collapsed), "".concat(baseClassName, "-top-menu"), isTop), "".concat(baseClassName, "-header"), true), "".concat(baseClassName, "-stylish"), !!props.stylish));
+  const className = clsx(propsClassName, hashId, baseClassName, {
+    [`${baseClassName}-fixed-header`]: needFixedHeader,
+    [`${baseClassName}-fixed-header-scroll`]: isFixedHeaderScroll,
+    [`${baseClassName}-mix`]: layout === 'mix',
+    [`${baseClassName}-fixed-header-action`]: !collapsed,
+    [`${baseClassName}-top-menu`]: isTop,
+    [`${baseClassName}-header`]: true,
+    [`${baseClassName}-stylish`]: !!props.stylish
+  });
   if (layout === 'side' && !isMobile) return null;
   return stylish.wrapSSR(wrapSSR( /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsxs(ConfigProvider
@@ -105,12 +110,13 @@ var DefaultHeader = function DefaultHeader(props) {
         }
       },
       children: [needFixedHeader && /*#__PURE__*/_jsx(Header, {
-        style: _objectSpread({
-          height: ((_token$layout3 = token.layout) === null || _token$layout3 === void 0 || (_token$layout3 = _token$layout3.header) === null || _token$layout3 === void 0 ? void 0 : _token$layout3.heightLayoutHeader) || 56,
-          lineHeight: "".concat(((_token$layout4 = token.layout) === null || _token$layout4 === void 0 || (_token$layout4 = _token$layout4.header) === null || _token$layout4 === void 0 ? void 0 : _token$layout4.heightLayoutHeader) || 56, "px"),
+        style: {
+          height: token.layout?.header?.heightLayoutHeader || 56,
+          lineHeight: `${token.layout?.header?.heightLayoutHeader || 56}px`,
           backgroundColor: 'transparent',
-          zIndex: 19
-        }, style)
+          zIndex: 19,
+          ...style
+        }
       }), /*#__PURE__*/_jsx(Header, {
         className: className,
         style: style,

package/es/layout/components/Header/style/header.js

@@ -1,57 +1,59 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { useStyle as useAntdStyle } from "../../../../provider";
-var genProLayoutHeaderStyle = function genProLayoutHeaderStyle(token) {
-  var _token$layout, _token$layout2, _token$layout3, _token$layout4;
-  return _defineProperty({}, "".concat(token.proComponentsCls, "-layout"), _defineProperty({}, "".concat(token.antCls, "-layout-header").concat(token.componentCls), {
-    height: ((_token$layout = token.layout) === null || _token$layout === void 0 || (_token$layout = _token$layout.header) === null || _token$layout === void 0 ? void 0 : _token$layout.heightLayoutHeader) || 56,
-    lineHeight: "".concat(((_token$layout2 = token.layout) === null || _token$layout2 === void 0 || (_token$layout2 = _token$layout2.header) === null || _token$layout2 === void 0 ? void 0 : _token$layout2.heightLayoutHeader) || 56, "px"),
-    // hitu 用了这个属性，不能删除哦 @南取
-    zIndex: 19,
-    width: '100%',
-    paddingBlock: 0,
-    paddingInline: 0,
-    borderBlockEnd: "1px solid ".concat(token.colorSplit),
-    backgroundColor: ((_token$layout3 = token.layout) === null || _token$layout3 === void 0 || (_token$layout3 = _token$layout3.header) === null || _token$layout3 === void 0 ? void 0 : _token$layout3.colorBgHeader) || 'rgba(255, 255, 255, 0.4)',
-    WebkitBackdropFilter: 'blur(8px)',
-    backdropFilter: 'blur(8px)',
-    transition: 'background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)',
-    '&-fixed-header': {
-      position: 'fixed',
-      insetBlockStart: 0,
-      width: '100%',
-      zIndex: 100,
-      insetInlineEnd: 0
-    },
-    '&-fixed-header-scroll': {
-      backgroundColor: ((_token$layout4 = token.layout) === null || _token$layout4 === void 0 || (_token$layout4 = _token$layout4.header) === null || _token$layout4 === void 0 ? void 0 : _token$layout4.colorBgScrollHeader) || 'rgba(255, 255, 255, 0.8)'
-    },
-    '&-header-actions': {
-      display: 'flex',
-      alignItems: 'center',
-      fontSize: '16',
-      cursor: 'pointer',
-      '& &-item': {
+const genProLayoutHeaderStyle = token => {
+  return {
+    [`${token.proComponentsCls}-layout`]: {
+      [`${token.antCls}-layout-header${token.componentCls}`]: {
+        height: token.layout?.header?.heightLayoutHeader || 56,
+        lineHeight: `${token.layout?.header?.heightLayoutHeader || 56}px`,
+        // hitu 用了这个属性，不能删除哦 @南取
+        zIndex: 19,
+        width: '100%',
         paddingBlock: 0,
-        paddingInline: 8,
-        '&:hover': {
-          color: token.colorText
+        paddingInline: 0,
+        borderBlockEnd: `1px solid ${token.colorSplit}`,
+        backgroundColor: token.layout?.header?.colorBgHeader || 'rgba(255, 255, 255, 0.4)',
+        WebkitBackdropFilter: 'blur(8px)',
+        backdropFilter: 'blur(8px)',
+        transition: 'background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)',
+        '&-fixed-header': {
+          position: 'fixed',
+          insetBlockStart: 0,
+          width: '100%',
+          zIndex: 100,
+          insetInlineEnd: 0
+        },
+        '&-fixed-header-scroll': {
+          backgroundColor: token.layout?.header?.colorBgScrollHeader || 'rgba(255, 255, 255, 0.8)'
+        },
+        '&-header-actions': {
+          display: 'flex',
+          alignItems: 'center',
+          fontSize: '16',
+          cursor: 'pointer',
+          '& &-item': {
+            paddingBlock: 0,
+            paddingInline: 8,
+            '&:hover': {
+              color: token.colorText
+            }
+          }
+        },
+        '&-header-realDark': {
+          boxShadow: '0 2px 8px 0 rgba(0, 0, 0, 65%)'
+        },
+        '&-header-actions-header-action': {
+          transition: 'width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)'
         }
       }
-    },
-    '&-header-realDark': {
-      boxShadow: '0 2px 8px 0 rgba(0, 0, 0, 65%)'
-    },
-    '&-header-actions-header-action': {
-      transition: 'width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)'
     }
-  }));
+  };
 };
 export function useStyle(prefixCls) {
-  return useAntdStyle('ProLayoutHeader', function (token) {
-    var ProLayoutHeaderToken = _objectSpread(_objectSpread({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return useAntdStyle('ProLayoutHeader', token => {
+    const ProLayoutHeaderToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genProLayoutHeaderStyle(ProLayoutHeaderToken)];
   });
 }

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

@@ -1,15 +1,19 @@
-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,
-    proLayoutCollapsedWidth = _ref.proLayoutCollapsedWidth;
-  return useAntdStyle('ProLayoutHeaderStylish', function (token) {
-    var stylishToken = _objectSpread(_objectSpread({}, token), {}, {
-      componentCls: ".".concat(prefixCls),
-      proLayoutCollapsedWidth: proLayoutCollapsedWidth
-    });
+export function useStylish(prefixCls, {
+  stylish,
+  proLayoutCollapsedWidth
+}) {
+  return useAntdStyle('ProLayoutHeaderStylish', token => {
+    const stylishToken = {
+      ...token,
+      componentCls: `.${prefixCls}`,
+      proLayoutCollapsedWidth
+    };
     if (!stylish) return [];
-    return [_defineProperty({}, "div".concat(token.proComponentsCls, "-layout"), _defineProperty({}, "".concat(stylishToken.componentCls), stylish === null || stylish === void 0 ? void 0 : stylish(stylishToken)))];
+    return [{
+      [`div${token.proComponentsCls}-layout`]: {
+        [`${stylishToken.componentCls}`]: stylish?.(stylishToken)
+      }
+    }];
   });
 }

package/es/layout/components/Help/AsyncContentPanel.js

@@ -1,4 +1,3 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { Spin } from 'antd';
 import { useContext, useEffect, useState } from 'react';
 import { ProHelpProvide } from "./HelpProvide";
@@ -9,24 +8,20 @@ import { RenderContentPanel } from "./RenderContentPanel";
  * @param item 指向当前面板的 ProHelpDataSource
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-export var AsyncContentPanel = function AsyncContentPanel(_ref) {
-  var item = _ref.item,
-    _onInit = _ref.onInit;
-  var _useContext = useContext(ProHelpProvide),
-    onLoadContext = _useContext.onLoadContext; // 获取上下文中的 onLoadContext
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    loading = _useState2[0],
-    setLoading = _useState2[1]; // 加载状态
-  var _useState3 = useState(),
-    _useState4 = _slicedToArray(_useState3, 2),
-    content = _useState4[0],
-    setContent = _useState4[1]; // 内容数据
+export const AsyncContentPanel = ({
+  item,
+  onInit
+}) => {
+  const {
+    onLoadContext
+  } = useContext(ProHelpProvide); // 获取上下文中的 onLoadContext
+  const [loading, setLoading] = useState(false); // 加载状态
+  const [content, setContent] = useState(); // 内容数据
 
-  useEffect(function () {
+  useEffect(() => {
     if (!item.key) return; // 如果没有key则返回
     setLoading(true); // 开始加载
-    onLoadContext === null || onLoadContext === void 0 || onLoadContext(item.key, item).then(function (res) {
+    onLoadContext?.(item.key, item).then(res => {
       // 调用加载方法
       setLoading(false); // 加载完成
       setContent(res); // 设置内容数据
@@ -52,8 +47,8 @@ export var AsyncContentPanel = function AsyncContentPanel(_ref) {
 
   // 加载完成后，渲染内容面板
   return /*#__PURE__*/_jsx(RenderContentPanel, {
-    onInit: function onInit(ref) {
-      _onInit === null || _onInit === void 0 || _onInit(ref);
+    onInit: ref => {
+      onInit?.(ref);
     },
     dataSourceChildren: content
   });

package/es/layout/components/Help/HelpProvide.js

@@ -49,7 +49,7 @@ import React from 'react';
  * 该上下文对象通常用于在 React 组件树中共享数据，即可以通过在组件中使用 ProHelpProvide.Provider 包裹一组组件，
  * 将 dataSource 和 valueTypeMap 数据源传递给这些组件，这些组件即可从上下文中获取 dataSource 数据源，实现数据的共享和传递。
  */
-export var ProHelpProvide = /*#__PURE__*/React.createContext({
+export const ProHelpProvide = /*#__PURE__*/React.createContext({
   dataSource: [],
   valueTypeMap: new Map()
 });