@hsu-react/ui 1.0.0 → 2.0.1

package/src/layout/NavTabBar/_components/TabLabel/index.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+import { Popover } from "antd";
+import { TabType } from "../..";
+import TabContextMenu from "../TabContextMenu";
+import styles from "../../index.module.scss";
+import classNames from "classnames";
+
+interface TabLabelProps {
+  item: TabType;
+  index: number;
+  openKeys: TabType[];
+  basePath: string;
+  affixRouter: string[];
+  open: string;
+  onReload: (key: string) => void;
+  refresh: (key: string) => void;
+  drop: (key: string) => void;
+  setOpenkeys: React.Dispatch<React.SetStateAction<TabType[]>>;
+  setOpen: (key: string) => void;
+  navigate: (path: string) => void;
+  className?: string;
+}
+
+/**
+ * Tab label component
+ */
+const TabLabel: React.FC<TabLabelProps> = ({
+  item,
+  index,
+  openKeys,
+  basePath,
+  affixRouter,
+  open,
+  onReload,
+  refresh,
+  drop,
+  setOpenkeys,
+  setOpen,
+  navigate,
+  className,
+}) => {
+  return (
+    <Popover
+      open={item.key === open}
+      placement="bottomLeft"
+      classNames={{ root: styles.popover }}
+      content={
+        <TabContextMenu
+          item={item}
+          index={index}
+          openKeys={openKeys}
+          basePath={basePath}
+          affixRouter={affixRouter}
+          onReload={onReload}
+          refresh={refresh}
+          drop={drop}
+          setOpenkeys={setOpenkeys}
+          setOpen={setOpen}
+          navigate={navigate}
+        />
+      }
+    >
+      <span
+        onContextMenu={(event) => {
+          event.preventDefault();
+        }}
+        onMouseDown={(e) => {
+          if (e.button === 2) {
+            setOpen(item.key === open ? "" : item.key);
+          } else {
+            setOpen("");
+            navigate(item.key);
+          }
+        }}
+        className={classNames(styles.tabLabel, className)}
+      >
+        {item.icon}
+        {item.label}
+      </span>
+    </Popover>
+  );
+};
+
+export default TabLabel;

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

@@ -0,0 +1,27 @@
+import { useEffect, useContext } from "react";
+import { useAliveController } from "react-activation";
+import { NavTabBarContent } from "../../_hooks/useDropTab";
+import { TabType } from "..";
+
+/**
+ * Hook that closes a tab via dropKey
+ */
+export const useDropTabKey = (
+  setOpenkeys: React.Dispatch<React.SetStateAction<TabType[]>>
+) => {
+  const { drop } = useAliveController();
+  const { dropKey } = useContext(NavTabBarContent);
+
+  useEffect(() => {
+    setTimeout(() => {
+      if (dropKey) {
+        drop(dropKey);
+
+        setOpenkeys((prev) => {
+          const newOpenKeys = prev.filter((item) => item.key !== dropKey);
+          return newOpenKeys;
+        });
+      }
+    }, 0);
+  }, [drop, dropKey, setOpenkeys]);
+};

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

@@ -0,0 +1,23 @@
+import { useState } from "react";
+import { useDebounceEffect } from "ahooks";
+
+/**
+ * Hook that handles the tab context menu
+ */
+export const useTabContextMenu = () => {
+  const [open, setOpen] = useState<string>("");
+
+  useDebounceEffect(() => {
+    const close = () => {
+      setOpen("");
+    };
+
+    document.removeEventListener("click", close);
+    if (open) {
+      document.addEventListener("click", close);
+    }
+  }, [open]);
+
+  return { open, setOpen };
+};
+

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

