@blocklet/ui-react 2.13.69 → 3.0.0

package/lib/UserCenter/components/user-info/switch-role.js

@@ -1,19 +1,22 @@
-import { jsx } from "react/jsx-runtime";
-import { memo } from "react";
-import { Chip } from "@mui/material";
-import { Icon } from "@iconify/react";
-import SwapHorizRoundedIcon from "@iconify-icons/material-symbols/swap-horiz-rounded";
-import { useCreation } from "ahooks";
-function SwitchRole({ user, switchPassport }) {
-  const currentRole = useCreation(
+import { jsx as a } from "react/jsx-runtime";
+import { memo as r } from "react";
+import { Chip as p } from "@mui/material";
+import { Icon as m } from "@iconify/react";
+import e from "@iconify-icons/material-symbols/swap-horiz-rounded";
+import { useCreation as c } from "ahooks";
+function f({ user: o, switchPassport: i }) {
+  const t = c(
     // FIXME: @zhanghan 感觉应该把 name 的判断去掉？
-    () => (user?.passports || [])?.find((item) => item.name === user.role || item.role === user.role),
-    [user?.passports, user?.role]
+    () => {
+      var l;
+      return (l = (o == null ? void 0 : o.passports) || []) == null ? void 0 : l.find((n) => n.name === o.role || n.role === o.role);
+    },
+    [o == null ? void 0 : o.passports, o == null ? void 0 : o.role]
   );
-  return /* @__PURE__ */ jsx(
-    Chip,
+  return /* @__PURE__ */ a(
+    p,
     {
-      label: currentRole?.title || user?.role || "Guest",
+      label: (t == null ? void 0 : t.title) || (o == null ? void 0 : o.role) || "Guest",
       size: "small",
       variant: "outlined",
       sx: {
@@ -30,11 +33,14 @@ function SwitchRole({ user, switchPassport }) {
           boxShadow: "none"
         }
       },
-      clickable: true,
-      deleteIcon: /* @__PURE__ */ jsx(Icon, { icon: SwapHorizRoundedIcon, color: "inherit" }),
-      onDelete: switchPassport,
-      onClick: switchPassport
+      clickable: !0,
+      deleteIcon: /* @__PURE__ */ a(m, { icon: e, color: "inherit" }),
+      onDelete: i,
+      onClick: i
     }
   );
 }
-export default memo(SwitchRole);
+const k = r(f);
+export {
+  k as default
+};

package/lib/UserCenter/components/user-info/timezone-select.js

@@ -1,46 +1,35 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useMemo } from "react";
-import MenuItem from "@mui/material/MenuItem";
-import Select from "@mui/material/Select";
-import ListSubheader from "@mui/material/ListSubheader";
-import TextField from "@mui/material/TextField";
-import debounce from "lodash/debounce";
-import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
-import { getTimezones } from "./utils.js";
-const timezones = getTimezones();
-export function TimezoneSelect({ value, onChange, disabled = false, mode = "self" }) {
-  const [timezoneData, setTimezoneData] = useState(timezones);
-  const [searchText, setSearchText] = useState("");
-  const timezoneDebounce = useMemo(
-    () => debounce((v) => {
-      return v ? timezones.filter((tz) => tz.value.toLowerCase().includes(v.toLowerCase())) : timezones;
-    }, 300),
+import { jsxs as h, jsx as t } from "react/jsx-runtime";
+import { useState as a, useMemo as v, useEffect as d } from "react";
+import { Select as x, ListSubheader as b, TextField as C, MenuItem as z } from "@mui/material";
+import g from "lodash/debounce";
+import { KeyboardArrowDown as T } from "@mui/icons-material";
+import { getTimezones as w } from "./utils.js";
+const r = w();
+function P({ value: s, onChange: u, disabled: l = !1, mode: c = "self" }) {
+  const [m, p] = a(r), [i, f] = a(""), o = v(
+    () => g((e) => e ? r.filter((n) => n.value.toLowerCase().includes(e.toLowerCase())) : r, 300),
     []
   );
-  useEffect(() => {
-    const data = timezoneDebounce(searchText);
-    setTimezoneData(data ?? timezones);
-  }, [searchText, timezoneDebounce]);
-  useEffect(() => {
-    return () => {
-      timezoneDebounce.cancel();
-    };
-  }, [timezoneDebounce]);
-  return /* @__PURE__ */ jsxs(
-    Select,
+  return d(() => {
+    const e = o(i);
+    p(e ?? r);
+  }, [i, o]), d(() => () => {
+    o.cancel();
+  }, [o]), /* @__PURE__ */ h(
+    x,
     {
-      className: `timezone-select ${disabled ? "disabled" : ""}`,
-      value,
-      onChange: (e) => onChange(e.target.value),
-      disabled,
-      displayEmpty: true,
+      className: `timezone-select ${l ? "disabled" : ""}`,
+      value: s,
+      onChange: (e) => u(e.target.value),
+      disabled: l,
+      displayEmpty: !0,
       variant: "outlined",
       placeholder: "Timezone",
-      IconComponent: (props) => /* @__PURE__ */ jsx(
-        KeyboardArrowDownIcon,
+      IconComponent: (e) => /* @__PURE__ */ t(
+        T,
         {
-          ...props,
-          sx: { fontSize: 18, color: (theme) => `${theme.palette.text.secondary} !important` }
+          ...e,
+          sx: { fontSize: 18, color: (n) => `${n.palette.text.secondary} !important` }
         }
       ),
       MenuProps: {
@@ -50,7 +39,7 @@ export function TimezoneSelect({ value, onChange, disabled = false, mode = "self
           }
         },
         style: {
-          zIndex: mode === "drawer" ? 9999 : 1300
+          zIndex: c === "drawer" ? 9999 : 1300
         }
       },
       sx: {
@@ -65,16 +54,16 @@ export function TimezoneSelect({ value, onChange, disabled = false, mode = "self
         }
       },
       children: [
-        /* @__PURE__ */ jsx(ListSubheader, { children: /* @__PURE__ */ jsx(
-          TextField,
+        /* @__PURE__ */ t(b, { children: /* @__PURE__ */ t(
+          C,
           {
-            autoFocus: true,
-            value: searchText,
+            autoFocus: !0,
+            value: i,
             placeholder: "Timezone",
             variant: "outlined",
             size: "small",
-            fullWidth: true,
-            onChange: (event) => setSearchText(event.target.value),
+            fullWidth: !0,
+            onChange: (e) => f(e.target.value),
             onClick: (e) => e.stopPropagation(),
             onKeyDown: (e) => e.stopPropagation(),
             sx: {
@@ -94,8 +83,11 @@ export function TimezoneSelect({ value, onChange, disabled = false, mode = "self
             }
           }
         ) }),
-        timezoneData.map((tz) => /* @__PURE__ */ jsx(MenuItem, { value: tz.value, children: tz.label }, tz.value))
+        m.map((e) => /* @__PURE__ */ t(z, { value: e.value, children: e.label }, e.value))
       ]
     }
   );
 }
+export {
+  P as TimezoneSelect
+};

package/lib/UserCenter/components/user-info/user-basic-info.js

@@ -1,231 +1,223 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Box, Divider, Typography, IconButton, Collapse } from "@mui/material";
-import Avatar from "@arcblock/ux/lib/Avatar";
-import DID from "@arcblock/ux/lib/DID";
-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 Toast from "@arcblock/ux/lib/Toast";
-import { parseURL, joinURL } from "ufo";
-import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
-import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
-import { translations } from "../../libs/locales.js";
-import { formatAxiosError } from "../../libs/utils.js";
-import { currentTimezone, getStatusDuration, isValidUrl } from "./utils.js";
-import SwitchRole from "./switch-role.js";
-import UserMetadataComponent from "./metadata.js";
-import UserStatus from "./user-status.js";
-import UserInfo from "./user-info.js";
-import { client } from "../../../libs/client.js";
-export default function UserBasicInfo({
-  user,
-  isMyself = true,
-  showFullDid = true,
-  switchPassport,
-  switchProfile,
-  isMobile = false,
-  onlyProfile = false,
-  refreshProfile,
-  ...rest
+import { jsxs as c, jsx as r, Fragment as N } from "react/jsx-runtime";
+import { Box as l, Typography as z, Divider as T, IconButton as F, Collapse as K } from "@mui/material";
+import W from "@arcblock/ux/lib/Avatar";
+import O from "@arcblock/ux/lib/DID";
+import { useMemoizedFn as Q } from "ahooks";
+import { translate as V } from "@arcblock/ux/lib/Locale/util";
+import { useLocaleContext as Y } from "@arcblock/ux/lib/Locale/context";
+import $ from "lodash/noop";
+import { useState as S, useEffect as j } from "react";
+import I from "@arcblock/ux/lib/Toast";
+import { parseURL as q, joinURL as G } from "ufo";
+import { KeyboardArrowUp as H, KeyboardArrowDown as J } from "@mui/icons-material";
+import { translations as X } from "../../libs/locales.js";
+import { formatAxiosError as R } from "../../libs/utils.js";
+import { currentTimezone as Z, getStatusDuration as _, isValidUrl as P } from "./utils.js";
+import M from "./switch-role.js";
+import tt from "./metadata.js";
+import ot from "./user-status.js";
+import rt from "./user-info.js";
+import { client as u } from "../../../libs/client.js";
+function St({
+  user: t,
+  isMyself: a = !0,
+  showFullDid: x = !0,
+  switchPassport: A,
+  switchProfile: b,
+  isMobile: e = !1,
+  onlyProfile: p = !1,
+  refreshProfile: h,
+  ...m
 }) {
-  const { locale } = useLocaleContext();
-  const [userStatus, setUserStatus] = useState(void 0);
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, "en", data);
-  });
-  const [expanded, setExpanded] = useState(!isMobile || onlyProfile);
-  useEffect(() => {
-    setUserStatus(user?.metadata?.status);
-  }, [user]);
-  useEffect(() => {
-    setExpanded(!isMobile || onlyProfile);
-  }, [isMobile, onlyProfile]);
-  const onUpdateUserStatus = async (v) => {
-    if (!isMyself) {
-      return;
-    }
-    try {
-      if (v) {
-        const dateRange = getStatusDuration(v);
-        v.dateRange = dateRange.length > 0 ? dateRange : userStatus?.dateRange ?? [];
-      }
-      setUserStatus(v);
-      await client.user.saveProfile({
-        // @ts-ignore
-        metadata: {
-          ...user?.metadata ?? { joinedAt: user?.createdAt, email: user?.email, phone: user?.phone },
-          status: v || {}
+  var U;
+  const { locale: g } = Y(), [d, w] = S(void 0), v = Q((n, o = {}) => V(X, n, g, "en", o)), [s, y] = S(!e || p);
+  j(() => {
+    var n;
+    w((n = t == null ? void 0 : t.metadata) == null ? void 0 : n.status);
+  }, [t]), j(() => {
+    y(!e || p);
+  }, [e, p]);
+  const D = async (n) => {
+    if (a)
+      try {
+        if (n) {
+          const o = _(n);
+          n.dateRange = o.length > 0 ? o : (d == null ? void 0 : d.dateRange) ?? [];
         }
-      });
-      refreshProfile();
-    } catch (err) {
-      console.error(err);
-      Toast.error(formatAxiosError(err));
-    }
-  };
-  const toggleExpand = () => {
-    setExpanded(!expanded);
+        w(n), await u.user.saveProfile({
+          // @ts-ignore
+          metadata: {
+            ...(t == null ? void 0 : t.metadata) ?? { joinedAt: t == null ? void 0 : t.createdAt, email: t == null ? void 0 : t.email, phone: t == null ? void 0 : t.phone },
+            status: n || {}
+          }
+        }), h();
+      } catch (o) {
+        console.error(o), I.error(R(o));
+      }
+  }, L = () => {
+    y(!s);
   };
-  if (!user) {
+  if (!t)
     return null;
-  }
-  const onSave = async (v) => {
-    if (!isMyself) {
+  const k = async (n) => {
+    var C;
+    if (!a)
       return;
-    }
-    const { metadata, address } = v;
+    const { metadata: o, address: E } = n;
     try {
-      const newLinks = metadata?.links?.map((link) => {
-        if (!link.url || !isValidUrl(link.url))
-          return null;
+      const f = ((C = o == null ? void 0 : o.links) == null ? void 0 : C.map((i) => {
+        if (!i.url || !P(i.url)) return null;
         try {
-          const parsedUrl = parseURL(link.url);
-          if (!parsedUrl.protocol) {
-            link.url = joinURL("https://", link.url);
-          }
-          return link;
-        } catch (e) {
-          console.error("Invalid URL:", link.url);
-          return null;
+          return q(i.url).protocol || (i.url = G("https://", i.url)), i;
+        } catch {
+          return console.error("Invalid URL:", i.url), null;
         }
-      }).filter((l) => !!l) || [];
-      metadata.links = newLinks;
-      await client.user.saveProfile({ metadata, address });
-      refreshProfile();
-    } catch (err) {
-      console.error(err);
-      Toast.error(formatAxiosError(err));
+      }).filter((i) => !!i)) || [];
+      o.links = f, await u.user.saveProfile({ metadata: o, address: E }), h();
+    } catch (f) {
+      console.error(f), I.error(R(f));
     }
   };
-  return /* @__PURE__ */ jsxs(
-    Box,
+  return /* @__PURE__ */ c(
+    l,
     {
-      ...rest,
+      ...m,
       sx: {
         position: "relative",
-        ...rest.sx ?? {}
+        ...m.sx ?? {}
       },
       children: [
-        /* @__PURE__ */ jsxs(Box, { className: "user-info", display: "flex", flexDirection: isMobile ? "row" : "column", gap: 2, children: [
-          /* @__PURE__ */ jsxs(
-            Box,
-            {
-              className: "user-avatar",
-              position: "relative",
+        /* @__PURE__ */ c(
+          l,
+          {
+            className: "user-info",
+            sx: {
               display: "flex",
-              alignItems: "center",
-              justifyContent: "space-between",
-              children: [
-                /* @__PURE__ */ jsx(
-                  Avatar,
-                  {
-                    src: user?.avatar,
-                    did: user?.did,
-                    size: rest.size || (isMobile ? 64 : 100),
-                    variant: "circle",
-                    shape: "circle",
-                    sx: {
-                      borderRadius: "100%",
-                      backgroundColor: "#fff",
-                      position: "relative",
-                      overflow: "hidden",
-                      flexShrink: 0,
-                      ...isMyself ? {
-                        cursor: "pointer",
-                        "&::after": {
-                          content: `"${t("switchProfile")}"`,
-                          color: "white",
-                          position: "absolute",
-                          fontSize: "12px",
-                          bottom: 0,
-                          left: 0,
-                          right: 0,
-                          height: "25%",
-                          backgroundColor: "rgba(0, 0, 0, 0.3)",
+              flexDirection: e ? "row" : "column",
+              gap: 2
+            },
+            children: [
+              /* @__PURE__ */ c(
+                l,
+                {
+                  className: "user-avatar",
+                  sx: {
+                    position: "relative",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between"
+                  },
+                  children: [
+                    /* @__PURE__ */ r(
+                      W,
+                      {
+                        src: t == null ? void 0 : t.avatar,
+                        did: t == null ? void 0 : t.did,
+                        size: m.size || (e ? 64 : 100),
+                        variant: "circle",
+                        shape: "circle",
+                        sx: {
+                          borderRadius: "100%",
+                          backgroundColor: "#fff",
+                          position: "relative",
+                          overflow: "hidden",
+                          flexShrink: 0,
+                          ...a ? {
+                            cursor: "pointer",
+                            "&::after": {
+                              content: `"${v("switchProfile")}"`,
+                              color: "white",
+                              position: "absolute",
+                              fontSize: "12px",
+                              bottom: 0,
+                              left: 0,
+                              right: 0,
+                              height: "25%",
+                              backgroundColor: "rgba(0, 0, 0, 0.3)",
+                              display: "flex",
+                              justifyContent: "center",
+                              alignItems: "center"
+                            }
+                          } : {}
+                        },
+                        onClick: a ? b : $
+                      }
+                    ),
+                    /* @__PURE__ */ r(
+                      ot,
+                      {
+                        isMobile: e,
+                        size: m.size || (e ? 64 : 100),
+                        isMyself: a,
+                        timezone: ((U = t == null ? void 0 : t.metadata) == null ? void 0 : U.timezone) || Z,
+                        status: d,
+                        onChange: D
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ c(
+                l,
+                {
+                  sx: {
+                    flex: 1,
+                    overflow: "hidden"
+                  },
+                  children: [
+                    /* @__PURE__ */ c(
+                      z,
+                      {
+                        variant: "h6",
+                        component: "div",
+                        sx: {
+                          flex: 1,
+                          fontWeight: 600,
                           display: "flex",
-                          justifyContent: "center",
-                          alignItems: "center"
-                        }
-                      } : {}
-                    },
-                    onClick: isMyself ? switchProfile : noop
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  UserStatus,
-                  {
-                    isMobile,
-                    size: rest.size || (isMobile ? 64 : 100),
-                    isMyself,
-                    timezone: user?.metadata?.timezone || currentTimezone,
-                    status: userStatus,
-                    onChange: onUpdateUserStatus
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            Box,
-            {
-              sx: {
-                flex: 1,
-                overflow: "hidden"
-              },
-              children: [
-                /* @__PURE__ */ jsxs(
-                  Typography,
-                  {
-                    variant: "h6",
-                    component: "div",
-                    sx: {
-                      flex: 1,
-                      fontWeight: 600,
-                      display: "flex",
-                      alignItems: "center",
-                      gap: 1,
-                      fontSize: "24px !important",
-                      flexWrap: "wrap"
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        "span",
-                        {
-                          style: {
-                            overflow: "hidden",
-                            textOverflow: "ellipsis",
-                            whiteSpace: "nowrap"
-                          },
-                          children: user?.fullName
-                        }
-                      ),
-                      isMyself ? /* @__PURE__ */ jsx(SwitchRole, { user, switchPassport }) : null
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsx(DID, { did: user.did, showQrcode: true, copyable: true, compact: !showFullDid, responsive: !showFullDid, locale })
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx(UserMetadataComponent, { isMobile, isMyself, user, onSave }),
-        isMyself ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Divider, { sx: { my: isMobile ? 1 : 3 } }),
-          isMobile && !onlyProfile ? /* @__PURE__ */ jsx(
-            Box,
+                          alignItems: "center",
+                          gap: 1,
+                          fontSize: "24px !important",
+                          flexWrap: "wrap"
+                        },
+                        children: [
+                          /* @__PURE__ */ r(
+                            "span",
+                            {
+                              style: {
+                                overflow: "hidden",
+                                textOverflow: "ellipsis",
+                                whiteSpace: "nowrap"
+                              },
+                              children: t == null ? void 0 : t.fullName
+                            }
+                          ),
+                          a ? /* @__PURE__ */ r(M, { user: t, switchPassport: A }) : null
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ r(O, { did: t.did, showQrcode: !0, copyable: !0, compact: !x, responsive: !x, locale: g })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ r(tt, { isMobile: e, isMyself: a, user: t, onSave: k }),
+        a ? /* @__PURE__ */ c(N, { children: [
+          /* @__PURE__ */ r(T, { sx: { my: e ? 1 : 3 } }),
+          e && !p ? /* @__PURE__ */ r(
+            l,
             {
               sx: {
                 display: "flex",
                 justifyContent: "center",
                 mb: 0
               },
-              children: /* @__PURE__ */ jsx(
-                IconButton,
+              children: /* @__PURE__ */ r(
+                F,
                 {
                   size: "small",
-                  onClick: toggleExpand,
+                  onClick: L,
                   sx: {
                     backgroundColor: "grey.50",
                     "&:hover": {
@@ -233,17 +225,31 @@ export default function UserBasicInfo({
                       opacity: 0.8
                     }
                   },
-                  children: expanded ? /* @__PURE__ */ jsx(KeyboardArrowUpIcon, {}) : /* @__PURE__ */ jsx(KeyboardArrowDownIcon, {})
+                  children: s ? /* @__PURE__ */ r(H, {}) : /* @__PURE__ */ r(J, {})
                 }
               )
             }
           ) : null,
-          /* @__PURE__ */ jsxs(Collapse, { in: expanded, timeout: "auto", children: [
-            /* @__PURE__ */ jsx(Typography, { component: "p", color: "text.secondary", fontSize: "14px", mb: 2, children: t("profile.justForYou") }),
-            /* @__PURE__ */ jsx(UserInfo, { user, isMySelf: isMyself })
+          /* @__PURE__ */ c(K, { in: s, timeout: "auto", children: [
+            /* @__PURE__ */ r(
+              z,
+              {
+                component: "p",
+                sx: {
+                  color: "text.secondary",
+                  fontSize: "14px",
+                  mb: 2
+                },
+                children: v("profile.justForYou")
+              }
+            ),
+            /* @__PURE__ */ r(rt, { user: t, isMySelf: a })
           ] })
         ] }) : null
       ]
     }
   );
 }
+export {
+  St as default
+};