@blocklet/ui-react 3.1.49 → 3.1.51

package/.aigne/doc-smith/translation-cache.yaml

@@ -0,0 +1,11 @@
+Blocklet UI (React):
+  en: Blocklet UI (React)
+  zh: Blocklet UI (React)
+  zh-TW: Blocklet UI (React)
+  ja: Blocklet UI (React)
+"@blocklet/ui-react offers components for Blocklet dev to speed up development.":
+  en: "@blocklet/ui-react offers components for Blocklet dev to speed up
+    development."
+  zh: "@blocklet/ui-react 为 Blocklet 开发者提供组件，以加快开发速度。"
+  zh-TW: "@blocklet/ui-react 為 Blocklet 開發者提供元件，以加快開發速度。"
+  ja: "@blocklet/ui-reactは、Blocklet開発を加速するためのコンポーネントを提供します。"

package/lib/common/org-switch/index.js

@@ -1,20 +1,19 @@
-import { jsxs as i, jsx as t, Fragment as Y } from "react/jsx-runtime";
+import { jsxs as i, jsx as t, Fragment as $ } from "react/jsx-runtime";
 import A from "prop-types";
-import { useState as v, useRef as ee, useMemo as E, useEffect as te } from "react";
-import { useMemoizedFn as k, useRequest as re, useDebounce as oe, useInfiniteScroll as ne } from "ahooks";
-import { useNavigate as ie } from "react-router-dom";
-import { WELLKNOWN_SERVICE_PATH_PREFIX as se } from "@abtnode/constant";
-import { Box as r, Button as P, Avatar as S, Typography as s, Menu as ae, TextField as le, InputAdornment as ce, Divider as W, MenuItem as L, ListItemAvatar as R, ListItemText as D } from "@mui/material";
+import { useState as v, useRef as Y, useMemo as E, useEffect as ee } from "react";
+import { useMemoizedFn as k, useRequest as te, useDebounce as re, useInfiniteScroll as oe } from "ahooks";
+import { WELLKNOWN_SERVICE_PATH_PREFIX as ne } from "@abtnode/constant";
+import { Box as r, Button as P, Avatar as w, Typography as s, Menu as ie, TextField as se, InputAdornment as ae, Divider as W, MenuItem as L, ListItemAvatar as R, ListItemText as D } from "@mui/material";
+import { withQuery as le, joinURL as ce } from "ufo";
 import { KeyboardArrowDown as de, Search as pe, Add as he, OpenInNew as me } from "@mui/icons-material";
-import ue from "lodash/noop";
-import { translate as ge } from "@arcblock/ux/lib/Locale/util";
-import xe from "./use-org.js";
-import fe from "./create.js";
-import ye from "./locales.js";
+import { translate as ue } from "@arcblock/ux/lib/Locale/util";
+import ge from "./use-org.js";
+import xe from "./create.js";
+import fe from "./locales.js";
 const H = 20;
