@hsu-react/ui 2.4.1 → 2.4.3

package/src/components/Chart/_hooks/useContainerReady.ts

@@ -0,0 +1,50 @@
+import { RefObject, useEffect, useState } from "react";
+
+/**
+ * Whether the referenced element has a non-zero box yet.
+ *
+ * `echarts.init` on a 0×0 element logs `Can't get DOM width or height` and builds a canvas with no
+ * size, recovering only on the next `resize()`. A chart hits that path whenever it mounts before
+ * layout has given it space — inside a keep-alive tab that is not the active one, a collapsed
+ * panel, a modal that has not opened yet — so consuming apps see the warning for charts that end
+ * up rendering perfectly well.
+ *
+ * Gating `init` on this flag defers it to the first frame the element actually occupies space.
+ *
+ * It **latches**: once measured, the element going back to 0×0 (a keep-alive tab losing focus)
+ * must not read as "not ready" again, or the init effect would tear the chart down and re-create
+ * it on every tab switch.
+ */
+const useContainerReady = (ref: RefObject<HTMLElement | null>): boolean => {
+  const [ready, setReady] = useState(false);
+
+  useEffect(() => {
+    if (ready) return;
+
+    const el = ref.current;
+    if (!el) return;
+
+    const measure = (): boolean => {
+      const { width, height } = el.getBoundingClientRect();
+      if (width > 0 && height > 0) {
+        setReady(true);
+        return true;
+      }
+      return false;
+    };
+
+    // Already laid out on mount — the common case, and it must not cost an extra frame
+    if (measure()) return;
+
+    const observer = new ResizeObserver(() => {
+      if (measure()) observer.disconnect();
+    });
+    observer.observe(el);
+
+    return () => observer.disconnect();
+  }, [ready, ref]);
+
+  return ready;
+};
+
+export default useContainerReady;

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 };
 };