@@ -0,0 +1,118 @@
+import { useCallback, useEffect, useState } from "react";
+import { useLocation } from "react-router";
+import { TabType } from "..";
+import { checkTabPathMatch } from "../_utils/pathMatch";
+import { array_is_includes } from "hsu-utils";
+
+interface UseTabPathOptions {
+  items: TabType[];
+  affixRouter: string[];
+}
+
+/**
+ * Hook that handles tab path matching and active state
+ */
+export const useTabPath = ({ items, affixRouter }: UseTabPathOptions) => {
+  const location = useLocation();
+  const [tabKey, setTabKey] = useState<string>("");
+  const [openKeys, setOpenkeys] = useState<TabType[]>([]);
+
+  /**
+   * Check affixed routes (affixRouter and affix) and add them to openKeys
+   */
+  const _checkAffix = useCallback(
+    (items: TabType[]) => {
+      items?.forEach((item) => {
+        if (item.children) {
+          _checkAffix(item.children);
+        } else {
+          // Check whether it is an affixed route
+          const isAffix = affixRouter.includes(item.key) || item.affix;
+          if (isAffix) {
+            setOpenkeys((prev) => {
+              const find = prev.find((i) => i.key === item.key);
+              if (find) {
+                return prev;
+              }
+              return [...prev, item];
+            });
+          }
+        }
+      });
+    },
+    [affixRouter]
+  );
+
+  const _checkPath = useCallback(
+    (items: TabType[], parents?: TabType[]) => {
+      const pathname = decodeURI(location.pathname);
+      const search = location.search;
+
+      items?.forEach((item) => {
+        if (item.children) {
+          const _parents = parents ? [...parents, item] : [item];
+          _checkPath(item.children, _parents);
+        } else {
+          const isMatch = checkTabPathMatch(pathname, item.key);
+
+          if (isMatch) {
+            const keyArr = item.key.split("/").filter(Boolean);
+            const hasParams =
+              keyArr.filter((i) => i.startsWith(":")).length > 0;
+            const pathArr = pathname.split("/").filter(Boolean);
+
+            if (
+              hasParams &&
+              array_is_includes(
+                keyArr.filter((i) => !i.startsWith(":")),
+                pathArr
+              )
+            ) {
+              // Handle param routes
+              setTabKey(`${pathname}${search}`);
+
+              setOpenkeys((prev) => {
+                const find = prev.find((i) => i.key.split("?")[0] === pathname);
+                if (find) {
+                  return prev.map((i) =>
+                    i.key.split("?")[0] === pathname
+                      ? { ...i, key: `${pathname}${search}` }
+                      : i
+                  );
+                }
+
+                return [...prev, { ...item, key: `${pathname}${search}` }];
+              });
+            } else {
+              // Handle plain routes
+              setTabKey(`${item.key}${search}`);
+
+              setOpenkeys((prev) => {
+                const find = prev.find((i) => i.key.split("?")[0] === item.key);
+                if (find) {
+                  return prev.map((i) =>
+                    i.key.split("?")[0] === item.key
+                      ? { ...i, key: `${item.key}${search}` }
+                      : i
+                  );
+                }
+
+                return [...prev, { ...item, key: `${item.key}${search}` }];
+              });
+            }
+          }
+        }
+      });
+    },
+    [location.pathname, location.search]
+  );
+
+  useEffect(() => {
+    // Handle affixed routes first to populate openKeys
+    _checkAffix(items);
+    // Then run path matching
+    _checkPath(items);
+  }, [_checkAffix, _checkPath, items]);
+
+  return { tabKey, setTabKey, openKeys, setOpenkeys };
+};

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

@@ -0,0 +1,28 @@
+import { useEffect, useContext } from "react";
+import { NavTabBarTitleContent } from "../../_hooks/useSetTabTitle";
+import { TabType } from "..";
+
+/**
+ * Hook that updates tab titles via tabTitles
+ */
+export const useTabTitle = (
+  setOpenkeys: React.Dispatch<React.SetStateAction<TabType[]>>
+) => {
+  const { tabTitles } = useContext(NavTabBarTitleContent);
+
+  useEffect(() => {
+    if (tabTitles && Object.keys(tabTitles).length > 0) {
+      setOpenkeys((prev) => {
+        return prev?.map((item) => {
+          if (tabTitles[item.key] !== undefined) {
+            return {
+              ...item,
+              label: tabTitles[item.key],
+            };
+          }
+          return item;
+        });
+      });
+    }
+  }, [tabTitles, setOpenkeys]);
+};

package/src/layout/NavTabBar/_utils/formatNavTabBar.ts

@@ -0,0 +1,50 @@
+import { cloneDeep } from "lodash";
+import { RouteType } from "../../types";
+import { TabType } from "..";
+
+/**
+ * Format routes into tab items
+ * @param routes Route configuration
+ * @param parent Parent tab item
+ * @returns Array of tab items
+ */
+export const formatNavTabBar = (
+  routes: RouteType[],
+  parent?: TabType
+): TabType[] => {
+  const newRoutes: TabType[] = [];
+
+  routes?.forEach((route) => {
+    let children: TabType[] | undefined = undefined;
+    if (route.children) {
+      children = formatNavTabBar(route.children, cloneDeep(route) as TabType);
+    }
+
+    const { meta } = route;
+
+    if (!meta?.noTabsView && route.path) {
+      newRoutes.push({
+        key: decodeURI(route.path),
+        label: meta?.name ?? "",
+        children: (children?.length || 0) > 0 ? children : undefined,
+        element: route.element,
+        affix: meta?.affix,
+        icon: meta?.icon,
+      });
+    } else if (!meta?.noTabsView && route.index && parent?.path) {
+      newRoutes.push({
+        key: decodeURI(parent.path),
+        label: meta?.name ?? "",
+        element: route.element,
+        affix: meta?.affix,
+        icon: meta?.icon,
+      });
+    } else {
+      if (children) {
+        newRoutes.push(...children);
+      }
+    }
+  });
+
+  return newRoutes;
+};

