fix(layout): use useBreakpoint utils

close #7564
ant-design · Aug 24, 2023 · af522ee · af522ee
1 parent 3a174d1
commit af522ee
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 42 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,21 +10709,21 @@ 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"
                     viewBox="64 64 896 896"
                     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
@@ -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
@@ -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
@@ -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
@@ -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);