@hsu-react/ui 1.0.0 → 2.0.1

package/es/layout/NavTabBar/_components/TabDragOverlay/index.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import { TabType } from "../..";
+interface TabDragOverlayProps {
+    activeId: string | null;
+    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;
+}
+/**
+ * Drag overlay component that renders the tab currently being dragged
+ */
+declare const TabDragOverlay: React.FC<TabDragOverlayProps>;
+export default TabDragOverlay;

package/es/layout/NavTabBar/_components/TabDragOverlay/index.js

@@ -0,0 +1,50 @@
+import React from "react";
+import { DragOverlay } from "@dnd-kit/core";
+import TabLabel from "../TabLabel";
+import styles from "../../index.module.scss";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Drag overlay component that renders the tab currently being dragged
+ */
+var TabDragOverlay = function TabDragOverlay(_ref) {
+  var activeId = _ref.activeId,
+    openKeys = _ref.openKeys,
+    basePath = _ref.basePath,
+    affixRouter = _ref.affixRouter,
+    open = _ref.open,
+    onReload = _ref.onReload,
+    refresh = _ref.refresh,
+    drop = _ref.drop,
+    setOpenkeys = _ref.setOpenkeys,
+    setOpen = _ref.setOpen,
+    navigate = _ref.navigate;
+  return /*#__PURE__*/_jsx(DragOverlay, {
+    adjustScale: false,
+    children: activeId ? /*#__PURE__*/_jsx("div", {
+      className: styles.dragOverlay,
+      children: function () {
+        var item = openKeys.find(function (item) {
+          return item.key === activeId;
+        });
+        var idx = openKeys.findIndex(function (item) {
+          return item.key === activeId;
+        });
+        return item ? /*#__PURE__*/_jsx(TabLabel, {
+          item: item,
+          index: idx,
+          openKeys: openKeys,
+          basePath: basePath,
+          affixRouter: affixRouter,
+          open: open,
+          onReload: onReload,
+          refresh: refresh,
+          drop: drop,
+          setOpenkeys: setOpenkeys,
+          setOpen: setOpen,
+          navigate: navigate
+        }) : activeId;
+      }()
+    }) : null
+  });
+};
+export default TabDragOverlay;

package/es/layout/NavTabBar/_components/TabLabel/index.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import { TabType } from "../..";
+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
+ */
+declare const TabLabel: React.FC<TabLabelProps>;
+export default TabLabel;

package/es/layout/NavTabBar/_components/TabLabel/index.js

@@ -0,0 +1,61 @@
+import React from "react";
+import { Popover } from "antd";
+import TabContextMenu from "../TabContextMenu";
+import styles from "../../index.module.scss";
+import classNames from "classnames";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Tab label component
+ */
+var TabLabel = function TabLabel(_ref) {
+  var item = _ref.item,
+    index = _ref.index,
+    openKeys = _ref.openKeys,
+    basePath = _ref.basePath,
+    affixRouter = _ref.affixRouter,
+    open = _ref.open,
+    onReload = _ref.onReload,
+    refresh = _ref.refresh,
+    drop = _ref.drop,
+    setOpenkeys = _ref.setOpenkeys,
+    setOpen = _ref.setOpen,
+    navigate = _ref.navigate,
+    className = _ref.className;
+  return /*#__PURE__*/_jsx(Popover, {
+    open: item.key === open,
+    placement: "bottomLeft",
+    classNames: {
+      root: styles.popover
+    },
+    content: /*#__PURE__*/_jsx(TabContextMenu, {
+      item: item,
+      index: index,
+      openKeys: openKeys,
+      basePath: basePath,
+      affixRouter: affixRouter,
+      onReload: onReload,
+      refresh: refresh,
+      drop: drop,
+      setOpenkeys: setOpenkeys,
+      setOpen: setOpen,
+      navigate: navigate
+    }),
+    children: /*#__PURE__*/_jsxs("span", {
+      onContextMenu: function onContextMenu(event) {
+        event.preventDefault();
+      },
+      onMouseDown: function onMouseDown(e) {
+        if (e.button === 2) {
+          setOpen(item.key === open ? "" : item.key);
+        } else {
+          setOpen("");
+          navigate(item.key);
+        }
+      },
+      className: classNames(styles.tabLabel, className),
+      children: [item.icon, item.label]
+    })
+  });
+};
+export default TabLabel;

package/es/layout/NavTabBar/_hooks/useDropTabKey.d.ts

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

package/es/layout/NavTabBar/_hooks/useDropTabKey.js

