@hsu-react/ui 2.4.2 → 2.4.3

package/es/layout/NavTabBar/_hooks/useTabPath.js

@@ -14,7 +14,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useLocation } from "react-router";
 import { checkTabPathMatch } from "../_utils/pathMatch";
 import { array_is_includes } from "hsu-utils";
@@ -25,6 +25,19 @@ export var useTabPath = function useTabPath(_ref) {
   var items = _ref.items,
     affixRouter = _ref.affixRouter;
   var location = useLocation();
+
+  /**
+   * Keyed on the *contents* of `affixRouter`, not on the array itself.
+   *
+   * Callers pass an inline literal (`affixRouter={[HOME]}`), and omitting the prop hands the
+   * component a fresh `[]` default on every render — either way the array identity changes each
+   * time. Depending on it directly re-runs the effect below on every render, and that effect
+   * calls setState, so the whole thing becomes a render loop.
+   */
+  var affixKey = affixRouter.join("\x01");
+  var affixSet = useMemo(function () {
+    return new Set(affixKey ? affixKey.split("\x01") : []);
+  }, [affixKey]);
   var _useState = useState(""),
     _useState2 = _slicedToArray(_useState, 2),
     tabKey = _useState2[0],
@@ -43,7 +56,7 @@ export var useTabPath = function useTabPath(_ref) {
         _checkAffix(item.children);
       } else {
         // Check whether it is an affixed route
-        var isAffix = affixRouter.includes(item.key) || item.affix;
+        var isAffix = affixSet.has(item.key) || item.affix;
         if (isAffix) {
           setOpenkeys(function (prev) {
             var find = prev.find(function (i) {
@@ -57,7 +70,7 @@ export var useTabPath = function useTabPath(_ref) {
         }
       }
     });
-  }, [affixRouter]);
+  }, [affixSet]);
   var _checkPath = useCallback(function (items, parents) {
     var pathname = decodeURI(location.pathname);
     var search = location.search;
@@ -79,36 +92,48 @@ export var useTabPath = function useTabPath(_ref) {
             // Handle param routes
             setTabKey("".concat(pathname).concat(search));
             setOpenkeys(function (prev) {
+              var nextKey = "".concat(pathname).concat(search);
               var find = prev.find(function (i) {
                 return i.key.split("?")[0] === pathname;
               });
               if (find) {
+                // Already on this key: return `prev` untouched. `map` builds a new array
+                // every time, and React treats a new reference as a state change — which is
+                // the other half of the render loop above.
+                if (find.key === nextKey) {
+                  return prev;
+                }
                 return prev.map(function (i) {
                   return i.key.split("?")[0] === pathname ? _objectSpread(_objectSpread({}, i), {}, {
-                    key: "".concat(pathname).concat(search)
+                    key: nextKey
                   }) : i;
                 });
               }
               return [].concat(_toConsumableArray(prev), [_objectSpread(_objectSpread({}, item), {}, {
-                key: "".concat(pathname).concat(search)
+                key: nextKey
               })]);
             });
           } else {
             // Handle plain routes
             setTabKey("".concat(item.key).concat(search));
             setOpenkeys(function (prev) {
+              var nextKey = "".concat(item.key).concat(search);
               var find = prev.find(function (i) {
                 return i.key.split("?")[0] === item.key;
               });
               if (find) {
+                // Same as above: an unchanged tab must not produce a new reference
+                if (find.key === nextKey) {
+                  return prev;
+                }
                 return prev.map(function (i) {
                   return i.key.split("?")[0] === item.key ? _objectSpread(_objectSpread({}, i), {}, {
-                    key: "".concat(item.key).concat(search)
+                    key: nextKey
                   }) : i;
                 });
               }
               return [].concat(_toConsumableArray(prev), [_objectSpread(_objectSpread({}, item), {}, {
-                key: "".concat(item.key).concat(search)
+                key: nextKey
               })]);
             });
           }
@@ -116,12 +141,24 @@ export var useTabPath = function useTabPath(_ref) {
       }
     });
   }, [location.pathname, location.search]);
