@blocklet/ui-react 2.4.17 → 2.4.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/lib/Dashboard/index.js +28 -21
  2. package/package.json +4 -4
  3. package/src/Dashboard/index.js +28 -21
package/lib/Dashboard/index.js CHANGED
@@ -13,6 +13,8 @@ var _context = require("@arcblock/ux/lib/Locale/context");
13
13
 
14
14
  var _dashboard = _interopRequireDefault(require("@arcblock/ux/lib/Layout/dashboard"));
15
15
 
16
+ var _ClickToCopy = _interopRequireDefault(require("@arcblock/ux/lib/ClickToCopy"));
17
+
16
18
  var _Address = _interopRequireDefault(require("@arcblock/did-connect/lib/Address"));
17
19
 
18
20
  var _Avatar = _interopRequireDefault(require("@arcblock/did-connect/lib/Avatar"));
@@ -43,7 +45,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
43
45
  * 专门用于 (composable) blocklet 的 Dashboard 组件, 解析 blocklet meta 中 section 为 dashboard 的 navigation 数据, 渲染一个 UX Dashboard
44
46
  */
45
47
  function Dashboard(_ref) {
46
- var _formattedBlocklet$na, _localizedNav;
48
+ var _formattedBlocklet$na;
47
49
 
48
50
  let {
49
51
  meta
@@ -73,22 +75,23 @@ function Dashboard(_ref) {
73
75
  appName
74
76
  } = formattedBlocklet;
75
77
  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) || [];
76
- localizedNav = localizedNav.map(item => _objectSpread(_objectSpread({}, item), {}, {
78
+ localizedNav = (0, _utils.mapRecursive)(localizedNav, item => ({
79
+ title: item.title,
77
80
  url: item.link,
78
- label: item.title,
79
81
  icon: item.icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
80
82
  className: "iconify",
81
83
  "data-icon": item.icon
82
84
  }) : null,
83
85
  // https://github.com/ArcBlock/ux/issues/755#issuecomment-1208692620
84
- external: true
85
- })); // link#active 状态检测
86
- // TODO: 将来支持嵌套 sidenav 时此处逻辑需要调整 (暂时只考虑扁平数据)
86
+ external: true,
87
+ children: item.items
88
+ }), 'items'); // 展平后使用 matchPaths 检测 link#active 状态
87
89
 
88
- const matchedIndex = (0, _utils.matchPaths)(localizedNav.map(item => item.link));
90
+ const flattened = (0, _utils.flatRecursive)(localizedNav).filter(item => !!item.url);
91
+ const matchedIndex = (0, _utils.matchPaths)(flattened.map(item => item.url));
89
92
 
