@blocklet/ui-react 3.1.44 → 3.1.45

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

@@ -0,0 +1,295 @@
+import { jsxs as i, jsx as t, Fragment as Y } 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 { 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";
+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),
+    {
+      ready: !!n,
+      refreshDeps: [n],
+      onError: (e) => {
+        console.error("Failed to get organization role", e);
+      }
+    }
+  ), 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(
+    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 };
+    },
+    {
+      ready: !!n,
+      reloadDeps: [K],
+      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) => {
+    const o = e.target, { scrollTop: c, scrollHeight: y, clientHeight: b } = o;
+    y - c - b < 50 && !z && T && $();
+  }), x = !!w;
+  te(() => {
+    x && O();
+  }, [x, O]);
+  const J = (e) => {
+    C(e.currentTarget);
+  }, f = () => {
+    C(null), u(!1), I("");
+  }, X = (e) => {
+    a.switchPassport(ue, { orgId: e.id }), f();
+  }, Z = () => {
+    u(!0);
+  }, M = () => {
+    j(`${se}/user/orgs?locale=${h}`), f();
+  }, Q = (e) => /* @__PURE__ */ i(
+    L,
+    {
+      onClick: () => X(e),
+      selected: e.id === d.id,
+      sx: {
+        py: 1.5,
+        px: 2,
+        "&.Mui-selected": {
+          backgroundColor: "action.selected",
+          "&:hover": {
+            backgroundColor: "action.hover"
+          }
+        }
+      },
+      children: [
+        /* @__PURE__ */ t(R, { sx: { minWidth: 40 }, children: /* @__PURE__ */ t(
+          S,
+          {
+            sx: {
+              width: 28,
+              height: 28,
+              fontSize: 14,
+              bgcolor: e.isOwner ? "primary.main" : "grey.400"
+            },
+            children: e.name?.[0]
+          }
+        ) }),
+        /* @__PURE__ */ i(r, { sx: { display: "flex", alignItems: "center", flex: 1 }, children: [
+          /* @__PURE__ */ t(
+            D,
+            {
+              sx: {
+                "& .MuiListItemText-primary": {
+                  mb: 0
+                },
+                "& .MuiListItemText-secondary": {
+                  mt: "-2px"
+                }
+              },
+              primary: /* @__PURE__ */ t(s, { variant: "body2", sx: { fontWeight: 500, lineHeight: 1.2 }, children: e.name }),
+              secondary: /* @__PURE__ */ t(s, { variant: "caption", color: "text.secondary", sx: { lineHeight: 1.1 }, children: e.passports?.[0]?.title })
+            }
+          ),
+          e.id === d.id && /* @__PURE__ */ t(r, { sx: { display: "flex", alignItems: "center", justifyContent: "center", ml: 1 }, children: /* @__PURE__ */ t(s, { variant: "caption", color: "primary", sx: { fontSize: 10 }, children: "✓" }) })
+        ] })
+      ]
+    },
+    e.id
+  );
+  return /* @__PURE__ */ i(r, { children: [
+    /* @__PURE__ */ i(
+      P,
+      {
+        ref: F,
+        onClick: J,
+        endIcon: /* @__PURE__ */ t(de, {}),
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          gap: 1,
+          px: 2,
+          py: 1,
+          borderRadius: 1,
+          textTransform: "none",
+          color: "text.primary",
+          "&:hover": {
+            backgroundColor: "action.hover"
+          }
+        },
+        "data-testid": "org-switch-button",
+        children: [
+          /* @__PURE__ */ t(
+            S,
+            {
+              sx: {
+                width: 24,
+                height: 24,
+                fontSize: 12,
+                bgcolor: "primary.main"
+              },
+              children: d.name?.[0]
+            }
+          ),
+          /* @__PURE__ */ t(s, { variant: "body2", sx: { fontWeight: 500 }, children: d.name })
+        ]
+      }
+    ),
+    /* @__PURE__ */ i(
+      ae,
+      {
+        anchorEl: w,
+        open: x,
+        onClose: f,
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "left"
+        },
+        transformOrigin: {
+          vertical: "top",
+          horizontal: "left"
+        },
+        PaperProps: {
+          sx: {
+            width: 340,
+            maxHeight: 480,
+            overflow: "visible",
+            mt: 0.5,
+            borderRadius: 2,
+            boxShadow: "0px 4px 20px rgba(0, 0, 0, 0.08)",
+            border: (e) => `1px solid ${e.palette.divider}`
+          }
+        },
+        MenuListProps: {
+          sx: { py: 0 }
+        },
+        children: [
+          /* @__PURE__ */ t(r, { sx: { p: 1.5, pb: 1 }, children: /* @__PURE__ */ t(
+            le,
+            {
+              fullWidth: !0,
+              size: "small",
+              placeholder: l("search"),
+              value: m,
+              onChange: (e) => I(e.target.value),
+              InputProps: {
+                startAdornment: /* @__PURE__ */ t(ce, { position: "start", children: /* @__PURE__ */ t(pe, { fontSize: "small", color: "action" }) })
+              },
+              onClick: (e) => e.stopPropagation(),
+              onKeyDown: (e) => e.stopPropagation(),
+              sx: {
+                "& .MuiOutlinedInput-root": {
+                  borderRadius: 1
+                }
+              }
+            }
+          ) }),
+          /* @__PURE__ */ t(r, { sx: { px: 2, pb: 1 }, children: /* @__PURE__ */ t(
+            s,
+            {
+              variant: "subtitle2",
+              color: "text.secondary",
+              sx: {
+                fontSize: 11,
+                fontWeight: 600,
+                textTransform: "uppercase",
+                letterSpacing: 0.5
+              },
+              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) => {
+            const c = o === p.length - 1;
+            return /* @__PURE__ */ i(r, { children: [
+              Q(e),
+              c && T && /* @__PURE__ */ t(
+                r,
+                {
+                  sx: {
+                    display: "flex",
+                    justifyContent: "center",
+                    py: 1,
+                    color: "text.secondary",
+                    fontSize: "0.875rem"
+                  },
+                  children: z ? l("loadingMore") : ""
+                }
+              )
+            ] }, e.id);
+          }) }) : /* @__PURE__ */ t(r, { sx: { px: 2, py: 3, textAlign: "center" }, children: /* @__PURE__ */ t(s, { variant: "body2", color: "text.secondary", children: l("myJoinedEmpty") }) }) }),
+          /* @__PURE__ */ t(W, {}),
+          /* @__PURE__ */ i(
+            L,
+            {
+              onClick: Z,
+              sx: {
+                py: 1.5,
+                px: 2,
+                "&:hover": {
+                  backgroundColor: "action.hover"
+                }
+              },
+              children: [
+                /* @__PURE__ */ t(R, { sx: { minWidth: 40 }, children: /* @__PURE__ */ t(
+                  S,
+                  {
+                    sx: {
+                      width: 28,
+                      height: 28,
+                      bgcolor: "success.main",
+                      color: "success.contrastText"
+                    },
+                    children: /* @__PURE__ */ t(he, { fontSize: "small" })
+                  }
+                ) }),
+                /* @__PURE__ */ t(
+                  D,
+                  {
+                    primary: /* @__PURE__ */ t(s, { variant: "body2", sx: { fontWeight: 500 }, children: l("createNew") })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ t(W, {}),
+          /* @__PURE__ */ t(r, { sx: { p: 1.5 }, children: /* @__PURE__ */ t(
+            P,
+            {
+              onClick: M,
+              variant: "text",
+              size: "small",
+              endIcon: /* @__PURE__ */ t(me, { fontSize: "small" }),
+              sx: {
+                color: "primary.main",
+                fontWeight: 500,
+                p: 0,
+                fontSize: 14,
+                minWidth: "auto",
+                "&:hover": {
+                  backgroundColor: "transparent",
+                  textDecoration: "underline"
+                }
+              },
+              children: l("viewAll")
+            }
+          ) })
+        ]
+      }
+    ),
+    N && /* @__PURE__ */ t(fe, { onSuccess: M, onCancel: () => u(!1), locale: h })
+  ] });
+}
+be.propTypes = {
+  session: A.object.isRequired,
+  locale: A.string
+};
+export {
+  be as default
+};

