@blocklet/ui-react 2.9.90 → 2.10.0

package/lib/index.js

@@ -1,100 +1,10 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _exportNames = {
-  Header: true,
-  Footer: true,
-  Dashboard: true,
-  Icon: true,
-  ComponentInstaller: true,
-  BlockletStudio: true,
-  useComponentInstaller: true
-};
-Object.defineProperty(exports, "BlockletStudio", {
-  enumerable: true,
-  get: function () {
-    return _BlockletStudio.default;
-  }
-});
-Object.defineProperty(exports, "ComponentInstaller", {
-  enumerable: true,
-  get: function () {
-    return _ComponentInstaller.default;
-  }
-});
-Object.defineProperty(exports, "Dashboard", {
-  enumerable: true,
-  get: function () {
-    return _Dashboard.default;
-  }
-});
-Object.defineProperty(exports, "Footer", {
-  enumerable: true,
-  get: function () {
-    return _Footer.default;
-  }
-});
-Object.defineProperty(exports, "Header", {
-  enumerable: true,
-  get: function () {
-    return _Header.default;
-  }
-});
-Object.defineProperty(exports, "Icon", {
-  enumerable: true,
-  get: function () {
-    return _Icon.default;
-  }
-});
-Object.defineProperty(exports, "useComponentInstaller", {
-  enumerable: true,
-  get: function () {
-    return _useComponentInstalled.default;
-  }
-});
-var _Header = _interopRequireDefault(require("./Header"));
-var _Footer = _interopRequireDefault(require("./Footer"));
-var _Dashboard = _interopRequireDefault(require("./Dashboard"));
-var _Icon = _interopRequireDefault(require("./Icon"));
-var _ComponentInstaller = _interopRequireDefault(require("./ComponentInstaller"));
-var _BlockletStudio = _interopRequireDefault(require("./BlockletStudio"));
-var _useComponentInstalled = _interopRequireDefault(require("./ComponentInstaller/use-component-installed"));
-var _UserCenter = require("./UserCenter");
-Object.keys(_UserCenter).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _UserCenter[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _UserCenter[key];
-    }
-  });
-});
-var _UserSessions = require("./UserSessions");
-Object.keys(_UserSessions).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _UserSessions[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _UserSessions[key];
-    }
-  });
-});
-var _ComponentManager = require("./ComponentManager");
-Object.keys(_ComponentManager).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _ComponentManager[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _ComponentManager[key];
-    }
-  });
-});
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+export { default as Header } from "./Header/index.js";
+export { default as Footer } from "./Footer/index.js";
+export { default as Dashboard } from "./Dashboard/index.js";
+export { default as Icon } from "./Icon/index.js";
+export { default as ComponentInstaller } from "./ComponentInstaller/index.js";
+export { default as BlockletStudio } from "./BlockletStudio/index.js";
+export { default as useComponentInstaller } from "./ComponentInstaller/use-component-installed.js";
+export * from "./UserCenter/index.js";
+export * from "./UserSessions/index.js";
+export * from "./ComponentManager/index.js";

package/lib/libs/client.js

@@ -1,8 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.client = void 0;
-var _jsSdk = require("@blocklet/js-sdk");
-const client = exports.client = new _jsSdk.BlockletSDK();
+import { BlockletSDK } from "@blocklet/js-sdk";
+export const client = new BlockletSDK();

package/lib/libs/spaces.js

