From 850b6da230f1b422ca6ac352bc6c478688ffa6fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=B8=85?= <qixian.cs@outlook.com>
Date: Sat, 18 Jul 2020 21:36:04 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20bug:=20fix=20menudata=20not=20us?=
 =?UTF-8?q?ing=20the=20latest=20version=20(#575)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 🐛 bug: fix menudata not using the latest version

* snapshots updated
---
 src/SiderMenu/BaseMenu.tsx                    |  29 +-
 .../__snapshots__/settingDrawer.test.tsx.snap | 259 ++++++++++--------
 2 files changed, 167 insertions(+), 121 deletions(-)

diff --git a/src/SiderMenu/BaseMenu.tsx b/src/SiderMenu/BaseMenu.tsx
index bd33085f..d6bed7af 100644
--- a/src/SiderMenu/BaseMenu.tsx
+++ b/src/SiderMenu/BaseMenu.tsx
@@ -271,6 +271,7 @@ const BaseMenu: React.FC<BaseMenuProps> = (props) => {
   // 用于减少 defaultOpenKeys 计算的组件
   const defaultOpenKeysRef = useRef<string[]>([]);
   const [postMenuData, setPostMenuData] = useState(() => menuData);
+  const postMenuDataRef = useRef(postMenuData);
 
   const { pathname } = location;
 
@@ -313,7 +314,10 @@ const BaseMenu: React.FC<BaseMenuProps> = (props) => {
     if (menu.defaultOpenAll || propsOpenKeys === false || flatMenuKeys.length) {
       return;
     }
-    const keys = getSelectedMenuKeys(location.pathname || '/', menuData || []);
+    const keys = getSelectedMenuKeys(
+      location.pathname || '/',
+      postMenuDataRef.current || [],
+    );
     if (keys) {
       openKeysRef.current = keys;
       setOpenKeys(keys);
@@ -332,7 +336,10 @@ const BaseMenu: React.FC<BaseMenuProps> = (props) => {
 
   useEffect(() => {
     // if pathname can't match, use the nearest parent's key
-    const keys = getSelectedMenuKeys(location.pathname || '/', menuData || []);
+    const keys = getSelectedMenuKeys(
+      location.pathname || '/',
+      postMenuDataRef.current || [],
+    );
     const animationFrameId = requestAnimationFrame(() => {
       if (keys.join('-') !== (selectedKeys || []).join('-')) {
         setSelectedKeys(keys);
@@ -364,6 +371,10 @@ const BaseMenu: React.FC<BaseMenuProps> = (props) => {
 
   const [menuUtils] = useState(() => new MenuUtil(props));
 
+  /**
+   * 这里需要用 menuData
+   * 为了计算 splitMenus 需要用最全的 menuData
+   */
   useEffect(() => {
     if (splitMenus && openKeys) {
       const keys = getSelectedMenuKeys(
@@ -391,6 +402,15 @@ const BaseMenu: React.FC<BaseMenuProps> = (props) => {
     }
   }
 
+  const finallyData = props.postMenuData
+    ? props.postMenuData(postMenuData)
+    : postMenuData;
+
+  /**
+   * 记下最新的 menuData
+   */
+  postMenuDataRef.current = finallyData;
+
   return (
     <Menu
       {...openKeysProps}
@@ -405,10 +425,7 @@ const BaseMenu: React.FC<BaseMenuProps> = (props) => {
       onOpenChange={(keys) => setOpenKeys(keys as string[])}
       {...props.menuProps}
     >
-      {menuUtils.getNavMenuItems(
-        props.postMenuData ? props.postMenuData(postMenuData) : postMenuData,
-        false,
-      )}
+      {menuUtils.getNavMenuItems(finallyData, false)}
     </Menu>
   );
 };
diff --git a/tests/__tests__/__snapshots__/settingDrawer.test.tsx.snap b/tests/__tests__/__snapshots__/settingDrawer.test.tsx.snap
index 8015e752..737f876f 100644
--- a/tests/__tests__/__snapshots__/settingDrawer.test.tsx.snap
+++ b/tests/__tests__/__snapshots__/settingDrawer.test.tsx.snap
@@ -72,40 +72,44 @@ exports[`settingDrawer.test base user 1`] = `
                 />
               </div>
               <div
-                class="theme-color"
+                style="margin-bottom:24px"
               >
                 <h3
-                  class="theme-color-title"
+                  class="ant-pro-setting-drawer-title"
                 >
                   主题色
                 </h3>
                 <div
-                  class="theme-color-content"
+                  class="theme-color"
                 >
                   <div
-                    class="theme-color-block"
-                    style="background-color:#1890ff"
+                    class="theme-color-content"
                   >
-                    <span
-                      aria-label="check"
-                      class="anticon anticon-check"
-                      role="img"
+                    <div
+                      class="theme-color-block"
+                      style="background-color:#1890ff"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class=""
-                        data-icon="check"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
+                      <span
+                        aria-label="check"
+                        class="anticon anticon-check"
+                        role="img"
                       >
-                        <path
-                          d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
-                        />
-                      </svg>
-                    </span>
+                        <svg
+                          aria-hidden="true"
+                          class=""
+                          data-icon="check"
+                          fill="currentColor"
+                          focusable="false"
+                          height="1em"
+                          viewBox="64 64 896 896"
+                          width="1em"
+                        >
+                          <path
+                            d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
+                          />
+                        </svg>
+                      </span>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -671,6 +675,15 @@ exports[`settingDrawer.test hideColors = true 1`] = `
                   style="min-height:42px"
                 />
               </div>
+              <div
+                style="margin-bottom:24px"
+              >
+                <h3
+                  class="ant-pro-setting-drawer-title"
+                >
+                  主题色
+                </h3>
+              </div>
               <div
                 class="ant-divider ant-divider-horizontal"
                 role="separator"
@@ -1234,40 +1247,44 @@ exports[`settingDrawer.test hideCopyButton = true 1`] = `
                 />
               </div>
               <div
-                class="theme-color"
+                style="margin-bottom:24px"
               >
                 <h3
-                  class="theme-color-title"
+                  class="ant-pro-setting-drawer-title"
                 >
                   主题色
                 </h3>
                 <div
-                  class="theme-color-content"
+                  class="theme-color"
                 >
                   <div
-                    class="theme-color-block"
-                    style="background-color:#1890ff"
+                    class="theme-color-content"
                   >
-                    <span
-                      aria-label="check"
-                      class="anticon anticon-check"
-                      role="img"
+                    <div
+                      class="theme-color-block"
+                      style="background-color:#1890ff"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class=""
-                        data-icon="check"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
+                      <span
+                        aria-label="check"
+                        class="anticon anticon-check"
+                        role="img"
                       >
-                        <path
-                          d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
-                        />
-                      </svg>
-                    </span>
+                        <svg
+                          aria-hidden="true"
+                          class=""
+                          data-icon="check"
+                          fill="currentColor"
+                          focusable="false"
+                          height="1em"
+                          viewBox="64 64 896 896"
+                          width="1em"
+                        >
+                          <path
+                            d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
+                          />
+                        </svg>
+                      </span>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -1806,40 +1823,44 @@ exports[`settingDrawer.test hideHintAlert = true 1`] = `
                 />
               </div>
               <div
-                class="theme-color"
+                style="margin-bottom:24px"
               >
                 <h3
-                  class="theme-color-title"
+                  class="ant-pro-setting-drawer-title"
                 >
                   主题色
                 </h3>
                 <div
-                  class="theme-color-content"
+                  class="theme-color"
                 >
                   <div
-                    class="theme-color-block"
-                    style="background-color:#1890ff"
+                    class="theme-color-content"
                   >
-                    <span
-                      aria-label="check"
-                      class="anticon anticon-check"
-                      role="img"
+                    <div
+                      class="theme-color-block"
+                      style="background-color:#1890ff"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class=""
-                        data-icon="check"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
+                      <span
+                        aria-label="check"
+                        class="anticon anticon-check"
+                        role="img"
                       >
-                        <path
-                          d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
-                        />
-                      </svg>
-                    </span>
+                        <svg
+                          aria-hidden="true"
+                          class=""
+                          data-icon="check"
+                          fill="currentColor"
+                          focusable="false"
+                          height="1em"
+                          viewBox="64 64 896 896"
+                          width="1em"
+                        >
+                          <path
+                            d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
+                          />
+                        </svg>
+                      </span>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -2372,40 +2393,44 @@ exports[`settingDrawer.test hideLoading = true 1`] = `
                 />
               </div>
               <div
-                class="theme-color"
+                style="margin-bottom:24px"
               >
                 <h3
-                  class="theme-color-title"
+                  class="ant-pro-setting-drawer-title"
                 >
                   主题色
                 </h3>
                 <div
-                  class="theme-color-content"
+                  class="theme-color"
                 >
                   <div
-                    class="theme-color-block"
-                    style="background-color:#1890ff"
+                    class="theme-color-content"
                   >
-                    <span
-                      aria-label="check"
-                      class="anticon anticon-check"
-                      role="img"
+                    <div
+                      class="theme-color-block"
+                      style="background-color:#1890ff"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class=""
-                        data-icon="check"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
+                      <span
+                        aria-label="check"
+                        class="anticon anticon-check"
+                        role="img"
                       >
-                        <path
-                          d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
-                        />
-                      </svg>
-                    </span>
+                        <svg
+                          aria-hidden="true"
+                          class=""
+                          data-icon="check"
+                          fill="currentColor"
+                          focusable="false"
+                          height="1em"
+                          viewBox="64 64 896 896"
+                          width="1em"
+                        >
+                          <path
+                            d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
+                          />
+                        </svg>
+                      </span>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -2972,40 +2997,44 @@ exports[`settingDrawer.test settings = undefined 1`] = `
                 />
               </div>
               <div
-                class="theme-color"
+                style="margin-bottom:24px"
               >
                 <h3
-                  class="theme-color-title"
+                  class="ant-pro-setting-drawer-title"
                 >
                   主题色
                 </h3>
                 <div
-                  class="theme-color-content"
+                  class="theme-color"
                 >
                   <div
-                    class="theme-color-block"
-                    style="background-color:#1890ff"
+                    class="theme-color-content"
                   >
-                    <span
-                      aria-label="check"
-                      class="anticon anticon-check"
-                      role="img"
+                    <div
+                      class="theme-color-block"
+                      style="background-color:#1890ff"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class=""
-                        data-icon="check"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
+                      <span
+                        aria-label="check"
+                        class="anticon anticon-check"
+                        role="img"
                       >
-                        <path
-                          d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
-                        />
-                      </svg>
-                    </span>
+                        <svg
+                          aria-hidden="true"
+                          class=""
+                          data-icon="check"
+                          fill="currentColor"
+                          focusable="false"
+                          height="1em"
+                          viewBox="64 64 896 896"
+                          width="1em"
+                        >
+                          <path
+                            d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
+                          />
+                        </svg>
+                      </span>
+                    </div>
                   </div>
                 </div>
               </div>