package/lib/common/org-switch/locales.d.ts

@@ -0,0 +1,54 @@
+export default translations;
+declare namespace translations {
+    namespace en {
+        let search: string;
+        let orgs: string;
+        let loadingMore: string;
+        let myJoinedEmpty: string;
+        let createNew: string;
+        let viewAll: string;
+        let nameEmpty: string;
+        let nameTooLong: string;
+        let descriptionTooLong: string;
+        let cancel: string;
+        let create: string;
+        namespace mutate {
+            let title: string;
+            let name: string;
+            let description: string;
+        }
+    }
+    namespace zh {
+        let search_1: string;
+        export { search_1 as search };
+        let orgs_1: string;
+        export { orgs_1 as orgs };
+        let loadingMore_1: string;
+        export { loadingMore_1 as loadingMore };
+        let myJoinedEmpty_1: string;
+        export { myJoinedEmpty_1 as myJoinedEmpty };
+        let createNew_1: string;
+        export { createNew_1 as createNew };
+        let viewAll_1: string;
+        export { viewAll_1 as viewAll };
+        let nameEmpty_1: string;
+        export { nameEmpty_1 as nameEmpty };
+        let nameTooLong_1: string;
+        export { nameTooLong_1 as nameTooLong };
+        let descriptionTooLong_1: string;
+        export { descriptionTooLong_1 as descriptionTooLong };
+        let cancel_1: string;
+        export { cancel_1 as cancel };
+        let create_1: string;
+        export { create_1 as create };
+        export namespace mutate_1 {
+            let title_1: string;
+            export { title_1 as title };
+            let name_1: string;
+            export { name_1 as name };
+            let description_1: string;
+            export { description_1 as description };
+        }
+        export { mutate_1 as mutate };
+    }
+}

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