@@ -1,20 +1,13 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getSpaceHomeUrl = getSpaceHomeUrl;
-exports.getSpaceNftDisplayUrlFromEndpoint = getSpaceNftDisplayUrlFromEndpoint;
-var _ufo = require("ufo");
-function getSpaceNftDisplayUrlFromEndpoint(endpoint) {
+import { joinURL } from "ufo";
+export function getSpaceNftDisplayUrlFromEndpoint(endpoint) {
   const prefix = endpoint.replace(/\/api\/space\/.+/, "");
   const strArray = endpoint.replace(/\/$/, "").split("/");
   const spaceDid = strArray.at(-4);
-  return (0, _ufo.joinURL)(prefix, `/api/space/nft/display?spaceDid=${spaceDid}`);
+  return joinURL(prefix, `/api/space/nft/display?spaceDid=${spaceDid}`);
 }
-function getSpaceHomeUrl(endpoint) {
+export function getSpaceHomeUrl(endpoint) {
   const baseUrl = endpoint.replace(/\/api\/space\/.+/, "");
   const strArray = endpoint.replace(/\/$/, "").split("/");
   const spaceDid = strArray.at(-4);
-  return (0, _ufo.joinURL)(baseUrl, "space", spaceDid);
-}
+  return joinURL(baseUrl, "space", spaceDid);
+}

package/lib/types.js

@@ -1,45 +1,43 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SessionManagerProps = exports.BlockletMetaProps = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /* eslint-disable import/prefer-default-export */
+import PropTypes from 'prop-types';
 
-const BlockletMetaProps = exports.BlockletMetaProps = _propTypes.default.shape({
-  appLogo: _propTypes.default.node,
-  appName: _propTypes.default.string,
-  theme: _propTypes.default.shape({
-    background: _propTypes.default.string
+export const BlockletMetaProps = PropTypes.shape({
+  appLogo: PropTypes.node,
+  appName: PropTypes.string,
+  theme: PropTypes.shape({
+    background: PropTypes.string,
   }),
-  enableConnect: _propTypes.default.bool,
-  enableLocale: _propTypes.default.bool,
-  navigation: _propTypes.default.arrayOf(_propTypes.default.shape({
-    title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
-    link: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
-    icon: _propTypes.default.string,
-    items: _propTypes.default.arrayOf(_propTypes.default.shape({
-      title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
-      link: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object])
-    }))
-  }))
+  enableConnect: PropTypes.bool,
+  enableLocale: PropTypes.bool,
+  navigation: PropTypes.arrayOf(
+    PropTypes.shape({
+      title: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+      link: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+      icon: PropTypes.string,
+      items: PropTypes.arrayOf(
+        PropTypes.shape({
+          title: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+          link: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+        })
+      ),
+    })
+  ),
+});
+
+export const SessionManagerProps = PropTypes.shape({
+  showText: PropTypes.bool,
+  showRole: PropTypes.bool,
+  switchDid: PropTypes.bool,
+  switchProfile: PropTypes.bool,
+  switchPassport: PropTypes.bool,
+  disableLogout: PropTypes.bool,
+  onLogin: PropTypes.func,
+  onLogout: PropTypes.func,
+  onSwitchDid: PropTypes.func,
+  onSwitchProfile: PropTypes.func,
+  onSwitchPassport: PropTypes.func,
+  menu: PropTypes.array,
+  menuRender: PropTypes.func,
+  dark: PropTypes.bool,
+  size: PropTypes.number,
 });
-const SessionManagerProps = exports.SessionManagerProps = _propTypes.default.shape({
-  showText: _propTypes.default.bool,
-  showRole: _propTypes.default.bool,
-  switchDid: _propTypes.default.bool,
-  switchProfile: _propTypes.default.bool,
-  switchPassport: _propTypes.default.bool,
-  disableLogout: _propTypes.default.bool,
-  onLogin: _propTypes.default.func,
-  onLogout: _propTypes.default.func,
-  onSwitchDid: _propTypes.default.func,
-  onSwitchProfile: _propTypes.default.func,
-  onSwitchPassport: _propTypes.default.func,
-  menu: _propTypes.default.array,
-  menuRender: _propTypes.default.func,
-  dark: _propTypes.default.bool,
-  size: _propTypes.default.number
-});

package/lib/utils.js

@@ -1,15 +1,9 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.matchPaths = exports.matchPath = exports.mapRecursive = exports.isUrl = exports.isIconifyString = exports.flatRecursive = exports.filterRecursive = exports.countRecursive = void 0;
-const mapRecursive = (array, fn, childrenKey = 'children') => {
-  return array.map(item => {
+export const mapRecursive = (array, fn, childrenKey = 'children') => {
+  return array.map((item) => {
     if (Array.isArray(item[childrenKey])) {
       return fn({
         ...item,
-        [childrenKey]: mapRecursive(item[childrenKey], fn, childrenKey)
+        [childrenKey]: mapRecursive(item[childrenKey], fn, childrenKey),
       });
     }
     return fn(item);
@@ -17,16 +11,14 @@ const mapRecursive = (array, fn, childrenKey = 'children') => {
 };
 
 // 展平有层级结构的 array
-exports.mapRecursive = mapRecursive;
-const flatRecursive = (array, childrenKey = 'children') => {
+export const flatRecursive = (array, childrenKey = 'children') => {
   const result = [];
-  mapRecursive(array, item => result.push(item), childrenKey);
+  mapRecursive(array, (item) => result.push(item), childrenKey);
   return result;
 };
 
 // 对有层级结构的 array 元素计数
-exports.flatRecursive = flatRecursive;
-const countRecursive = (array, childrenKey = 'children') => {
+export const countRecursive = (array, childrenKey = 'children') => {
   let counter = 0;
   mapRecursive(array, () => counter++, childrenKey);
   return counter;
@@ -34,43 +26,37 @@ const countRecursive = (array, childrenKey = 'children') => {
 
 // 对有层级结构的 array 进行 filter 处理
 // 因为是 DFS 遍历, 可以借助 context.filteredChildren 在过滤/保留子结的同时保持父子结构 (即使父结点不满足筛选条件)
-exports.countRecursive = countRecursive;
-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);
-  });
+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 种情况
-exports.filterRecursive = filterRecursive;
-const isUrl = str => {
+export const isUrl = (str) => {
   return /^https?:\/\//.test(str);
 };
-exports.isUrl = isUrl;
-const isIconifyString = str => {
+
+export const isIconifyString = (str) => {
   return /^[\w-]+:[\w-]+$/.test(str);
 };
 
 /**
  * 检测 path 是否匹配当前 location, path 只考虑 "/" 开头的相对路径
  */
-exports.isIconifyString = isIconifyString;
-const matchPath = path => {
+export const matchPath = (path) => {
   if (!path || !path?.startsWith('/')) {
     return false;
   }
-  const ensureTrailingSlash = str => str.endsWith('/') ? str : `${str}/`;
+  const ensureTrailingSlash = (str) => (str.endsWith('/') ? str : `${str}/`);
   const pathname = ensureTrailingSlash(window.location.pathname);
   const normalizedPath = ensureTrailingSlash(new URL(path, window.location.origin).pathname);
   return pathname.startsWith(normalizedPath);
@@ -79,12 +65,8 @@ const matchPath = path => {
 /**
  * 从一组 paths 中, 找到匹配当前 location 的 path, 返回序号
  */
-exports.matchPath = matchPath;
-const matchPaths = (paths = []) => {
-  const matched = paths.map((item, index) => ({
-    path: item,
-    index
-  })).filter(item => matchPath(item.path));
+export const matchPaths = (paths = []) => {
+  const matched = paths.map((item, index) => ({ path: item, index })).filter((item) => matchPath(item.path));
   if (!matched?.length) {
     return -1;
   }
@@ -94,4 +76,3 @@ const matchPaths = (paths = []) => {
   }, matched[0]);
   return mostSpecific.index;
 };
-exports.matchPaths = matchPaths;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.9.90",
+  "version": "2.10.0",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -12,7 +12,7 @@
   "homepage": "https://github.com/ArcBlock/ux#readme",
   "license": "Apache-2.0",
   "main": "lib/index.js",
-  "module": "es/index.js",
+  "module": "lib/index.js",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ArcBlock/ux.git"
@@ -31,45 +31,14 @@
   "bugs": {
     "url": "https://github.com/ArcBlock/ux/issues"
   },
-  "exports": {
-    ".": {
-      "import": "./es/index.js",
-      "require": "./lib/index.js"
-    },
-    "./lib/*": {
-      "import": "./es/*.js",
-      "require": "./lib/*.js"
-    },
-    "./lib/ComponentInstaller": {
-      "import": "./es/ComponentInstaller/index.js",
-      "require": "./lib/ComponentInstaller/index.js"
-    },
-    "./lib/Dashboard": {
-      "import": "./es/Dashboard/index.js",
-      "require": "./lib/Dashboard/index.js"
-    },
-    "./lib/Footer": {
-      "import": "./es/Footer/index.js",
-      "require": "./lib/Footer/index.js"
-    },
-    "./lib/Header": {
-      "import": "./es/Header/index.js",
-      "require": "./lib/Header/index.js"
-    },
-    "./lib/Icon": {
-      "import": "./es/Icon/index.js",
-      "require": "./lib/Icon/index.js"
-    }
-  },
   "dependencies": {
-    "@arcblock/bridge": "^2.9.90",
-    "@arcblock/react-hooks": "^2.9.90",
-    "@blocklet/js-sdk": "1.16.27-beta-c450492a",
+    "@arcblock/bridge": "^2.10.0",
+    "@arcblock/react-hooks": "^2.10.0",
     "@iconify-icons/logos": "^1.2.36",
     "@iconify-icons/material-symbols": "^1.2.58",
     "@iconify/react": "^4.1.1",
     "ahooks": "^3.7.10",
-    "axios": "^0.27.2",
+    "axios": "^1.7.2",
     "clsx": "^2.1.0",
     "core-js": "^3.25.5",
     "iconify-icon": "^1.0.8",
@@ -82,11 +51,12 @@
     "react-error-boundary": "^3.1.4",
     "react-placeholder": "^4.1.0",
     "ua-parser-js": "^1.0.37",
-    "ufo": "^1.3.2"
+    "ufo": "^1.5.3"
   },
   "peerDependencies": {
     "@arcblock/did-connect": "^2.9.79",
     "@arcblock/ux": "^2.9.79",
+    "@blocklet/js-sdk": "^1.16.27",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "@mui/icons-material": "^5.15.0",
@@ -108,5 +78,5 @@
     "jest": "^28.1.3",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "cd1b054b69c0e9ed66e375d73fe1ec0bbb36870c"
+  "gitHead": "c4c885cb48490bcae77fb61a04e9d0bb9fbf6abc"
 }

package/src/@types/index.ts

@@ -56,6 +56,7 @@ export type User = UserPublicInfo & {
   passports?: any[];
   didSpace?: Record<string, any>;
   connectedAccounts?: any[];
+  locale?: string;
 };
 
 export type UserCenterTab = {

package/src/Footer/brand.jsx

@@ -1,6 +1,7 @@
 import { isValidElement } from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@arcblock/ux/lib/Theme';
+import { Box } from '@mui/material';
 
 export default function Brand({ name, logo, description, ...rest }) {
   if (!name && !logo && !description) {
@@ -12,7 +13,11 @@ export default function Brand({ name, logo, description, ...rest }) {
   return (
     <Root {...rest}>
       <div>
-        {logo && <div className="footer-brand-logo">{logoElement}</div>}
+        {logo && (
+          <Box component="a" href="/" className="footer-brand-logo">
+            {logoElement}
+          </Box>
+        )}
         {name && <div className="footer-brand-name">{name}</div>}
       </div>
       {description && <div className="footer-brand-desc">{description}</div>}

package/src/UserCenter/components/config-profile.tsx

@@ -0,0 +1,70 @@
+import { Box, MenuItem, Select, SelectChangeEvent, LinearProgress } from '@mui/material';
+import { useMemoizedFn, useReactive } from 'ahooks';
+import { translate } from '@arcblock/ux/lib/Locale/util';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { sleep } from '@arcblock/ux/lib/Util';
+
+import { translations } from '../libs/locales';
+import { client } from '../../libs/client';
+import { User } from '../../@types';
+
+// FIXME: @zhanghan 目前仅支持中英文，后续需要支持更多语言（从 blocklet.languages 中获取）
+const languages = [
+  { label: 'English', value: 'en' },
+  { label: '中文', value: 'zh' },
+];
+
+export default function ConfigProfile({ user }: { user: User }) {
+  const { locale } = useLocaleContext();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+  const currentState = useReactive({
+    locale: user.locale,
+    loading: false,
+  });
+
+  const handleChange = useMemoizedFn(async (e: SelectChangeEvent<string>) => {
+    try {
+      const { value } = e.target;
+      currentState.loading = true;
+      await Promise.all([
+        client.user.saveProfile({
+          locale: value,
+        }),
+        sleep(350),
+      ]);
+      currentState.locale = value;
+    } finally {
+      currentState.loading = false;
+    }
+  });
+  return (
+    <Box
+      sx={{
+        gap: 1,
+        display: 'grid',
+        alignItems: 'center',
+        gridTemplateColumns: {
+          xs: '1fr',
+          sm: 'max-content 1fr',
+        },
+      }}>
+      <Box>{t('commonSetting.locale')}</Box>
+      <Box>
+        <LinearProgress
+          color="primary"
+          sx={{
+            visibility: currentState.loading ? 'visible' : 'hidden',
+            height: 2,
+          }}
+        />
+        <Select fullWidth value={currentState.locale} onChange={handleChange} size="small">
+          {languages.map((x) => (
+            <MenuItem value={x.value}>{x.label}</MenuItem>
+          ))}
+        </Select>
+      </Box>
+    </Box>
+  );
+}

package/src/UserCenter/components/notification.tsx

@@ -18,6 +18,42 @@ import { User, WebhookItemData } from '../../@types';
 import { formatAxiosError } from '../libs/utils';
 import { client } from '../../libs/client';
 
+function NotificationItem({
+  title,
+  description,
+  value,
+  onChange,
+}: {
+  title?: string;
+  description?: React.ReactNode;
+  value: boolean;
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+}) {
+  return (
+    <Switch
+      checked={value}
+      labelProps={{
+        label: (
+          <Typography
+            color="text.primary"
+            sx={{
+              fontSize: 14,
+              display: 'flex',
+              flexFlow: 'wrap',
+              columnGap: 1,
+              flex: 1,
+            }}>
+            {title}
+            {description}
+          </Typography>
+        ),
+      }}
+      size="small"
+      onChange={onChange}
+    />
+  );
+}
+
 export default function Notification({ user }: { user: User }) {
   const { locale } = useLocaleContext();
   const t = useMemoizedFn((key, data = {}) => {
@@ -42,6 +78,7 @@ export default function Notification({ user }: { user: User }) {
       wallet: true,
       email: true,
       phone: false,
+      push: false,
       ...(notificationConfigState?.data?.notifications || {}),
     };
   }, [notificationConfigState?.data?.notifications]);
@@ -146,57 +183,36 @@ export default function Notification({ user }: { user: User }) {
             },
           },
         }}>
-        <Switch
-          checked={notifications.wallet}
-          labelProps={{
-            label: (
-              <Typography
-                color="text.primary"
-                sx={{
-                  fontSize: 14,
-                  display: 'flex',
-                  flexFlow: 'wrap',
-                  columnGap: 1,
-                  flex: 1,
-                }}>
-                {t('walletNotification')}
-                {getWalletDid(user) && (
-                  <Typography component="span" color="text.secondary" fontSize={13}>
-                    {getWalletDid(user)}
-                  </Typography>
-                )}
-              </Typography>
-            ),
-          }}
-          size="small"
+        <NotificationItem
+          value={notifications.wallet}
+          title={t('walletNotification')}
           onChange={(event: ChangeEvent<HTMLInputElement>) => handleChangeSwitch('wallet', event.target.checked)}
-        />
-        <Switch
-          checked={notifications.email}
-          labelProps={{
-            label: (
-              <Typography
-                color="text.primary"
-                sx={{
-                  fontSize: 14,
-                  display: 'flex',
-                  flexFlow: 'wrap',
-                  columnGap: 1,
-                  flex: 1,
-                }}>
-                {t('emailNotification')}
-                {user?.email && (
-                  <Typography component="span" color="text.secondary" fontSize={13}>
-                    {user?.email}
-                  </Typography>
-                )}
+          description={
+            getWalletDid(user) && (
+              <Typography component="span" color="text.secondary" fontSize={13}>
+                {getWalletDid(user)}
               </Typography>
-            ),
-          }}
-          size="small"
+            )
+          }
+        />
+        <NotificationItem
+          value={notifications.email}
           onChange={(event: ChangeEvent<HTMLInputElement>) => handleChangeSwitch('email', event.target.checked)}
+          title={t('emailNotification')}
+          description={
+            user?.email && (
+              <Typography component="span" color="text.secondary" fontSize={13}>
+                {user?.email}
+              </Typography>
+            )
+          }
+        />
+        <NotificationItem
+          value={notifications.push}
+          title={t('pushNotification')}
+          onChange={(event: ChangeEvent<HTMLInputElement>) => handleChangeSwitch('push', event.target.checked)}
         />
-        {/* TODO: 实现短信通知后展示此配置项 */}
+        {/* TODO: @zhanghan 实现短信通知后展示此配置项 */}
         {/* <Switch
           disabled
           checked={notifications.phone}