@@ -0,0 +1,25 @@
+import { useEffect, useContext } from "react";
+import { useAliveController } from "react-activation";
+import { NavTabBarContent } from "../../_hooks/useDropTab";
+/**
+ * Hook that closes a tab via dropKey
+ */
+export var useDropTabKey = function useDropTabKey(setOpenkeys) {
+  var _useAliveController = useAliveController(),
+    drop = _useAliveController.drop;
+  var _useContext = useContext(NavTabBarContent),
+    dropKey = _useContext.dropKey;
+  useEffect(function () {
+    setTimeout(function () {
+      if (dropKey) {
+        drop(dropKey);
+        setOpenkeys(function (prev) {
+          var newOpenKeys = prev.filter(function (item) {
+            return item.key !== dropKey;
+          });
+          return newOpenKeys;
+        });
+      }
+    }, 0);
+  }, [drop, dropKey, setOpenkeys]);
+};

package/es/layout/NavTabBar/_hooks/useTabContextMenu.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+/**
+ * Hook that handles the tab context menu
+ */
+export declare const useTabContextMenu: () => {
+    open: string;
+    setOpen: import("react").Dispatch<import("react").SetStateAction<string>>;
+};

package/es/layout/NavTabBar/_hooks/useTabContextMenu.js

@@ -0,0 +1,31 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useState } from "react";
+import { useDebounceEffect } from "ahooks";
+
+/**
+ * Hook that handles the tab context menu
+ */
+export var useTabContextMenu = function useTabContextMenu() {
+  var _useState = useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  useDebounceEffect(function () {
+    var close = function close() {
+      setOpen("");
+    };
+    document.removeEventListener("click", close);
+    if (open) {
+      document.addEventListener("click", close);
+    }
+  }, [open]);
+  return {
+    open: open,
+    setOpen: setOpen
+  };
+};

package/es/layout/NavTabBar/_hooks/useTabPath.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { TabType } from "..";
+interface UseTabPathOptions {
+    items: TabType[];
+    affixRouter: string[];
+}
+/**
+ * Hook that handles tab path matching and active state
+ */
+export declare const useTabPath: ({ items, affixRouter }: UseTabPathOptions) => {
+    tabKey: string;
+    setTabKey: import("react").Dispatch<import("react").SetStateAction<string>>;
+    openKeys: TabType[];
+    setOpenkeys: import("react").Dispatch<import("react").SetStateAction<TabType[]>>;
+};
+export {};

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

@@ -0,0 +1,131 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useCallback, useEffect, useState } from "react";
+import { useLocation } from "react-router";
+import { checkTabPathMatch } from "../_utils/pathMatch";
+import { array_is_includes } from "hsu-utils";
+/**
+ * Hook that handles tab path matching and active state
+ */
+export var useTabPath = function useTabPath(_ref) {
+  var items = _ref.items,
+    affixRouter = _ref.affixRouter;
+  var location = useLocation();
+  var _useState = useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    tabKey = _useState2[0],
+    setTabKey = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    openKeys = _useState4[0],
+    setOpenkeys = _useState4[1];
+
+  /**
+   * Check affixed routes (affixRouter and affix) and add them to openKeys
+   */
+  var _checkAffix = useCallback(function (items) {
+    items === null || items === void 0 || items.forEach(function (item) {
+      if (item.children) {
+        _checkAffix(item.children);
+      } else {
+        // Check whether it is an affixed route
+        var isAffix = affixRouter.includes(item.key) || item.affix;
+        if (isAffix) {
+          setOpenkeys(function (prev) {
+            var find = prev.find(function (i) {
+              return i.key === item.key;
+            });
+            if (find) {
+              return prev;
+            }
+            return [].concat(_toConsumableArray(prev), [item]);
+          });
+        }
+      }
+    });
+  }, [affixRouter]);
+  var _checkPath = useCallback(function (items, parents) {
+    var pathname = decodeURI(location.pathname);
+    var search = location.search;
+    items === null || items === void 0 || items.forEach(function (item) {
+      if (item.children) {
+        var _parents = parents ? [].concat(_toConsumableArray(parents), [item]) : [item];
+        _checkPath(item.children, _parents);
+      } else {
+        var isMatch = checkTabPathMatch(pathname, item.key);
+        if (isMatch) {
+          var keyArr = item.key.split("/").filter(Boolean);
+          var hasParams = keyArr.filter(function (i) {
+            return i.startsWith(":");
+          }).length > 0;
+          var pathArr = pathname.split("/").filter(Boolean);
+          if (hasParams && array_is_includes(keyArr.filter(function (i) {
+            return !i.startsWith(":");
+          }), pathArr)) {
+            // Handle param routes
+            setTabKey("".concat(pathname).concat(search));
+            setOpenkeys(function (prev) {
+              var find = prev.find(function (i) {
+                return i.key.split("?")[0] === pathname;
+              });
+              if (find) {
+                return prev.map(function (i) {
+                  return i.key.split("?")[0] === pathname ? _objectSpread(_objectSpread({}, i), {}, {
+                    key: "".concat(pathname).concat(search)
+                  }) : i;
+                });
+              }
+              return [].concat(_toConsumableArray(prev), [_objectSpread(_objectSpread({}, item), {}, {
+                key: "".concat(pathname).concat(search)
+              })]);
+            });
+          } else {
+            // Handle plain routes
+            setTabKey("".concat(item.key).concat(search));
+            setOpenkeys(function (prev) {
+              var find = prev.find(function (i) {
+                return i.key.split("?")[0] === item.key;
+              });
+              if (find) {
+                return prev.map(function (i) {
+                  return i.key.split("?")[0] === item.key ? _objectSpread(_objectSpread({}, i), {}, {
+                    key: "".concat(item.key).concat(search)
+                  }) : i;
+                });
+              }
+              return [].concat(_toConsumableArray(prev), [_objectSpread(_objectSpread({}, item), {}, {
+                key: "".concat(item.key).concat(search)
+              })]);
+            });
+          }
+        }
+      }
+    });
+  }, [location.pathname, location.search]);
+  useEffect(function () {
+    // Handle affixed routes first to populate openKeys
+    _checkAffix(items);
+    // Then run path matching
+    _checkPath(items);
+  }, [_checkAffix, _checkPath, items]);
+  return {
+    tabKey: tabKey,
+    setTabKey: setTabKey,
+    openKeys: openKeys,
+    setOpenkeys: setOpenkeys
+  };
+};

