@zat-design/sisyphus-react 4.5.10-beta.1 → 4.5.10-beta.2

package/es/ProLayout/components/TabsManager/hooks/useTabsUrlSync.js

@@ -1,73 +1,82 @@
-import { createContext, useContext, useEffect, useRef, useState } from 'react';
-import * as ReactRouterDom from 'react-router-dom';
-import { canOpenAsTab, flattenMenuData, getCurrentTabUrl, getMenuRoute, getTabUrlPathname, normalizeTabUrl } from "../utils";
-import { subscribeHistoryLocation } from "../utils/historyObserver";
-const getOptionalRouterContext = exportName => {
+import { createContext, useContext, useEffect, useRef, useState } from "react";
+import * as ReactRouterDom from "react-router-dom";
+import {
+  canOpenAsTab,
+  flattenMenuData,
+  getCurrentTabUrl,
+  getMenuRoute,
+  getTabUrlPathname,
+  normalizeTabUrl
+} from "../utils";
+import {
+  subscribeHistoryLocation
+} from "../utils/historyObserver";
+const getOptionalRouterContext = (exportName) => {
   const descriptor = Object.getOwnPropertyDescriptor(ReactRouterDom, exportName);
-  return descriptor ? Reflect.get(ReactRouterDom, exportName) : undefined;
+  return descriptor ? Reflect.get(ReactRouterDom, exportName) : void 0;
 };
-const OptionalNavigationContext = getOptionalRouterContext('UNSAFE_NavigationContext') || /*#__PURE__*/createContext(null);
-
-// Data Router 从 react-router-dom 6.4 起提供；保留 6.0-6.3 peer 兼容。
-const OptionalDataRouterContext = getOptionalRouterContext('UNSAFE_DataRouterContext') || /*#__PURE__*/createContext(null);
+const OptionalNavigationContext = getOptionalRouterContext("UNSAFE_NavigationContext") || createContext(null);
+const OptionalDataRouterContext = getOptionalRouterContext("UNSAFE_DataRouterContext") || createContext(null);
 const getDataRouterUrl = (url, basename) => {
-  if (!basename || basename === '/') return url;
+  if (!basename || basename === "/")
+    return url;
   const pathname = getTabUrlPathname(url);
-  if (!pathname) return url;
-  const normalizedBasename = `/${basename.replace(/^\/+|\/+$/g, '')}`;
+  if (!pathname)
+    return url;
+  const normalizedBasename = `/${basename.replace(/^\/+|\/+$/g, "")}`;
   const lowerPathname = pathname.toLowerCase();
   const lowerBasename = normalizedBasename.toLowerCase();
   const suffix = url.slice(pathname.length);
-  if (lowerPathname === lowerBasename) return `/${suffix}`;
+  if (lowerPathname === lowerBasename)
+    return `/${suffix}`;
   if (lowerPathname.startsWith(`${lowerBasename}/`)) {
     return `${pathname.slice(normalizedBasename.length)}${suffix}`;
   }
   return url;
 };
 const isCurrentDataRouterNavigation = (currentUrl, dataRouterContext) => {
-  const navigationLocation = dataRouterContext?.router.state?.navigation?.location;
-  if (!navigationLocation) return false;
-  const navigationUrl = `${navigationLocation.pathname}${navigationLocation.search ?? ''}${navigationLocation.hash ?? ''}`;
-  return navigationUrl === currentUrl || navigationUrl === getDataRouterUrl(currentUrl, dataRouterContext?.basename);
+  var _a, _b;
+  const navigationLocation = (_b = (_a = dataRouterContext == null ? void 0 : dataRouterContext.router.state) == null ? void 0 : _a.navigation) == null ? void 0 : _b.location;
+  if (!navigationLocation)
+    return false;
+  const navigationUrl = `${navigationLocation.pathname}${navigationLocation.search ?? ""}${navigationLocation.hash ?? ""}`;
+  return navigationUrl === currentUrl || navigationUrl === getDataRouterUrl(currentUrl, dataRouterContext == null ? void 0 : dataRouterContext.basename);
 };
 const isSameOrNestedPath = (basePathname, currentPathname) => {
-  if (!basePathname || !currentPathname) return false;
-  const normalizedBase = basePathname === '/' ? '/' : basePathname.replace(/\/$/, '');
-  return currentPathname === normalizedBase || normalizedBase !== '/' && currentPathname.startsWith(`${normalizedBase}/`);
+  if (!basePathname || !currentPathname)
+    return false;
+  const normalizedBase = basePathname === "/" ? "/" : basePathname.replace(/\/$/, "");
+  return currentPathname === normalizedBase || normalizedBase !== "/" && currentPathname.startsWith(`${normalizedBase}/`);
 };
-const getSourceMenus = dataSource => {
-  if (!dataSource || !('menus' in dataSource) || !Array.isArray(dataSource.menus)) return [];
+const getSourceMenus = (dataSource) => {
+  if (!dataSource || !("menus" in dataSource) || !Array.isArray(dataSource.menus))
+    return [];
   return flattenMenuData(dataSource.menus);
 };
-const createPushHistoryState = currentState => {
-  if (!currentState || typeof currentState !== 'object' || Array.isArray(currentState)) {
+const createPushHistoryState = (currentState) => {
+  if (!currentState || typeof currentState !== "object" || Array.isArray(currentState)) {
     return currentState;
   }
-  const nextState = {
-    ...currentState
-  };
+  const nextState = { ...currentState };
   const currentIndex = nextState.idx;
   const currentKey = nextState.key;
-  const isReactRouterState = 'usr' in nextState && typeof currentIndex === 'number' && typeof currentKey === 'string';
+  const isReactRouterState = "usr" in nextState && typeof currentIndex === "number" && typeof currentKey === "string";
   if (isReactRouterState) {
     nextState.idx = currentIndex + 1;
     nextState.key = `${Date.now().toString(36)}${Math.random().toString(36).slice(2, 8)}`;
   }
   return nextState;
 };
-const getRouterLocationState = currentState => {
-  if (!currentState || typeof currentState !== 'object' || Array.isArray(currentState)) {
+const getRouterLocationState = (currentState) => {
+  if (!currentState || typeof currentState !== "object" || Array.isArray(currentState)) {
     return currentState;
   }
   const state = currentState;
-  if (typeof state.idx !== 'number') return currentState;
-  return 'usr' in state ? state.usr : null;
+  if (typeof state.idx !== "number")
+    return currentState;
+  return "usr" in state ? state.usr : null;
 };
-/**
- * 维护浏览器 location 与活动页签 URL 的双向同步。
- * 未开启 config.urlSync 时不安装任何 History 监听或写入逻辑。
- */
-export const useTabsUrlSync = ({
+const useTabsUrlSync = ({
   config,
   dataSource,
   state,
@@ -80,31 +89,31 @@ export const useTabsUrlSync = ({
 }) => {
   const navigationContext = useContext(OptionalNavigationContext);
   const dataRouterContext = useContext(OptionalDataRouterContext);
-  const navigator = navigationContext?.navigator;
-  const enabled = config.urlSync === true || typeof config.urlSync === 'object' && config.urlSync !== null;
-  const historyMode = typeof config.urlSync === 'object' ? config.urlSync.history || 'replace' : 'replace';
+  const navigator = navigationContext == null ? void 0 : navigationContext.navigator;
+  const enabled = config.urlSync === true || typeof config.urlSync === "object" && config.urlSync !== null;
+  const historyMode = typeof config.urlSync === "object" ? config.urlSync.history || "replace" : "replace";
   const bootstrappedRef = useRef(false);
   const writingUrlRef = useRef(false);
   const preserveUrlInteractionRef = useRef(null);
   const locationSequenceRef = useRef(0);
-  const handledLocationSequenceRef = useRef(undefined);
+  const handledLocationSequenceRef = useRef(void 0);
   const committedActiveKeyRef = useRef(state.activeKey);
-  const committedTabIdsRef = useRef(new Set(state.tabsList.map(tab => tab.id)));
+  const committedTabIdsRef = useRef(new Set(state.tabsList.map((tab) => tab.id)));
   const navigationAttemptRef = useRef(0);
   const pendingDataNavigationRef = useRef(false);
   const pendingDataNavigationUrlRef = useRef(null);
   const ignoredHistoryUrlRef = useRef(null);
   const [locationChange, setLocationChange] = useState(() => ({
-    url: typeof window === 'undefined' ? '' : getCurrentTabUrl(),
-    source: 'initial',
+    url: typeof window === "undefined" ? "" : getCurrentTabUrl(),
+    source: "initial",
     sequence: 0
   }));
-
-  // History API 不会为 pushState/replaceState 触发 popstate，在挂载期间补齐通知。
   useEffect(() => {
-    if (!enabled || typeof window === 'undefined') return undefined;
-    return subscribeHistoryLocation(source => {
-      if (writingUrlRef.current) return;
+    if (!enabled || typeof window === "undefined")
+      return void 0;
+    return subscribeHistoryLocation((source) => {
+      if (writingUrlRef.current)
+        return;
       const currentUrl = getCurrentTabUrl();
       if (ignoredHistoryUrlRef.current === currentUrl) {
         ignoredHistoryUrlRef.current = null;
@@ -120,10 +129,13 @@ export const useTabsUrlSync = ({
       pendingDataNavigationUrlRef.current = isPendingDataNavigationCommit ? currentUrl : null;
       if (pendingDataNavigation && !isPendingDataNavigationCommit && dataRouterContext) {
         ignoredHistoryUrlRef.current = currentUrl;
-        const cancellation = dataRouterContext.router.navigate(getDataRouterUrl(currentUrl, dataRouterContext.basename), {
-          replace: true,
-          state: getRouterLocationState(window.history.state)
-        });
+        const cancellation = dataRouterContext.router.navigate(
+          getDataRouterUrl(currentUrl, dataRouterContext.basename),
+          {
+            replace: true,
+            state: getRouterLocationState(window.history.state)
+          }
+        );
         void cancellation.finally(() => {
           if (ignoredHistoryUrlRef.current === currentUrl) {
             ignoredHistoryUrlRef.current = null;
@@ -139,15 +151,16 @@ export const useTabsUrlSync = ({
       });
     });
   }, [enabled, dataRouterContext]);
-
-  // URL -> Tabs：精确 URL 优先；同 pathname 视为当前页签内导航；
-  // 其次才按菜单 pathname 创建新页签。
   useEffect(() => {
-    if (!enabled || !isInitialized || typeof window === 'undefined') return;
+    var _a, _b;
+    if (!enabled || !isInitialized || typeof window === "undefined")
+      return;
     const currentUrl = normalizeTabUrl(locationChange.url);
-    if (!currentUrl) return;
-    if (handledLocationSequenceRef.current === locationChange.sequence) return;
-    const exactTab = state.tabsList.find(tab => normalizeTabUrl(tab.url) === currentUrl);
+    if (!currentUrl)
+      return;
+    if (handledLocationSequenceRef.current === locationChange.sequence)
+      return;
+    const exactTab = state.tabsList.find((tab) => normalizeTabUrl(tab.url) === currentUrl);
     if (exactTab) {
       handledLocationSequenceRef.current = locationChange.sequence;
       bootstrappedRef.current = true;
@@ -159,17 +172,19 @@ export const useTabsUrlSync = ({
     }
     const currentPathname = getTabUrlPathname(currentUrl);
     const sourceMenus = getSourceMenus(dataSource);
-    const activeTab = state.tabsList.find(tab => tab.id === state.activeKey);
-    const activeCode = activeTab?.menuItem?.code || activeTab?.code;
-    const activeSourceMenu = activeCode ? sourceMenus.find(item => item.code === activeCode) : undefined;
-    const activeMenuItem = activeSourceMenu || activeTab?.menuItem;
-    const activeBasePathname = activeMenuItem ? getTabUrlPathname(getMenuRoute(activeMenuItem)) : getTabUrlPathname(activeTab?.url);
-    const targetMenu = sourceMenus.map(item => ({
+    const activeTab = state.tabsList.find((tab) => tab.id === state.activeKey);
+    const activeCode = ((_a = activeTab == null ? void 0 : activeTab.menuItem) == null ? void 0 : _a.code) || (activeTab == null ? void 0 : activeTab.code);
+    const activeSourceMenu = activeCode ? sourceMenus.find((item) => item.code === activeCode) : void 0;
+    const activeMenuItem = activeSourceMenu || (activeTab == null ? void 0 : activeTab.menuItem);
+    const activeBasePathname = activeMenuItem ? getTabUrlPathname(getMenuRoute(activeMenuItem)) : getTabUrlPathname(activeTab == null ? void 0 : activeTab.url);
+    const targetMenu = (_b = sourceMenus.map((item) => ({
       item,
       pathname: getTabUrlPathname(getMenuRoute(item))
-    })).filter(entry => !!entry.pathname && isSameOrNestedPath(entry.pathname, currentPathname)).sort((left, right) => right.pathname.length - left.pathname.length)[0]?.item;
+    })).filter(
+      (entry) => !!entry.pathname && isSameOrNestedPath(entry.pathname, currentPathname)
+    ).sort((left, right) => right.pathname.length - left.pathname.length)[0]) == null ? void 0 : _b.item;
     const targetBelongsToActiveMenu = !targetMenu || !!activeCode && targetMenu.code === activeCode;
-    if (activeTab && locationChange.source !== 'initial' && targetBelongsToActiveMenu && isSameOrNestedPath(activeBasePathname, currentPathname)) {
+    if (activeTab && locationChange.source !== "initial" && targetBelongsToActiveMenu && isSameOrNestedPath(activeBasePathname, currentPathname)) {
       handledLocationSequenceRef.current = locationChange.sequence;
       bootstrappedRef.current = true;
       preserveUrlInteractionRef.current = null;
@@ -180,11 +195,7 @@ export const useTabsUrlSync = ({
       handledLocationSequenceRef.current = locationChange.sequence;
       bootstrappedRef.current = true;
       preserveUrlInteractionRef.current = interactionSequence;
-      addTab({
-        ...targetMenu,
-        url: currentUrl,
-        redirectUrl: undefined
-      });
+      addTab({ ...targetMenu, url: currentUrl, redirectUrl: void 0 });
       return;
     }
     if (!bootstrappedRef.current) {
@@ -192,28 +203,37 @@ export const useTabsUrlSync = ({
       preserveUrlInteractionRef.current = interactionSequence;
       return;
     }
-    if (activeTab && locationChange.source !== 'initial') {
+    if (activeTab && locationChange.source !== "initial") {
       handledLocationSequenceRef.current = locationChange.sequence;
       preserveUrlInteractionRef.current = null;
       navigationAttemptRef.current += 1;
       updateTabUrl(activeTab.id, currentUrl);
       return;
     }
-    if (locationChange.source !== 'initial') {
+    if (locationChange.source !== "initial") {
       handledLocationSequenceRef.current = locationChange.sequence;
     }
-  }, [enabled, isInitialized, locationChange, state.tabsList, state.activeKey, dataSource, addTab, switchTab, updateTabUrl, interactionSequence]);
-
-  // Tabs -> URL：默认用 replace 避免切签堆积浏览器历史。
+  }, [
+    enabled,
+    isInitialized,
+    locationChange,
+    state.tabsList,
+    state.activeKey,
+    dataSource,
+    addTab,
+    switchTab,
+    updateTabUrl,
+    interactionSequence
+  ]);
   useEffect(() => {
-    if (!enabled || !isInitialized || !bootstrappedRef.current || typeof window === 'undefined') {
+    if (!enabled || !isInitialized || !bootstrappedRef.current || typeof window === "undefined") {
       return;
     }
-    const activeTab = state.tabsList.find(tab => tab.id === state.activeKey);
-    const targetUrl = normalizeTabUrl(activeTab?.url);
+    const activeTab = state.tabsList.find((tab) => tab.id === state.activeKey);
+    const targetUrl = normalizeTabUrl(activeTab == null ? void 0 : activeTab.url);
     const commitActiveTab = () => {
       committedActiveKeyRef.current = state.activeKey;
-      committedTabIdsRef.current = new Set(state.tabsList.map(tab => tab.id));
+      committedTabIdsRef.current = new Set(state.tabsList.map((tab) => tab.id));
     };
     if (preserveUrlInteractionRef.current !== null) {
       if (preserveUrlInteractionRef.current === interactionSequence) {
@@ -233,10 +253,13 @@ export const useTabsUrlSync = ({
       if (pendingNavigation && dataRouterContext) {
         const cancellationUrl = getCurrentTabUrl();
         ignoredHistoryUrlRef.current = cancellationUrl;
-        const cancellation = dataRouterContext.router.navigate(getDataRouterUrl(cancellationUrl, dataRouterContext.basename), {
-          replace: true,
-          state: getRouterLocationState(window.history.state)
-        });
+        const cancellation = dataRouterContext.router.navigate(
+          getDataRouterUrl(cancellationUrl, dataRouterContext.basename),
+          {
+            replace: true,
+            state: getRouterLocationState(window.history.state)
+          }
+        );
         void cancellation.finally(() => {
           if (ignoredHistoryUrlRef.current === cancellationUrl) {
             ignoredHistoryUrlRef.current = null;
@@ -257,7 +280,8 @@ export const useTabsUrlSync = ({
       const routerState = getRouterLocationState(window.history.state);
       if (dataRouterContext) {
         const settleNavigation = () => {
-          if (navigationAttemptRef.current !== navigationAttempt) return;
+          if (navigationAttemptRef.current !== navigationAttempt)
+            return;
           const committedDataNavigationUrl = pendingDataNavigationUrlRef.current;
           pendingDataNavigationRef.current = false;
           pendingDataNavigationUrlRef.current = null;
@@ -271,25 +295,38 @@ export const useTabsUrlSync = ({
         pendingDataNavigationRef.current = true;
         pendingDataNavigationUrlRef.current = targetUrl;
         void dataRouterContext.router.navigate(getDataRouterUrl(targetUrl, dataRouterContext.basename), {
-          replace: historyMode === 'replace',
+          replace: historyMode === "replace",
           state: routerState
         }).then(settleNavigation);
       } else if (navigator) {
-        if (historyMode === 'push') {
+        if (historyMode === "push") {
           navigator.push(targetUrl, routerState);
         } else {
           navigator.replace(targetUrl, routerState);
         }
         commitActiveTab();
-      } else if (historyMode === 'push') {
-        window.history.pushState(createPushHistoryState(window.history.state), '', targetUrl);
+      } else if (historyMode === "push") {
+        window.history.pushState(createPushHistoryState(window.history.state), "", targetUrl);
         commitActiveTab();
       } else {
-        window.history.replaceState(window.history.state, '', targetUrl);
+        window.history.replaceState(window.history.state, "", targetUrl);
         commitActiveTab();
       }
     } finally {
       writingUrlRef.current = false;
     }
-  }, [enabled, historyMode, isInitialized, state.tabsList, state.activeKey, interactionSequence, navigator, dataRouterContext, rollbackTabActivation]);
-};
+  }, [
+    enabled,
+    historyMode,
+    isInitialized,
+    state.tabsList,
+    state.activeKey,
+    interactionSequence,
+    navigator,
+    dataRouterContext,
+    rollbackTabActivation
+  ]);
+};
+export {
+  useTabsUrlSync
+};