From af522ee3912b494a2592036b2435455b44a7d900 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9C=9F=E8=B4=A4?= <qixian.cs@outlook.com>
Date: Thu, 24 Aug 2023 21:31:40 +0800
Subject: [PATCH] fix(layout): use useBreakpoint utils

close https://github.com/ant-design/pro-components/issues/7564
---
 packages/layout/src/ProLayout.tsx             |  5 ++-
 .../src/components/SiderMenu/style/index.ts   |  2 +-
 packages/utils/src/useMediaQuery/index.ts     |  2 +-
 tests/layout/__snapshots__/demo.test.ts.snap  | 18 ++++-----
 .../layout/__snapshots__/index.test.tsx.snap  | 38 ++++++++-----------
 .../__snapshots__/pageContainer.test.tsx.snap |  4 +-
 .../pageHeaderWarp.test.tsx.snap              |  8 ++--
 tests/layout/index.test.tsx                   |  2 +-
 8 files changed, 37 insertions(+), 42 deletions(-)

diff --git a/packages/layout/src/ProLayout.tsx b/packages/layout/src/ProLayout.tsx
index dda27c88e658..9e52e8c92f2b 100644
--- a/packages/layout/src/ProLayout.tsx
+++ b/packages/layout/src/ProLayout.tsx
@@ -572,9 +572,10 @@ const BaseProLayout: React.FC<ProLayoutProps> = (props) => {
 
   const [collapsed, onCollapse] = useMergedState<boolean>(
     () => {
-      if (isMobile || colSize === 'md') return true;
       if (defaultCollapsed !== undefined) return defaultCollapsed;
-      if (isNeedOpenHash() === false) return false;
+      if (process.env.NODE_ENV === 'TEST') return false;
+      if (isMobile) return true;
+      if (colSize === 'md') return true;
       return false;
     },
     {
diff --git a/packages/layout/src/components/SiderMenu/style/index.ts b/packages/layout/src/components/SiderMenu/style/index.ts
index 72618e67ab5e..b877df3626f8 100644
--- a/packages/layout/src/components/SiderMenu/style/index.ts
+++ b/packages/layout/src/components/SiderMenu/style/index.ts
@@ -31,7 +31,7 @@ const genSiderMenuStyle: GenerateStyle<SiderMenuToken> = (token) => {
           zIndex: 10,
           minHeight: '100%',
         },
-        [`${token.antCls}-layout-sider-children`]: {
+        [`& ${token.antCls}-layout-sider-children`]: {
           position: 'relative',
           display: 'flex',
           flexDirection: 'column',
diff --git a/packages/utils/src/useMediaQuery/index.ts b/packages/utils/src/useMediaQuery/index.ts
index 60595488e572..757525889078 100644
--- a/packages/utils/src/useMediaQuery/index.ts
+++ b/packages/utils/src/useMediaQuery/index.ts
@@ -72,7 +72,7 @@ const useBreakpoint = () => {
 
   useEffect(() => {
     if (process.env.NODE_ENV === 'TEST') {
-      setColSpan((process.env.USE_MEDIA as 'xs') || 'xs');
+      setColSpan((process.env.USE_MEDIA as 'md') || 'md');
       return;
     }
     if (isXxl) {
diff --git a/tests/layout/__snapshots__/demo.test.ts.snap b/tests/layout/__snapshots__/demo.test.ts.snap
index 458950687213..f696424165a5 100644
--- a/tests/layout/__snapshots__/demo.test.ts.snap
+++ b/tests/layout/__snapshots__/demo.test.ts.snap
@@ -10530,7 +10530,7 @@ exports[`layout demos 📸 renders ./packages/layout/src/demos/customize-collaps
       class="ant-pro-layout-bg-list"
     />
     <div
-      class="ant-layout ant-layout-has-sider"
+      class="ant-layout"
       style="min-height: 100%; flex-direction: row;"
     >
       <div
@@ -10542,7 +10542,7 @@ exports[`layout demos 📸 renders ./packages/layout/src/demos/customize-collaps
           style="height: 56px; line-height: 56px; background-color: transparent; z-index: 19;"
         />
         <header
-          class="ant-layout-header ant-pro-layout-header ant-pro-layout-header-fixed-header ant-pro-layout-header-mix ant-pro-layout-header-fixed-header-action ant-pro-layout-header-header"
+          class="ant-layout-header ant-pro-layout-header ant-pro-layout-header-fixed-header ant-pro-layout-header-mix ant-pro-layout-header-header"
         >
           <div
             class="ant-pro-global-header"
@@ -10709,13 +10709,13 @@ exports[`layout demos 📸 renders ./packages/layout/src/demos/customize-collaps
                 style="cursor: pointer; font-size: 16px;"
               >
                 <span
-                  aria-label="menu-fold"
-                  class="anticon anticon-menu-fold"
+                  aria-label="menu-unfold"
+                  class="anticon anticon-menu-unfold"
                   role="img"
                 >
                   <svg
                     aria-hidden="true"
-                    data-icon="menu-fold"
+                    data-icon="menu-unfold"
                     fill="currentColor"
                     focusable="false"
                     height="1em"
@@ -10723,7 +10723,7 @@ exports[`layout demos 📸 renders ./packages/layout/src/demos/customize-collaps
                     width="1em"
                   >
                     <path
-                      d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM115.4 518.9L271.7 642c5.8 4.6 14.4.5 14.4-6.9V388.9c0-7.4-8.5-11.5-14.4-6.9L115.4 505.1a8.74 8.74 0 000 13.8z"
+                      d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 000-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0014.4 7z"
                     />
                   </svg>
                 </span>
@@ -20199,7 +20199,7 @@ exports[`layout demos 📸 renders ./packages/layout/src/demos/splitMenus.tsx co
     />
     <div
       class="ant-layout"
-      style="min-height: 100%; height: 100vh; flex-direction: row;"
+      style="min-height: 100%; flex-direction: row; height: 100vh;"
     >
       <div
         class="ant-pro-layout-container"
@@ -20219,7 +20219,7 @@ exports[`layout demos 📸 renders ./packages/layout/src/demos/splitMenus.tsx co
     />
     <div
       class="ant-layout"
-      style="min-height: 100%; height: 100vh; flex-direction: row;"
+      style="min-height: 100%; flex-direction: row; height: 100vh;"
     >
       <div
         class="ant-pro-layout-container"
@@ -20363,7 +20363,7 @@ exports[`layout demos 📸 renders ./packages/layout/src/demos/splitMenus.tsx co
     />
     <div
       class="ant-layout"
-      style="min-height: 100%; height: 100vh; flex-direction: row;"
+      style="min-height: 100%; flex-direction: row; height: 100vh;"
     >
       <div
         class="ant-pro-layout-container"
diff --git a/tests/layout/__snapshots__/index.test.tsx.snap b/tests/layout/__snapshots__/index.test.tsx.snap
index e7d930ee5223..e28ffcd4a565 100644
--- a/tests/layout/__snapshots__/index.test.tsx.snap
+++ b/tests/layout/__snapshots__/index.test.tsx.snap
@@ -13,11 +13,11 @@ exports[`BasicLayout 🥩 BasicLayout menu support menu.true 1`] = `
       style="min-height: 100%; flex-direction: row;"
     >
       <div
-        style="width: 256px; overflow: hidden; max-width: 256px; min-width: 256px; transition: all 0.2s ease 0s; flex: 0 0 256px;"
+        style="width: 256px; overflow: hidden; flex: 0 0 256px; max-width: 256px; min-width: 256px; transition: all 0.2s ease 0s;"
       />
       <aside
         class="ant-layout-sider ant-layout-sider-dark ant-pro-sider ant-pro-sider-fixed ant-pro-sider-layout-side ant-pro-sider-light"
-        style="max-width: 256px; min-width: 256px; width: 256px; flex: 0 0 256px;"
+        style="flex: 0 0 256px; max-width: 256px; min-width: 256px; width: 256px;"
       >
         <div
           class="ant-layout-sider-children"
@@ -173,9 +173,7 @@ exports[`BasicLayout 🥩 BasicLayout menu support menu.true 1`] = `
                   <ul
                     class="ant-skeleton-paragraph"
                   >
-                    <li
-                      style=""
-                    />
+                    <li />
                     <li />
                     <li />
                     <li />
@@ -230,7 +228,7 @@ exports[`BasicLayout 🥩 BasicLayout menu support menu.true 1`] = `
         style="position: relative;"
       >
         <header
-          class="ant-layout-header ant-pro-layout-header ant-pro-layout-header-top-menu ant-pro-layout-header-header"
+          class="ant-layout-header ant-pro-layout-header ant-pro-layout-header-fixed-header-action ant-pro-layout-header-top-menu ant-pro-layout-header-header"
         >
           <div
             class="ant-pro-top-nav-header ant-pro-top-nav-header-light"
@@ -422,11 +420,11 @@ exports[`BasicLayout 🥩 BasicLayout menu support menu.true 1`] = `
       style="min-height: 100%; flex-direction: row;"
     >
       <div
-        style="width: 215px; overflow: hidden; max-width: 215px; min-width: 215px; transition: all 0.2s ease 0s; flex: 0 0 215px;"
+        style="width: 215px; overflow: hidden; flex: 0 0 215px; max-width: 215px; min-width: 215px; transition: all 0.2s ease 0s;"
       />
       <aside
         class="ant-layout-sider ant-layout-sider-dark ant-pro-sider ant-pro-sider-fixed ant-pro-sider-fixed-mix ant-pro-sider-layout-mix ant-pro-sider-light ant-pro-sider-mix"
-        style="max-width: 215px; min-width: 215px; width: 215px; flex: 0 0 215px;"
+        style="flex: 0 0 215px; max-width: 215px; min-width: 215px; width: 215px;"
       >
         <div
           class="ant-layout-sider-children"
@@ -446,9 +444,7 @@ exports[`BasicLayout 🥩 BasicLayout menu support menu.true 1`] = `
                   <ul
                     class="ant-skeleton-paragraph"
                   >
-                    <li
-                      style=""
-                    />
+                    <li />
                     <li />
                     <li />
                     <li />
@@ -654,11 +650,11 @@ exports[`BasicLayout 🥩 base use 1`] = `
       style="min-height: 100%; flex-direction: row;"
     >
       <div
-        style="width: 256px; overflow: hidden; max-width: 256px; min-width: 256px; transition: all 0.2s ease 0s; flex: 0 0 256px;"
+        style="width: 256px; overflow: hidden; flex: 0 0 256px; max-width: 256px; min-width: 256px; transition: all 0.2s ease 0s;"
       />
       <aside
         class="ant-layout-sider ant-layout-sider-dark ant-pro-sider ant-pro-sider-fixed ant-pro-sider-layout-side ant-pro-sider-light"
-        style="max-width: 256px; min-width: 256px; width: 256px; flex: 0 0 256px;"
+        style="flex: 0 0 256px; max-width: 256px; min-width: 256px; width: 256px;"
       >
         <div
           class="ant-layout-sider-children"
@@ -870,11 +866,11 @@ exports[`BasicLayout 🥩 compatibleStyle 1`] = `
       style="min-height: 100%; flex-direction: row;"
     >
       <div
-        style="width: 256px; overflow: hidden; max-width: 256px; min-width: 256px; transition: all 0.2s ease 0s; flex: 0 0 256px;"
+        style="width: 256px; overflow: hidden; flex: 0 0 256px; max-width: 256px; min-width: 256px; transition: all 0.2s ease 0s;"
       />
       <aside
         class="ant-layout-sider ant-layout-sider-dark ant-pro-sider ant-pro-sider-fixed ant-pro-sider-layout-side ant-pro-sider-light"
-        style="max-width: 256px; min-width: 256px; width: 256px; flex: 0 0 256px;"
+        style="flex: 0 0 256px; max-width: 256px; min-width: 256px; width: 256px;"
       >
         <div
           class="ant-layout-sider-children"
@@ -1088,11 +1084,11 @@ exports[`BasicLayout 🥩 contentStyle should change dom 1`] = `
       style="min-height: 100%; flex-direction: row;"
     >
       <div
-        style="width: 256px; overflow: hidden; max-width: 256px; min-width: 256px; transition: all 0.2s ease 0s; flex: 0 0 256px;"
+        style="width: 256px; overflow: hidden; flex: 0 0 256px; max-width: 256px; min-width: 256px; transition: all 0.2s ease 0s;"
       />
       <aside
         class="ant-layout-sider ant-layout-sider-dark ant-pro-sider ant-pro-sider-fixed ant-pro-sider-layout-side ant-pro-sider-light"
-        style="max-width: 256px; min-width: 256px; width: 256px; flex: 0 0 256px;"
+        style="flex: 0 0 256px; max-width: 256px; min-width: 256px; width: 256px;"
       >
         <div
           class="ant-layout-sider-children"
@@ -1306,11 +1302,11 @@ exports[`BasicLayout 🥩 mix layout hideInMenu render right 1`] = `
         style="min-height: 100%; flex-direction: row;"
       >
         <div
-          style="width: 256px; overflow: hidden; max-width: 256px; min-width: 256px; transition: all 0.2s ease 0s; flex: 0 0 256px;"
+          style="width: 256px; overflow: hidden; flex: 0 0 256px; max-width: 256px; min-width: 256px; transition: all 0.2s ease 0s;"
         />
         <aside
           class="ant-layout-sider ant-layout-sider-dark ant-pro-sider ant-pro-sider-fixed ant-pro-sider-layout-side ant-pro-sider-light"
-          style="max-width: 256px; min-width: 256px; width: 256px; flex: 0 0 256px;"
+          style="flex: 0 0 256px; max-width: 256px; min-width: 256px; width: 256px;"
         >
           <div
             class="ant-layout-sider-children"
@@ -1566,9 +1562,7 @@ exports[`BasicLayout 🥩 support loading 1`] = `
     <ul
       class="ant-skeleton-paragraph"
     >
-      <li
-        style=""
-      />
+      <li />
       <li />
       <li />
       <li />
diff --git a/tests/layout/__snapshots__/pageContainer.test.tsx.snap b/tests/layout/__snapshots__/pageContainer.test.tsx.snap
index fe42960fd43b..20d4ab6b4731 100644
--- a/tests/layout/__snapshots__/pageContainer.test.tsx.snap
+++ b/tests/layout/__snapshots__/pageContainer.test.tsx.snap
@@ -802,11 +802,11 @@ exports[`PageContainer 🐲 pro-layout support breadcrumbProps 1`] = `
       style="min-height: 100%; flex-direction: row;"
     >
       <div
-        style="width: 256px; overflow: hidden; max-width: 256px; min-width: 256px; transition: all 0.2s ease 0s; flex: 0 0 256px;"
+        style="width: 256px; overflow: hidden; flex: 0 0 256px; max-width: 256px; min-width: 256px; transition: all 0.2s ease 0s;"
       />
       <aside
         class="ant-layout-sider ant-layout-sider-dark ant-pro-sider ant-pro-sider-fixed ant-pro-sider-layout-side ant-pro-sider-light"
-        style="max-width: 256px; min-width: 256px; width: 256px; flex: 0 0 256px;"
+        style="flex: 0 0 256px; max-width: 256px; min-width: 256px; width: 256px;"
       >
         <div
           class="ant-layout-sider-children"
diff --git a/tests/layout/__snapshots__/pageHeaderWarp.test.tsx.snap b/tests/layout/__snapshots__/pageHeaderWarp.test.tsx.snap
index b5d3a5a9380b..52278f4d9148 100644
--- a/tests/layout/__snapshots__/pageHeaderWarp.test.tsx.snap
+++ b/tests/layout/__snapshots__/pageHeaderWarp.test.tsx.snap
@@ -26,11 +26,11 @@ exports[`BasicLayout base use 1`] = `
       style="min-height: 100%; flex-direction: row;"
     >
       <div
-        style="width: 256px; overflow: hidden; max-width: 256px; min-width: 256px; transition: all 0.2s ease 0s; flex: 0 0 256px;"
+        style="width: 256px; overflow: hidden; flex: 0 0 256px; max-width: 256px; min-width: 256px; transition: all 0.2s ease 0s;"
       />
       <aside
         class="ant-layout-sider ant-layout-sider-dark ant-pro-sider ant-pro-sider-fixed ant-pro-sider-layout-side ant-pro-sider-light"
-        style="max-width: 256px; min-width: 256px; width: 256px; flex: 0 0 256px;"
+        style="flex: 0 0 256px; max-width: 256px; min-width: 256px; width: 256px;"
       >
         <div
           class="ant-layout-sider-children"
@@ -265,11 +265,11 @@ exports[`BasicLayout content is text 1`] = `
       style="min-height: 100%; flex-direction: row;"
     >
       <div
-        style="width: 256px; overflow: hidden; max-width: 256px; min-width: 256px; transition: all 0.2s ease 0s; flex: 0 0 256px;"
+        style="width: 256px; overflow: hidden; flex: 0 0 256px; max-width: 256px; min-width: 256px; transition: all 0.2s ease 0s;"
       />
       <aside
         class="ant-layout-sider ant-layout-sider-dark ant-pro-sider ant-pro-sider-fixed ant-pro-sider-layout-side ant-pro-sider-light"
-        style="max-width: 256px; min-width: 256px; width: 256px; flex: 0 0 256px;"
+        style="flex: 0 0 256px; max-width: 256px; min-width: 256px; width: 256px;"
       >
         <div
           class="ant-layout-sider-children"
diff --git a/tests/layout/index.test.tsx b/tests/layout/index.test.tsx
index ebcc06a85591..f677f949a15b 100644
--- a/tests/layout/index.test.tsx
+++ b/tests/layout/index.test.tsx
@@ -1998,7 +1998,7 @@ describe('BasicLayout', () => {
 
     await waitForWaitTime(1000);
 
-    expect(onCollapse).toBeCalledTimes(3);
+    expect(onCollapse).toBeCalledTimes(2);
     expect(
       html.baseElement.querySelectorAll('li.ant-menu-submenu-open').length,
     ).toBe(2);