@blocklet/ui-react 2.4.11 → 2.4.14

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/lib/Footer/index.js

@@ -11,6 +11,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Theme = require("@arcblock/ux/lib/Theme");
 
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+
 var _reactErrorBoundary = require("react-error-boundary");
 
 var _context = require("@arcblock/ux/lib/Locale/context");
@@ -51,7 +53,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  * 专门用于 (composable) blocklet 的 Footer 组件, 基于 blocklet meta 中的数据渲染
  */
 function Footer(_ref) {
-  var _formattedBlocklet$na, _formattedBlocklet$na2, _formattedBlocklet$na3, _theme$background;
+  var _formattedBlocklet$na, _formattedBlocklet$na2, _formattedBlocklet$na3, _theme$background, _window, _window$blocklet;
 
   let {
     meta,
@@ -105,11 +107,23 @@ function Footer(_ref) {
       label: item.title
     }))
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_overridableThemeProvider.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_overridableThemeProvider.default, {
     theme: themeOverrides,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledInternalFooter, _objectSpread(_objectSpread(_objectSpread({}, props), rest), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledInternalFooter, _objectSpread(_objectSpread(_objectSpread({}, props), rest), {}, {
       $bgcolor: theme === null || theme === void 0 ? void 0 : (_theme$background = theme.background) === null || _theme$background === void 0 ? void 0 : _theme$background.footer
-    }))
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      position: "absolute",
+      right: 0,
+      bottom: 0,
+      sx: {
+        color: 'transparent',
+        '::selection': {
+          background: '#000',
+          color: '#fff'
+        }
+      },
+      children: (_window = window) === null || _window === void 0 ? void 0 : (_window$blocklet = _window.blocklet) === null || _window$blocklet === void 0 ? void 0 : _window$blocklet.version
+    })]
   });
 }
 
@@ -122,7 +136,7 @@ Footer.defaultProps = {
   meta: {},
   theme: null
 };
-const StyledInternalFooter = (0, _Theme.styled)(_internalFooter.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-top: 1px solid #eee;\n  color: ", ";\n  ", "\n  font-family: Lato, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,\n    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n"])), props => props.theme.palette.grey[600], _ref2 => {
+const StyledInternalFooter = (0, _Theme.styled)(_internalFooter.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  border-top: 1px solid #eee;\n  color: ", ";\n  ", "\n  font-family: Lato, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,\n    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n"])), props => props.theme.palette.grey[600], _ref2 => {
   let {
     $bgcolor
   } = _ref2;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.4.11",
+  "version": "2.4.14",
   "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.14",
+    "@arcblock/ux": "^2.4.14",
     "@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": "3bc65e4ac9040d63f8b1a732c647c24d3156f20b"
 }

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}
     />
   );
 }

package/src/Footer/index.js

@@ -1,6 +1,7 @@
 import { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@arcblock/ux/lib/Theme';
+import Box from '@mui/material/Box';
 import { withErrorBoundary } from 'react-error-boundary';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { ErrorFallback } from '@arcblock/ux/lib/ErrorBoundary';
@@ -61,6 +62,13 @@ function Footer({ meta, theme: themeOverrides, ...rest }) {
   return (
     <OverridableThemeProvider theme={themeOverrides}>
       <StyledInternalFooter {...props} {...rest} $bgcolor={theme?.background?.footer} />
+      <Box
+        position="absolute"
+        right={0}
+        bottom={0}
+        sx={{ color: 'transparent', '::selection': { background: '#000', color: '#fff' } }}>
+        {window?.blocklet?.version}
+      </Box>
     </OverridableThemeProvider>
   );
 }
@@ -77,6 +85,7 @@ Footer.defaultProps = {
 };
 
 const StyledInternalFooter = styled(InternalFooter)`
+  position: relative;
   border-top: 1px solid #eee;
   color: ${(props) => props.theme.palette.grey[600]};
   ${({ $bgcolor }) => $bgcolor && `background-color: ${$bgcolor};`}