package/src/layout/NavTabBar/_utils/pathMatch.ts

@@ -0,0 +1,37 @@
+import { array_is_includes } from "hsu-utils";
+
+/**
+ * Check whether a path matches (used by tabs)
+ * Note: matching of affixed routes (affixRouter and affix) is handled separately in _checkAffix of useTabPath
+ * @param pathname Current path
+ * @param key Route key
+ * @returns Whether it matches
+ */
+export const checkTabPathMatch = (pathname: string, key: string): boolean => {
+  // Handle the root path
+  if (pathname === "/" && key === "/") {
+    return true;
+  }
+
+  const pathArr = pathname.split("/").filter(Boolean);
+  const keyArr = key.split("/").filter(Boolean);
+
+  if (keyArr.length === 0) {
+    return false;
+  }
+
+  if (pathArr.length !== keyArr.length) {
+    return false;
+  }
+
+  // Handle routes containing params (e.g. /user/:id)
+  if (key.includes(":")) {
+    return array_is_includes(
+      keyArr.filter((i) => !i.startsWith(":")),
+      pathArr
+    );
+  } else {
+    // Plain path matching
+    return array_is_includes(keyArr, pathArr);
+  }
+};

package/src/layout/NavTabBar/_utils/tabActions.ts

@@ -0,0 +1,131 @@
+import { TabType } from "..";
+
+/**
+ * Close the tab at the given index (keeping pinned tabs)
+ */
+export const closeTab = (
+  openKeys: TabType[],
+  index: number,
+  drop: (key: string) => void,
+  affixRouter: string[] = []
+): TabType[] => {
+  const targetItem = openKeys[index];
+  // Do not close if it is a pinned tab
+  if (affixRouter.includes(targetItem.key) || targetItem.affix) {
+    return openKeys;
+  }
+
+  const newOpenKeys = [...openKeys];
+  const removed = newOpenKeys.splice(index, 1);
+  removed?.forEach((item) => {
+    drop(item.key?.split("?")[0] || "");
+  });
+  return newOpenKeys;
+};
+
+/**
+ * Close tabs to the left (keeping pinned tabs)
+ */
+export const closeLeftTabs = (
+  openKeys: TabType[],
+  index: number,
+  drop: (key: string) => void,
+  affixRouter: string[] = []
+): TabType[] => {
+  // Split off the tabs on the left
+  const leftTabs = openKeys.slice(0, index);
+  const rightTabs = openKeys.slice(index);
+
+  // Filter out the non-pinned tabs on the left and close them
+  const removedTabs = leftTabs.filter(
+    (item) => !affixRouter.includes(item.key) && !item.affix
+  );
+  removedTabs.forEach((item) => {
+    drop(item.key?.split("?")[0] || "");
+  });
+
+  // Keep the pinned tabs on the left and all tabs on the right
+  const keptLeftTabs = leftTabs.filter(
+    (item) => affixRouter.includes(item.key) || item.affix
+  );
+  return [...keptLeftTabs, ...rightTabs];
+};
+
+/**
+ * Close tabs to the right (keeping pinned tabs)
+ */
+export const closeRightTabs = (
+  openKeys: TabType[],
+  index: number,
+  drop: (key: string) => void,
+  affixRouter: string[] = []
+): TabType[] => {
+  // Split into left and right tabs
+  const leftTabs = openKeys.slice(0, index + 1);
+  const rightTabs = openKeys.slice(index + 1);
+
+  // Filter out the non-pinned tabs on the right and close them
+  const removedTabs = rightTabs.filter(
+    (item) => !affixRouter.includes(item.key) && !item.affix
+  );
+  removedTabs.forEach((item) => {
+    drop(item.key?.split("?")[0] || "");
+  });
+
+  // Keep all tabs on the left and the pinned tabs on the right
+  const keptRightTabs = rightTabs.filter(
+    (item) => affixRouter.includes(item.key) || item.affix
+  );
+  return [...leftTabs, ...keptRightTabs];
+};
+
+/**
+ * Close other tabs (keeping pinned tabs)
+ */
+export const closeOtherTabs = (
+  openKeys: TabType[],
+  currentItem: TabType,
+  drop: (key: string) => void,
+  affixRouter: string[] = []
+): TabType[] => {
+  // Filter out the other non-pinned tabs and close them
+  const removedTabs = openKeys.filter(
+    (item) =>
+      item.key !== currentItem.key &&
+      !affixRouter.includes(item.key) &&
+      !item.affix
+  );
+  removedTabs.forEach((item) => {
+    drop(item.key?.split("?")[0] || "");
+  });
+
+  // Keep the current tab and all pinned tabs
+  return openKeys.filter(
+    (item) =>
+      item.key === currentItem.key ||
+      affixRouter.includes(item.key) ||
+      item.affix
+  );
+};
+
+/**
+ * Close all tabs (keeping pinned tabs)
+ */
+export const closeAllTabs = (
+  openKeys: TabType[],
+  drop: (key: string) => void,
+  affixRouter: string[] = []
+): TabType[] => {
+  // Filter out the non-pinned tabs and close them
+  const removedTabs = openKeys.filter(
+    (item) => !affixRouter.includes(item.key) && !item.affix
+  );
+  removedTabs.forEach((item) => {
+    drop(item.key?.split("?")[0] || "");
+  });
+
+  // Return the pinned tabs
+  return openKeys.filter(
+    (item) => affixRouter.includes(item.key) || item.affix
+  );
+};

