@blocklet/ui-react 2.4.21 → 2.4.24

package/lib/Dashboard/index.js

@@ -7,12 +7,12 @@ exports.default = void 0;
 
 var _react = require("react");
 
+var _Session = require("@arcblock/did-connect/lib/Session");
+
 var _context = require("@arcblock/ux/lib/Locale/context");
 
 var _dashboard = _interopRequireDefault(require("@arcblock/ux/lib/Layout/dashboard"));
 
-var _ClickToCopy = _interopRequireDefault(require("@arcblock/ux/lib/ClickToCopy"));
-
 var _Address = _interopRequireDefault(require("@arcblock/did-connect/lib/Address"));
 
 var _Avatar = _interopRequireDefault(require("@arcblock/did-connect/lib/Avatar"));
@@ -39,17 +39,43 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
+/**
+ * 根据 role 筛选 nav, 规则:
+ * - 如果是枝结点, 必须至少存在一个符合条件的子结点
+ * - role 未定义, 符合条件
+ * - role 定义且包括当前的 userRole, 符合条件
+ *
+ * @param {object[]} nav 导航菜单数据
+ * @param {string} userRole 当前用户 role
+ * @returns 符合 role 权限的导航菜单数据
+ */
+function filterNavByRole(nav, userRole) {
+  return (0, _utils.filterRecursive)(nav, (item, context) => {
+    const isRoleMatched = !item.role || userRole && item.role.includes(userRole);
+
+    if (!context.isLeaf) {
+      var _context$filteredChil;
+
+      return isRoleMatched && ((_context$filteredChil = context.filteredChildren) === null || _context$filteredChil === void 0 ? void 0 : _context$filteredChil.length);
+    }
+
+    return isRoleMatched;
+  }, 'items');
+}
 /**
  * 专门用于 (composable) blocklet 的 Dashboard 组件, 解析 blocklet meta 中 section 为 dashboard 的 navigation 数据, 渲染一个 UX Dashboard
  */
+
+
 function Dashboard(_ref) {
-  var _formattedBlocklet$na;
+  var _formattedBlocklet$na, _sessionCtx$session, _sessionCtx$session$u;
 
   let {
     meta
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
+  const sessionCtx = (0, _react.useContext)(_Session.SessionContext);
   const {
     locale
   } = (0, _context.useLocaleContext)() || {};
@@ -72,7 +98,10 @@ function Dashboard(_ref) {
     appLogo,
     appName
   } = formattedBlocklet;
-  let localizedNav = (0, _blocklets.getLocalizedNavigation)(formattedBlocklet === null || formattedBlocklet === void 0 ? void 0 : (_formattedBlocklet$na = formattedBlocklet.navigation) === null || _formattedBlocklet$na === void 0 ? void 0 : _formattedBlocklet$na.dashboard, locale) || [];
+  let localizedNav = (0, _blocklets.getLocalizedNavigation)(formattedBlocklet === null || formattedBlocklet === void 0 ? void 0 : (_formattedBlocklet$na = formattedBlocklet.navigation) === null || _formattedBlocklet$na === void 0 ? void 0 : _formattedBlocklet$na.dashboard, locale) || []; // 根据 role 筛选 nav 数据
+
+  localizedNav = filterNavByRole(localizedNav, sessionCtx === null || sessionCtx === void 0 ? void 0 : (_sessionCtx$session = sessionCtx.session) === null || _sessionCtx$session === void 0 ? void 0 : (_sessionCtx$session$u = _sessionCtx$session.user) === null || _sessionCtx$session$u === void 0 ? void 0 : _sessionCtx$session$u.role); // 将 nav 数据处理成 ux dashboard 需要的格式
+
   localizedNav = (0, _utils.mapRecursive)(localizedNav, item => ({
     title: item.title,
     url: item.link,
@@ -100,22 +129,19 @@ function Dashboard(_ref) {
   }, rest), {}, {
     headerProps: _objectSpread({
       brand: appName,
-      description: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickToCopy.default, {
-        unstyled: true,
-        content: did,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Address.default, {
-          compact: true,
-          responsive: false,
-          copyable: false,
-          prepend: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
-            did: did,
-            size: 16,
-            style: {
-              marginRight: 4
-            }
-          }),
-          children: did
-        })
+      description: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Address.default, {
+        compact: true,
+        responsive: false,
+        copyable: false,
+        showCopyButtonInTooltip: true,
+        prepend: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+          did: did,
+          size: 16,
+          style: {
+            marginRight: 4
+          }
+        }),
+        children: did
       }),
       logo: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
         href: _blocklets.publicPath,

package/lib/Header/index.js

@@ -216,6 +216,7 @@ function Header(_ref) {
         compact: true,
         responsive: false,
         copyable: false,
+        showCopyButtonInTooltip: true,
         prepend: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
           did: did,
           size: 16,

package/lib/blocklets.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.publicPath = exports.parseNavigation = exports.getLocalizedNavigation = exports.formatTheme = exports.formatBlockletInfo = void 0;
+exports.publicPath = exports.parseNavigation = exports.getLocalizedNavigation = exports.formatTheme = exports.formatNavigation = exports.formatBlockletInfo = void 0;
 
 var _utils = require("./utils");
 
@@ -99,14 +99,35 @@ const getLocalizedNavigation = function getLocalizedNavigation(navigation) {
     });
   }, 'items');
 };
