@blocklet/ui-react 2.2.3 → 2.2.4

package/lib/Dashboard/index.js

@@ -0,0 +1,127 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _reactRouterDom = require("react-router-dom");
+
+var _context = require("@arcblock/ux/lib/Locale/context");
+
+var _dashboard = _interopRequireDefault(require("@arcblock/ux/lib/Layout/dashboard"));
+
+var _Address = _interopRequireDefault(require("@arcblock/did-connect/lib/Address"));
+
+var _Avatar = _interopRequireDefault(require("@arcblock/did-connect/lib/Avatar"));
+
+var _types = require("../types");
+
+var _blocklets = require("../blocklets");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+const _excluded = ["meta"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+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; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+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; }
+
+/**
+ * 专门用于 (composable) blocklet 的 Dashboard 组件, 解析 blocklet meta 中 section 为 dashboard 的 navigation 数据, 渲染一个 UX Dashboard
+ */
+function Dashboard(_ref) {
+  var _formattedBlocklet$na;
+
+  let {
+    meta
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  const {
+    locale
+  } = (0, _context.useLocaleContext)() || {};
+  const blocklet = Object.assign({}, window.blocklet, meta);
+  const formattedBlocklet = (0, _react.useMemo)(() => {
+    try {
+      return (0, _blocklets.formatBlockletInfo)(blocklet);
+    } catch (e) {
+      console.error('Failed to format blocklet info', e, blocklet);
+      return blocklet;
+    }
+  }, [blocklet]);
+
+  if (!blocklet.appName) {
+    return null;
+  }
+
+  const {
+    did,
+    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) || [];
+  localizedNav = localizedNav.map(item => _objectSpread(_objectSpread({}, item), {}, {
+    url: item.link,
+    label: item.title,
+    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
+
+  allLinks.flat().forEach(item => {
+    item.external = true;
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dashboard.default, _objectSpread(_objectSpread({
+    title: appName,
+    fullWidth: true,
+    sidebarWidth: 128,
+    legacy: false
+  }, rest), {}, {
+    headerProps: _objectSpread({
+      brand: appName,
+      description: /*#__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
+      }),
+      logo: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.Link, {
+        to: _blocklets.publicPath,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+          src: appLogo,
+          alt: "logo"
+        })
+      })
+    }, rest.headerProps),
+    links: allLinks
+  }));
+}
+
+Dashboard.propTypes = {
+  meta: _types.blockletMetaProps
+};
+Dashboard.defaultProps = {
+  meta: {}
+};
+var _default = Dashboard;
+exports.default = _default;

package/lib/Header/index.js

@@ -264,7 +264,7 @@ Header.defaultProps = {
 const StyledUxHeader = (0, _styledComponents.default)(_Header.ResponsiveHeader).withConfig({
   displayName: "Header__StyledUxHeader",
   componentId: "sc-kcf4st-0"
-})(["", " font-family:Lato,Avenir,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';.header-logo{min-width:44px;}", "{.header-logo{min-width:32px;}}.header-nav{.navmenu-sub .navmenu-item{min-width:80px;}}"], _ref3 => {
+})(["", " font-family:Lato,Avenir,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';.header-logo{min-width:44px;}", "{.header-logo{min-width:32px;}}.header-nav{.navmenu-sub .navmenu-item{min-width:80px;}}.header-nav.navmenu--horizontal{.navmenu-item{padding:16px 4px;}}"], _ref3 => {
   let {
     $bgcolor
   } = _ref3;

package/lib/blocklets.js

@@ -7,7 +7,7 @@ exports.publicPath = exports.parseNavigation = exports.getLocalizedNavigation =
 
 var _utils = require("./utils");
 
-var _window, _window$blocklet;
+var _window, _window$blocklet, _window2, _window2$blocklet;
 
 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; }
 
@@ -15,7 +15,7 @@ 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 publicPath = ((_window = window) === null || _window === void 0 ? void 0 : (_window$blocklet = _window.blocklet) === null || _window$blocklet === void 0 ? void 0 : _window$blocklet.prefix) || '/';
+const publicPath = ((_window = window) === null || _window === void 0 ? void 0 : (_window$blocklet = _window.blocklet) === null || _window$blocklet === void 0 ? void 0 : _window$blocklet.groupPrefix) || ((_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$blocklet = _window2.blocklet) === null || _window2$blocklet === void 0 ? void 0 : _window2$blocklet.prefix) || '/';
 /**
  * 格式化 theme (目前仅考虑 background)
  */
@@ -90,7 +90,9 @@ const parseNavigation = navigation => {
     // 对应 footer social media
     social: [],
     // 对应 footer 底部 links
-    bottom: []
+    bottom: [],
+    // 对应 dashboard#sidenav 导航
+    dashboard: []
   }; // 对 navigation 顶层元素按 section 分组
 
   navigation.forEach(item => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.2.3",
+  "version": "2.2.4",
   "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.2.3",
-    "@arcblock/ux": "^2.2.3",
+    "@arcblock/did-connect": "^2.2.4",
+    "@arcblock/ux": "^2.2.4",
     "@iconify/iconify": "^2.2.1",
     "@mui/material": "^5.9.3",
     "core-js": "^3.24.1",
@@ -53,5 +53,5 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "^24.9.0"
   },
-  "gitHead": "8fe2ac5bc92d997e2df3547237e3fa44b76c91aa"
+  "gitHead": "6658d7679f6a8e679e1fddae1af19ae8a2e64963"
 }

package/src/Dashboard/index.js

@@ -0,0 +1,81 @@
+import { useMemo } from 'react';
+import { Link } from 'react-router-dom';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+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 { publicPath, formatBlockletInfo, getLocalizedNavigation } from '../blocklets';
+
+/**
+ * 专门用于 (composable) blocklet 的 Dashboard 组件, 解析 blocklet meta 中 section 为 dashboard 的 navigation 数据, 渲染一个 UX Dashboard
+ */
+function Dashboard({ meta, ...rest }) {
+  const { locale } = useLocaleContext() || {};
+  const blocklet = Object.assign({}, window.blocklet, meta);
+  const formattedBlocklet = useMemo(() => {
+    try {
+      return formatBlockletInfo(blocklet);
+    } catch (e) {
+      console.error('Failed to format blocklet info', e, blocklet);
+      return blocklet;
+    }
+  }, [blocklet]);
+
+  if (!blocklet.appName) {
+    return null;
+  }
+
+  const { did, appLogo, appName } = formattedBlocklet;
+  let localizedNav = getLocalizedNavigation(formattedBlocklet?.navigation?.dashboard, locale) || [];
+  localizedNav = localizedNav.map((item) => ({
+    ...item,
+    url: item.link,
+    label: item.title,
+    icon: item.icon ? <span className="iconify" data-icon={item.icon} /> : null,
+  }));
+  const allLinks = [...(rest.links || []), localizedNav];
+  // https://github.com/ArcBlock/ux/issues/755#issuecomment-1208692620
+  allLinks.flat().forEach((item) => {
+    item.external = true;
+  });
+
+  return (
+    <UxDashboard
+      title={appName}
+      fullWidth
+      sidebarWidth={128}
+      legacy={false}
+      {...rest}
+      headerProps={{
+        brand: appName,
+        description: (
+          <DidAddress
+            compact
+            responsive={false}
+            copyable={false}
+            prepend={<DidAvatar did={did} size={16} style={{ marginRight: 4 }} />}>
+            {did}
+          </DidAddress>
+        ),
+        logo: (
+          <Link to={publicPath}>
+            <img src={appLogo} alt="logo" />
+          </Link>
+        ),
+        ...rest.headerProps,
+      }}
+      links={allLinks}
+    />
+  );
+}
+
+Dashboard.propTypes = {
+  meta: blockletMetaProps,
+};
+
+Dashboard.defaultProps = {
+  meta: {},
+};
+
+export default Dashboard;

package/src/Header/index.js

@@ -200,6 +200,11 @@ const StyledUxHeader = styled(ResponsiveHeader)`
       min-width: 80px;
     }
   }
+  .header-nav.navmenu--horizontal {
+    .navmenu-item {
+      padding: 16px 4px;
+    }
+  }
 `;
 
 export default withErrorBoundary(Header, {

package/src/blocklets.js

@@ -1,6 +1,6 @@
 import { mapRecursive } from './utils';
 
-export const publicPath = window?.blocklet?.prefix || '/';
+export const publicPath = window?.blocklet?.groupPrefix || window?.blocklet?.prefix || '/';
 
 /**
  * 格式化 theme (目前仅考虑 background)
@@ -61,6 +61,8 @@ export const parseNavigation = (navigation) => {
     social: [],
     // 对应 footer 底部 links
     bottom: [],
+    // 对应 dashboard#sidenav 导航
+    dashboard: [],
   };
 
   // 对 navigation 顶层元素按 section 分组