+
+  /**
+   * Closing the last tab navigates to `basePath` — but when that tab *was* `basePath`, the
+   * location never changes, so path matching would not re-run and the bar would be left empty
+   * while its page is still on screen. Going empty has to re-trigger the match on its own.
+   *
+   * This settles rather than looping: re-matching adds the tab back, which flips `isEmpty` and
+   * runs the effect once more, and that pass finds the tab already present and returns the same
+   * state object — so React stops there. (Only true because the setters below bail out when
+   * nothing changed; without that this would spin.)
+   */
+  var isEmpty = openKeys.length === 0;
   useEffect(function () {
     // Handle affixed routes first to populate openKeys
     _checkAffix(items);
     // Then run path matching
     _checkPath(items);
-  }, [_checkAffix, _checkPath, items]);
+  }, [_checkAffix, _checkPath, items, isEmpty]);
   return {
     tabKey: tabKey,
     setTabKey: setTabKey,

package/lib/layout/NavTabBar/_hooks/useTabPath.js

@@ -16,6 +16,17 @@ const useTabPath = ({
   affixRouter
 }) => {
   const location = (0, _reactRouter.useLocation)();
+
+  /**
+   * Keyed on the *contents* of `affixRouter`, not on the array itself.
+   *
+   * Callers pass an inline literal (`affixRouter={[HOME]}`), and omitting the prop hands the
+   * component a fresh `[]` default on every render — either way the array identity changes each
+   * time. Depending on it directly re-runs the effect below on every render, and that effect
+   * calls setState, so the whole thing becomes a render loop.
+   */
+  const affixKey = affixRouter.join("\u0001");
+  const affixSet = (0, _react.useMemo)(() => new Set(affixKey ? affixKey.split("\u0001") : []), [affixKey]);
   const [tabKey, setTabKey] = (0, _react.useState)("");
   const [openKeys, setOpenkeys] = (0, _react.useState)([]);
 
@@ -28,7 +39,7 @@ const useTabPath = ({
         _checkAffix(item.children);
       } else {
         // Check whether it is an affixed route
-        const isAffix = affixRouter.includes(item.key) || item.affix;
+        const isAffix = affixSet.has(item.key) || item.affix;
         if (isAffix) {
           setOpenkeys(prev => {
             const find = prev.find(i => i.key === item.key);
@@ -40,7 +51,7 @@ const useTabPath = ({
         }
       }
     });
-  }, [affixRouter]);
+  }, [affixSet]);
   const _checkPath = (0, _react.useCallback)((items, parents) => {
     const pathname = decodeURI(location.pathname);
     const search = location.search;
@@ -58,32 +69,44 @@ const useTabPath = ({
             // Handle param routes
             setTabKey(`${pathname}${search}`);
             setOpenkeys(prev => {
+              const nextKey = `${pathname}${search}`;
               const find = prev.find(i => i.key.split("?")[0] === pathname);
               if (find) {
+                // Already on this key: return `prev` untouched. `map` builds a new array
+                // every time, and React treats a new reference as a state change — which is
+                // the other half of the render loop above.
+                if (find.key === nextKey) {
+                  return prev;
+                }
                 return prev.map(i => i.key.split("?")[0] === pathname ? {
                   ...i,
-                  key: `${pathname}${search}`
+                  key: nextKey
                 } : i);
               }
               return [...prev, {
                 ...item,
-                key: `${pathname}${search}`
+                key: nextKey
               }];
             });
           } else {
             // Handle plain routes
             setTabKey(`${item.key}${search}`);
             setOpenkeys(prev => {
+              const nextKey = `${item.key}${search}`;
               const find = prev.find(i => i.key.split("?")[0] === item.key);
               if (find) {
+                // Same as above: an unchanged tab must not produce a new reference
+                if (find.key === nextKey) {
+                  return prev;
+                }
                 return prev.map(i => i.key.split("?")[0] === item.key ? {
                   ...i,
-                  key: `${item.key}${search}`
+                  key: nextKey
                 } : i);
               }
               return [...prev, {
                 ...item,
-                key: `${item.key}${search}`
+                key: nextKey
               }];
             });
           }
@@ -91,12 +114,24 @@ const useTabPath = ({
       }
     });
   }, [location.pathname, location.search]);
+
+  /**
+   * Closing the last tab navigates to `basePath` — but when that tab *was* `basePath`, the
+   * location never changes, so path matching would not re-run and the bar would be left empty
+   * while its page is still on screen. Going empty has to re-trigger the match on its own.
+   *
+   * This settles rather than looping: re-matching adds the tab back, which flips `isEmpty` and
+   * runs the effect once more, and that pass finds the tab already present and returns the same
+   * state object — so React stops there. (Only true because the setters below bail out when
+   * nothing changed; without that this would spin.)
+   */
+  const isEmpty = openKeys.length === 0;
   (0, _react.useEffect)(() => {
     // Handle affixed routes first to populate openKeys
     _checkAffix(items);
     // Then run path matching
     _checkPath(items);
-  }, [_checkAffix, _checkPath, items]);
+  }, [_checkAffix, _checkPath, items, isEmpty]);
   return {
     tabKey,
     setTabKey,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hsu-react/ui",
-  "version": "2.4.2",
+  "version": "2.4.3",
   "description": "一套基于 React + Ant Design 的中后台业务组件库",
   "license": "MIT",
   "type": "module",

package/src/layout/NavTabBar/_hooks/useTabPath.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useLocation } from "react-router";
 import { TabType } from "..";
 import { checkTabPathMatch } from "../_utils/pathMatch";
