fix: setRegionId when regionbar changed in xconsole-context

Author: FringeY

packages/console-utils/xconsole-context/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alicloud/xconsole-context",
-  "version": "2.4.34",
+  "version": "2.4.35",
   "main": "lib/index.js",
   "module": "es/index.js",
   "types": "lib/index.d.ts",

packages/console-utils/xconsole-context/src/region/determineRegionId.ts

@@ -7,6 +7,14 @@ const getIdFromItem = (item: IPayloadRegion): string => {
   return item.id
 };
 
+/**
+ * 计算准确的 regionId
+ * @param id 期望 regionId
+ * @param currentActiveId 当前 regionId
+ * @param dataSourceRaw 有效 region 列表
+ * @param defaultRegionId 默认兜底 regionId
+ * @returns 
+ */
 export const determineRegionId = (
   id: string,
   currentActiveId: string,

packages/console-utils/xconsole-context/src/region/reroute.ts

@@ -0,0 +1,44 @@
+import { generatePath } from 'react-router-dom';
+import { match as IMatch } from 'react-router-dom';
+
+import type { IConsoleContextRegionProp } from '../types/index';
+
+/**
+ * 根据路由匹配符里是否有 regionId 参数来判断是否是 region 化路由
+ * @param match 
+ * @returns 
+ */
+const hasRegionId = (match: IMatch) => {
+  // eslint-disable-next-line no-prototype-builtins
+  return match.params && match.params.hasOwnProperty('regionId');
+}
+
+/**
+ * 重定向至新的 region 化路由
+ * @param props 
+ * @param nextRegionId 
+ * @returns 
+ */
+export const reroute = (props: IConsoleContextRegionProp<{regionId?: string}>, nextRegionId: string) => {
+  const { history, match, location } = props;
+  if (match && match.path && hasRegionId(match)) {
+    const { path, params } = match;
+
+    if (nextRegionId === params.regionId) {
+      return;
+    }
+
+    const nextPath = generatePath(path, {
+      ...(params || {}),
+      regionId: nextRegionId
+    });
+    // 可能通过 window.history.pushState 改变路由导致 react-router location 对象没有更新
+    const stuff = window.location.pathname.slice(match.url.length);
+
+    history[props.region?.historyAction || 'push']({
+      pathname: match.isExact ? nextPath : `${nextPath}/${stuff}`.replace('//', '/'),
+      search: location.search,
+      hash: location.hash,
+    });
+  }
+}

packages/console-utils/xconsole-context/src/region/useRcRegionProps.tsx

@@ -1,45 +1,17 @@
 import { useEffect, useState, useContext } from 'react';
-import { matchPath, generatePath } from 'react-router-dom';
+import { matchPath } from 'react-router-dom';
 import isFunction from 'lodash/isFunction';
 
 import ConsoleRegion from './index';
 import { getActiveId } from './cookies';
+import { reroute } from './reroute';
 import { determineRegionId } from './determineRegionId';
 import { RegionContext } from '../context/RegionContext';
 import type { IConsoleContextRegionProp } from '../types/index';
 import type { IPayloadRegion } from '../types/ConsoleBase';
 
 type regionFn = (location: any) => IPayloadRegion[];
 
-const hasRegionId = (match) => {
-  // eslint-disable-next-line no-prototype-builtins
-  return match.params && match.params.hasOwnProperty('regionId');
-}
-
-export const reroute = (props: IConsoleContextRegionProp<{regionId?: string}>, nextRegionId: string) => {
-  const { history, match, location } = props;
-  if (match && match.path && hasRegionId(match)) {
-    const { path, params } = match;
-
-    if (nextRegionId === params.regionId) {
-      return;
-    }
-
-    const nextPath = generatePath(path, {
-      ...(params || {}),
-      regionId: nextRegionId
-    });
-    // 可能通过 window.history.pushState 改变路由导致 react-router location 对象没有更新
-    const suff = window.location.pathname.slice(match.url.length);
-
-    history[props.region?.historyAction || 'push']({
-      pathname: match.isExact ? nextPath : `${nextPath}/${suff}`.replace('//', '/'),
-      search: location.search,
-      hash: location.hash,
-    });
-  }
-}
-
 /**
  * 为了适配新版本的 region, 但是由于
  * @param props 

packages/console-utils/xconsole-context/src/region/useRegion.ts

@@ -2,7 +2,7 @@ import { useEffect, useState, useContext } from 'react';
 import { matchPath } from 'react-router-dom';
 
 import ConsoleRegion from './index';
-import { reroute } from './useRcRegionProps';
+import { reroute } from './reroute';
 import ConsoleBase from '../console/ConsoleBase';
 import { determineRegionId } from './determineRegionId';
 import { RegionContext } from '../context/RegionContext';
@@ -46,35 +46,40 @@ export default (props: IConsoleContextRegionProp<{regionId?: string}>): Region =
   };
 
   /**
-   * 处理路由
+   * 将路由状态同步到应用全局 region 状态
    */
   useEffect(() => {
-    // 不处理
     if (disable) return;
 
     region.setRegions(regionList);
     // 如果 regionId 不在 region 列表重定向到 regionId 上
     const regionId = determineRegionId(match.params.regionId, currentRegionId, regionList, defaultRegion);
 
     if (currentRegionId !== regionId) {
+      // 通知 consoleBase 更新 regionId
       region.setRegionId(regionId);
-      setRegionIdWithMemo(regionId)
-      return reroute(props, regionId);
+      // 更新全局 regionId
+      setRegionIdWithMemo(regionId);
+      reroute(props, regionId);
     }
   }, [match.params.regionId, currentRegionId, regionList, defaultRegion]);
 
-  // 处理 ConsoleBase
+  /**
+   * 将 consoleBase 地域选择器状态变化同步到应用全局 region 状态
+   */
   useEffect(() => {
-    // 不处理
     if (disable) return;
 
-    // update the history when region change on the regionbar
+    // 监听 consoleBase 地域选择器更新并同步
     const unsubscribeRegionChange = region.onRegionChange((payload) => {
       if (payload.correctedFrom) {
         return;
       }
+
       const regionId = determineRegionId(payload.id, currentRegionId, regionList, defaultRegion);
+
       if (regionId !== currentRegionId) {
+        setRegionIdWithMemo(regionId);
         reroute(props, regionId);
       }
     });
@@ -91,33 +96,34 @@ export default (props: IConsoleContextRegionProp<{regionId?: string}>): Region =
         exact: true,
         strict: true,
       });
+
       if (matches) {
-        region.toggleRegion(true)
-        region.toggleRegionGlobal(true)
+        region.toggleRegion(true);
+        region.toggleRegionGlobal(true);
         return true;
       }
       return false;
     })
 
