@blocklet/ui-react 3.4.6 → 3.4.8

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

@@ -1,14 +1,34 @@
 import { default as PropTypes } from 'prop-types';
-declare function CreateOrgDialog({ onSuccess, onCancel, locale }: {
+declare function OrgMutateDialog({ mode, org, onSuccess, onCancel, locale, teamDid: teamDidProp, prefix, headers, }: {
+    mode?: string | undefined;
+    org?: null | undefined;
     onSuccess?: ((...args: any[]) => void) | undefined;
     onCancel?: ((...args: any[]) => void) | undefined;
     locale?: string | undefined;
+    teamDid?: string | undefined;
+    prefix?: string | undefined;
+    headers?: ((...args: any[]) => void) | undefined;
 }): import("react/jsx-runtime").JSX.Element;
-declare namespace CreateOrgDialog {
-    namespace propTypes {
+declare namespace OrgMutateDialog {
+    export namespace propTypes {
+        let mode: PropTypes.Requireable<string>;
+        let org: PropTypes.Requireable<PropTypes.InferProps<{
+            id: PropTypes.Requireable<string>;
+            name: PropTypes.Requireable<string>;
+            description: PropTypes.Requireable<string>;
+            avatar: PropTypes.Requireable<string>;
+        }>>;
         let onSuccess: PropTypes.Requireable<(...args: any[]) => any>;
         let onCancel: PropTypes.Requireable<(...args: any[]) => any>;
         let locale: PropTypes.Requireable<string>;
+        let teamDid: PropTypes.Requireable<string>;
+        let prefix: PropTypes.Requireable<string>;
+        let headers: PropTypes.Requireable<(...args: any[]) => any>;
     }
+    export { MODE_CREATE };
+    export { MODE_EDIT };
 }
-export default CreateOrgDialog;
+export default OrgMutateDialog;
+export { OrgMutateDialog as CreateOrgDialog };
+declare const MODE_CREATE: "create";
+declare const MODE_EDIT: "edit";

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

@@ -1,120 +1,181 @@
-import { jsxs as m, jsx as r, Fragment as w } from "react/jsx-runtime";
-import { useState as f } from "react";
-import l from "prop-types";
-import { useMemoizedFn as B, useReactive as D } from "ahooks";
-import g from "lodash/noop";
-import E from "@arcblock/ux/lib/Dialog";
-import { Typography as h, TextField as y, DialogContentText as L, Alert as O, CircularProgress as S } from "@mui/material";
-import W from "@arcblock/ux/lib/Toast";
-import v from "@arcblock/ux/lib/Button";
-import { translate as j } from "@arcblock/ux/lib/Locale/util";
-import { formatAxiosError as k } from "../../UserCenter/libs/utils.js";
-import z from "./use-org.js";
-import A from "./locales.js";
-function M({ onSuccess: C = g, onCancel: s = g, locale: T = "en" }) {
-  const [i, c] = f(!1), [u, o] = f(""), { createOrg: b } = z(), t = B((e, a = {}) => j(A, e, T, "en", a)), n = D({
+import { jsxs as m, jsx as o, Fragment as P } from "react/jsx-runtime";
+import { useState as D, useEffect as q } from "react";
+import a from "prop-types";
+import { useMemoizedFn as d, useReactive as U } from "ahooks";
+import u from "lodash/noop";
+import G from "@arcblock/ux/lib/Dialog";
+import { DialogContentText as H, Box as J, Typography as p, TextField as w, Alert as K, CircularProgress as N } from "@mui/material";
+import Q from "@arcblock/ux/lib/Toast";
+import O from "@arcblock/ux/lib/Button";
+import { translate as V } from "@arcblock/ux/lib/Locale/util";
+import { formatAxiosError as X } from "../../UserCenter/libs/utils.js";
+import Y from "./use-org.js";
+import Z from "./locales.js";
+import $ from "./avatar-uploader.js";
+const f = "create", g = "edit";
+function v({
+  mode: _ = f,
+  org: i = null,
+  onSuccess: b = u,
+  onCancel: h = u,
+  locale: M = "en",
+  teamDid: A = "",
+  prefix: F = "/.well-known/service",
+  headers: B = u
+}) {
+  const s = _ === g, [c, y] = D(!1), [E, n] = D(""), { createOrg: k, updateOrg: z } = Y(), I = A || (typeof window < "u" ? window.blocklet?.did : ""), e = d((r, l = {}) => V(Z, r, M, "en", l)), t = U({
     name: "",
-    description: ""
-  }), x = async () => {
-    const e = n.name.trim();
-    if (!e) {
-      o(t("nameEmpty"));
+    description: "",
+    avatar: ""
+  });
+  q(() => {
+    s && i && (t.name = i.name || "", t.description = i.description || "", t.avatar = i.avatar || "");
+  }, [s, i]);
+  const L = d((r) => {
+    n(""), t.avatar = r;
+  }), R = d(() => {
+    const r = t.name.trim();
+    return r ? r.length > 25 ? (n(e("nameTooLong", { length: 25 })), !1) : t.description.trim().length > 255 ? (n(e("descriptionTooLong", { length: 255 })), !1) : t.avatar ? !0 : (n(e("avatarEmpty")), !1) : (n(e("nameEmpty")), !1);
+  }), S = async () => {
+    if (!R())
       return;
-    }
-    if (e.length > 25) {
-      o(t("nameTooLong", { length: 25 }));
-      return;
-    }
-    const a = n.description.trim();
-    if (a.length > 255) {
-      o(t("descriptionTooLong", { length: 25 }));
-      return;
-    }
-    o(""), c(!0);
+    n(""), y(!0);
+    const r = t.name.trim(), l = t.description.trim(), T = t.avatar;
     try {
-      await b({ name: e, description: a }), C();
-    } catch (d) {
-      console.error(d);
-      const p = k(d);
-      o(p), W.error(p);
+      s && i?.id ? await z(i.id, {
+        name: r,
+        description: l,
+        avatar: T
+      }) : await k({
+        name: r,
+        description: l,
+        avatar: T
+      }), b();
+    } catch (x) {
+      console.error(x);
+      const C = X(x);
+      n(C), Q.error(C);
     } finally {
-      c(!1);
+      y(!1);
     }
-  }, F = /* @__PURE__ */ m("div", { children: [
-    /* @__PURE__ */ r(h, { component: "div", style: { marginTop: 16 }, children: /* @__PURE__ */ r(
-      y,
-      {
-        label: t("mutate.name"),
-        autoComplete: "off",
-        variant: "outlined",
-        name: "name",
-        "data-cy": "mutate-org-input-name",
-        fullWidth: !0,
-        autoFocus: !0,
-        value: n.name,
-        onChange: (e) => {
-          o(""), n.name = e.target.value;
-        },
-        disabled: i
-      }
-    ) }),
-    /* @__PURE__ */ r(h, { component: "div", style: { marginTop: 16, marginBottom: 16 }, children: /* @__PURE__ */ r(
-      y,
-      {
-        label: t("mutate.description"),
-        autoComplete: "off",
-        variant: "outlined",
-        name: "description",
-        "data-cy": "mutate-org-input-description",
-        fullWidth: !0,
-        value: n.description,
-        onChange: (e) => {
-          o(""), n.description = e.target.value;
-        },
-        disabled: i,
-        multiline: !0,
-        rows: 3
-      }
-    ) })
-  ] });
+  }, W = s ? e("mutate.title", { mode: e("edit") }) : e("mutate.title", { mode: e("create") }), j = e(s ? "save" : "create");
   return /* @__PURE__ */ m(
-    E,
+    G,
     {
-      title: t("mutate.title", { mode: t("create") }),
+      title: W,
       fullWidth: !0,
       open: !0,
-      onClose: s,
+      onClose: h,
       showCloseButton: !1,
-      actions: /* @__PURE__ */ m(w, { children: [
-        /* @__PURE__ */ r(v, { onClick: s, color: "inherit", children: t("cancel") }),
+      actions: /* @__PURE__ */ m(P, { children: [
+        /* @__PURE__ */ o(O, { onClick: h, color: "inherit", children: e("cancel") }),
         /* @__PURE__ */ m(
-          v,
+          O,
           {
             "data-cy": "mutate-org-confirm",
-            onClick: x,
+            onClick: S,
             color: "primary",
-            disabled: i,
+            disabled: c,
             variant: "contained",
             autoFocus: !0,
             children: [
-              i && /* @__PURE__ */ r(S, { size: 16 }),
-              t("create")
+              c && /* @__PURE__ */ o(N, { size: 16, sx: { mr: 1 } }),
+              j
             ]
           }
         )
       ] }),
       children: [
-        /* @__PURE__ */ r(L, { component: "div", children: F }),
-        !!u && /* @__PURE__ */ r(O, { severity: "error", style: { width: "100%", margin: 0 }, children: u })
+        /* @__PURE__ */ m(H, { component: "div", children: [
+          /* @__PURE__ */ m(
+            J,
+            {
+              sx: {
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                py: 2
+              },
+              children: [
+                /* @__PURE__ */ o(
+                  $,
+                  {
+                    org: s ? i : { name: t.name },
+                    size: 90,
+                    teamDid: I,
+                    prefix: F,
+                    headers: B,
+                    onChange: L,
+                    value: t.avatar,
+                    editable: !0
+                  }
+                ),
+                /* @__PURE__ */ o(p, { variant: "caption", color: "text.secondary", sx: { mt: 1 }, children: e("avatar") })
+              ]
+            }
+          ),
+          /* @__PURE__ */ o(p, { component: "div", style: { marginTop: 16 }, children: /* @__PURE__ */ o(
+            w,
+            {
+              label: e("mutate.name"),
+              autoComplete: "off",
+              variant: "outlined",
+              name: "name",
+              "data-cy": "mutate-org-input-name",
+              fullWidth: !0,
+              autoFocus: !0,
+              value: t.name,
+              onChange: (r) => {
+                n(""), t.name = r.target.value;
+              },
+              disabled: c,
+              required: !0
+            }
+          ) }),
+          /* @__PURE__ */ o(p, { component: "div", style: { marginTop: 16, marginBottom: 16 }, children: /* @__PURE__ */ o(
+            w,
+            {
+              label: e("mutate.description"),
+              autoComplete: "off",
+              variant: "outlined",
+              name: "description",
+              "data-cy": "mutate-org-input-description",
+              fullWidth: !0,
+              value: t.description,
+              onChange: (r) => {
+                n(""), t.description = r.target.value;
+              },
+              disabled: c,
+              multiline: !0,
+              rows: 3
+            }
+          ) })
+        ] }),
+        !!E && /* @__PURE__ */ o(K, { severity: "error", style: { width: "100%", margin: 0 }, children: E })
       ]
     }
   );
 }
-M.propTypes = {
-  onSuccess: l.func,
-  onCancel: l.func,
-  locale: l.string
+v.propTypes = {
+  /** 操作模式：'create' 创建 | 'edit' 编辑 */
+  mode: a.oneOf([f, g]),
+  /** 编辑模式下的组织数据 */
+  org: a.shape({
+    id: a.string,
+    name: a.string,
+    description: a.string,
+    avatar: a.string
+  }),
+  onSuccess: a.func,
+  onCancel: a.func,
+  locale: a.string,
+  teamDid: a.string,
+  prefix: a.string,
+  headers: a.func
 };
+v.MODE_CREATE = f;
+v.MODE_EDIT = g;
 export {
-  M as default
+  v as CreateOrgDialog,
+  v as default
 };

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

@@ -36,9 +36,9 @@ function ye({ session: a, locale: h = "en" }) {
         console.error("Failed to fetch organizations list", e);
       }
     }
-  ), { list: p = [], total: q = 0 } = K || {}, T = p.length < q, U = k((e) => {
+  ), { list: p = [], total: q = 0 } = K || {}, M = p.length < q, U = k((e) => {
     const o = e.target, { scrollTop: c, scrollHeight: y, clientHeight: b } = o;
-    y - c - b < 50 && !z && T && V();
+    y - c - b < 50 && !z && M && V();
   }), x = !!S;
   ee(() => {
     x && O();
@@ -56,7 +56,7 @@ function ye({ session: a, locale: h = "en" }) {
     ), f();
   }, Q = () => {
     u(!0);
-  }, M = () => {
+  }, T = () => {
     const e = le(ce(ne, "user/orgs"), { locale: h });
     window.location.href = e, f();
   }, X = (e) => /* @__PURE__ */ i(
@@ -214,7 +214,7 @@ function ye({ session: a, locale: h = "en" }) {
             const c = o === p.length - 1;
             return /* @__PURE__ */ i(r, { children: [
               X(e),
-              c && T && /* @__PURE__ */ t(
+              c && M && /* @__PURE__ */ t(
                 r,
                 {
                   sx: {
@@ -267,7 +267,7 @@ function ye({ session: a, locale: h = "en" }) {
           /* @__PURE__ */ t(r, { sx: { p: 1.5 }, children: /* @__PURE__ */ t(
             P,
             {
-              onClick: M,
+              onClick: T,
               variant: "text",
               component: "a",
               size: "small",
@@ -289,7 +289,7 @@ function ye({ session: a, locale: h = "en" }) {
         ]
       }
     ),
-    j && /* @__PURE__ */ t(xe, { onSuccess: M, onCancel: () => u(!1), locale: h })
+    j && /* @__PURE__ */ t(xe, { onSuccess: T, onCancel: () => u(!1), locale: h })
   ] });
 }
 ye.propTypes = {

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

@@ -10,12 +10,18 @@ declare namespace translations {
         let nameEmpty: string;
         let nameTooLong: string;
         let descriptionTooLong: string;
+        let avatarEmpty: string;
         let cancel: string;
         let create: string;
+        let upload: string;
+        let avatar: string;
         namespace mutate {
             let title: string;
             let name: string;
             let description: string;
+            let avatarRequired: string;
+            let uploadAvatarTitle: string;
+            let uploadAvatarTip: string;
         }
     }
     namespace zh {
@@ -37,10 +43,16 @@ declare namespace translations {
         export { nameTooLong_1 as nameTooLong };
         let descriptionTooLong_1: string;
         export { descriptionTooLong_1 as descriptionTooLong };
+        let avatarEmpty_1: string;
+        export { avatarEmpty_1 as avatarEmpty };
+        let upload_1: string;
+        export { upload_1 as upload };
         let cancel_1: string;
         export { cancel_1 as cancel };
         let create_1: string;
         export { create_1 as create };
+        let avatar_1: string;
+        export { avatar_1 as avatar };
         export namespace mutate_1 {
             let title_1: string;
             export { title_1 as title };
@@ -48,6 +60,12 @@ declare namespace translations {
             export { name_1 as name };
             let description_1: string;
             export { description_1 as description };
+            let avatarRequired_1: string;
+            export { avatarRequired_1 as avatarRequired };
+            let uploadAvatarTitle_1: string;
+            export { uploadAvatarTitle_1 as uploadAvatarTitle };
+            let uploadAvatarTip_1: string;
+            export { uploadAvatarTip_1 as uploadAvatarTip };
         }
         export { mutate_1 as mutate };
     }

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

@@ -1,4 +1,4 @@
-const e = {
+const a = {
   en: {
     search: "Search",
     orgs: "Organizations",
@@ -9,12 +9,18 @@ const e = {
     nameEmpty: "Name cannot be empty",
     nameTooLong: "Name must be less than {length} characters",
     descriptionTooLong: "Description must be less than {length} characters",
+    avatarEmpty: "Avatar cannot be empty",
     cancel: "Cancel",
     create: "Create",
+    upload: "Upload",
+    avatar: "Avatar",
     mutate: {
       title: "{mode} Organization",
       name: "Name",
-      description: "Description"
+      description: "Description",
+      avatarRequired: "Avatar is required",
+      uploadAvatarTitle: "Upload Avatar",
+      uploadAvatarTip: "Click to upload an avatar for your organization"
     }
   },
   zh: {
@@ -27,15 +33,21 @@ const e = {
     nameEmpty: "名称不能为空",
     nameTooLong: "名称不能超过{length}个字符",
     descriptionTooLong: "描述不能超过{length}个字符",
+    avatarEmpty: "头像不能为空",
+    upload: "上传",
     cancel: "取消",
     create: "创建",
+    avatar: "头像",
     mutate: {
       title: "{mode}组织",
       name: "组织名称",
-      description: "组织描述"
+      description: "组织描述",
+      avatarRequired: "头像为必填项",
+      uploadAvatarTitle: "上传头像",
+      uploadAvatarTip: "点击上传组织头像"
     }
   }
 };
 export {
-  e as default
+  a as default
 };

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

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "3.4.6",
+  "version": "3.4.8",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -8,6 +8,7 @@
     "component",
     "blocklet"
   ],
+  "sideEffects": false,
   "author": "wangshijun<wangshijun2010@gmail.com>",
   "homepage": "https://www.arcblock.io/docs/blocklet-ui-react",
   "license": "Apache-2.0",
@@ -35,11 +36,12 @@
   "dependencies": {
     "@abtnode/constant": "^1.17.7",
     "@abtnode/util": "^1.17.7",
-    "@arcblock/bridge": "3.4.6",
-    "@arcblock/icons": "3.4.6",
-    "@arcblock/react-hooks": "3.4.6",
-    "@arcblock/ws": "^1.28.2",
-    "@blocklet/did-space-react": "^1.2.14",
+    "@arcblock/bridge": "3.4.8",
+    "@arcblock/icons": "3.4.8",
+    "@arcblock/react-hooks": "3.4.8",
+    "@arcblock/ws": "^1.28.5",
+    "@blocklet/did-space-react": "^1.2.15",
+    "@blocklet/uploader": "^0.3.19",
     "@iconify-icons/logos": "^1.2.36",
     "@iconify-icons/material-symbols": "^1.2.58",
     "@iconify-icons/tabler": "^1.2.95",
@@ -82,7 +84,7 @@
     "access": "public"
   },
   "devDependencies": {
-    "@arcblock/did-connect-react": "3.4.6",
+    "@arcblock/did-connect-react": "3.4.8",
     "@babel/preset-env": "^7.28.0",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
@@ -96,5 +98,5 @@
     "typescript": "~5.5.4",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "aea3f5520b4d9ba35ef714a8036eb8f4994ce733"
+  "gitHead": "6bbdc63e6e0b7ddfd5e37f2ac6bb44ee49da7139"
 }

package/src/UserCenter/components/user-info/metadata.tsx

@@ -497,9 +497,11 @@ export default function UserMetadataComponent({
           <PhoneInput
             variant="outlined"
             className="editable-field"
-            InputProps={{
-              sx: { backgroundColor: 'transparent' },
-              placeholder: 'Phone',
+            slotProps={{
+              input: {
+                sx: { backgroundColor: 'transparent' },
+                placeholder: 'Phone',
+              },
             }}
             value={phoneValue}
             error={!!validateMsg.phone}

package/src/UserCenter/components/user-info/user-basic-info.tsx

@@ -6,7 +6,7 @@ import { useMemoizedFn } from 'ahooks';
 import { translate } from '@arcblock/ux/lib/Locale/util';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import noop from 'lodash/noop';
-import { useEffect, useState } from 'react';
+import { lazy, useEffect, useState } from 'react';
 import Toast from '@arcblock/ux/lib/Toast';
 import type { AxiosError } from 'axios';
 import { parseURL, joinURL } from 'ufo';
@@ -21,11 +21,13 @@ import type { User, UserAddress, UserMetadata } from '../../../@types';
 import { formatAxiosError } from '../../libs/utils';
 import { currentTimezone, getStatusDuration, isValidUrl, isDuplicateUrl } from './utils';
 import SwitchRole from './switch-role';
-import UserMetadataComponent from './metadata';
+
 import UserStatus from './user-status';
 import UserInfo from './user-info';
 import SocialActions from './social-actions';
 
+const UserMetadataComponent = lazy(() => import('./metadata'));
+
 export default function UserBasicInfo({
   user,
   isMyself = true,