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

package/es/layout/components/SiderMenu/SiderMenu.js

@@ -1,9 +1,5 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-var _excluded = ["title", "render"];
 import { Avatar, Layout, Menu, Space } from 'antd';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React, { useContext, useMemo } from 'react';
 import { ProProvider } from "../../../provider";
 import { AppsLogoComponents, defaultRenderLogo } from "../AppsLogoComponents";
@@ -14,16 +10,17 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
-var _SafetyWarningProvider = /*#__PURE__*/React.memo(function (props) {
+const _SafetyWarningProvider = /*#__PURE__*/React.memo(props => {
   return /*#__PURE__*/_jsx(_Fragment, {
     children: props.children
   });
 });
-var Sider = Layout.Sider,
-  _Layout$_InternalSide = Layout._InternalSiderContext,
-  SiderContext = _Layout$_InternalSide === void 0 ? {
+const {
+  Sider,
+  _InternalSiderContext: SiderContext = {
     Provider: _SafetyWarningProvider
-  } : _Layout$_InternalSide;
+  }
+} = Layout;
 /**
  * 渲染 title 和 logo
  *
@@ -31,18 +28,19 @@ var Sider = Layout.Sider,
  * @param renderKey
  * @returns
  */
-export var renderLogoAndTitle = function renderLogoAndTitle(props) {
-  var renderKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'menuHeaderRender';
-  var logo = props.logo,
-    title = props.title,
-    layout = props.layout;
-  var renderFunction = props[renderKey];
+export const renderLogoAndTitle = (props, renderKey = 'menuHeaderRender') => {
+  const {
+    logo,
+    title,
+    layout
+  } = props;
+  const renderFunction = props[renderKey];
   if (renderFunction === false) {
     return null;
   }
-  var logoDom = defaultRenderLogo(logo);
-  var titleDom = /*#__PURE__*/_jsx("h1", {
-    children: title !== null && title !== void 0 ? title : 'Ant Design Pro'
+  const logoDom = defaultRenderLogo(logo);
+  const titleDom = /*#__PURE__*/_jsx("h1", {
+    children: title ?? 'Ant Design Pro'
   });
   if (renderFunction) {
     // when collapsed, no render title
@@ -65,83 +63,91 @@ export var renderLogoAndTitle = function renderLogoAndTitle(props) {
     children: [logoDom, titleDom]
   }, "title");
 };
-var SiderMenu = function SiderMenu(props) {
-  var _props$menu$collapsed, _props$menu, _props$menu3;
-  var collapsed = props.collapsed,
-    originCollapsed = props.originCollapsed,
-    fixSiderbar = props.fixSiderbar,
-    menuFooterRender = props.menuFooterRender,
-    _onCollapse = props.onCollapse,
-    theme = props.theme,
-    siderWidth = props.siderWidth,
-    isMobile = props.isMobile,
-    onMenuHeaderClick = props.onMenuHeaderClick,
-    _props$breakpoint = props.breakpoint,
-    breakpoint = _props$breakpoint === void 0 ? 'lg' : _props$breakpoint,
-    style = props.style,
-    layout = props.layout,
-    _props$menuExtraRende = props.menuExtraRender,
-    menuExtraRender = _props$menuExtraRende === void 0 ? false : _props$menuExtraRende,
-    links = props.links,
-    menuContentRender = props.menuContentRender,
-    collapsedButtonRender = props.collapsedButtonRender,
-    prefixCls = props.prefixCls,
-    avatarProps = props.avatarProps,
-    actionsRender = props.actionsRender,
-    onOpenChange = props.onOpenChange,
-    stylish = props.stylish,
-    logoStyle = props.logoStyle;
-  var _useContext = useContext(ProProvider),
-    hashId = _useContext.hashId;
-  var showSiderExtraDom = useMemo(function () {
+const SiderMenu = props => {
+  const {
+    collapsed,
+    originCollapsed,
+    fixSiderbar,
+    menuFooterRender,
+    onCollapse,
+    theme,
+    siderWidth,
+    isMobile,
+    onMenuHeaderClick,
+    breakpoint = 'lg',
+    style,
+    layout,
+    menuExtraRender = false,
+    links,
+    menuContentRender,
+    collapsedButtonRender,
+    prefixCls,
+    avatarProps,
+    actionsRender,
+    onOpenChange,
+    stylish,
+    logoStyle
+  } = props;
+  const {
+    hashId
+  } = useContext(ProProvider);
+  const showSiderExtraDom = useMemo(() => {
     if (isMobile) return false;
     if (layout === 'mix') return false;
     return true;
   }, [isMobile, layout]);
-  var baseClassName = "".concat(prefixCls, "-sider");
+  const baseClassName = `${prefixCls}-sider`;
 
   // 收起的宽度，从 menu 配置中读取，默认为 64
-  var collapsedWidth = (_props$menu$collapsed = (_props$menu = props.menu) === null || _props$menu === void 0 ? void 0 : _props$menu.collapsedWidth) !== null && _props$menu$collapsed !== void 0 ? _props$menu$collapsed : 64;
+  const collapsedWidth = props.menu?.collapsedWidth ?? 64;
 
   // 之所以这样写是为了提升样式优先级，不然会被sider 自带的覆盖掉
-  var stylishClassName = useStylish("".concat(baseClassName, ".").concat(baseClassName, "-stylish"), {
-    stylish: stylish,
+  const stylishClassName = useStylish(`${baseClassName}.${baseClassName}-stylish`, {
+    stylish,
     proLayoutCollapsedWidth: collapsedWidth
   });
-  var siderClassName = classNames("".concat(baseClassName), hashId, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(baseClassName, "-fixed"), fixSiderbar), "".concat(baseClassName, "-fixed-mix"), layout === 'mix' && !isMobile && fixSiderbar), "".concat(baseClassName, "-collapsed"), props.collapsed), "".concat(baseClassName, "-layout-").concat(layout), layout && !isMobile), "".concat(baseClassName, "-light"), theme !== 'dark'), "".concat(baseClassName, "-mix"), layout === 'mix' && !isMobile), "".concat(baseClassName, "-stylish"), !!stylish));
-  var headerDom = renderLogoAndTitle(props);
-  var extraDom = menuExtraRender && menuExtraRender(props);
-  var menuDom = useMemo(function () {
-    return menuContentRender !== false && /*#__PURE__*/_createElement(BaseMenu, _objectSpread(_objectSpread({}, props), {}, {
-      key: "base-menu",
-      mode: collapsed && !isMobile ? 'vertical' : 'inline',
-      onOpenChange: onOpenChange,
-      style: {
-        width: '100%'
-      },
-      className: "".concat(baseClassName, "-menu ").concat(hashId).trim()
-    }));
-  }, [baseClassName, hashId, menuContentRender, onOpenChange, props]);
-  var linksMenuItems = (links || []).map(function (node, index) {
-    return {
-      className: "".concat(baseClassName, "-link"),
-      label: node,
-      key: index
-    };
+  const siderClassName = clsx(`${baseClassName}`, hashId, {
+    [`${baseClassName}-fixed`]: fixSiderbar,
+    [`${baseClassName}-fixed-mix`]: layout === 'mix' && !isMobile && fixSiderbar,
+    [`${baseClassName}-collapsed`]: props.collapsed,
+    [`${baseClassName}-layout-${layout}`]: layout && !isMobile,
+    [`${baseClassName}-light`]: theme !== 'dark',
+    [`${baseClassName}-mix`]: layout === 'mix' && !isMobile,
+    [`${baseClassName}-stylish`]: !!stylish
   });
-  var menuRenderDom = useMemo(function () {
+  const headerDom = renderLogoAndTitle(props);
+  const extraDom = menuExtraRender && menuExtraRender(props);
+  const menuDom = useMemo(() => menuContentRender !== false && /*#__PURE__*/_createElement(BaseMenu, {
+    ...props,
+    key: "base-menu",
+    mode: collapsed && !isMobile ? 'vertical' : 'inline',
+    onOpenChange: onOpenChange,
+    style: {
+      width: '100%'
+    },
+    className: `${baseClassName}-menu ${hashId}`.trim()
+  }), [baseClassName, hashId, menuContentRender, onOpenChange, props]);
+  const linksMenuItems = (links || []).map((node, index) => ({
+    className: `${baseClassName}-link`,
+    label: node,
+    key: index
+  }));
+  const menuRenderDom = useMemo(() => {
     return menuContentRender ? menuContentRender(props, menuDom) : menuDom;
   }, [menuContentRender, menuDom, props]);
-  var avatarDom = useMemo(function () {
+  const avatarDom = useMemo(() => {
     if (!avatarProps) return null;
-    var title = avatarProps.title,
-      render = avatarProps.render,
-      rest = _objectWithoutProperties(avatarProps, _excluded);
-    var dom = /*#__PURE__*/_jsxs("div", {
-      className: "".concat(baseClassName, "-actions-avatar"),
-      children: [rest !== null && rest !== void 0 && rest.src || rest !== null && rest !== void 0 && rest.srcSet || rest.icon || rest.children ? /*#__PURE__*/_jsx(Avatar, _objectSpread({
-        size: 28
-      }, rest)) : null, avatarProps.title && !collapsed && /*#__PURE__*/_jsx("span", {
+    const {
+      title,
+      render,
+      ...rest
+    } = avatarProps;
+    const dom = /*#__PURE__*/_jsxs("div", {
+      className: `${baseClassName}-actions-avatar`,
+      children: [rest?.src || rest?.srcSet || rest.icon || rest.children ? /*#__PURE__*/_jsx(Avatar, {
+        size: 28,
+        ...rest
+      }) : null, avatarProps.title && !collapsed && /*#__PURE__*/_jsx("span", {
         children: title
       })]
     });
@@ -150,16 +156,16 @@ var SiderMenu = function SiderMenu(props) {
     }
     return dom;
   }, [avatarProps, baseClassName, collapsed]);
-  var actionsDom = useMemo(function () {
+  const actionsDom = useMemo(() => {
     if (!actionsRender) return null;
     return /*#__PURE__*/_jsx(Space, {
       align: "center",
       size: 4,
       orientation: collapsed ? 'vertical' : 'horizontal',
-      className: classNames(["".concat(baseClassName, "-actions-list"), collapsed && "".concat(baseClassName, "-actions-list-collapsed"), hashId]),
-      children: [actionsRender === null || actionsRender === void 0 ? void 0 : actionsRender(props)].flat(1).map(function (item, index) {
+      className: clsx([`${baseClassName}-actions-list`, collapsed && `${baseClassName}-actions-list-collapsed`, hashId]),
+      children: [actionsRender?.(props)].flat(1).map((item, index) => {
         return /*#__PURE__*/_jsx("div", {
-          className: "".concat(baseClassName, "-actions-list-item ").concat(hashId).trim(),
+          className: `${baseClassName}-actions-list-item ${hashId}`.trim(),
           children: item
         }, index);
       })
@@ -167,7 +173,7 @@ var SiderMenu = function SiderMenu(props) {
   },
   // eslint-disable-next-line react-hooks/exhaustive-deps
   [actionsRender, baseClassName, collapsed]);
-  var appsDom = useMemo(function () {
+  const appsDom = useMemo(() => {
     return /*#__PURE__*/_jsx(AppsLogoComponents, {
       onItemClick: props.itemClick,
       appListRender: props.appListRender,
@@ -175,48 +181,49 @@ var SiderMenu = function SiderMenu(props) {
       prefixCls: props.prefixCls
     });
   }, [props.appList, props.appListRender, props.prefixCls]);
-  var collapsedDom = useMemo(function () {
+  const collapsedDom = useMemo(() => {
     if (collapsedButtonRender === false) return null;
-    var dom = /*#__PURE__*/_jsx(CollapsedIcon, {
+    const dom = /*#__PURE__*/_jsx(CollapsedIcon, {
       isMobile: isMobile,
       collapsed: originCollapsed,
-      className: "".concat(baseClassName, "-collapsed-button"),
-      onClick: function onClick() {
-        _onCollapse === null || _onCollapse === void 0 || _onCollapse(!originCollapsed);
+      className: `${baseClassName}-collapsed-button`,
+      onClick: () => {
+        onCollapse?.(!originCollapsed);
       }
     });
     if (collapsedButtonRender) return collapsedButtonRender(collapsed, dom);
     return dom;
-  }, [collapsedButtonRender, isMobile, originCollapsed, baseClassName, collapsed, _onCollapse]);
+  }, [collapsedButtonRender, isMobile, originCollapsed, baseClassName, collapsed, onCollapse]);
 
   /** 操作区域的dom */
-  var actionAreaDom = useMemo(function () {
+  const actionAreaDom = useMemo(() => {
     if (!avatarDom && !actionsDom) return null;
     return /*#__PURE__*/_jsxs("div", {
-      className: classNames("".concat(baseClassName, "-actions"), hashId, collapsed && "".concat(baseClassName, "-actions-collapsed")),
+      className: clsx(`${baseClassName}-actions`, hashId, collapsed && `${baseClassName}-actions-collapsed`),
       children: [avatarDom, actionsDom]
     });
   }, [actionsDom, avatarDom, baseClassName, collapsed, hashId]);
 
   /* Using the useMemo hook to create a CSS class that will hide the menu when the menu is collapsed. */
-  var hideMenuWhenCollapsedClassName = useMemo(function () {
-    var _props$menu2;
+  const hideMenuWhenCollapsedClassName = useMemo(() => {
     // 收起时完全隐藏菜单
-    if (props !== null && props !== void 0 && (_props$menu2 = props.menu) !== null && _props$menu2 !== void 0 && _props$menu2.hideMenuWhenCollapsed && collapsed) {
-      return "".concat(baseClassName, "-hide-menu-collapsed");
+    if (props?.menu?.hideMenuWhenCollapsed && collapsed) {
+      return `${baseClassName}-hide-menu-collapsed`;
     }
     return null;
-  }, [baseClassName, collapsed, props === null || props === void 0 || (_props$menu3 = props.menu) === null || _props$menu3 === void 0 ? void 0 : _props$menu3.hideMenuWhenCollapsed]);
-  var menuFooterDom = menuFooterRender && (menuFooterRender === null || menuFooterRender === void 0 ? void 0 : menuFooterRender(props));
-  var menuDomItems = /*#__PURE__*/_jsxs(_Fragment, {
+  }, [baseClassName, collapsed, props?.menu?.hideMenuWhenCollapsed]);
+  const menuFooterDom = menuFooterRender && menuFooterRender?.(props);
+  const menuDomItems = /*#__PURE__*/_jsxs(_Fragment, {
     children: [headerDom && /*#__PURE__*/_jsxs("div", {
-      className: classNames([classNames("".concat(baseClassName, "-logo"), hashId, _defineProperty({}, "".concat(baseClassName, "-logo-collapsed"), collapsed))]),
+      className: clsx([clsx(`${baseClassName}-logo`, hashId, {
+        [`${baseClassName}-logo-collapsed`]: collapsed
+      })]),
       onClick: showSiderExtraDom ? onMenuHeaderClick : undefined,
       id: "logo",
       style: logoStyle,
       children: [headerDom, appsDom]
     }), extraDom && /*#__PURE__*/_jsx("div", {
-      className: classNames(["".concat(baseClassName, "-extra"), !headerDom && "".concat(baseClassName, "-extra-no-logo"), hashId]),
+      className: clsx([`${baseClassName}-extra`, !headerDom && `${baseClassName}-extra-no-logo`, hashId]),
       children: extraDom
     }), /*#__PURE__*/_jsx("div", {
       style: {
@@ -228,10 +235,10 @@ var SiderMenu = function SiderMenu(props) {
     }), /*#__PURE__*/_jsxs(SiderContext.Provider, {
       value: {},
       children: [links ? /*#__PURE__*/_jsx("div", {
-        className: "".concat(baseClassName, "-links ").concat(hashId).trim(),
+        className: `${baseClassName}-links ${hashId}`.trim(),
         children: /*#__PURE__*/_jsx(Menu, {
           inlineIndent: 16,
-          className: "".concat(baseClassName, "-link-menu ").concat(hashId).trim(),
+          className: `${baseClassName}-link-menu ${hashId}`.trim(),
           selectedKeys: [],
           openKeys: [],
           theme: theme,
@@ -241,37 +248,40 @@ var SiderMenu = function SiderMenu(props) {
       }) : null, showSiderExtraDom && /*#__PURE__*/_jsx(_Fragment, {
         children: actionAreaDom
       }), menuFooterDom && /*#__PURE__*/_jsx("div", {
-        className: classNames(["".concat(baseClassName, "-footer"), hashId, _defineProperty({}, "".concat(baseClassName, "-footer-collapsed"), collapsed)]),
+        className: clsx([`${baseClassName}-footer`, hashId, {
+          [`${baseClassName}-footer-collapsed`]: collapsed
+        }]),
         children: menuFooterDom
       })]
     })]
   });
   return stylishClassName.wrapSSR( /*#__PURE__*/_jsxs(_Fragment, {
     children: [fixSiderbar && !isMobile && !hideMenuWhenCollapsedClassName && /*#__PURE__*/_jsx("div", {
-      style: _objectSpread({
+      style: {
         width: collapsed ? collapsedWidth : siderWidth,
         overflow: 'hidden',
-        flex: "0 0 ".concat(collapsed ? collapsedWidth : siderWidth, "px"),
+        flex: `0 0 ${collapsed ? collapsedWidth : siderWidth}px`,
         maxWidth: collapsed ? collapsedWidth : siderWidth,
         minWidth: collapsed ? collapsedWidth : siderWidth,
-        transition: 'all 0.2s ease 0s'
-      }, style)
+        transition: 'all 0.2s ease 0s',
+        ...style
+      }
     }), /*#__PURE__*/_jsxs(Sider, {
       collapsible: true,
       trigger: null,
       collapsed: collapsed,
       breakpoint: breakpoint === false ? undefined : breakpoint,
-      onCollapse: function onCollapse(collapse) {
+      onCollapse: collapse => {
         if (isMobile) return;
-        _onCollapse === null || _onCollapse === void 0 || _onCollapse(collapse);
+        onCollapse?.(collapse);
       },
       collapsedWidth: collapsedWidth,
       style: style,
       theme: theme,
       width: siderWidth,
-      className: classNames(siderClassName, hashId, hideMenuWhenCollapsedClassName),
+      className: clsx(siderClassName, hashId, hideMenuWhenCollapsedClassName),
       children: [hideMenuWhenCollapsedClassName ? /*#__PURE__*/_jsx("div", {
-        className: "".concat(baseClassName, "-hide-when-collapsed ").concat(hashId).trim(),
+        className: `${baseClassName}-hide-when-collapsed ${hashId}`.trim(),
         style: {
           height: '100%',
           width: '100%',

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

@@ -1,61 +1,65 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { omit } from '@rc-component/util';
 import { ConfigProvider, Drawer } from 'antd';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React, { useContext, useEffect } from 'react';
 import { ProProvider } from "../../../provider";
 import { SiderMenu } from "./SiderMenu";
 import { useStyle } from "./style/index";
 import { jsx as _jsx } from "react/jsx-runtime";
-var SiderMenuWrapper = function SiderMenuWrapper(props) {
-  var _props$menu$collapsed, _props$menu, _token$layout;
-  var isMobile = props.isMobile,
-    siderWidth = props.siderWidth,
-    collapsed = props.collapsed,
-    onCollapse = props.onCollapse,
-    style = props.style,
-    className = props.className,
-    hide = props.hide,
-    prefixCls = props.prefixCls,
-    getContainer = props.getContainer;
-  var _useContext = useContext(ProProvider),
-    token = _useContext.token;
-  useEffect(function () {
+const SiderMenuWrapper = props => {
+  const {
+    isMobile,
+    siderWidth,
+    collapsed,
+    onCollapse,
+    style,
+    className,
+    hide,
+    prefixCls,
+    getContainer
+  } = props;
+  const {
+    token
+  } = useContext(ProProvider);
+  useEffect(() => {
     if (isMobile === true) {
-      onCollapse === null || onCollapse === void 0 || onCollapse(true);
+      onCollapse?.(true);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isMobile]);
-  var omitProps = omit(props, ['className', 'style']);
-  var _React$useContext = React.useContext(ConfigProvider.ConfigContext),
-    direction = _React$useContext.direction;
+  const omitProps = omit(props, ['className', 'style']);
+  const {
+    direction
+  } = React.useContext(ConfigProvider.ConfigContext);
 
   // 从 menu 配置中读取 collapsedWidth，默认为 64
-  var collapsedWidth = (_props$menu$collapsed = (_props$menu = props.menu) === null || _props$menu === void 0 ? void 0 : _props$menu.collapsedWidth) !== null && _props$menu$collapsed !== void 0 ? _props$menu$collapsed : 64;
-  var _useStyle = useStyle("".concat(prefixCls, "-sider"), {
-      proLayoutCollapsedWidth: collapsedWidth
-    }),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
-  var siderClassName = classNames("".concat(prefixCls, "-sider"), className, hashId);
+  const collapsedWidth = props.menu?.collapsedWidth ?? 64;
+  const {
+    wrapSSR,
+    hashId
+  } = useStyle(`${prefixCls}-sider`, {
+    proLayoutCollapsedWidth: collapsedWidth
+  });
+  const siderClassName = clsx(`${prefixCls}-sider`, className, hashId);
   if (hide) {
     return null;
   }
   return wrapSSR(isMobile ? /*#__PURE__*/_jsx(Drawer, {
     placement: direction === 'rtl' ? 'right' : 'left',
-    className: classNames("".concat(prefixCls, "-drawer-sider"), className),
+    className: clsx(`${prefixCls}-drawer-sider`, className),
     open: !collapsed,
-    afterOpenChange: function afterOpenChange(open) {
+    afterOpenChange: open => {
       if (!open) {
-        onCollapse === null || onCollapse === void 0 || onCollapse(true);
+        onCollapse?.(true);
       }
     },
-    style: _objectSpread({
+    style: {
       padding: 0,
-      height: '100vh'
-    }, style),
-    onClose: function onClose() {
-      onCollapse === null || onCollapse === void 0 || onCollapse(true);
+      height: '100vh',
+      ...style
+    },
+    onClose: () => {
+      onCollapse?.(true);
     },
     maskClosable: true,
     closable: false,
@@ -67,21 +71,22 @@ var SiderMenuWrapper = function SiderMenuWrapper(props) {
         padding: 0,
         display: 'flex',
         flexDirection: 'row',
-        backgroundColor: (_token$layout = token.layout) === null || _token$layout === void 0 || (_token$layout = _token$layout.sider) === null || _token$layout === void 0 ? void 0 : _token$layout.colorMenuBackground
+        backgroundColor: token.layout?.sider?.colorMenuBackground
       }
     },
-    children: /*#__PURE__*/_jsx(SiderMenu, _objectSpread(_objectSpread({}, omitProps), {}, {
+    children: /*#__PURE__*/_jsx(SiderMenu, {
+      ...omitProps,
       isMobile: true,
       className: siderClassName,
       collapsed: false,
       splitMenus: false,
       originCollapsed: collapsed
-    }))
-  }) : /*#__PURE__*/_jsx(SiderMenu, _objectSpread(_objectSpread({
+    })
+  }) : /*#__PURE__*/_jsx(SiderMenu, {
     className: siderClassName,
-    originCollapsed: collapsed
-  }, omitProps), {}, {
+    originCollapsed: collapsed,
+    ...omitProps,
     style: style
-  })));
+  }));
 };
 export { SiderMenuWrapper as SiderMenu };