+/**
+ * 格式化 navigation
+ *
+ * - role 统一为数组形式
+ */
+
 
 exports.getLocalizedNavigation = getLocalizedNavigation;
 
+const formatNavigation = navigation => {
+  return (0, _utils.mapRecursive)(navigation, item => {
+    if (item.role) {
+      return _objectSpread(_objectSpread({}, item), {}, {
+        role: Array.isArray(item.role) ? item.role : [item.role]
+      });
+    }
+
+    return item;
+  }, 'items');
+};
+
+exports.formatNavigation = formatNavigation;
+
 const parseNavigation = navigation => {
   if (!(navigation !== null && navigation !== void 0 && navigation.length)) {
     return null;
   }
 
+  const formattedNav = formatNavigation(navigation);
   const sections = {
     header: [],
     footer: [],
@@ -118,7 +139,7 @@ const parseNavigation = navigation => {
     dashboard: []
   }; // 对 navigation 顶层元素按 section 分组
 
-  navigation.forEach(item => {
+  formattedNav.forEach(item => {
     // item#section 为空时, 表示只存在于 header
     if (!item.section) {
       sections.header.push(item); // item 出现在指定几个 section 中 (array)

package/lib/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.matchPaths = exports.matchPath = exports.mapRecursive = exports.isUrl = exports.flatRecursive = exports.countRecursive = void 0;
+exports.matchPaths = exports.matchPath = exports.mapRecursive = exports.isUrl = exports.flatRecursive = exports.filterRecursive = exports.countRecursive = 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; }
 
@@ -42,11 +42,33 @@ const countRecursive = function countRecursive(array) {
   let counter = 0;
   mapRecursive(array, () => counter++, childrenKey);
   return counter;
-}; // "http://", "https://" 2 种情况
+}; // 对有层级结构的 array 进行 filter 处理
+// 因为是 DFS 遍历, 可以借助 context.filteredChildren 在过滤/保留子结的同时保持父子结构 (即使父结点不满足筛选条件)
 
 
 exports.countRecursive = countRecursive;
 
+const filterRecursive = function filterRecursive(array, predicate) {
+  let childrenKey = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'children';
+  return array.map(item => _objectSpread({}, item)).filter(item => {
+    const children = item[childrenKey];
+
+    if (Array.isArray(children)) {
+      const filtered = filterRecursive(children, predicate, childrenKey);
+      item[childrenKey] = filtered !== null && filtered !== void 0 && filtered.length ? filtered : undefined;
+    }
+
+    const context = {
+      filteredChildren: item[childrenKey],
+      isLeaf: !(children !== null && children !== void 0 && children.length)
+    };
+    return predicate(item, context);
+  });
+}; // "http://", "https://" 2 种情况
+
+
+exports.filterRecursive = filterRecursive;
+
 const isUrl = str => {
   return /^https?:\/\//.test(str);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.4.21",
+  "version": "2.4.24",
   "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.21",
-    "@arcblock/ux": "^2.4.21",
+    "@arcblock/did-connect": "^2.4.24",
+    "@arcblock/ux": "^2.4.24",
     "@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": "^28.1.3"
   },
-  "gitHead": "5989f403515c81eaaa1c1b459b1d79daf8cca317"
+  "gitHead": "d82c2bdd64a3a3155312fd91e6e7b40293125ad3"
 }

package/src/Dashboard/index.js

@@ -1,17 +1,42 @@
-import { useMemo } from 'react';
+import { useMemo, useContext } from 'react';
+import { SessionContext } from '@arcblock/did-connect/lib/Session';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import UxDashboard from '@arcblock/ux/lib/Layout/dashboard';
-import ClickToCopy from '@arcblock/ux/lib/ClickToCopy';
 import DidAddress from '@arcblock/did-connect/lib/Address';
 import DidAvatar from '@arcblock/did-connect/lib/Avatar';
 import { blockletMetaProps } from '../types';
-import { mapRecursive, flatRecursive, matchPaths } from '../utils';
+import { mapRecursive, flatRecursive, matchPaths, filterRecursive } from '../utils';
 import { publicPath, formatBlockletInfo, getLocalizedNavigation } from '../blocklets';
 
+/**
+ * 根据 role 筛选 nav, 规则:
+ * - 如果是枝结点, 必须至少存在一个符合条件的子结点
+ * - role 未定义, 符合条件
+ * - role 定义且包括当前的 userRole, 符合条件
+ *
+ * @param {object[]} nav 导航菜单数据
+ * @param {string} userRole 当前用户 role
+ * @returns 符合 role 权限的导航菜单数据
+ */
+function filterNavByRole(nav, userRole) {
+  return filterRecursive(
+    nav,
+    (item, context) => {
+      const isRoleMatched = !item.role || (userRole && item.role.includes(userRole));
+      if (!context.isLeaf) {
+        return isRoleMatched && context.filteredChildren?.length;
+      }
+      return isRoleMatched;
+    },
+    'items'
+  );
+}
+
 /**
  * 专门用于 (composable) blocklet 的 Dashboard 组件, 解析 blocklet meta 中 section 为 dashboard 的 navigation 数据, 渲染一个 UX Dashboard
  */
 function Dashboard({ meta, ...rest }) {
+  const sessionCtx = useContext(SessionContext);
   const { locale } = useLocaleContext() || {};
   const blocklet = Object.assign({}, window.blocklet, meta);
   const formattedBlocklet = useMemo(() => {
@@ -29,6 +54,9 @@ function Dashboard({ meta, ...rest }) {
 
   const { did, appLogo, appName } = formattedBlocklet;
   let localizedNav = getLocalizedNavigation(formattedBlocklet?.navigation?.dashboard, locale) || [];
+  // 根据 role 筛选 nav 数据
+  localizedNav = filterNavByRole(localizedNav, sessionCtx?.session?.user?.role);
+  // 将 nav 数据处理成 ux dashboard 需要的格式
   localizedNav = mapRecursive(
     localizedNav,
     (item) => ({
@@ -58,15 +86,14 @@ function Dashboard({ meta, ...rest }) {
       headerProps={{
         brand: appName,
         description: (
-          <ClickToCopy unstyled content={did}>
-            <DidAddress
-              compact
-              responsive={false}
-              copyable={false}
-              prepend={<DidAvatar did={did} size={16} style={{ marginRight: 4 }} />}>
-              {did}
-            </DidAddress>
-          </ClickToCopy>
+          <DidAddress
+            compact
+            responsive={false}
+            copyable={false}
+            showCopyButtonInTooltip
+            prepend={<DidAvatar did={did} size={16} style={{ marginRight: 4 }} />}>
+            {did}
+          </DidAddress>
         ),
         logo: (
           <a href={publicPath}>

package/src/Header/index.js

@@ -132,6 +132,7 @@ function Header({ meta, addons, sessionManagerProps, homeLink, theme: themeOverr
               compact
               responsive={false}
               copyable={false}
+              showCopyButtonInTooltip
               prepend={<DidAvatar did={did} size={16} style={{ marginRight: 4 }} />}>
               {did}
             </DidAddress>

package/src/blocklets.js

@@ -68,11 +68,34 @@ export const getLocalizedNavigation = (navigation, locale = 'en') => {
   );
 };
 
+/**
+ * 格式化 navigation
+ *
+ * - role 统一为数组形式
+ */
+export const formatNavigation = (navigation) => {
+  return mapRecursive(
+    navigation,
+    (item) => {
+      if (item.role) {
+        return {
+          ...item,
+          role: Array.isArray(item.role) ? item.role : [item.role],
+        };
+      }
+      return item;
+    },
+    'items'
+  );
+};
+
 export const parseNavigation = (navigation) => {
   if (!navigation?.length) {
     return null;
   }
 
+  const formattedNav = formatNavigation(navigation);
+
   const sections = {
     header: [],
     footer: [],
@@ -85,7 +108,7 @@ export const parseNavigation = (navigation) => {
   };
 
   // 对 navigation 顶层元素按 section 分组
-  navigation.forEach((item) => {
+  formattedNav.forEach((item) => {
     // item#section 为空时, 表示只存在于 header
     if (!item.section) {
       sections.header.push(item);

package/src/utils.js

@@ -24,6 +24,22 @@ export const countRecursive = (array, childrenKey = 'children') => {
   return counter;
 };
 
+// 对有层级结构的 array 进行 filter 处理
+// 因为是 DFS 遍历, 可以借助 context.filteredChildren 在过滤/保留子结的同时保持父子结构 (即使父结点不满足筛选条件)
+export const filterRecursive = (array, predicate, childrenKey = 'children') => {
+  return array
+    .map((item) => ({ ...item }))
+    .filter((item) => {
+      const children = item[childrenKey];
+      if (Array.isArray(children)) {
+        const filtered = filterRecursive(children, predicate, childrenKey);
+        item[childrenKey] = filtered?.length ? filtered : undefined;
+      }
+      const context = { filteredChildren: item[childrenKey], isLeaf: !children?.length };
+      return predicate(item, context);
+    });
+};
+
 // "http://", "https://" 2 种情况
 export const isUrl = (str) => {
   return /^https?:\/\//.test(str);