@@ -0,0 +1,41 @@
+const e = {
+  en: {
+    search: "Search",
+    orgs: "Organizations",
+    loadingMore: "Loading more",
+    myJoinedEmpty: "You have not joined any organizations yet",
+    createNew: "Create New Organization",
+    viewAll: "View All Organizations",
+    nameEmpty: "Name cannot be empty",
+    nameTooLong: "Name must be less than {length} characters",
+    descriptionTooLong: "Description must be less than {length} characters",
+    cancel: "Cancel",
+    create: "Create",
+    mutate: {
+      title: "{mode} Organization",
+      name: "Name",
+      description: "Description"
+    }
+  },
+  zh: {
+    search: "搜索",
+    orgs: "组织",
+    loadingMore: "加载更多",
+    myJoinedEmpty: "您还没有加入任何组织",
+    createNew: "创建新组织",
+    viewAll: "查看所有组织",
+    nameEmpty: "名称不能为空",
+    nameTooLong: "名称不能超过{length}个字符",
+    descriptionTooLong: "描述不能超过{length}个字符",
+    cancel: "取消",
+    create: "创建",
+    mutate: {
+      title: "{mode}组织",
+      name: "组织名称",
+      description: "组织描述"
+    }
+  }
+};
+export {
+  e as default
+};

package/lib/common/org-switch/use-org.d.ts

@@ -0,0 +1,5 @@
+export default function useOrg(session: any): {
+    getOrgs: (this: any, args_0?: any) => Promise<any>;
+    createOrg: (this: any, args_0?: any) => Promise<any>;
+    getCurrentOrg: (this: any, roleName?: any) => Promise<any>;
+};

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