package/es/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/es/layout/NavTabBar/_hooks/useTabTitle.js

@@ -0,0 +1,29 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { useEffect, useContext } from "react";
+import { NavTabBarTitleContent } from "../../_hooks/useSetTabTitle";
+/**
+ * Hook that updates tab titles via tabTitles
+ */
+export var useTabTitle = function useTabTitle(setOpenkeys) {
+  var _useContext = useContext(NavTabBarTitleContent),
+    tabTitles = _useContext.tabTitles;
+  useEffect(function () {
+    if (tabTitles && Object.keys(tabTitles).length > 0) {
+      setOpenkeys(function (prev) {
+        return prev === null || prev === void 0 ? void 0 : prev.map(function (item) {
+          if (tabTitles[item.key] !== undefined) {
+            return _objectSpread(_objectSpread({}, item), {}, {
+              label: tabTitles[item.key]
+            });
+          }
+          return item;
+        });
+      });
+    }
+  }, [tabTitles, setOpenkeys]);
+};

package/es/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/es/layout/NavTabBar/_utils/formatNavTabBar.js

@@ -0,0 +1,48 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+import { cloneDeep } from "lodash";
+/**
+ * Format routes into tab items
+ * @param routes Route configuration
+ * @param parent Parent tab item
+ * @returns Array of tab items
+ */
+export var formatNavTabBar = function formatNavTabBar(routes, parent) {
+  var newRoutes = [];
+  routes === null || routes === void 0 || routes.forEach(function (route) {
+    var children = undefined;
+    if (route.children) {
+      children = formatNavTabBar(route.children, cloneDeep(route));
+    }
+    var meta = route.meta;
+    if (!(meta !== null && meta !== void 0 && meta.noTabsView) && route.path) {
+      var _meta$name, _children;
+      newRoutes.push({
+        key: decodeURI(route.path),
+        label: (_meta$name = meta === null || meta === void 0 ? void 0 : meta.name) !== null && _meta$name !== void 0 ? _meta$name : "",
+        children: (((_children = children) === null || _children === void 0 ? void 0 : _children.length) || 0) > 0 ? children : undefined,
+        element: route.element,
+        affix: meta === null || meta === void 0 ? void 0 : meta.affix,
+        icon: meta === null || meta === void 0 ? void 0 : meta.icon
+      });
+    } else if (!(meta !== null && meta !== void 0 && meta.noTabsView) && route.index && parent !== null && parent !== void 0 && parent.path) {
+      var _meta$name2;
+      newRoutes.push({
+        key: decodeURI(parent.path),
+        label: (_meta$name2 = meta === null || meta === void 0 ? void 0 : meta.name) !== null && _meta$name2 !== void 0 ? _meta$name2 : "",
+        element: route.element,
+        affix: meta === null || meta === void 0 ? void 0 : meta.affix,
+        icon: meta === null || meta === void 0 ? void 0 : meta.icon
+      });
+    } else {
+      if (children) {
+        newRoutes.push.apply(newRoutes, _toConsumableArray(children));
+      }
+    }
+  });
+  return newRoutes;
+};

package/es/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/es/layout/NavTabBar/_utils/pathMatch.js

@@ -0,0 +1,33 @@
+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 var checkTabPathMatch = function checkTabPathMatch(pathname, key) {
+  // Handle the root path
+  if (pathname === "/" && key === "/") {
+    return true;
+  }
+  var pathArr = pathname.split("/").filter(Boolean);
+  var 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(function (i) {
+      return !i.startsWith(":");
+    }), pathArr);
+  } else {
+    // Plain path matching
+    return array_is_includes(keyArr, pathArr);
+  }
+};

