@blocklet/ui-react 2.1.26 → 2.1.29

package/lib/Header/index.js

@@ -35,6 +35,8 @@ require("@iconify/iconify");
 
 var _types = require("../types");
 
+var _utils = require("../utils");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["meta", "addons", "sessionManagerProps"];
@@ -51,18 +53,18 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-const muiTheme = (0, _Theme.create)();
+const muiTheme = (0, _Theme.create)(); // blocklet meta 中的 navigation 数据 => NavMenu 组件的 items
 
-const isLinkActive = link => {
-  if (window.location.pathname === '/') {
-    return link === '/';
+const parseNavigation = navigation => {
+  if (!(navigation !== null && navigation !== void 0 && navigation.length)) {
+    return {
+      navItems: [],
+      activeId: null
+    };
   }
 
-  return link && link.indexOf(window.location.pathname) > -1;
-}; // blocklet meta 中的 navigation 数据 => NavMenu 组件的 items
+  let counter = 1;
 
-
-const parseNavigation = navigation => {
   const parseItem = item => {
     var _item$link, _item$link2;
 
@@ -73,9 +75,10 @@ const parseNavigation = navigation => {
 
     if (item.items) {
       return {
+        id: "".concat(counter++),
         label: item.title,
         icon,
-        children: item.items.map(parseItem)
+        children: item.items
       };
     }
 
@@ -89,18 +92,24 @@ const parseNavigation = navigation => {
     }
 
     return {
+      id: "".concat(counter++),
       label: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", _objectSpread(_objectSpread({
         href: item.link
       }, props), {}, {
         children: item.title
       })),
-      active: isLinkActive(item.link),
-      icon
+      icon,
+      link: item.link
     };
   };
 
-  const items = navigation.map(parseItem);
-  return items;
+  const navItems = (0, _utils.mapRecursive)(navigation, parseItem, 'items');
+  const flattened = (0, _utils.flatRecursive)(navItems);
+  const matchedIndex = (0, _utils.matchPaths)(flattened.map(item => item.link));
+  return {
+    navItems,
+    activeId: matchedIndex >= 0 ? flattened[matchedIndex].id : null
+  };
 };
 /**
  * 专门用于 (composable) blocklet 的 Header 组件, 解析 blocklet meta 中的数据, 通过组合 UX 中的 Header & NavMenu 组件来渲染
@@ -134,7 +143,10 @@ function Header(_ref) {
     enableConnect = true,
     enableLocale = true
   } = blocklet;
-  const navItems = parseNavigation(navigation);
+  const {
+    navItems,
+    activeId
+  } = parseNavigation(navigation);
 
   const renderAddons = () => {
     // 不关心内置的 session manager 和 locale selector, 直接覆盖 UX Header 的 addons
@@ -187,6 +199,7 @@ function Header(_ref) {
         } = _ref2;
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NavMenu.default, {
           mode: isMobile ? 'inline' : 'horizontal',
+          activeId: activeId,
           items: navItems,
           onSelected: closeMenu,
           className: "header-nav",

package/lib/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.mapRecursive = exports.isUrl = void 0;
+exports.matchPaths = exports.matchPath = exports.mapRecursive = exports.isUrl = exports.flatRecursive = void 0;
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -22,13 +22,65 @@ const mapRecursive = function mapRecursive(array, fn) {
 
     return fn(item);
   });
-}; // "http://", "https://", "//" 开头的 3 种情况
+}; // 展平有层级结构的 array
 
 
 exports.mapRecursive = mapRecursive;
 
+const flatRecursive = function flatRecursive(array) {
+  let childrenKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'children';
+  const result = [];
+  mapRecursive(array, item => result.push(item), childrenKey);
+  return result;
+}; // "http://", "https://", "//" 开头的 3 种情况
+
+
+exports.flatRecursive = flatRecursive;
+
 const isUrl = str => {
   return /^(https?:)?\/\//.test(str);
 };
+/**
+ * 检测 path 是否匹配当前 location, path 只考虑 "/" 开头的相对路径
+ */
+
+
+exports.isUrl = isUrl;
+
+const matchPath = path => {
+  if (!path || !(path !== null && path !== void 0 && path.startsWith('/'))) {
+    return false;
+  }
+
+  const ensureTrailingSlash = str => str.endsWith('/') ? str : "".concat(str, "/");
+
+  const pathname = ensureTrailingSlash(window.location.pathname);
+  const normalizedPath = ensureTrailingSlash(new URL(path, window.location.origin).pathname);
+  return pathname.startsWith(normalizedPath);
+};
+/**
+ * 从一组 paths 中, 找到匹配当前 location 的 path, 返回序号
+ */
+
+
+exports.matchPath = matchPath;
+
+const matchPaths = function matchPaths() {
+  let paths = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  const matched = paths.map((item, index) => ({
+    path: item,
+    index
+  })).filter(item => matchPath(item.path));
+
+  if (!(matched !== null && matched !== void 0 && matched.length)) {
+    return -1;
+  } // 多个 path 都匹配时, 取一个最具体 (最长的) path
+
+
+  const mostSpecific = matched.slice(1).reduce((prev, cur) => {
+    return prev.path.length >= cur.path.length ? prev : cur;
+  }, matched[0]);
+  return mostSpecific.index;
+};
 
