@blocklet/ui-react 2.12.8 → 2.12.10

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

@@ -1,20 +1,23 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Box, CircularProgress, Tooltip, Typography } from "@mui/material";
+import { Box, Divider, Typography } from "@mui/material";
 import Avatar from "@arcblock/ux/lib/Avatar";
-import { useTheme } from "@arcblock/ux/lib/Theme";
 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 RefreshOutlinedIcon from "@mui/icons-material/RefreshOutlined";
-import { SessionContext } from "@arcblock/did-connect/lib/Session";
-import { useContext, useState } from "react";
+import { useEffect, useState } from "react";
 import Toast from "@arcblock/ux/lib/Toast";
-import isEmpty from "lodash/isEmpty";
+import { temp as colors } from "@arcblock/ux/lib/Colors";
+import { parseURL, joinURL } from "ufo";
 import { translations } from "../../libs/locales.js";
 import { formatAxiosError } from "../../libs/utils.js";
+import { 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,
@@ -24,27 +27,62 @@ export default function UserBasicInfo({
   ...rest
 }) {
   const { locale } = useLocaleContext();
-  const { session } = useContext(SessionContext);
-  const [loading, setLoading] = useState(false);
+  const [userStatus, setUserStatus] = useState(void 0);
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, "en", data);
   });
-  const theme = useTheme();
-  const isSmallView = theme.breakpoints.down("md");
+  useEffect(() => {
+    setUserStatus(user?.metadata?.status);
+  }, [user]);
+  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
+        }
+      });
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatAxiosError(err));
+    }
+  };
   if (!user) {
     return null;
   }