package/es/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/es/layout/NavTabBar/_utils/tabActions.js

@@ -0,0 +1,114 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+/**
+ * Close the tab at the given index (keeping pinned tabs)
+ */
+export var closeTab = function closeTab(openKeys, index, drop) {
+  var affixRouter = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
+  var targetItem = openKeys[index];
+  // Do not close if it is a pinned tab
+  if (affixRouter.includes(targetItem.key) || targetItem.affix) {
+    return openKeys;
+  }
+  var newOpenKeys = _toConsumableArray(openKeys);
+  var removed = newOpenKeys.splice(index, 1);
+  removed === null || removed === void 0 || removed.forEach(function (item) {
+    var _item$key;
+    drop(((_item$key = item.key) === null || _item$key === void 0 ? void 0 : _item$key.split("?")[0]) || "");
+  });
+  return newOpenKeys;
+};
+
+/**
+ * Close tabs to the left (keeping pinned tabs)
+ */
+export var closeLeftTabs = function closeLeftTabs(openKeys, index, drop) {
+  var affixRouter = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
+  // Split off the tabs on the left
+  var leftTabs = openKeys.slice(0, index);
+  var rightTabs = openKeys.slice(index);
+
+  // Filter out the non-pinned tabs on the left and close them
+  var removedTabs = leftTabs.filter(function (item) {
+    return !affixRouter.includes(item.key) && !item.affix;
+  });
+  removedTabs.forEach(function (item) {
+    var _item$key2;
+    drop(((_item$key2 = item.key) === null || _item$key2 === void 0 ? void 0 : _item$key2.split("?")[0]) || "");
+  });
+
+  // Keep the pinned tabs on the left and all tabs on the right
+  var keptLeftTabs = leftTabs.filter(function (item) {
+    return affixRouter.includes(item.key) || item.affix;
+  });
+  return [].concat(_toConsumableArray(keptLeftTabs), _toConsumableArray(rightTabs));
+};
+
+/**
+ * Close tabs to the right (keeping pinned tabs)
+ */
+export var closeRightTabs = function closeRightTabs(openKeys, index, drop) {
+  var affixRouter = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
+  // Split into left and right tabs
+  var leftTabs = openKeys.slice(0, index + 1);
+  var rightTabs = openKeys.slice(index + 1);
+
+  // Filter out the non-pinned tabs on the right and close them
+  var removedTabs = rightTabs.filter(function (item) {
+    return !affixRouter.includes(item.key) && !item.affix;
+  });
+  removedTabs.forEach(function (item) {
+    var _item$key3;
+    drop(((_item$key3 = item.key) === null || _item$key3 === void 0 ? void 0 : _item$key3.split("?")[0]) || "");
+  });
+
+  // Keep all tabs on the left and the pinned tabs on the right
+  var keptRightTabs = rightTabs.filter(function (item) {
+    return affixRouter.includes(item.key) || item.affix;
+  });
+  return [].concat(_toConsumableArray(leftTabs), _toConsumableArray(keptRightTabs));
+};
+
+/**
+ * Close other tabs (keeping pinned tabs)
+ */
+export var closeOtherTabs = function closeOtherTabs(openKeys, currentItem, drop) {
+  var affixRouter = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
+  // Filter out the other non-pinned tabs and close them
+  var removedTabs = openKeys.filter(function (item) {
+    return item.key !== currentItem.key && !affixRouter.includes(item.key) && !item.affix;
+  });
+  removedTabs.forEach(function (item) {
+    var _item$key4;
+    drop(((_item$key4 = item.key) === null || _item$key4 === void 0 ? void 0 : _item$key4.split("?")[0]) || "");
+  });
+
+  // Keep the current tab and all pinned tabs
+  return openKeys.filter(function (item) {
+    return item.key === currentItem.key || affixRouter.includes(item.key) || item.affix;
+  });
+};
+
+/**
+ * Close all tabs (keeping pinned tabs)
+ */
+export var closeAllTabs = function closeAllTabs(openKeys, drop) {
+  var affixRouter = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+  // Filter out the non-pinned tabs and close them
+  var removedTabs = openKeys.filter(function (item) {
+    return !affixRouter.includes(item.key) && !item.affix;
+  });
+  removedTabs.forEach(function (item) {
+    var _item$key5;
+    drop(((_item$key5 = item.key) === null || _item$key5 === void 0 ? void 0 : _item$key5.split("?")[0]) || "");
+  });
+
+  // Return the pinned tabs
+  return openKeys.filter(function (item) {
+    return affixRouter.includes(item.key) || item.affix;
+  });
+};