-exports.isUrl = isUrl;
+exports.matchPaths = matchPaths;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.1.26",
+  "version": "2.1.29",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -34,8 +34,8 @@
     "url": "https://github.com/ArcBlock/ux/issues"
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.1.26",
-    "@arcblock/ux": "^2.1.26",
+    "@arcblock/did-connect": "^2.1.29",
+    "@arcblock/ux": "^2.1.29",
     "@iconify/iconify": "^2.2.1",
     "@mui/material": "^5.6.4",
     "core-js": "^3.6.4",
@@ -57,5 +57,5 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "jest": "^24.1.0"
   },
-  "gitHead": "5c5282d38dad227f1855d482d7164d07a6b12ff4"
+  "gitHead": "710f8e28829c64030a36e3d9301358834b8937e4"
 }

package/src/Header/index.js

@@ -14,25 +14,24 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import '@iconify/iconify';
 
 import { blockletMetaProps, sessionManagerProps } from '../types';
+import { mapRecursive, flatRecursive, matchPaths } from '../utils';
 
 const muiTheme = create();
 
-const isLinkActive = (link) => {
-  if (window.location.pathname === '/') {
-    return link === '/';
-  }
-  return link && link.indexOf(window.location.pathname) > -1;
-};
-
 // blocklet meta 中的 navigation 数据 => NavMenu 组件的 items
 const parseNavigation = (navigation) => {
+  if (!navigation?.length) {
+    return { navItems: [], activeId: null };
+  }
+  let counter = 1;
   const parseItem = (item) => {
     const icon = item.icon ? <span className="iconify" data-icon={item.icon} /> : null;
     if (item.items) {
       return {
+        id: `${counter++}`,
         label: item.title,
         icon,
-        children: item.items.map(parseItem),
+        children: item.items,
       };
     }
     let props = {};
@@ -43,17 +42,20 @@ const parseNavigation = (navigation) => {
       };
     }
     return {
+      id: `${counter++}`,
       label: (
         <a href={item.link} {...props}>
           {item.title}
         </a>
       ),
-      active: isLinkActive(item.link),
       icon,
+      link: item.link,
     };
   };
-  const items = navigation.map(parseItem);
-  return items;
+  const navItems = mapRecursive(navigation, parseItem, 'items');
+  const flattened = flatRecursive(navItems);
+  const matchedIndex = matchPaths(flattened.map((item) => item.link));
+  return { navItems, activeId: matchedIndex >= 0 ? flattened[matchedIndex].id : null };
 };
 
 /**
@@ -69,7 +71,7 @@ function Header({ meta, addons, sessionManagerProps, ...rest }) {
   }
 
   const { appLogo, appName, theme, navigation = [], enableConnect = true, enableLocale = true } = blocklet;
-  const navItems = parseNavigation(navigation);
+  const { navItems, activeId } = parseNavigation(navigation);
 
   const renderAddons = () => {
     // 不关心内置的 session manager 和 locale selector, 直接覆盖 UX Header 的 addons
@@ -111,6 +113,7 @@ function Header({ meta, addons, sessionManagerProps, ...rest }) {
           : ({ isMobile, closeMenu }) => (
               <NavMenu
                 mode={isMobile ? 'inline' : 'horizontal'}
+                activeId={activeId}
                 items={navItems}
                 onSelected={closeMenu}
                 className="header-nav"

package/src/utils.js

@@ -10,7 +10,42 @@ export const mapRecursive = (array, fn, childrenKey = 'children') => {
   });
 };
 
+// 展平有层级结构的 array
+export const flatRecursive = (array, childrenKey = 'children') => {
+  const result = [];
+  mapRecursive(array, (item) => result.push(item), childrenKey);
+  return result;
+};
+
 // "http://", "https://", "//" 开头的 3 种情况
 export const isUrl = (str) => {
   return /^(https?:)?\/\//.test(str);
 };
+
+/**
+ * 检测 path 是否匹配当前 location, path 只考虑 "/" 开头的相对路径
+ */
+export const matchPath = (path) => {
+  if (!path || !path?.startsWith('/')) {
+    return false;
+  }
+  const ensureTrailingSlash = (str) => (str.endsWith('/') ? str : `${str}/`);
+  const pathname = ensureTrailingSlash(window.location.pathname);
+  const normalizedPath = ensureTrailingSlash(new URL(path, window.location.origin).pathname);
+  return pathname.startsWith(normalizedPath);
+};
+
+/**
+ * 从一组 paths 中, 找到匹配当前 location 的 path, 返回序号
+ */
+export const matchPaths = (paths = []) => {
+  const matched = paths.map((item, index) => ({ path: item, index })).filter((item) => matchPath(item.path));
+  if (!matched?.length) {
+    return -1;
+  }
+  // 多个 path 都匹配时, 取一个最具体 (最长的) path
+  const mostSpecific = matched.slice(1).reduce((prev, cur) => {
+    return prev.path.length >= cur.path.length ? prev : cur;
+  }, matched[0]);
+  return mostSpecific.index;
+};