@hsu-react/ui 1.0.0 → 2.0.1

package/lib/layout/NavTabBar/_hooks/useTabPath.js

@@ -0,0 +1,107 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTabPath = void 0;
+var _react = require("react");
+var _reactRouter = require("react-router");
+var _pathMatch = require("../_utils/pathMatch");
+var _hsuUtils = require("hsu-utils");
+/**
+ * Hook that handles tab path matching and active state
+ */
+const useTabPath = ({
+  items,
+  affixRouter
+}) => {
+  const location = (0, _reactRouter.useLocation)();
+  const [tabKey, setTabKey] = (0, _react.useState)("");
+  const [openKeys, setOpenkeys] = (0, _react.useState)([]);
+
+  /**
+   * Check affixed routes (affixRouter and affix) and add them to openKeys
+   */
+  const _checkAffix = (0, _react.useCallback)(items => {
+    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 = (0, _react.useCallback)((items, parents) => {
+    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 = (0, _pathMatch.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 && (0, _hsuUtils.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]);
+  (0, _react.useEffect)(() => {
+    // Handle affixed routes first to populate openKeys
+    _checkAffix(items);
+    // Then run path matching
+    _checkPath(items);
+  }, [_checkAffix, _checkPath, items]);
+  return {
+    tabKey,
+    setTabKey,
+    openKeys,
+    setOpenkeys
+  };
+};
+exports.useTabPath = useTabPath;

package/lib/layout/NavTabBar/_hooks/useTabTitle.d.ts

@@ -0,0 +1,5 @@
+import { TabType } from "..";
+/**
+ * Hook that updates tab titles via tabTitles
+ */
+export declare const useTabTitle: (setOpenkeys: React.Dispatch<React.SetStateAction<TabType[]>>) => void;

package/lib/layout/NavTabBar/_hooks/useTabTitle.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTabTitle = void 0;
+var _react = require("react");
+var _useSetTabTitle = require("../../_hooks/useSetTabTitle");
+/**
+ * Hook that updates tab titles via tabTitles
+ */
+const useTabTitle = setOpenkeys => {
+  const {
+    tabTitles
+  } = (0, _react.useContext)(_useSetTabTitle.NavTabBarTitleContent);
+  (0, _react.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]);
+};
+exports.useTabTitle = useTabTitle;

package/lib/layout/NavTabBar/_utils/formatNavTabBar.d.ts

@@ -0,0 +1,9 @@
+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 declare const formatNavTabBar: (routes: RouteType[], parent?: TabType) => TabType[];

package/lib/layout/NavTabBar/_utils/formatNavTabBar.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.formatNavTabBar = void 0;
+var _lodash = require("lodash");
+/**
+ * Format routes into tab items
+ * @param routes Route configuration
+ * @param parent Parent tab item
+ * @returns Array of tab items
+ */
+const formatNavTabBar = (routes, parent) => {
+  const newRoutes = [];
+  routes?.forEach(route => {
+    let children = undefined;
+    if (route.children) {
+      children = formatNavTabBar(route.children, (0, _lodash.cloneDeep)(route));
+    }
+    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;
+};
+exports.formatNavTabBar = formatNavTabBar;

package/lib/layout/NavTabBar/_utils/pathMatch.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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 declare const checkTabPathMatch: (pathname: string, key: string) => boolean;

package/lib/layout/NavTabBar/_utils/pathMatch.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.checkTabPathMatch = void 0;
+var _hsuUtils = require("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
+ */
+const checkTabPathMatch = (pathname, key) => {
+  // 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 (0, _hsuUtils.array_is_includes)(keyArr.filter(i => !i.startsWith(":")), pathArr);
+  } else {
+    // Plain path matching
+    return (0, _hsuUtils.array_is_includes)(keyArr, pathArr);
+  }
+};
+exports.checkTabPathMatch = checkTabPathMatch;

package/lib/layout/NavTabBar/_utils/tabActions.d.ts

@@ -0,0 +1,21 @@
+import { TabType } from "..";
+/**
+ * Close the tab at the given index (keeping pinned tabs)
+ */
+export declare const closeTab: (openKeys: TabType[], index: number, drop: (key: string) => void, affixRouter?: string[]) => TabType[];
+/**
+ * Close tabs to the left (keeping pinned tabs)
+ */
+export declare const closeLeftTabs: (openKeys: TabType[], index: number, drop: (key: string) => void, affixRouter?: string[]) => TabType[];
+/**
+ * Close tabs to the right (keeping pinned tabs)
+ */
+export declare const closeRightTabs: (openKeys: TabType[], index: number, drop: (key: string) => void, affixRouter?: string[]) => TabType[];
+/**
+ * Close other tabs (keeping pinned tabs)
+ */
+export declare const closeOtherTabs: (openKeys: TabType[], currentItem: TabType, drop: (key: string) => void, affixRouter?: string[]) => TabType[];
+/**
+ * Close all tabs (keeping pinned tabs)
+ */
+export declare const closeAllTabs: (openKeys: TabType[], drop: (key: string) => void, affixRouter?: string[]) => TabType[];

package/lib/layout/NavTabBar/_utils/tabActions.js

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.closeTab = exports.closeRightTabs = exports.closeOtherTabs = exports.closeLeftTabs = exports.closeAllTabs = void 0;
+/**
+ * Close the tab at the given index (keeping pinned tabs)
+ */
+const closeTab = (openKeys, index, drop, affixRouter = []) => {
+  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)
+ */
+exports.closeTab = closeTab;
+const closeLeftTabs = (openKeys, index, drop, affixRouter = []) => {
+  // 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)
+ */
+exports.closeLeftTabs = closeLeftTabs;
+const closeRightTabs = (openKeys, index, drop, affixRouter = []) => {
+  // 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)
+ */
+exports.closeRightTabs = closeRightTabs;
+const closeOtherTabs = (openKeys, currentItem, drop, affixRouter = []) => {
+  // 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)
+ */
+exports.closeOtherTabs = closeOtherTabs;
+const closeAllTabs = (openKeys, drop, affixRouter = []) => {
+  // 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);
+};
+exports.closeAllTabs = closeAllTabs;

package/lib/layout/NavTabBar/index.d.ts

@@ -0,0 +1,21 @@
+import React, { ReactNode } from "react";
+import { RouteType } from "../types";
+export interface TabType {
+    label: ReactNode;
+    key: string;
+    element?: React.ReactNode;
+    children?: TabType[];
+    path?: string;
+    name?: ReactNode;
+    affix?: boolean;
+    icon?: ReactNode;
+}
+export interface NavTabBarProps {
+    router: RouteType[];
+    affixRouter?: string[];
+    basePath?: string;
+    /** 页签栏最前面的「刷新当前页」按钮 */
+    showReload?: boolean;
+}
+declare const NavTabBar: React.FC<NavTabBarProps>;
+export default NavTabBar;

package/lib/layout/NavTabBar/index.js

@@ -0,0 +1,206 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _antd = require("antd");
+var _react = _interopRequireWildcard(require("react"));
+var _reactRouter = require("react-router");
+var _core = require("@dnd-kit/core");
+var _modifiers = require("@dnd-kit/modifiers");
+var _sortable = require("@dnd-kit/sortable");
+var _indexModule = _interopRequireDefault(require("./index.module.scss"));
+var _reactActivation = require("react-activation");
+var _useReload = _interopRequireDefault(require("../_hooks/useReload"));
+var _formatNavTabBar = require("./_utils/formatNavTabBar");
+var _useTabPath = require("./_hooks/useTabPath");
+var _useTabContextMenu = require("./_hooks/useTabContextMenu");
+var _useDropTabKey = require("./_hooks/useDropTabKey");
+var _useTabTitle = require("./_hooks/useTabTitle");
+var _TabLabel = _interopRequireDefault(require("./_components/TabLabel"));
+var _SortableTab = _interopRequireDefault(require("./_components/SortableTab"));
+var _TabDragOverlay = _interopRequireDefault(require("./_components/TabDragOverlay"));
+var _cssSupports = require("../../utils/cssSupports");
+var _Button = _interopRequireDefault(require("../../components/Button"));
+var _Icon = _interopRequireDefault(require("../../components/Icon"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const NavTabBar = props => {
+  const {
+    router,
+    affixRouter = [],
+    basePath = "/",
+    showReload = true
+  } = props;
+  const navigate = (0, _reactRouter.useNavigate)();
+  const {
+    drop,
+    refresh
+  } = (0, _reactActivation.useAliveController)();
+  const onReload = (0, _useReload.default)();
+  const legacyHasSelector = (0, _cssSupports.isLegacyHasSelectorBrowser)();
+  const items = (0, _react.useMemo)(() => {
+    return (0, _formatNavTabBar.formatNavTabBar)(router);
+  }, [router]);
+  const {
+    tabKey,
+    openKeys,
+    setOpenkeys
+  } = (0, _useTabPath.useTabPath)({
+    items,
+    affixRouter
+  });
+  const {
+    open,
+    setOpen
+  } = (0, _useTabContextMenu.useTabContextMenu)();
+  (0, _useDropTabKey.useDropTabKey)(setOpenkeys);
+  (0, _useTabTitle.useTabTitle)(setOpenkeys);
+
+  // ID of the tab currently being dragged
+  const [activeId, setActiveId] = (0, _react.useState)(null);
+
+  // Configure the drag sensor with a 10px activation distance to avoid accidental drags
+  const sensor = (0, _core.useSensor)(_core.PointerSensor, {
+    activationConstraint: {
+      distance: 10
+    }
+  });
+
+  // Handle the drag start event
+  const onDragStart = event => {
+    setActiveId(String(event.active.id));
+  };
+
+  // Handle the drag end event
+  const onDragEnd = ({
+    active,
+    over
+  }) => {
+    if (active.id !== over?.id) {
+      setOpenkeys(prev => {
+        const activeIndex = prev.findIndex(i => i.key === active.id);
+        const overIndex = prev.findIndex(i => i.key === over?.id);
+        return (0, _sortable.arrayMove)(prev, activeIndex, overIndex);
+      });
+    }
+    setActiveId(null);
+  };
+
+  // Handle the drag cancel event
+  const onDragCancel = () => {
+    setActiveId(null);
+  };
+
+  /**
+   * 刷新当前页。走的是和右键菜单「重新加载」完全相同的两步：`onReload` 通知页面自己重挂，
+   * `refresh` 让 react-activation 丢掉这份缓存。少调其中任何一个，都会出现「看上去刷新了、
+   * 实际还是那棵旧组件树」。
+   *
+   * key 要去掉 query —— 缓存是按路径存的，带上 `?a=1` 会找不到对应的那份。
+   */
+  const reloadCurrent = (0, _react.useCallback)(() => {
+    const key = tabKey?.split("?")[0];
+    if (!key) return;
+    onReload(key);
+    refresh(key);
+  }, [tabKey, onReload, refresh]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tabs, {
+    className: _indexModule.default.NavTabBar,
+    items: openKeys?.map((item, idx) => {
+      const closable = !(affixRouter.includes(item.key) || item.affix);
+      return {
+        label: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLabel.default, {
+          item: item,
+          index: idx,
+          openKeys: openKeys,
+          basePath: basePath,
+          affixRouter: affixRouter,
+          open: open,
+          onReload: onReload,
+          refresh: refresh,
+          drop: drop,
+          setOpenkeys: setOpenkeys,
+          setOpen: setOpen,
+          navigate: navigate,
+          className: legacyHasSelector && closable ? _indexModule.default.legacyClosableTabLabel : undefined
+        }),
+        key: item.key,
+        closeIcon: closable ? undefined : false
+      };
+    }),
+    activeKey: tabKey,
+    tabBarExtraContent: showReload ? {
+      left:
+      /*#__PURE__*/
+      // 不用 Button 的 title —— 本库的 Button 把 title 当作 children 的兜底
+      // （children ?? title），传了会把文案画到按钮里，而不是变成悬浮提示
+      (0, _jsxRuntime.jsx)(_antd.Tooltip, {
+        title: "\u5237\u65B0\u5F53\u524D\u9875",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+          className: _indexModule.default.reload,
+          type: "text",
+          size: "small",
+          "aria-label": "\u5237\u65B0\u5F53\u524D\u9875",
+          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+            icon: "ep:refresh"
+          }),
+          onClick: reloadCurrent
+        })
+      })
+    } : undefined,
+    hideAdd: true,
+    type: "editable-card",
+    onEdit: (key, action) => {
+      if (action === "remove") {
+        drop(key?.split("?")[0] || "");
+        // Find the index of the tab being closed
+        const currentIndex = openKeys.findIndex(item => item.key === key);
+        const newOpenKeys = openKeys.filter(item => item.key !== key);
+        setOpenkeys(newOpenKeys);
+        setOpen("");
+        if (key === tabKey) {
+          // If the active tab is closed, select the previous tab; fall back to the first one
+          const targetIndex = currentIndex > 0 ? currentIndex - 1 : 0;
+          navigate(newOpenKeys[targetIndex]?.key || basePath);
+        }
+      }
+    },
+    size: "small",
+    renderTabBar: (tabBarProps, DefaultTabBar) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_core.DndContext, {
+      sensors: [sensor],
+      onDragStart: onDragStart,
+      onDragEnd: onDragEnd,
+      onDragCancel: onDragCancel,
+      collisionDetection: _core.closestCenter,
+      modifiers: [_modifiers.restrictToHorizontalAxis, _modifiers.restrictToParentElement],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sortable.SortableContext, {
+        items: openKeys.map(i => i.key),
+        strategy: _sortable.horizontalListSortingStrategy,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DefaultTabBar, {
+          ...tabBarProps,
+          children: node => /*#__PURE__*/(0, _react.createElement)(_SortableTab.default, {
+            ...node.props,
+            key: node.key
+          }, node)
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabDragOverlay.default, {
+        activeId: activeId,
+        openKeys: openKeys,
+        basePath: basePath,
+        affixRouter: affixRouter,
+        open: open,
+        onReload: onReload,
+        refresh: refresh,
+        drop: drop,
+        setOpenkeys: setOpenkeys,
+        setOpen: setOpen,
+        navigate: navigate
+      })]
+    })
+  });
+};
+var _default = exports.default = NavTabBar;