@@ -14,6 +14,17 @@ interface UseTabPathOptions {
  */
 export const useTabPath = ({ items, affixRouter }: UseTabPathOptions) => {
   const location = useLocation();
+
+  /**
+   * Keyed on the *contents* of `affixRouter`, not on the array itself.
+   *
+   * Callers pass an inline literal (`affixRouter={[HOME]}`), and omitting the prop hands the
+   * component a fresh `[]` default on every render — either way the array identity changes each
+   * time. Depending on it directly re-runs the effect below on every render, and that effect
+   * calls setState, so the whole thing becomes a render loop.
+   */
+  const affixKey = affixRouter.join("\u0001");
+  const affixSet = useMemo(() => new Set(affixKey ? affixKey.split("\u0001") : []), [affixKey]);
   const [tabKey, setTabKey] = useState<string>("");
   const [openKeys, setOpenkeys] = useState<TabType[]>([]);
 
@@ -27,7 +38,7 @@ export const useTabPath = ({ items, affixRouter }: UseTabPathOptions) => {
           _checkAffix(item.children);
         } else {
           // Check whether it is an affixed route
-          const isAffix = affixRouter.includes(item.key) || item.affix;
+          const isAffix = affixSet.has(item.key) || item.affix;
           if (isAffix) {
             setOpenkeys((prev) => {
               const find = prev.find((i) => i.key === item.key);
@@ -40,7 +51,7 @@ export const useTabPath = ({ items, affixRouter }: UseTabPathOptions) => {
         }
       });
     },
-    [affixRouter]
+    [affixSet]
   );
 
   const _checkPath = useCallback(
@@ -72,32 +83,42 @@ export const useTabPath = ({ items, affixRouter }: UseTabPathOptions) => {
               setTabKey(`${pathname}${search}`);
 
               setOpenkeys((prev) => {
+                const nextKey = `${pathname}${search}`;
                 const find = prev.find((i) => i.key.split("?")[0] === pathname);
                 if (find) {
+                  // Already on this key: return `prev` untouched. `map` builds a new array
+                  // every time, and React treats a new reference as a state change — which is
+                  // the other half of the render loop above.
+                  if (find.key === nextKey) {
+                    return prev;
+                  }
                   return prev.map((i) =>
-                    i.key.split("?")[0] === pathname
-                      ? { ...i, key: `${pathname}${search}` }
-                      : i
+                    i.key.split("?")[0] === pathname ? { ...i, key: nextKey } : i
                   );
                 }
 
-                return [...prev, { ...item, key: `${pathname}${search}` }];
+                return [...prev, { ...item, key: nextKey }];
               });
             } else {
               // Handle plain routes
               setTabKey(`${item.key}${search}`);
 
               setOpenkeys((prev) => {
+                const nextKey = `${item.key}${search}`;
                 const find = prev.find((i) => i.key.split("?")[0] === item.key);
                 if (find) {
+                  // Same as above: an unchanged tab must not produce a new reference
+                  if (find.key === nextKey) {
+                    return prev;
+                  }
                   return prev.map((i) =>
                     i.key.split("?")[0] === item.key
-                      ? { ...i, key: `${item.key}${search}` }
+                      ? { ...i, key: nextKey }
                       : i
                   );
                 }
 
-                return [...prev, { ...item, key: `${item.key}${search}` }];
+                return [...prev, { ...item, key: nextKey }];
               });
             }
           }
@@ -107,12 +128,24 @@ export const useTabPath = ({ items, affixRouter }: UseTabPathOptions) => {
     [location.pathname, location.search]
   );
 
+  /**
+   * Closing the last tab navigates to `basePath` — but when that tab *was* `basePath`, the
+   * location never changes, so path matching would not re-run and the bar would be left empty
+   * while its page is still on screen. Going empty has to re-trigger the match on its own.
+   *
+   * This settles rather than looping: re-matching adds the tab back, which flips `isEmpty` and
+   * runs the effect once more, and that pass finds the tab already present and returns the same
+   * state object — so React stops there. (Only true because the setters below bail out when
+   * nothing changed; without that this would spin.)
+   */
+  const isEmpty = openKeys.length === 0;
+
   useEffect(() => {
     // Handle affixed routes first to populate openKeys
     _checkAffix(items);
     // Then run path matching
     _checkPath(items);
-  }, [_checkAffix, _checkPath, items]);
+  }, [_checkAffix, _checkPath, items, isEmpty]);
 
   return { tabKey, setTabKey, openKeys, setOpenkeys };
 };