90
- if ((_localizedNav = localizedNav) !== null && _localizedNav !== void 0 && _localizedNav.length) {
91
- localizedNav[matchedIndex === -1 ? 0 : matchedIndex].active = true;
93
+ if (flattened !== null && flattened !== void 0 && flattened.length) {
94
+ flattened[matchedIndex === -1 ? 0 : matchedIndex].active = true;
92
95
  }
93
96
 
94
97
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dashboard.default, _objectSpread(_objectSpread({
@@ -99,18 +102,22 @@ function Dashboard(_ref) {
99
102
  }, rest), {}, {
100
103
  headerProps: _objectSpread({
101
104
  brand: appName,
102
- description: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Address.default, {
103
- compact: true,
104
- responsive: false,
105
- copyable: false,
106
- prepend: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
107
- did: did,
108
- size: 16,
109
- style: {
110
- marginRight: 4
111
- }
112
- }),
113
- children: did
105
+ description: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickToCopy.default, {
106
+ unstyled: true,
107
+ content: did,
108
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Address.default, {
109
+ compact: true,
110
+ responsive: false,
111
+ copyable: false,
112
+ prepend: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
113
+ did: did,
114
+ size: 16,
115
+ style: {
116
+ marginRight: 4
117
+ }
118
+ }),
119
+ children: did
120
+ })
114
121
  }),
115
122
  logo: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.Link, {
116
123
  to: _blocklets.publicPath,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blocklet/ui-react",
3
- "version": "2.4.17",
3
+ "version": "2.4.18",
4
4
  "description": "Some useful front-end web components that can be used in Blocklets.",
5
5
  "keywords": [
6
6
  "react",
@@ -30,8 +30,8 @@
30
30
  "url": "https://github.com/ArcBlock/ux/issues"
31
31
  },
32
32
  "dependencies": {
33
- "@arcblock/did-connect": "^2.4.17",
34
- "@arcblock/ux": "^2.4.17",
33
+ "@arcblock/did-connect": "^2.4.18",
34
+ "@arcblock/ux": "^2.4.18",
35
35
  "@emotion/react": "^11.10.0",
36
36
  "@emotion/styled": "^11.10.0",
37
37
  "@iconify/iconify": "^2.2.1",
@@ -53,5 +53,5 @@
53
53
  "eslint-plugin-react-hooks": "^4.6.0",
54
54
  "jest": "^24.9.0"
55
55
  },
56
- "gitHead": "074d03aa938b1a9f52d2d9ef2bb8d68bb08d061e"
56
+ "gitHead": "45fe2e3b1726e2172aad280f62b81dea7e353f1b"
57
57
  }
package/src/Dashboard/index.js CHANGED
@@ -2,10 +2,11 @@ import { useMemo } from 'react';
2
2
  import { Link } from 'react-router-dom';
3
3
  import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
4
4
  import UxDashboard from '@arcblock/ux/lib/Layout/dashboard';
5
+ import ClickToCopy from '@arcblock/ux/lib/ClickToCopy';
5
6
  import DidAddress from '@arcblock/did-connect/lib/Address';
6
7
  import DidAvatar from '@arcblock/did-connect/lib/Avatar';
7
8
  import { blockletMetaProps } from '../types';
8
- import { matchPaths } from '../utils';
9
+ import { mapRecursive, flatRecursive, matchPaths } from '../utils';
9
10
  import { publicPath, formatBlockletInfo, getLocalizedNavigation } from '../blocklets';
10
11
 
11
12
  /**
@@ -29,19 +30,23 @@ function Dashboard({ meta, ...rest }) {
29
30
 
30
31
  const { did, appLogo, appName } = formattedBlocklet;
31
32
  let localizedNav = getLocalizedNavigation(formattedBlocklet?.navigation?.dashboard, locale) || [];
32
- localizedNav = localizedNav.map((item) => ({
33
- ...item,
34
- url: item.link,
35
- label: item.title,
36
- icon: item.icon ? <span className="iconify" data-icon={item.icon} /> : null,
37
- // https://github.com/ArcBlock/ux/issues/755#issuecomment-1208692620
38
- external: true,
39
- }));
40
- // link#active 状态检测
41
- // TODO: 将来支持嵌套 sidenav 时此处逻辑需要调整 (暂时只考虑扁平数据)
42
- const matchedIndex = matchPaths(localizedNav.map((item) => item.link));
43
- if (localizedNav?.length) {
44
- localizedNav[matchedIndex === -1 ? 0 : matchedIndex].active = true;
33
+ localizedNav = mapRecursive(
34
+ localizedNav,
35
+ (item) => ({
36
+ title: item.title,
37
+ url: item.link,
38
+ icon: item.icon ? <span className="iconify" data-icon={item.icon} /> : null,
39
+ // https://github.com/ArcBlock/ux/issues/755#issuecomment-1208692620
40
+ external: true,
41
+ children: item.items,
42
+ }),
43
+ 'items'
44
+ );
45
+ // 展平后使用 matchPaths 检测 link#active 状态
46
+ const flattened = flatRecursive(localizedNav).filter((item) => !!item.url);
47
+ const matchedIndex = matchPaths(flattened.map((item) => item.url));
48
+ if (flattened?.length) {
49
+ flattened[matchedIndex === -1 ? 0 : matchedIndex].active = true;
45
50
  }
46
51
 
47
52
  return (
@@ -54,13 +59,15 @@ function Dashboard({ meta, ...rest }) {
54
59
  headerProps={{
55
60
  brand: appName,
56
61
  description: (
57
- <DidAddress
58
- compact
59
- responsive={false}
60
- copyable={false}
61
- prepend={<DidAvatar did={did} size={16} style={{ marginRight: 4 }} />}>
62
- {did}
63
- </DidAddress>
62
+ <ClickToCopy unstyled content={did}>
63
+ <DidAddress
64
+ compact
65
+ responsive={false}
66
+ copyable={false}
67
+ prepend={<DidAvatar did={did} size={16} style={{ marginRight: 4 }} />}>
68
+ {did}
69
+ </DidAddress>
70
+ </ClickToCopy>
64
71
  ),
65
72
  logo: (
66
73
  <Link to={publicPath}>