fix(layout): disable SiderContext when Sider other dom

close #7372
ant-design · Jul 18, 2023 · 4d53446 · 4d53446
1 parent f90332a
commit 4d53446
Showing 1 changed file with 75 additions and 72 deletions.
diff --git a/packages/layout/src/components/SiderMenu/SiderMenu.tsx b/packages/layout/src/components/SiderMenu/SiderMenu.tsx
@@ -2,6 +2,7 @@ import type { GenerateStyle } from '@ant-design/pro-provider';
 import { ProProvider } from '@ant-design/pro-provider';
 import type { AvatarProps, SiderProps } from 'antd';
 import { Avatar, Layout, Menu, Space } from 'antd';
+import { SiderContext } from 'antd/es/layout/Sider';
 import type { ItemType } from 'antd/lib/menu/hooks/useItems';
 import classNames from 'classnames';
 import type { CSSProperties } from 'react';
@@ -382,81 +383,83 @@ const SiderMenu: React.FC<SiderMenuProps & PrivateSiderMenuProps> = (props) => {
   const menuFooterDom = menuFooterRender && menuFooterRender?.(props);
 
   const menuDomItems = (
-    <>
-      {headerDom && (
-        <div
-          className={classNames([
-            classNames(`${baseClassName}-logo`, hashId, {
-              [`${baseClassName}-logo-collapsed`]: collapsed,
-            }),
-          ])}
-          onClick={showSiderExtraDom ? onMenuHeaderClick : undefined}
-          id="logo"
-          style={logoStyle}
-        >
-          {headerDom}
-          {appsDom}
-        </div>
-      )}
-      {extraDom && (
-        <div
-          className={classNames([
-            `${baseClassName}-extra`,
-            !headerDom && `${baseClassName}-extra-no-logo`,
-            hashId,
-          ])}
-        >
-          {extraDom}
-        </div>
-      )}
-      <div
-        style={{
-          flex: 1,
-          overflowY: 'auto',
-          overflowX: 'hidden',
-        }}
-      >
-        {menuRenderDom}
-      </div>
-      {links ? (
-        <div className={`${baseClassName}-links ${hashId}`.trim()}>
-          <Menu
-            inlineIndent={16}
-            className={`${baseClassName}-link-menu ${hashId}`.trim()}
-            selectedKeys={[]}
-            openKeys={[]}
-            theme={theme}
-            mode="inline"
-            items={linksMenuItems}
-          />
-        </div>
-      ) : null}
-      {showSiderExtraDom && (
-        <>
-          {actionAreaDom}
-          {!actionsDom && rightContentRender ? (
-            <div
-              className={classNames(`${baseClassName}-actions`, hashId, {
-                [`${baseClassName}-actions-collapsed`]: collapsed,
-              })}
-            >
-              {rightContentRender?.(props)}
-            </div>
-          ) : null}
-        </>
-      )}
-      {menuFooterDom && (
+    <SiderContext.Provider value={{}}>
+      <>
+        {headerDom && (
+          <div
+            className={classNames([
+              classNames(`${baseClassName}-logo`, hashId, {
+                [`${baseClassName}-logo-collapsed`]: collapsed,
+              }),
+            ])}
+            onClick={showSiderExtraDom ? onMenuHeaderClick : undefined}
+            id="logo"
+            style={logoStyle}
+          >
+            {headerDom}
+            {appsDom}
+          </div>
+        )}
+        {extraDom && (
+          <div
+            className={classNames([
+              `${baseClassName}-extra`,
+              !headerDom && `${baseClassName}-extra-no-logo`,
+              hashId,
+            ])}
+          >
+            {extraDom}
+          </div>
+        )}
         <div
-          className={classNames([
-            `${baseClassName}-footer`,
-            hashId,
-            { [`${baseClassName}-footer-collapsed`]: collapsed },
-          ])}
+          style={{
+            flex: 1,
+            overflowY: 'auto',
+            overflowX: 'hidden',
+          }}
         >
-          {menuFooterDom}
+          {menuRenderDom}
         </div>
-      )}
-    </>
+        {links ? (
+          <div className={`${baseClassName}-links ${hashId}`.trim()}>
+            <Menu
+              inlineIndent={16}
+              className={`${baseClassName}-link-menu ${hashId}`.trim()}
+              selectedKeys={[]}
+              openKeys={[]}
+              theme={theme}
+              mode="inline"
+              items={linksMenuItems}
+            />
+          </div>
+        ) : null}
+        {showSiderExtraDom && (
+          <>
+            {actionAreaDom}
+            {!actionsDom && rightContentRender ? (
+              <div
+                className={classNames(`${baseClassName}-actions`, hashId, {
+                  [`${baseClassName}-actions-collapsed`]: collapsed,
+                })}
+              >
+                {rightContentRender?.(props)}
+              </div>
+            ) : null}
+          </>
+        )}
+        {menuFooterDom && (
+          <div
+            className={classNames([
+              `${baseClassName}-footer`,
+              hashId,
+              { [`${baseClassName}-footer-collapsed`]: collapsed },
+            ])}
+          >
+            {menuFooterDom}
+          </div>
+        )}
+      </>
+    </SiderContext.Provider>
   );
 
   return stylishClassName.wrapSSR(