@@ -0,0 +1,47 @@
+import { useMemoizedFn as e } from "ahooks";
+import i from "@arcblock/ux/lib/Toast";
+import { client as n } from "../../libs/client.js";
+import { formatAxiosError as m } from "../../UserCenter/libs/utils.js";
+function d(a) {
+  const c = e(async ({ search: t, page: r = 1, pageSize: o = 20 }) => {
+    try {
+      return await n.user.getOrgs({ search: t, page: r, pageSize: o });
+    } catch (s) {
+      return console.error(s), {
+        orgs: [],
+        paging: {
+          page: r,
+          pageSize: o,
+          total: 0
+        }
+      };
+    }
+  }), u = e(async ({ name: t, description: r }) => {
+    try {
+      return (await n.user.createOrg({ name: t, description: r })).data;
+    } catch (o) {
+      return console.error(o), i.error(m(o)), null;
+    }
+  }), g = e(async (t) => {
+    try {
+      return await n.user.getOrg(t);
+    } catch (r) {
+      return a.logout(), console.error(r), null;
+    }
+  }), l = e(async (t) => {
+    try {
+      const r = await n.user.getRole(t);
+      return r.orgId ? await g(r.orgId) : null;
+    } catch (r) {
+      return console.error(r), null;
+    }
+  });
+  return {
+    getOrgs: c,
+    createOrg: u,
+    getCurrentOrg: l
+  };
+}
+export {
+  d as default
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "3.1.44",
+  "version": "3.1.45",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -35,9 +35,9 @@
   "dependencies": {
     "@abtnode/constant": "^1.16.49-beta-20250823-082650-626c1473",
     "@abtnode/util": "^1.16.49-beta-20250823-082650-626c1473",
-    "@arcblock/bridge": "3.1.44",
-    "@arcblock/icons": "3.1.44",
-    "@arcblock/react-hooks": "3.1.44",
+    "@arcblock/bridge": "3.1.45",
+    "@arcblock/icons": "3.1.45",
+    "@arcblock/react-hooks": "3.1.45",
     "@arcblock/ws": "^1.21.3",
     "@blocklet/constant": "^1.16.49-beta-20250823-082650-626c1473",
     "@blocklet/did-space-react": "^1.1.16",
@@ -83,7 +83,7 @@
     "access": "public"
   },
   "devDependencies": {
-    "@arcblock/did-connect-react": "3.1.44",
+    "@arcblock/did-connect-react": "3.1.45",
     "@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": "fa84963f32d492f869850195429951e99d9b4df8"
+  "gitHead": "6706a870c69720bc0beae69a2c380247d4d0efaa"
 }

package/src/UserCenter/components/user-center.tsx

@@ -560,6 +560,7 @@ export default function UserCenter({
           sx={{
             flex: '1',
             order: isMobile ? 2 : 'unset',
+            width: !isMobile ? 'calc(100% - 424px)' : 'unset',
           }}>
           {userCenterTabs.length > 0 && currentTab ? (
             <Box

package/src/common/header-addons.jsx

@@ -11,17 +11,29 @@ import LocaleSelector from '@arcblock/ux/lib/Locale/selector';
 import SessionBlocklet from '@arcblock/ux/lib/SessionBlocklet';
 import SessionUser from '@arcblock/ux/lib/SessionUser';
 import { Fragment } from 'react/jsx-runtime';
+import { WELLKNOWN_BLOCKLET_ADMIN_PATH } from '@abtnode/constant';
 
 import { filterNavByRole, getLocalizedNavigation } from '../blocklets';
 import { SessionManagerProps } from '../types';
 import DomainWarning from './domain-warning';
 import NotificationAddon from './notification-addon';
+import OrgsSwitch from './org-switch';
 
 const hasNotification = () => {
   const navigations = window?.blocklet?.navigation ?? [];
   return !!navigations.find((n) => n.id === '/userCenter/notification');
 };
 
+const isOrgsEnabled = (blocklet) => {
+  const { settings = {} } = blocklet ?? window?.blocklet ?? {};
+  return settings?.org?.enabled || false;
+};
+
+const inDashboard = () => {
+  const { pathname = '' } = window.location || {};
+  return pathname.startsWith(WELLKNOWN_BLOCKLET_ADMIN_PATH);
+};
+
 // eslint-disable-next-line no-shadow
 export default function HeaderAddons({
   formattedBlocklet,
@@ -86,6 +98,11 @@ export default function HeaderAddons({
       );
     }
 
+    // 在最前面添加 orgs switch, 在 Dashboard 中不显示
+    if (!inDashboard() && isOrgsEnabled(formattedBlocklet) && sessionCtx?.session?.user) {
+      addonsArray.unshift(<OrgsSwitch key="orgs-switch" session={sessionCtx.session} locale={locale} />);
+    }
+
     if (typeof addons === 'function') {
       addonsArray = addons(addonsArray) || [];
     }

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

@@ -0,0 +1,147 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import { useReactive, useMemoizedFn } from 'ahooks';
+import noop from 'lodash/noop';
+import Dialog from '@arcblock/ux/lib/Dialog';
+import Spinner from '@mui/material/CircularProgress';
+import DialogContentText from '@mui/material/DialogContentText';
+import Typography from '@mui/material/Typography';
+import TextField from '@mui/material/TextField';
+import Alert from '@mui/material/Alert';
+import Toast from '@arcblock/ux/lib/Toast';
+import Button from '@arcblock/ux/lib/Button';
+import { translate } from '@arcblock/ux/lib/Locale/util';
+
+import { formatAxiosError } from '../../UserCenter/libs/utils';
+import useOrg from './use-org';
+import translations from './locales';
+
+export default function CreateOrgDialog({ onSuccess = noop, onCancel = noop, locale = 'en' }) {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const { createOrg } = useOrg();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+
+  const form = useReactive({
+    name: '',
+    description: '',
+  });
+
+  const onSubmit = async () => {
+    const _name = form.name.trim();
+    if (!_name) {
+      setError(t('nameEmpty'));
+      return;
+    }
+
+    if (_name.length > 25) {
+      setError(t('nameTooLong', { length: 25 }));
+      return;
+    }
+
+    const _description = form.description.trim();
+
+    if (_description.length > 255) {
+      setError(t('descriptionTooLong', { length: 25 }));
+      return;
+    }
+
+    setError('');
+    setLoading(true);
+
+    try {
+      await createOrg({ name: _name, description: _description });
+      onSuccess();
+    } catch (err) {
+      console.error(err);
+      const errMsg = formatAxiosError(err);
+      setError(errMsg);
+      Toast.error(errMsg);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const body = (
+    <div>
+      <Typography component="div" style={{ marginTop: 16 }}>
+        <TextField
+          label={t('mutate.name')}
+          autoComplete="off"
+          variant="outlined"
+          name="name"
+          data-cy="mutate-org-input-name"
+          fullWidth
+          autoFocus
+          value={form.name}
+          onChange={(e) => {
+            setError('');
+            form.name = e.target.value;
+          }}
+          disabled={loading}
+        />
+      </Typography>
+
+      <Typography component="div" style={{ marginTop: 16, marginBottom: 16 }}>
+        <TextField
+          label={t('mutate.description')}
+          autoComplete="off"
+          variant="outlined"
+          name="description"
+          data-cy="mutate-org-input-description"
+          fullWidth
+          value={form.description}
+          onChange={(e) => {
+            setError('');
+            form.description = e.target.value;
+          }}
+          disabled={loading}
+          multiline
+          rows={3}
+        />
+      </Typography>
+    </div>
+  );
+
+  return (
+    <Dialog
+      title={t('mutate.title', { mode: t('create') })}
+      fullWidth
+      open
+      onClose={onCancel}
+      showCloseButton={false}
+      actions={
+        <>
+          <Button onClick={onCancel} color="inherit">
+            {t('cancel')}
+          </Button>
+          <Button
+            data-cy="mutate-org-confirm"
+            onClick={onSubmit}
+            color="primary"
+            disabled={loading}
+            variant="contained"
+            autoFocus>
+            {loading && <Spinner size={16} />}
+            {t('create')}
+          </Button>
+        </>
+      }>
+      <DialogContentText component="div">{body}</DialogContentText>
+      {!!error && (
+        <Alert severity="error" style={{ width: '100%', margin: 0 }}>
+          {error}
+        </Alert>
+      )}
+    </Dialog>
+  );
+}
+
+CreateOrgDialog.propTypes = {
+  onSuccess: PropTypes.func,
+  onCancel: PropTypes.func,
+  locale: PropTypes.string,
+};