-    if (showGlobal) {
-      return;
-    }
+    if (!showGlobal) {
+      region.toggleRegion(false);
 
-    region.toggleRegion(false)
-    regionbarVisiblePaths.forEach((showRegionPath) => {
-      const matches = matchPath(location.pathname, {
-        path: showRegionPath,
-        exact: true,
-        strict: true,
+      regionbarVisiblePaths.forEach((showRegionPath) => {
+        const matches = matchPath(location.pathname, {
+          path: showRegionPath,
+          exact: true,
+          strict: true,
+        });
+
+        if (matches) {
+          region.toggleRegion(true);
+        }
       });
-      if (matches) {
-        region.toggleRegion(true)
-      }
-    });
+    }
 
     return () => {
-      unsubscribeRegionChange()
-      unsubscribeReady()
+      unsubscribeRegionChange();
+      unsubscribeReady();
     }
   }, [regionList, history, regionbarVisiblePaths, globalVisiblePaths, location.pathname, currentRegionId, defaultRegion]);
 

packages/console-utils/xconsole-context/src/types/index.ts

@@ -28,10 +28,14 @@ export interface RegionConfig {
 }
 
 export interface IRegionConfigProps extends RegionConfig {
-  // region 列表
+  /**
+   * region 列表
+   */
   regionList?: IPayloadRegion[];
 
-  // disable 关闭路由同步功能
+  /**
+   * disable 关闭路由同步功能
+   */
   disable?: boolean;
 }