🐛 bug: fix menuData no work error (#543)

* 🐛 bug: fix menuData no work error * add test * fix tsc * fix ts error * fix ts
ant-design · Jul 8, 2020 · 6c17d87 · 6c17d87
1 parent aa723d5
commit 6c17d87
Show file tree

Hide file tree

Showing 6 changed files with 286 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -46,7 +46,7 @@
     "site_build": "dumi build",
     "doc": "cd ./example && umi dev",
     "test": "umi-test",
-    "tsc": "tsc"
+    "tsc": "tsc -p tsconfig-check.json"
   },
   "husky": {
     "hooks": {

diff --git a/src/SiderMenu/BaseMenu.tsx b/src/SiderMenu/BaseMenu.tsx
@@ -308,6 +308,7 @@ const BaseMenu: React.FC<BaseMenuProps> = (props) => {
   );
 
   useEffect(() => {
+    setPostMenuData(menuData);
     if (menu.defaultOpenAll || propsOpenKeys === false || flatMenuKeys.length) {
       return;
     }

diff --git a/tests/__tests__/__snapshots__/index.test.tsx.snap b/tests/__tests__/__snapshots__/index.test.tsx.snap
@@ -207,6 +207,232 @@ exports[`BasicLayout 🥩 contentStyle should change dom 1`] = `
 </div>
 `;
 
+exports[`BasicLayout 🥩 menuDataRender change date 1`] = `
+<div
+  class="ant-design-pro ant-pro-basicLayout screen-md"
+>
+  <section
+    class="ant-layout ant-layout-has-sider"
+    style="min-height: 100%;"
+  >
+    <aside
+      class="ant-pro-sider ant-pro-sider-layout-side ant-layout-sider ant-layout-sider-dark"
+      style="overflow: hidden; flex: 0 0 208px; max-width: 208px; min-width: 208px; width: 208px;"
+    >
+      <div
+        class="ant-layout-sider-children"
+      >
+        <div
+          class="ant-pro-sider-logo"
+          id="logo"
+        >
+          <a>
+            <img
+              alt="logo"
+              src="https://gw.alipayobjects.com/zos/antfincdn/PmY%24TNNDBI/logo.svg"
+            />
+            <h1>
+              Ant Design Pro
+            </h1>
+          </a>
+        </div>
+        <div
+          style="flex: 1; overflow-y: auto; overflow-x: hidden;"
+        >
+          <ul
+            class="ant-menu ant-pro-sider-menu ant-menu-dark ant-menu-root ant-menu-inline"
+            role="menu"
+            style="width: 100%;"
+          />
+        </div>
+        <div
+          class="ant-pro-sider-links"
+        >
+          <ul
+            class="ant-menu ant-pro-sider-link-menu ant-menu-dark ant-menu-root ant-menu-inline"
+            role="menu"
+          >
+            <li
+              class="ant-menu-item ant-pro-sider-collapsed-button ant-menu-item-only-child"
+              role="menuitem"
+              style="padding-left: 16px;"
+            >
+              <span
+                aria-label="menu-fold"
+                class="anticon anticon-menu-fold"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  class=""
+                  data-icon="menu-fold"
+                  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"
+                  />
+                </svg>
+              </span>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </aside>
+    <section
+      class="ant-layout"
+      style="position: relative;"
+    >
+      <header
+        class="ant-layout-header"
+        style="padding: 0px; height: 48px; line-height: 48px; width: 100%; z-index: 9;"
+      >
+        <div
+          class="ant-pro-global-header ant-pro-global-header-layout-side"
+        >
+          <div
+            style="flex: 1;"
+          />
+        </div>
+      </header>
+      <main
+        class="ant-layout-content ant-pro-basicLayout-content ant-pro-basicLayout-has-header"
+      >
+        <div
+          class="ant-pro-basicLayout-children-content-wrap"
+        />
+      </main>
+    </section>
+  </section>
+</div>
+`;
+
+exports[`BasicLayout 🥩 menuDataRender change date 2`] = `
+<div
+  class="ant-design-pro ant-pro-basicLayout screen-md"
+>
+  <section
+    class="ant-layout ant-layout-has-sider"
+    style="min-height: 100%;"
+  >
+    <aside
+      class="ant-pro-sider ant-pro-sider-layout-side ant-layout-sider ant-layout-sider-dark"
+      style="overflow: hidden; flex: 0 0 208px; max-width: 208px; min-width: 208px; width: 208px;"
+    >
+      <div
+        class="ant-layout-sider-children"
+      >
+        <div
+          class="ant-pro-sider-logo"
+          id="logo"
+        >
+          <a>
+            <img
+              alt="logo"
+              src="https://gw.alipayobjects.com/zos/antfincdn/PmY%24TNNDBI/logo.svg"
+            />
+            <h1>
+              Ant Design Pro
+            </h1>
+          </a>
+        </div>
+        <div
+          style="flex: 1; overflow-y: auto; overflow-x: hidden;"
+        >
+          <ul
+            class="ant-menu ant-pro-sider-menu ant-menu-dark ant-menu-root ant-menu-inline"
+            role="menu"
+            style="width: 100%;"
+          >
+            <li
+              class="ant-menu-submenu ant-menu-submenu-inline"
+              role="menuitem"
+            >
+              <div
+                aria-expanded="false"
+                aria-haspopup="true"
+                class="ant-menu-submenu-title"
+                role="button"
+                style="padding-left: 16px;"
+                title="首页"
+              >
+                首页
+                <i
+                  class="ant-menu-submenu-arrow"
+                />
+              </div>
+              <div />
+            </li>
+          </ul>
+        </div>
+        <div
+          class="ant-pro-sider-links"
+        >
+          <ul
+            class="ant-menu ant-pro-sider-link-menu ant-menu-dark ant-menu-root ant-menu-inline"
+            role="menu"
+          >
+            <li
+              class="ant-menu-item ant-pro-sider-collapsed-button ant-menu-item-only-child"
+              role="menuitem"
+              style="padding-left: 16px;"
+            >
+              <span
+                aria-label="menu-fold"
+                class="anticon anticon-menu-fold"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  class=""
+                  data-icon="menu-fold"
+                  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"
+                  />
+                </svg>
+              </span>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </aside>
+    <section
+      class="ant-layout"
+      style="position: relative;"
+    >
+      <header
+        class="ant-layout-header"
+        style="padding: 0px; height: 48px; line-height: 48px; width: 100%; z-index: 9;"
+      >
+        <div
+          class="ant-pro-global-header ant-pro-global-header-layout-side"
+        >
+          <div
+            style="flex: 1;"
+          />
+        </div>
+      </header>
+      <main
+        class="ant-layout-content ant-pro-basicLayout-content ant-pro-basicLayout-has-header"
+      >
+        <div
+          class="ant-pro-basicLayout-children-content-wrap"
+        />
+      </main>
+    </section>
+  </section>
+</div>
+`;
+
 exports[`BasicLayout 🥩 support loading 1`] = `
 <div
   class="ant-design-pro ant-pro-basicLayout screen-md"
@@ -335,7 +561,7 @@ exports[`BasicLayout 🥩 support loading 1`] = `
 </div>
 `;
 
-exports[`BasicLayout 🥩 support menuDateRender 1`] = `
+exports[`BasicLayout 🥩 support menuDataRender 1`] = `
 <div
   class="ant-design-pro ant-pro-basicLayout screen-md"
 >

diff --git a/tests/__tests__/index.test.tsx b/tests/__tests__/index.test.tsx
@@ -52,7 +52,7 @@ describe('BasicLayout', () => {
     wrapper.unmount();
   });
 
-  it('🥩 support menuDateRender', async () => {
+  it('🥩 support menuDataRender', async () => {
     const wrapper = mount(
       <BasicLayout
         menuDataRender={() =>
@@ -222,6 +222,36 @@ describe('BasicLayout', () => {
     wrapper.unmount();
   });
 
+  it('🥩 menuDataRender change date', async () => {
+    const wrapper = mount(<BasicLayout menuDataRender={() => []} />);
+    await waitForComponentToPaint(wrapper);
+
+    expect(wrapper.render()).toMatchSnapshot();
+
+    wrapper.setProps({
+      menuDataRender: () => [
+        {
+          path: '/home',
+          name: '首页',
+          children: [
+            {
+              path: '/home/overview',
+              name: '概述',
+              exact: true,
+            },
+            {
+              path: '/home/search',
+              name: '搜索',
+              exact: true,
+            },
+          ],
+        },
+      ],
+    });
+    await waitForComponentToPaint(wrapper);
+    expect(wrapper.render()).toMatchSnapshot();
+  });
+
   it('🥩 use onLogoClick', async () => {
     const onLogoClick = jest.fn();
     const wrapper = mount(

diff --git a/tsconfig-check.json b/tsconfig-check.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "outDir": "build/dist",
+    "module": "esnext",
+    "target": "ES2015",
+    "lib": ["esnext", "dom"],
+    "sourceMap": true,
+    "baseUrl": ".",
+    "jsx": "react",
+    "allowSyntheticDefaultImports": true,
+    "moduleResolution": "node",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": true,
+    "experimentalDecorators": true,
+    "strict": true,
+    "declaration": true,
+    "skipLibCheck": true,
+    "paths": {
+      "@ant-design/pro-layout": ["./src"]
+    }
+  },
+  "include": ["src/"]
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -21,7 +21,7 @@
       "@ant-design/pro-layout": ["./src"]
     }
   },
-  "include": ["**/src/", "**/docs/"],
+  "include": ["**/src/", "**/docs/", "**/tests/"],
   "exclude": [
     "node_modules",
     "build",
@@ -32,7 +32,6 @@
     "tslint:latest",
     "tslint-config-prettier",
     "example",
-    "**/tests/",
     "**/docs/"
   ]
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -308,6 +308,7 @@ const BaseMenu: React.FC<BaseMenuProps> = (props) => { @@
       );
       useEffect(() => {
+        setPostMenuData(menuData);
         if (menu.defaultOpenAll || propsOpenKeys === false || flatMenuKeys.length) {
           return;
         }
@@ Expand Down @@