package/src/layout/NavTabBar/index.md

@@ -0,0 +1,76 @@
+---
+title: NavTabBar 页签栏
+order: 4
+---
+
+# NavTabBar 页签栏
+
+多页签导航：可拖拽排序、右键菜单（关闭其他 / 关闭右侧 / 刷新）、固定页签、页面缓存。
+
+## 引入
+
+```ts
+import Layout from "@hsu-react/ui/es/layout";
+
+<Layout.NavTabBar router={router} />;
+```
+
+## 用法
+
+页签栏最前面是「刷新当前页」按钮，右键页签可以关闭 / 批量关闭 / 重新加载，页签之间可以拖拽排序。
+
+```tsx | pure
+import React from "react";
+import { BrowserRouter } from "react-router-dom";
+import { AliveScope } from "react-activation";
+import Layout from "@hsu-react/ui/es/layout";
+
+const router = [
+  { path: "/home", meta: { name: "首页", menu: true, affix: true } },
+  { path: "/order", meta: { name: "订单管理", menu: true } },
+  { path: "/user", meta: { name: "用户列表", menu: true } },
+];
+
+export default () => (
+  <AliveScope>
+    <BrowserRouter>
+      <Layout.NavTabBar router={router} />
+    </BrowserRouter>
+  </AliveScope>
+);
+```
+
+> 「首页」标了 `meta.affix`，所以没有关闭按钮。
+>
+> 这里只给代码不给可运行示例：页签栏要接管地址栏，而文档站本身也跑在一个 react-router 里，
+> 嵌一层 Router 会直接报错（react-router 不允许嵌套），不嵌又会让示例真的把文档站导走。
+
+## 说明
+
+页签由访问过的路由累积而来，文案取 `meta.name`、图标取 `meta.icon`。两个开关直接影响这里：
+
+- `meta.noTabsView` —— 该路由不进页签栏（它的子路由会顶上来）
+- `meta.affix` —— 固定页签，不显示关闭按钮，也不会被「关闭其他 / 关闭右侧」清掉
+
+页签的关闭与刷新走 [react-activation](https://github.com/CJY0208/react-activation) 的 `useAliveController`，因此消费方需要把路由出口包在 `<AliveScope>` 里、页面组件包 `<KeepAlive>`，关闭 / 刷新才能真正丢弃并重建对应的组件树。要让某个页面不缓存，在消费方装配路由时按 `meta.noCache` 跳过 `KeepAlive` 即可 —— 这个字段本组件不读。
+
+## API
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| router | 路由配置 | `RouteType[]` | - |
+| affixRouter | 额外固定的路由路径（等价于给这些路由加 `meta.affix`） | `string[]` | `[]` |
+| basePath | 关掉最后一个页签后回退到的路径 | `string` | `"/"` |
+| showReload | 页签栏最前面的「刷新当前页」按钮 | `boolean` | `true` |
+
+## 配套 Hook
+
+页签的标题与生命周期需要页面内部参与时，用这三个 hook（都从 `@hsu-react/ui/es/layout` 具名导出）：
+
+| Hook | 用途 |
+| --- | --- |
+| `useSetTabTitle()` | 返回 `(key, title) => void`。详情页想把页签标题改成「订单 #123」这类动态文案时用它 |
+| `useReload()` | 返回 `(id) => void`。触发某个页面重新挂载，右键菜单的「刷新」走的就是它 |
+| `useDropTab()` | 返回 `(key) => void`。业务里主动关掉某个页签，例如表单提交成功后关闭自己并跳回列表 |
+
+三者都依赖 `NavTabBar` 挂载时提供的 context，因此只能在页签体系内部的页面里调用。