@blocklet/ui-react 2.4.11 → 2.4.12

package/lib/Dashboard/index.js

@@ -19,6 +19,8 @@ var _Avatar = _interopRequireDefault(require("@arcblock/did-connect/lib/Avatar")
 
 var _types = require("../types");
 
+var _utils = require("../utils");
+
 var _blocklets = require("../blocklets");
 
 var _jsxRuntime = require("react/jsx-runtime");
@@ -41,7 +43,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  * 专门用于 (composable) blocklet 的 Dashboard 组件, 解析 blocklet meta 中 section 为 dashboard 的 navigation 数据, 渲染一个 UX Dashboard
  */
 function Dashboard(_ref) {
-  var _formattedBlocklet$na;
+  var _formattedBlocklet$na, _localizedNav;
 
   let {
     meta
@@ -77,13 +79,18 @@ function Dashboard(_ref) {
     icon: item.icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       className: "iconify",
       "data-icon": item.icon
-    }) : null
-  }));
-  const allLinks = [...(rest.links || []), localizedNav]; // https://github.com/ArcBlock/ux/issues/755#issuecomment-1208692620
+    }) : null,
+    // https://github.com/ArcBlock/ux/issues/755#issuecomment-1208692620
+    external: true
+  })); // link#active 状态检测
+  // TODO: 将来支持嵌套 sidenav 时此处逻辑需要调整 (暂时只考虑扁平数据)
+
+  const matchedIndex = (0, _utils.matchPaths)(localizedNav.map(item => item.link));
+
+  if ((_localizedNav = localizedNav) !== null && _localizedNav !== void 0 && _localizedNav.length) {
+    localizedNav[matchedIndex === -1 ? 0 : matchedIndex].active = true;
+  }
 
-  allLinks.flat().forEach(item => {
-    item.external = true;
-  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dashboard.default, _objectSpread(_objectSpread({
     title: appName,
     fullWidth: true,
@@ -113,7 +120,7 @@ function Dashboard(_ref) {
         })
       })
     }, rest.headerProps),
-    links: allLinks
+    links: localizedNav
   }));
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.4.11",
+  "version": "2.4.12",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -30,8 +30,8 @@
     "url": "https://github.com/ArcBlock/ux/issues"
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.4.11",
-    "@arcblock/ux": "^2.4.11",
+    "@arcblock/did-connect": "^2.4.12",
+    "@arcblock/ux": "^2.4.12",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
     "@iconify/iconify": "^2.2.1",
@@ -53,5 +53,5 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "^24.9.0"
   },
-  "gitHead": "b0f4fa8a93b59d88c73938bc2e44c67bf8809b93"
+  "gitHead": "67b9da0555a2ee6ddd151b2e0dd1e7bdae6108ef"
 }

package/src/Dashboard/index.js

@@ -5,6 +5,7 @@ import UxDashboard from '@arcblock/ux/lib/Layout/dashboard';
 import DidAddress from '@arcblock/did-connect/lib/Address';
 import DidAvatar from '@arcblock/did-connect/lib/Avatar';
 import { blockletMetaProps } from '../types';
+import { matchPaths } from '../utils';
 import { publicPath, formatBlockletInfo, getLocalizedNavigation } from '../blocklets';
 
 /**
@@ -33,12 +34,15 @@ function Dashboard({ meta, ...rest }) {
     url: item.link,
     label: item.title,
     icon: item.icon ? <span className="iconify" data-icon={item.icon} /> : null,
+    // https://github.com/ArcBlock/ux/issues/755#issuecomment-1208692620
+    external: true,
   }));
-  const allLinks = [...(rest.links || []), localizedNav];
-  // https://github.com/ArcBlock/ux/issues/755#issuecomment-1208692620
-  allLinks.flat().forEach((item) => {
-    item.external = true;
-  });
+  // link#active 状态检测
+  // TODO: 将来支持嵌套 sidenav 时此处逻辑需要调整 (暂时只考虑扁平数据)
+  const matchedIndex = matchPaths(localizedNav.map((item) => item.link));
+  if (localizedNav?.length) {
+    localizedNav[matchedIndex === -1 ? 0 : matchedIndex].active = true;
+  }
 
   return (
     <UxDashboard
@@ -65,7 +69,7 @@ function Dashboard({ meta, ...rest }) {
         ),
         ...rest.headerProps,
       }}
-      links={allLinks}
+      links={localizedNav}
     />
   );
 }