-function be({ session: a, locale: h = "en" }) {
-  const [w, C] = v(null), [m, I] = v(""), [N, u] = v(!1), F = ee(null), j = ie(), l = k((e, o = {}) => ge(ye, e, h, "en", o)), { getOrgs: _, getCurrentOrg: B } = xe(a), n = E(() => a?.user?.role || "", [a?.user?.role]), { data: g = {} } = re(
-    () => B(n),
+function ye({ session: a, locale: h = "en" }) {
+  const [S, C] = v(null), [m, I] = v(""), [j, u] = v(!1), F = Y(null), l = k((e, o = {}) => ue(fe, e, h, "en", o)), { getOrgs: N, getCurrentOrg: _ } = ge(a), n = E(() => a?.user?.role || "", [a?.user?.role]), { data: g = {} } = te(
+    () => _(n),
     {
       ready: !!n,
       refreshDeps: [n],
@@ -24,40 +23,46 @@ function be({ session: a, locale: h = "en" }) {
     }
   ), d = E(() => g || {
     name: a?.user?.passports?.find((o) => o.name === n)?.title || n || "-"
-  }, [g, n, a?.user?.passports]), K = oe(m, { wait: 500 }), { data: V, loadMore: $, loadingMore: z, reload: O } = ne(
+  }, [g, n, a?.user?.passports]), B = re(m, { wait: 500 }), { data: K, loadMore: V, loadingMore: z, reload: O } = oe(
     async (e) => {
-      const c = { page: e ? Math.ceil(e.list.length / H) + 1 : 1, pageSize: H, search: m }, y = await _(c), { orgs: b = [], paging: U } = y || {};
-      return { list: b, total: U?.total || 0 };
+      const c = { page: e ? Math.ceil(e.list.length / H) + 1 : 1, pageSize: H, search: m }, y = await N(c), { orgs: b = [], paging: Z } = y || {};
+      return { list: b, total: Z?.total || 0 };
     },
     {
       ready: !!n,
-      reloadDeps: [K],
+      reloadDeps: [B],
       isNoMore: (e) => e?.list.length ? e.list.length >= e?.total : !0,
       onError: (e) => {
         console.error("Failed to fetch organizations list", e);
       }
     }
-  ), { list: p = [], total: q = 0 } = V || {}, T = p.length < q, G = k((e) => {
+  ), { list: p = [], total: q = 0 } = K || {}, T = p.length < q, U = k((e) => {
     const o = e.target, { scrollTop: c, scrollHeight: y, clientHeight: b } = o;
-    y - c - b < 50 && !z && T && $();
-  }), x = !!w;
-  te(() => {
+    y - c - b < 50 && !z && T && V();
+  }), x = !!S;
+  ee(() => {
     x && O();
   }, [x, O]);
-  const J = (e) => {
+  const G = (e) => {
     C(e.currentTarget);
   }, f = () => {
     C(null), u(!1), I("");
-  }, X = (e) => {
-    a.switchPassport(ue, { orgId: e.id }), f();
-  }, Z = () => {
+  }, J = (e) => {
+    a.switchPassport(
+      () => {
+        window.location.reload();
+      },
+      { orgId: e.id }
+    ), f();
+  }, Q = () => {
     u(!0);
   }, M = () => {
-    j(`${se}/user/orgs?locale=${h}`), f();
-  }, Q = (e) => /* @__PURE__ */ i(
+    const e = le(ce(ne, "user/orgs"), { locale: h });
+    window.location.href = e, f();
+  }, X = (e) => /* @__PURE__ */ i(
     L,
     {
-      onClick: () => X(e),
+      onClick: () => J(e),
       selected: e.id === d.id,
       sx: {
         py: 1.5,
@@ -71,7 +76,7 @@ function be({ session: a, locale: h = "en" }) {
       },
       children: [
         /* @__PURE__ */ t(R, { sx: { minWidth: 40 }, children: /* @__PURE__ */ t(
-          S,
+          w,
           {
             sx: {
               width: 28,
@@ -109,7 +114,7 @@ function be({ session: a, locale: h = "en" }) {
       P,
       {
         ref: F,
-        onClick: J,
+        onClick: G,
         endIcon: /* @__PURE__ */ t(de, {}),
         sx: {
           display: "flex",
@@ -127,7 +132,7 @@ function be({ session: a, locale: h = "en" }) {
         "data-testid": "org-switch-button",
         children: [
           /* @__PURE__ */ t(
-            S,
+            w,
             {
               sx: {
                 width: 24,
@@ -143,9 +148,9 @@ function be({ session: a, locale: h = "en" }) {
       }
     ),
     /* @__PURE__ */ i(
-      ae,
+      ie,
       {
-        anchorEl: w,
+        anchorEl: S,
         open: x,
         onClose: f,
         anchorOrigin: {
@@ -172,7 +177,7 @@ function be({ session: a, locale: h = "en" }) {
         },
         children: [
           /* @__PURE__ */ t(r, { sx: { p: 1.5, pb: 1 }, children: /* @__PURE__ */ t(
-            le,
+            se,
             {
               fullWidth: !0,
               size: "small",
@@ -180,7 +185,7 @@ function be({ session: a, locale: h = "en" }) {
               value: m,
               onChange: (e) => I(e.target.value),
               InputProps: {
-                startAdornment: /* @__PURE__ */ t(ce, { position: "start", children: /* @__PURE__ */ t(pe, { fontSize: "small", color: "action" }) })
+                startAdornment: /* @__PURE__ */ t(ae, { position: "start", children: /* @__PURE__ */ t(pe, { fontSize: "small", color: "action" }) })
               },
               onClick: (e) => e.stopPropagation(),
               onKeyDown: (e) => e.stopPropagation(),
@@ -205,10 +210,10 @@ function be({ session: a, locale: h = "en" }) {
               children: l("orgs")
             }
           ) }),
-          /* @__PURE__ */ t(r, { sx: { maxHeight: 240, overflow: "auto" }, onScroll: G, children: p.length > 0 ? /* @__PURE__ */ t(Y, { children: p.map((e, o) => {
+          /* @__PURE__ */ t(r, { sx: { maxHeight: 240, overflow: "auto" }, onScroll: U, children: p.length > 0 ? /* @__PURE__ */ t($, { children: p.map((e, o) => {
             const c = o === p.length - 1;
             return /* @__PURE__ */ i(r, { children: [
-              Q(e),
+              X(e),
               c && T && /* @__PURE__ */ t(
                 r,
                 {
@@ -228,7 +233,7 @@ function be({ session: a, locale: h = "en" }) {
           /* @__PURE__ */ i(
             L,
             {
-              onClick: Z,
+              onClick: Q,
               sx: {
                 py: 1.5,
                 px: 2,
@@ -238,7 +243,7 @@ function be({ session: a, locale: h = "en" }) {
               },
               children: [
                 /* @__PURE__ */ t(R, { sx: { minWidth: 40 }, children: /* @__PURE__ */ t(
-                  S,
+                  w,
                   {
                     sx: {
                       width: 28,
@@ -264,6 +269,7 @@ function be({ session: a, locale: h = "en" }) {
             {
               onClick: M,
               variant: "text",
+              component: "a",
               size: "small",
               endIcon: /* @__PURE__ */ t(me, { fontSize: "small" }),
               sx: {
@@ -283,13 +289,13 @@ function be({ session: a, locale: h = "en" }) {
         ]
       }
     ),
-    N && /* @__PURE__ */ t(fe, { onSuccess: M, onCancel: () => u(!1), locale: h })
+    j && /* @__PURE__ */ t(xe, { onSuccess: M, onCancel: () => u(!1), locale: h })
   ] });
 }
-be.propTypes = {
+ye.propTypes = {
   session: A.object.isRequired,
   locale: A.string
 };
 export {
-  be as default
+  ye as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "3.1.49",
+  "version": "3.1.51",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -35,9 +35,9 @@
   "dependencies": {
     "@abtnode/constant": "1.16.52",
     "@abtnode/util": "1.16.52",
-    "@arcblock/bridge": "3.1.49",
-    "@arcblock/icons": "3.1.49",
-    "@arcblock/react-hooks": "3.1.49",
+    "@arcblock/bridge": "3.1.51",
+    "@arcblock/icons": "3.1.51",
+    "@arcblock/react-hooks": "3.1.51",
     "@arcblock/ws": "^1.25.6",
     "@blocklet/constant": "1.16.52",
     "@blocklet/did-space-react": "^1.1.32",
@@ -83,7 +83,7 @@
     "access": "public"
   },
   "devDependencies": {
-    "@arcblock/did-connect-react": "3.1.49",
+    "@arcblock/did-connect-react": "3.1.51",
     "@types/dompurify": "^3.2.0",
     "@types/ua-parser-js": "^0.7.39",
     "@types/validator": "^13.15.2",
@@ -91,5 +91,5 @@
     "jest": "^29.7.0",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "4612b57a1452bd4330755b53d093505a6ae7dea5"
+  "gitHead": "8367c79c433cf59694b4aa72cbeef3b25185dd66"
 }

package/src/common/org-switch/index.jsx

@@ -4,7 +4,6 @@
 import PropTypes from 'prop-types';
 import { useState, useRef, useMemo, useEffect } from 'react';
 import { useDebounce, useInfiniteScroll, useMemoizedFn, useRequest } from 'ahooks';
-import { useNavigate } from 'react-router-dom';
 import { WELLKNOWN_SERVICE_PATH_PREFIX } from '@abtnode/constant';
 import {
   Box,
@@ -19,8 +18,8 @@ import {
   ListItemText,
   InputAdornment,
 } from '@mui/material';
+import { joinURL, withQuery } from 'ufo';
 import { KeyboardArrowDown, Search, Add, OpenInNew } from '@mui/icons-material';
-import noop from 'lodash/noop';
 import { translate } from '@arcblock/ux/lib/Locale/util';
 
 import useOrg from './use-org';
@@ -34,7 +33,6 @@ export default function OrgsSwitch({ session, locale = 'en' }) {
   const [searchText, setSearchText] = useState('');
   const [visible, setVisible] = useState(false);
   const buttonRef = useRef(null);
-  const navigate = useNavigate();
 
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
@@ -127,7 +125,12 @@ export default function OrgsSwitch({ session, locale = 'en' }) {
   };
 
   const handleOrgSelect = (org) => {
-    session.switchPassport(noop, { orgId: org.id });
+    session.switchPassport(
+      () => {
+        window.location.reload();
+      },
+      { orgId: org.id }
+    );
     handleClose();
   };
 
@@ -136,7 +139,8 @@ export default function OrgsSwitch({ session, locale = 'en' }) {
   };
 
   const handleViewAll = () => {
-    navigate(`${WELLKNOWN_SERVICE_PATH_PREFIX}/user/orgs?locale=${locale}`);
+    const targetUrl = withQuery(joinURL(WELLKNOWN_SERVICE_PATH_PREFIX, 'user/orgs'), { locale });
+    window.location.href = targetUrl;
     handleClose();
   };
 
@@ -373,6 +377,7 @@ export default function OrgsSwitch({ session, locale = 'en' }) {
           <Button
             onClick={handleViewAll}
             variant="text"
+            component="a"
             size="small"
             endIcon={<OpenInNew fontSize="small" />}
             sx={{