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

package/es/ProLayout/components/TabsManager/hooks/useTabsUrlSync.d.ts

@@ -0,0 +1,19 @@
+import type { TabsConfig, TabsState } from '../../../propTypes';
+import type { TabsManagerProps, UseTabsStateReturn } from '../propTypes';
+interface UseTabsUrlSyncOptions {
+    config: TabsConfig;
+    dataSource: TabsManagerProps['dataSource'];
+    state: TabsState;
+    isInitialized: boolean;
+    addTab: UseTabsStateReturn['addTab'];
+    switchTab: UseTabsStateReturn['switchTab'];
+    updateTabUrl: UseTabsStateReturn['updateTabUrl'];
+    rollbackTabActivation: UseTabsStateReturn['rollbackTabActivation'];
+    interactionSequence: number;
+}
+/**
+ * 维护浏览器 location 与活动页签 URL 的双向同步。
+ * 未开启 config.urlSync 时不安装任何 History 监听或写入逻辑。
+ */
+export declare const useTabsUrlSync: ({ config, dataSource, state, isInitialized, addTab, switchTab, updateTabUrl, rollbackTabActivation, interactionSequence, }: UseTabsUrlSyncOptions) => void;
+export {};

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

@@ -0,0 +1,332 @@
+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) : void 0;
+};
+const OptionalNavigationContext = getOptionalRouterContext("UNSAFE_NavigationContext") || createContext(null);
+const OptionalDataRouterContext = getOptionalRouterContext("UNSAFE_DataRouterContext") || createContext(null);
+const getDataRouterUrl = (url, basename) => {
+  if (!basename || basename === "/")
+    return url;
+  const pathname = getTabUrlPathname(url);
+  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.startsWith(`${lowerBasename}/`)) {
+    return `${pathname.slice(normalizedBasename.length)}${suffix}`;
+  }
+  return url;
+};
+const isCurrentDataRouterNavigation = (currentUrl, dataRouterContext) => {
+  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}/`);
+};
+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)) {
+    return currentState;
+  }
+  const nextState = { ...currentState };
+  const currentIndex = nextState.idx;
+  const currentKey = nextState.key;
+  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)) {
+    return currentState;
+  }
+  const state = currentState;
+  if (typeof state.idx !== "number")
+    return currentState;
+  return "usr" in state ? state.usr : null;
+};
+const useTabsUrlSync = ({
+  config,
+  dataSource,
+  state,
+  isInitialized,
+  addTab,
+  switchTab,
+  updateTabUrl,
+  rollbackTabActivation,
+  interactionSequence
+}) => {
+  const navigationContext = useContext(OptionalNavigationContext);
+  const dataRouterContext = useContext(OptionalDataRouterContext);
+  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(void 0);
+  const committedActiveKeyRef = useRef(state.activeKey);
+  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",
+    sequence: 0
+  }));
+  useEffect(() => {
+    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;
+        return;
+      }
+      const pendingDataNavigation = pendingDataNavigationRef.current;
+      const pendingDataNavigationUrl = pendingDataNavigationUrlRef.current;
+      const isPendingDataNavigationCommit = pendingDataNavigation && (pendingDataNavigationUrl === currentUrl || isCurrentDataRouterNavigation(currentUrl, dataRouterContext));
+      if (!isPendingDataNavigationCommit) {
+        navigationAttemptRef.current += 1;
+      }
+      pendingDataNavigationRef.current = false;
+      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)
+          }
+        );
+        void cancellation.finally(() => {
+          if (ignoredHistoryUrlRef.current === currentUrl) {
+            ignoredHistoryUrlRef.current = null;
+          }
+        });
+      }
+      preserveUrlInteractionRef.current = null;
+      locationSequenceRef.current += 1;
+      setLocationChange({
+        url: currentUrl,
+        source,
+        sequence: locationSequenceRef.current
+      });
+    });
+  }, [enabled, dataRouterContext]);
+  useEffect(() => {
+    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 (exactTab) {
+      handledLocationSequenceRef.current = locationChange.sequence;
+      bootstrappedRef.current = true;
+      preserveUrlInteractionRef.current = null;
+      if (state.activeKey !== exactTab.id) {
+        switchTab(exactTab.id);
+      }
+      return;
+    }
+    const currentPathname = getTabUrlPathname(currentUrl);
+    const sourceMenus = getSourceMenus(dataSource);
+    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]) == null ? void 0 : _b.item;
+    const targetBelongsToActiveMenu = !targetMenu || !!activeCode && targetMenu.code === activeCode;
+    if (activeTab && locationChange.source !== "initial" && targetBelongsToActiveMenu && isSameOrNestedPath(activeBasePathname, currentPathname)) {
+      handledLocationSequenceRef.current = locationChange.sequence;
+      bootstrappedRef.current = true;
+      preserveUrlInteractionRef.current = null;
+      updateTabUrl(activeTab.id, currentUrl);
+      return;
+    }
+    if (targetMenu && canOpenAsTab(targetMenu)) {
+      handledLocationSequenceRef.current = locationChange.sequence;
+      bootstrappedRef.current = true;
+      preserveUrlInteractionRef.current = interactionSequence;
+      addTab({ ...targetMenu, url: currentUrl, redirectUrl: void 0 });
+      return;
+    }
+    if (!bootstrappedRef.current) {
+      bootstrappedRef.current = true;
+      preserveUrlInteractionRef.current = interactionSequence;
+      return;
+    }
+    if (activeTab && locationChange.source !== "initial") {
+      handledLocationSequenceRef.current = locationChange.sequence;
+      preserveUrlInteractionRef.current = null;
+      navigationAttemptRef.current += 1;
+      updateTabUrl(activeTab.id, currentUrl);
+      return;
+    }
+    if (locationChange.source !== "initial") {
+      handledLocationSequenceRef.current = locationChange.sequence;
+    }
+  }, [
+    enabled,
+    isInitialized,
+    locationChange,
+    state.tabsList,
+    state.activeKey,
+    dataSource,
+    addTab,
+    switchTab,
+    updateTabUrl,
+    interactionSequence
+  ]);
+  useEffect(() => {
+    if (!enabled || !isInitialized || !bootstrappedRef.current || typeof window === "undefined") {
+      return;
+    }
+    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));
+    };
+    if (preserveUrlInteractionRef.current !== null) {
+      if (preserveUrlInteractionRef.current === interactionSequence) {
+        if (targetUrl === getCurrentTabUrl()) {
+          preserveUrlInteractionRef.current = null;
+        }
+        commitActiveTab();
+        return;
+      }
+      preserveUrlInteractionRef.current = null;
+    }
+    if (!targetUrl || targetUrl === getCurrentTabUrl()) {
+      const pendingNavigation = pendingDataNavigationRef.current;
+      navigationAttemptRef.current += 1;
+      pendingDataNavigationRef.current = false;
+      pendingDataNavigationUrlRef.current = null;
+      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)
+          }
+        );
+        void cancellation.finally(() => {
+          if (ignoredHistoryUrlRef.current === cancellationUrl) {
+            ignoredHistoryUrlRef.current = null;
+          }
+        });
+      }
+      commitActiveTab();
+      return;
+    }
+    handledLocationSequenceRef.current = locationChange.sequence;
+    const previousActiveKey = committedActiveKeyRef.current;
+    const attemptedActiveKey = state.activeKey;
+    const removeAttemptedTab = !committedTabIdsRef.current.has(attemptedActiveKey);
+    const navigationAttempt = navigationAttemptRef.current + 1;
+    navigationAttemptRef.current = navigationAttempt;
+    writingUrlRef.current = true;
+    try {
+      const routerState = getRouterLocationState(window.history.state);
+      if (dataRouterContext) {
+        const settleNavigation = () => {
+          if (navigationAttemptRef.current !== navigationAttempt)
+            return;
+          const committedDataNavigationUrl = pendingDataNavigationUrlRef.current;
+          pendingDataNavigationRef.current = false;
+          pendingDataNavigationUrlRef.current = null;
+          const currentUrl = getCurrentTabUrl();
+          if (targetUrl === currentUrl || committedDataNavigationUrl === currentUrl) {
+            commitActiveTab();
+            return;
+          }
+          rollbackTabActivation(previousActiveKey, attemptedActiveKey, removeAttemptedTab);
+        };
+        pendingDataNavigationRef.current = true;
+        pendingDataNavigationUrlRef.current = targetUrl;
+        void dataRouterContext.router.navigate(getDataRouterUrl(targetUrl, dataRouterContext.basename), {
+          replace: historyMode === "replace",
+          state: routerState
+        }).then(settleNavigation);
+      } else if (navigator) {
+        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);
+        commitActiveTab();
+      } else {
+        window.history.replaceState(window.history.state, "", targetUrl);
+        commitActiveTab();
+      }
+    } finally {
+      writingUrlRef.current = false;
+    }
+  }, [
+    enabled,
+    historyMode,
+    isInitialized,
+    state.tabsList,
+    state.activeKey,
+    interactionSequence,
+    navigator,
+    dataRouterContext,
+    rollbackTabActivation
+  ]);
+};
+export {
+  useTabsUrlSync
+};