-  const refreshProfile = async () => {
+  const onSave = async (v) => {
+    if (!isMyself) {
+      return;
+    }
     try {
-      setLoading(true);
-      await session.refreshProfile();
-      session.refresh();
-      Toast.success(translate(translations, "refreshProfile.successfully", locale));
+      const newLinks = v?.links?.map((link) => {
+        if (!link.url || !isValidUrl(link.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;
+        }
+      }).filter((l) => !!l) || [];
+      v.links = newLinks;
+      await client.user.saveProfile({ metadata: v });
     } catch (err) {
       console.error(err);
       Toast.error(formatAxiosError(err));
-    } finally {
-      setLoading(false);
     }
   };
   return /* @__PURE__ */ jsxs(
@@ -53,83 +91,114 @@ export default function UserBasicInfo({
       ...rest,
       sx: {
         position: "relative",
-        ...rest.sx
+        ...rest.sx ?? {}
       },
       children: [
-        /* @__PURE__ */ jsx(
-          Avatar,
-          {
-            src: user?.avatar,
-            did: user?.did,
-            size: isSmallView ? 64 : 80,
-            variant: "circle",
-            shape: "circle",
-            sx: {
-              borderRadius: "100%",
-              backgroundColor: "#fff",
+        /* @__PURE__ */ jsxs(Box, { className: "user-info", display: "flex", flexDirection: rest.isMobile ? "row" : "column", gap: 2, children: [
+          /* @__PURE__ */ jsxs(
+            Box,
+            {
+              className: "user-avatar",
               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: "50%",
-                  backgroundColor: "rgba(0, 0, 0, 0.3)",
-                  display: "flex",
-                  justifyContent: "center",
-                  alignItems: "center"
-                }
-              } : {}
-            },
-            onClick: isMyself ? switchProfile : noop
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          Box,
-          {
-            sx: {
-              flex: 1,
-              overflow: "hidden"
-            },
-            children: [
-              /* @__PURE__ */ jsxs(
-                Typography,
-                {
-                  variant: "h6",
-                  sx: {
-                    fontWeight: "bold",
-                    display: "flex",
-                    alignItems: "center",
-                    gap: 1,
-                    fontSize: "24px !important"
-                  },
-                  children: [
-                    user?.fullName,
-                    isMyself ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                      /* @__PURE__ */ jsx(SwitchRole, { user, switchPassport }),
-                      !isEmpty(user.url) && /* @__PURE__ */ jsx(
-                        Tooltip,
-                        {
-                          title: !loading && translate(translations, "refreshProfile.title", locale),
-                          sx: { display: "flex", alignItems: "center" },
-                          children: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: "16px", sx: { color: theme?.colors?.primary, ml: 0.5 } }) : /* @__PURE__ */ jsx(RefreshOutlinedIcon, { onClick: refreshProfile })
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              children: [
+                /* @__PURE__ */ jsx(
+                  Avatar,
+                  {
+                    src: user?.avatar,
+                    did: user?.did,
+                    size: rest.size || (rest.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: "50%",
+                          backgroundColor: "rgba(0, 0, 0, 0.3)",
+                          display: "flex",
+                          justifyContent: "center",
+                          alignItems: "center"
                         }
-                      )
-                    ] }) : null
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx(DID, { did: user.did, showQrcode: true, copyable: true, compact: !showFullDid, responsive: !showFullDid, locale })
-            ]
-          }
-        )
+                      } : {}
+                    },
+                    onClick: isMyself ? switchProfile : noop
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  UserStatus,
+                  {
+                    isMobile: rest.isMobile,
+                    size: rest.size || (rest.isMobile ? 64 : 100),
+                    isMyself,
+                    status: userStatus,
+                    onChange: onUpdateUserStatus
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Box,
+            {
+              sx: {
+                flex: 1,
+                overflow: "hidden"
+              },
+              children: [
+                /* @__PURE__ */ jsxs(
+                  Typography,
+                  {
+                    variant: "h6",
+                    sx: {
+                      fontWeight: 600,
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 1,
+                      fontSize: "24px !important"
+                    },
+                    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,
+                    style: { maxWidth: 260 }
+                  }
+                )
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(UserMetadataComponent, { isMobile: rest.isMobile, isMyself, user, onSave }),
+        isMyself ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Divider, { sx: { my: 3, borderColor: colors.dividerColor } }),
+          /* @__PURE__ */ jsx(Typography, { component: "p", color: "text.secondary", fontSize: "14px", mb: 2, children: t("profile.justForYou") }),
+          /* @__PURE__ */ jsx(UserInfo, { user, isMySelf: isMyself })
+        ] }) : null
       ]
     }
   );

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

@@ -3,8 +3,6 @@ import { Box } from "@mui/material";
 import { Icon } from "@iconify/react";
 import { useMemoizedFn, useCreation } from "ahooks";
 import DID from "@arcblock/ux/lib/DID";
-import MailOutlineRoundedIcon from "@iconify-icons/material-symbols/mail-outline-rounded";
-import PhoneOutlineRoundedIcon from "@iconify-icons/material-symbols/phone-android-outline-rounded";
 import ScheduleOutlineRoundedIcon from "@iconify-icons/material-symbols/schedule-outline-rounded";
 import MoreTimeRoundedIcon from "@iconify-icons/material-symbols/more-time-rounded";
 import CaptivePortalRoundedIcon from "@iconify-icons/material-symbols/captive-portal-rounded";
@@ -29,18 +27,6 @@ export default function UserInfo({
   }, [user?.sourceProvider]);
   const userInfoListData = [];
   if (isMySelf) {
-    userInfoListData.push({
-      icon: /* @__PURE__ */ jsx(Icon, { fontSize: 16, icon: MailOutlineRoundedIcon }),
-      title: t("email"),
-      content: user?.email || t("emptyField"),
-      verified: user?.emailVerified
-    });
-    userInfoListData.push({
-      icon: /* @__PURE__ */ jsx(Icon, { fontSize: 16, icon: PhoneOutlineRoundedIcon }),
-      title: t("phone"),
-      content: user?.phone || t("emptyField"),
-      verified: user?.phoneVerified
-    });
     userInfoListData.push({
       icon: /* @__PURE__ */ jsx(Icon, { fontSize: 16, icon: ScheduleOutlineRoundedIcon }),
       title: t("lastLoginAt"),
@@ -70,7 +56,7 @@ export default function UserInfo({
     userInfoListData.push({
       icon: /* @__PURE__ */ jsx(Icon, { fontSize: 16, icon: CaptivePortalRoundedIcon }),
       title: t("invitedBy"),
-      content: user?.inviter ? /* @__PURE__ */ jsx(DID, { did: user.inviter, showQrcode: true, copyable: true, compact: true, responsive: true, locale }) : "-"
+      content: user?.inviter ? /* @__PURE__ */ jsx(DID, { style: { maxWidth: 260 }, did: user.inviter, showQrcode: true, copyable: true, compact: true, responsive: true, locale }) : "-"
     });
   }
   return /* @__PURE__ */ jsx(
@@ -83,7 +69,7 @@ export default function UserInfo({
         gap: 1.5,
         ...rest?.sx
       },
-      children: userInfoListData.map((item) => /* @__PURE__ */ jsx(UserInfoItem, { data: item, sx: { flex: 1 }, verified: item.verified }, item.title))
+      children: userInfoListData.map((item) => /* @__PURE__ */ jsx(UserInfoItem, { data: item, sx: { flex: 1 } }, item.title))
     }
   );
 }

package/lib/UserCenter/components/user-info/user-status.d.ts

@@ -0,0 +1,8 @@
+import type { UserMetadata } from '../../../@types';
+export default function UserStatus({ isMobile, size, isMyself, status, onChange, }: {
+    isMobile?: boolean;
+    size: number;
+    isMyself: boolean;
+    status: UserMetadata['status'];
+    onChange: (v: UserMetadata['status']) => void;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,153 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import Badge from "@mui/material/Badge";
+import Box from "@mui/material/Box";
+import styled from "@emotion/styled";
+import { lazy, useCallback, useEffect, useMemo, useState } from "react";
+import { useCreation, useMemoizedFn, useInterval, useUnmount } from "ahooks";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import Tooltip from "@mui/material/Tooltip";
+import { translate } from "@arcblock/ux/lib/Locale/util";
+import { formatToDatetime } from "@arcblock/ux/lib/Util";
+import { DurationEnum, StatusEnum } from "../../../@types/index.js";
+import StatusSelector from "../status-selector/index.js";
+import { translations } from "../../libs/locales.js";
+import { getTimeRemaining, isWithinTimeRange } from "./utils.js";
+const MeetingIcon = lazy(() => import("@arcblock/icons/lib/Meeting"));
+const CommunityIcon = lazy(() => import("@arcblock/icons/lib/Community"));
+const HolidayIcon = lazy(() => import("@arcblock/icons/lib/Holiday"));
+const OffSickIcon = lazy(() => import("@arcblock/icons/lib/OffSick"));
+const WorkingRemotelyIcon = lazy(() => import("@arcblock/icons/lib/WorkingRemotely"));
+const StatusIconMap = {
+  [StatusEnum.Meeting]: MeetingIcon,
+  [StatusEnum.Community]: CommunityIcon,
+  [StatusEnum.Holiday]: HolidayIcon,
+  [StatusEnum.OffSick]: OffSickIcon,
+  [StatusEnum.WorkingRemotely]: WorkingRemotelyIcon
+};
+export default function UserStatus({
+  isMobile,
+  size,
+  isMyself,
+  status,
+  onChange
+}) {
+  const { locale } = useLocaleContext();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, "en", data);
+  });
+  const [interval, setInterval] = useState(void 0);
+  const pauseInterval = useMemoizedFn(() => {
+    setInterval(void 0);
+  });
+  useEffect(() => {
+    setInterval(1e3);
+  }, [status]);
+  const clear = useInterval(() => {
+    if (status?.value && status?.dateRange?.length === 2) {
+      const isWithin = isWithinTimeRange(status.dateRange);
+      if (!isWithin) {
+        pauseInterval();
+        onChange(void 0);
+      } else {
+        const timeRemaining = getTimeRemaining(status.dateRange[1]);
+        if (timeRemaining > 0) {
+          setInterval(timeRemaining);
+        } else {
+          pauseInterval();
+          onChange(void 0);
+        }
+      }
+    } else {
+      pauseInterval();
+    }
+  }, interval);
+  useUnmount(() => {
+    clear();
+  });
+  const [anchorEl, setAnchorEl] = useState(null);
+  const getDurationData = useCallback(() => {
+    const data = Object.keys(DurationEnum).map((key) => ({
+      id: DurationEnum[key],
+      name: t(`userStatus.duration.${key}`)
+    }));
+    return data;
+  }, [t]);
+  const statusData = useCreation(() => {
+    const durationData = getDurationData();
+    return Object.keys(StatusEnum).map((key) => ({
+      id: StatusEnum[key],
+      name: t(`userStatus.${key}`),
+      icon: StatusIconMap[StatusEnum[key]],
+      children: durationData
+    }));
+  }, [t, getDurationData]);
+  const onOpenStatusSelector = (event) => {
+    if (!isMyself) {
+      return;
+    }
+    setAnchorEl(event.currentTarget);
+  };
+  const onCloseStatusSelector = () => {
+    setAnchorEl(null);
+  };
+  const onStatusChange = (v) => {
+    if (!isMyself) {
+      return;
+    }
+    if (v) {
+      onChange(v);
+    }
+    onCloseStatusSelector();
+  };
+  const StatusIcon = StatusIconMap[status?.value];
+  const tooltipTitle = useMemo(() => {
+    const currentStatus = statusData.find((item) => item.id === status?.value);
+    if (currentStatus) {
+      const localeOption = locale === "zh" ? "zh-cn" : "en-us";
+      const range = status?.dateRange?.map((item) => {
+        return formatToDatetime(item, { locale: localeOption });
+      });
+      return `${currentStatus?.name}: ${range?.join("~")}`;
+    }
+    return null;
+  }, [status, statusData, locale]);
+  const open = Boolean(anchorEl);
+  return /* @__PURE__ */ jsxs(StatusDiv, { size, isMobile, children: [
+    /* @__PURE__ */ jsx(Tooltip, { title: tooltipTitle, children: /* @__PURE__ */ jsx(
+      Box,
+      {
+        className: "status-icon",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        onClick: onOpenStatusSelector,
+        children: StatusIcon ? /* @__PURE__ */ jsx(StatusIcon, { style: { width: 16, height: 16 } }) : /* @__PURE__ */ jsx(Badge, { color: "success", variant: "dot" })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(StatusSelector, { selected: status, data: statusData, open, onSelect: onStatusChange, anchorEl })
+  ] });
+}
+const StatusDiv = styled(Box)`
+  position: absolute;
+  left: ${({ size }) => `${size * 3 / 4}px`};
+  top: ${({ size }) => `${size * 0.65}px`};
+  width: ${({ isMobile }) => isMobile ? "22px" : "32px"};
+  height: ${({ isMobile }) => isMobile ? "22px" : "32px"};
+  border-radius: ${({ isMobile }) => isMobile ? "11px" : "16px"};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #ffffff;
+  overflow: hidden;
+  white-space: nowrap;
+  cursor: pointer;
+
+  .status-icon {
+    flex-shrink: 0;
+    width: ${({ isMobile }) => isMobile ? "16px" : "26px"};
+    height: ${({ isMobile }) => isMobile ? "16px" : "26px"};
+    border-radius: ${({ isMobile }) => isMobile ? "8px" : "13px"};
+    background-color: #eff1f5;
+    // background-color: #39b380;
+  }
+`;

package/lib/UserCenter/components/user-info/utils.d.ts

@@ -0,0 +1,19 @@
+import { UserMetadata } from '../../../@types';
+export declare const getTimezones: () => any;
+export declare const isValidUrl: (url: string) => boolean;
+/**
+ * 根据 duration 类型，计算出date range
+ * @param status
+ * @returns
+ */
+export declare const getStatusDuration: (status: UserMetadata["status"]) => any[];
+/**
+ * 根据状态的 duration，判断是否在时间范围内
+ * @param status
+ * @returns
+ */
+export declare const isWithinTimeRange: (dateRange: [Date, Date]) => any;
+/**
+ * 获取当前时间距离结束时间还有多久
+ */
+export declare const getTimeRemaining: (date: Date) => number;

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

@@ -0,0 +1,86 @@
+import moment from "moment-timezone";
+import dayjs from "dayjs";
+import { DurationEnum } from "../../../@types/index.js";
+const HOUR = 3600;
+const MINUTES_30 = 1800;
+const MINUTES_10 = 600;
+const MINUTES_5 = 300;
+const MINUTES_1 = 60;
+const SECOND = 1;
+export const getTimezones = () => {
+  const timezones = moment.tz.names();
+  const formattedTimezones = timezones.map((tz) => {
+    const offset = moment.tz(tz).utcOffset() / 60;
+    const hours = Math.floor(offset);
+    const minutes = offset % 1 * 60;
+    const label = `GMT${hours >= 0 ? "+" : ""}${hours}:${minutes === 30 ? "30" : "00"}`;
+    return { label, value: tz };
+  });
+  return formattedTimezones.sort((a, b) => {
+    const [hoursA, minutesA] = a.label.replace("GMT", "").split(":").map(Number);
+    const [hoursB, minutesB] = b.label.replace("GMT", "").split(":").map(Number);
+    const totalOffsetA = hoursA * 60 + minutesA;
+    const totalOffsetB = hoursB * 60 + minutesB;
+    return totalOffsetB - totalOffsetA;
+  }).map((tz) => ({
+    label: `(${tz.label}) ${tz.value}`,
+    value: tz.value
+  }));
+};
+export const isValidUrl = (url) => {
+  const urlPattern = /^(https?:\/\/)?((([a-zA-Z\d]([a-zA-Z\d-]*[a-zA-Z\d])*)\.)+[a-zA-Z]{2,}|((\d{1,3}\.){3}\d{1,3}))(:\d+)?(\/[-a-zA-Z\d%_.~+]*)*(\?[;&a-zA-Z\d%_.~+=-]*)?(#[a-zA-Z\d_]*)?$/;
+  return urlPattern.test(url);
+};
+export const getStatusDuration = (status) => {
+  let dateRange = [];
+  const current = dayjs();
+  switch (status?.duration) {
+    case DurationEnum.ThirtyMinutes:
+      dateRange = [current, current.add(30, "minutes")];
+      break;
+    case DurationEnum.OneHour:
+      dateRange = [current, current.add(1, "hour")];
+      break;
+    case DurationEnum.FourHours:
+      dateRange = [current, current.add(4, "hours")];
+      break;
+    case DurationEnum.Today:
+      dateRange = [current, current.endOf("day")];
+      break;
+    case DurationEnum.ThisWeek:
+      dateRange = [current, current.endOf("week")];
+      break;
+    default:
+      break;
+  }
+  return dateRange.map((d) => d.toDate());
+};
+export const isWithinTimeRange = (dateRange) => {
+  const current = dayjs();
+  return current.isAfter(dayjs(dateRange[0])) && current.isBefore(dayjs(dateRange[1]));
+};
+export const getTimeRemaining = (date) => {
+  const now = dayjs();
+  const end = dayjs(date);
+  const diffSeconds = end.diff(now, "seconds");
+  const toMilliseconds = (seconds) => seconds * 1e3;
+  if (diffSeconds >= HOUR) {
+    return toMilliseconds(HOUR);
+  }
+  if (diffSeconds >= MINUTES_30) {
+    return toMilliseconds(MINUTES_30);
+  }
+  if (diffSeconds >= MINUTES_10) {
+    return toMilliseconds(MINUTES_10);
+  }
+  if (diffSeconds >= MINUTES_5) {
+    return toMilliseconds(MINUTES_5);
+  }
+  if (diffSeconds >= MINUTES_1) {
+    return toMilliseconds(MINUTES_1);
+  }
+  if (diffSeconds >= SECOND) {
+    return toMilliseconds(SECOND);
+  }
+  return 0;
+};