@blocklet/ui-react 2.13.70 → 3.0.1

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

@@ -1,20 +1,20 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Box, Typography } from "@mui/material";
-import VerifiedIcon from "@mui/icons-material/Verified";
-export default function UserInfoItem({ data, verified, ...rest }) {
-  return /* @__PURE__ */ jsxs(
-    Box,
+import { jsxs as t, jsx as i } from "react/jsx-runtime";
+import { Box as n, Typography as o } from "@mui/material";
+import { Verified as l } from "@mui/icons-material";
+function x({ data: e, verified: s, ...r }) {
+  return /* @__PURE__ */ t(
+    n,
     {
-      ...rest,
+      ...r,
       sx: {
         display: "flex",
         alignItems: "center",
         justifyContent: "space-between",
-        ...rest.sx
+        ...r.sx
       },
       children: [
-        /* @__PURE__ */ jsxs(
-          Typography,
+        /* @__PURE__ */ t(
+          o,
           {
             sx: {
               display: "flex",
@@ -25,26 +25,39 @@ export default function UserInfoItem({ data, verified, ...rest }) {
               fontWeight: 500
             },
             children: [
-              data.icon,
-              data.title
+              e.icon,
+              e.title
             ]
           }
         ),
-        /* @__PURE__ */ jsxs(Box, { display: "flex", flexDirection: "row", alignItems: "center", children: [
-          /* @__PURE__ */ jsx(
-            Typography,
-            {
-              sx: {
-                color: "text.secondary",
-                whiteSpace: "pre-wrap",
-                fontSize: "14px"
-              },
-              children: data.content
-            }
-          ),
-          verified && /* @__PURE__ */ jsx(VerifiedIcon, { color: "success", style: { fontSize: 16, marginLeft: 4 } })
-        ] })
+        /* @__PURE__ */ t(
+          n,
+          {
+            sx: {
+              display: "flex",
+              flexDirection: "row",
+              alignItems: "center"
+            },
+            children: [
+              /* @__PURE__ */ i(
+                o,
+                {
+                  sx: {
+                    color: "text.secondary",
+                    whiteSpace: "pre-wrap",
+                    fontSize: "14px"
+                  },
+                  children: e.content
+                }
+              ),
+              s && /* @__PURE__ */ i(l, { color: "success", style: { fontSize: 16, marginLeft: 4 } })
+            ]
+          }
+        )
       ]
     }
   );
 }
+export {
+  x as default
+};

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

@@ -1,78 +1,63 @@
-import { jsx } from "react/jsx-runtime";
-import { Box } from "@mui/material";
-import { Icon } from "@iconify/react";
-import { useMemoizedFn, useCreation } from "ahooks";
-import DID from "@arcblock/ux/lib/DID";
-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";
-import SettingsInputAntennaRoundedIcon from "@iconify-icons/material-symbols/settings-input-antenna-rounded";
-import RelativeTime from "@arcblock/ux/lib/RelativeTime";
-import { translate } from "@arcblock/ux/lib/Locale/util";
-import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import { LOGIN_PROVIDER_NAME } from "@arcblock/ux/lib/Util/constant";
-import ShortenLabel from "@arcblock/ux/lib/UserCard/Content/shorten-label";
-import { translations } from "../../libs/locales.js";
-import UserInfoItem from "./user-info-item.js";
-export default function UserInfo({
-  user,
-  isMySelf = false,
-  ...rest
+import { jsx as t } from "react/jsx-runtime";
+import { Box as I } from "@mui/material";
+import { Icon as e } from "@iconify/react";
+import { useMemoizedFn as v, useCreation as h } from "ahooks";
+import x from "@arcblock/ux/lib/DID";
+import g from "@iconify-icons/material-symbols/schedule-outline-rounded";
+import L from "@iconify-icons/material-symbols/more-time-rounded";
+import p from "@iconify-icons/material-symbols/captive-portal-rounded";
+import A from "@iconify-icons/material-symbols/settings-input-antenna-rounded";
+import f from "@arcblock/ux/lib/RelativeTime";
+import { translate as R } from "@arcblock/ux/lib/Locale/util";
+import { useLocaleContext as S } from "@arcblock/ux/lib/Locale/context";
+import { LOGIN_PROVIDER_NAME as z } from "@arcblock/ux/lib/Util/constant";
+import P from "@arcblock/ux/lib/UserCard/Content/shorten-label";
+import { translations as w } from "../../libs/locales.js";
+import D from "./user-info-item.js";
+function V({
+  user: o,
+  isMySelf: l = !1,
+  ...c
 }) {
-  const { locale } = useLocaleContext();
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, "en", data);
-  });
-  const readableProvider = useCreation(() => {
-    return user?.sourceProvider && LOGIN_PROVIDER_NAME[user.sourceProvider] || t("unknown");
-  }, [user?.sourceProvider]);
-  const userInfoListData = [];
-  if (isMySelf) {
-    userInfoListData.push({
-      icon: /* @__PURE__ */ jsx(Icon, { fontSize: 16, icon: ScheduleOutlineRoundedIcon }),
-      title: t("lastLoginAt"),
-      content: user?.lastLoginAt ? (
-        // @ts-ignore
-        /* @__PURE__ */ jsx(RelativeTime, { locale, value: user?.lastLoginAt, relativeRange: 3 * 86400 * 1e3 })
-      ) : t("unknown")
-    });
-    userInfoListData.push({
-      icon: /* @__PURE__ */ jsx(Icon, { fontSize: 16, icon: SettingsInputAntennaRoundedIcon }),
-      title: t("lastLoginIp"),
-      content: user?.lastLoginIp ? /* @__PURE__ */ jsx(ShortenLabel, { maxLength: 20, children: user?.lastLoginIp }) : t("unknown")
-    });
-  }
-  userInfoListData.push({
-    icon: /* @__PURE__ */ jsx(Icon, { fontSize: 16, icon: MoreTimeRoundedIcon }),
-    title: t("createdAt"),
+  const { locale: a } = S(), n = v((m, r = {}) => R(w, m, a, "en", r)), d = h(() => (o == null ? void 0 : o.sourceProvider) && z[o.sourceProvider] || n("unknown"), [o == null ? void 0 : o.sourceProvider]), i = [];
+  return l && (i.push({
+    icon: /* @__PURE__ */ t(e, { fontSize: 16, icon: g }),
+    title: n("lastLoginAt"),
+    content: o != null && o.lastLoginAt ? (
+      // @ts-ignore
+      /* @__PURE__ */ t(f, { locale: a, value: o == null ? void 0 : o.lastLoginAt, relativeRange: 3 * 86400 * 1e3 })
+    ) : n("unknown")
+  }), i.push({
+    icon: /* @__PURE__ */ t(e, { fontSize: 16, icon: A }),
+    title: n("lastLoginIp"),
+    content: o != null && o.lastLoginIp ? /* @__PURE__ */ t(P, { maxLength: 20, children: o == null ? void 0 : o.lastLoginIp }) : n("unknown")
+  })), i.push({
+    icon: /* @__PURE__ */ t(e, { fontSize: 16, icon: L }),
+    title: n("createdAt"),
     // @ts-ignore
-    content: user?.createdAt ? /* @__PURE__ */ jsx(RelativeTime, { locale, value: user?.createdAt }) : t("unknown")
-  });
-  if (isMySelf) {
-    userInfoListData.push({
-      icon: /* @__PURE__ */ jsx(Icon, { fontSize: 16, icon: CaptivePortalRoundedIcon }),
-      title: t("registerFrom"),
-      content: readableProvider
-    });
-    if (user?.inviter) {
-      userInfoListData.push({
-        icon: /* @__PURE__ */ jsx(Icon, { fontSize: 16, icon: CaptivePortalRoundedIcon }),
-        title: t("invitedBy"),
-        content: /* @__PURE__ */ jsx(DID, { style: { maxWidth: 260 }, did: user.inviter, showQrcode: true, copyable: true, compact: true, responsive: true, locale })
-      });
-    }
-  }
-  return /* @__PURE__ */ jsx(
-    Box,
+    content: o != null && o.createdAt ? /* @__PURE__ */ t(f, { locale: a, value: o == null ? void 0 : o.createdAt }) : n("unknown")
+  }), l && (i.push({
+    icon: /* @__PURE__ */ t(e, { fontSize: 16, icon: p }),
+    title: n("registerFrom"),
+    content: d
+  }), o != null && o.inviter && i.push({
+    icon: /* @__PURE__ */ t(e, { fontSize: 16, icon: p }),
+    title: n("invitedBy"),
+    content: /* @__PURE__ */ t(x, { style: { maxWidth: 260 }, did: o.inviter, showQrcode: !0, copyable: !0, compact: !0, responsive: !0, locale: a })
+  })), /* @__PURE__ */ t(
+    I,
     {
-      ...rest,
+      ...c,
       sx: {
         display: "flex",
         flexDirection: "column",
         gap: 1.5,
-        ...rest?.sx
+        ...c == null ? void 0 : c.sx
       },
-      children: userInfoListData.map((item) => /* @__PURE__ */ jsx(UserInfoItem, { data: item, sx: { flex: 1 } }, item.title))
+      children: i.map((m) => /* @__PURE__ */ t(D, { data: m, sx: { flex: 1 } }, m.title))
     }
   );
 }
+export {
+  V as default
+};

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

@@ -1,185 +1,139 @@
-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, Suspense, 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 StatusDialog from "../status-dialog/index.js";
-import { translations } from "../../libs/locales.js";
-import { getTimeRemaining, isNotClear, 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
-};
-const QuickSettings = {
-  [StatusEnum.Meeting]: {
-    duration: DurationEnum.OneHour,
+import { jsxs as E, jsx as l } from "react/jsx-runtime";
+import { Tooltip as H, Box as z, Badge as B } from "@mui/material";
+import U from "@emotion/styled";
+import { lazy as m, useState as C, useEffect as q, useCallback as A, useMemo as F, Suspense as L } from "react";
+import { useMemoizedFn as T, useInterval as Q, useUnmount as G, useCreation as J } from "ahooks";
+import { useLocaleContext as K } from "@arcblock/ux/lib/Locale/context";
+import { translate as P } from "@arcblock/ux/lib/Locale/util";
+import { formatToDatetime as V } from "@arcblock/ux/lib/Util";
+import { StatusEnum as t, DurationEnum as c } from "../../../@types/index.js";
+import X from "../status-dialog/index.js";
+import { translations as Y } from "../../libs/locales.js";
+import { isNotClear as $, isWithinTimeRange as Z, getTimeRemaining as _ } from "./utils.js";
+const ee = m(() => import("@arcblock/icons/lib/Meeting")), oe = m(() => import("@arcblock/icons/lib/Community")), ne = m(() => import("@arcblock/icons/lib/Holiday")), te = m(() => import("@arcblock/icons/lib/OffSick")), ie = m(() => import("@arcblock/icons/lib/WorkingRemotely")), I = {
+  [t.Meeting]: ee,
+  [t.Community]: oe,
+  [t.Holiday]: ne,
+  [t.OffSick]: te,
+  [t.WorkingRemotely]: ie
+}, re = {
+  [t.Meeting]: {
+    duration: c.OneHour,
     durationName: "userStatus.duration.OneHour"
   },
-  [StatusEnum.Community]: {
-    duration: DurationEnum.ThirtyMinutes,
+  [t.Community]: {
+    duration: c.ThirtyMinutes,
     durationName: "userStatus.duration.ThirtyMinutes"
   },
-  [StatusEnum.Holiday]: {
-    duration: DurationEnum.ThisWeek,
+  [t.Holiday]: {
+    duration: c.ThisWeek,
     durationName: "userStatus.duration.ThisWeek"
   },
-  [StatusEnum.OffSick]: {
-    duration: DurationEnum.Today,
+  [t.OffSick]: {
+    duration: c.Today,
     durationName: "userStatus.duration.Today"
   },
-  [StatusEnum.WorkingRemotely]: {
-    duration: DurationEnum.ThisWeek,
+  [t.WorkingRemotely]: {
+    duration: c.ThisWeek,
     durationName: "userStatus.duration.ThisWeek"
   }
 };
-export default function UserStatus({
-  isMobile,
-  size,
-  isMyself,
-  status,
-  onChange,
-  timezone
+function ke({
+  isMobile: o,
+  size: R,
+  isMyself: g,
+  status: e,
+  onChange: s,
+  timezone: W
 }) {
-  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);
+  const { locale: d } = K(), u = T((n, i = {}) => P(Y, n, d, "en", i)), [b, p] = C(void 0), f = T(() => {
+    p(void 0);
   });
-  useEffect(() => {
-    setInterval(1e3);
-  }, [status]);
-  const clear = useInterval(() => {
-    if (status?.value && status?.dateRange?.length === 2) {
-      const notClear = isNotClear(status);
-      if (notClear) {
+  q(() => {
+    p(1e3);
+  }, [e]);
+  const N = Q(() => {
+    var n;
+    if (e != null && e.value && ((n = e == null ? void 0 : e.dateRange) == null ? void 0 : n.length) === 2) {
+      if ($(e))
         return;
+      if (!Z(e.dateRange))
+        f(), s(void 0);
+      else {
+        const a = _(e.dateRange[1]);
+        a > 0 ? p(a) : (f(), s(void 0));
       }
-      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();
+    } else
+      f();
+  }, b);
+  G(() => {
+    N();
   });
-  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) => {
-      const quickSetting = QuickSettings[StatusEnum[key]];
+  const [O, S] = C(null), x = A(() => Object.keys(c).map((i) => ({
+    id: c[i],
+    name: u(`userStatus.duration.${i}`)
+  })), [u]), h = J(() => {
+    const n = x();
+    return Object.keys(t).map((i) => {
+      const r = re[t[i]];
       return {
-        id: StatusEnum[key],
-        name: t(`userStatus.${key}`),
-        icon: StatusIconMap[StatusEnum[key]],
-        ...quickSetting ? { duration: quickSetting.duration, durationName: t(quickSetting.durationName) } : {},
-        children: durationData
+        id: t[i],
+        name: u(`userStatus.${i}`),
+        icon: I[t[i]],
+        ...r ? { duration: r.duration, durationName: u(r.durationName) } : {},
+        children: n
       };
     });
-  }, [t, getDurationData, locale]);
-  const onOpenStatusSelector = (event) => {
-    if (!isMyself) {
-      return;
-    }
-    setAnchorEl(event.currentTarget);
-  };
-  const onCloseStatusSelector = () => {
-    setAnchorEl(null);
-  };
-  const onStatusChange = (v) => {
-    if (!isMyself) {
-      return;
-    }
-    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";
-      let range;
-      const notClear = isNotClear(status);
-      if (!notClear) {
-        range = status?.dateRange?.map((item) => {
-          return formatToDatetime(item, { locale: localeOption });
-        });
-      }
-      if (range && range.length > 0) {
-        return `${currentStatus.name}: ${range.join("~")}`;
-      }
-      return currentStatus.name;
+  }, [u, x, d]), D = (n) => {
+    g && S(n.currentTarget);
+  }, y = () => {
+    S(null);
+  }, j = (n) => {
+    g && (s(n), y());
+  }, k = I[e == null ? void 0 : e.value], M = F(() => {
+    var i;
+    const n = h.find((r) => r.id === (e == null ? void 0 : e.value));
+    if (n) {
+      const r = d === "zh" ? "zh-cn" : "en-us";
+      let a;
+      return $(e) || (a = (i = e == null ? void 0 : e.dateRange) == null ? void 0 : i.map((w) => V(w, { locale: r }))), a && a.length > 0 ? `${n.name}: ${a.join("~")}` : n.name;
     }
     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,
+  }, [e, h, d]), v = !!O;
+  return /* @__PURE__ */ E(ae, { size: R, isMobile: o, children: [
+    /* @__PURE__ */ l(H, { title: M, children: /* @__PURE__ */ l(
+      z,
       {
         className: "status-icon",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        onClick: onOpenStatusSelector,
-        children: StatusIcon ? /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(StatusIcon, { style: { width: 16, height: 16 } }) }) : /* @__PURE__ */ jsx(Badge, { color: "success", variant: "dot" })
+        onClick: D,
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        children: k ? /* @__PURE__ */ l(L, { fallback: null, children: /* @__PURE__ */ l(k, { style: { width: 16, height: 16 } }) }) : /* @__PURE__ */ l(B, { color: "success", variant: "dot" })
       }
     ) }),
-    open && /* @__PURE__ */ jsx(
-      StatusDialog,
+    v && /* @__PURE__ */ l(
+      X,
       {
-        selected: status,
-        data: statusData,
-        open,
-        onSelect: onStatusChange,
-        onClose: onCloseStatusSelector,
-        timezone
+        selected: e,
+        data: h,
+        open: v,
+        onSelect: j,
+        onClose: y,
+        timezone: W
       }
     )
   ] });
 }
-const StatusDiv = styled("div")`
+const ae = U("div")`
   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"};
+  left: ${({ size: o }) => `${o * 3 / 4}px`};
+  top: ${({ size: o }) => `${o * 0.65}px`};
+  width: ${({ isMobile: o }) => o ? "22px" : "32px"};
+  height: ${({ isMobile: o }) => o ? "22px" : "32px"};
+  border-radius: ${({ isMobile: o }) => o ? "11px" : "16px"};
   display: flex;
   align-items: center;
   justify-content: center;
@@ -190,9 +144,12 @@ const StatusDiv = styled("div")`
 
   .status-icon {
     flex-shrink: 0;
-    width: ${({ isMobile }) => isMobile ? "16px" : "26px"};
-    height: ${({ isMobile }) => isMobile ? "16px" : "26px"};
-    border-radius: ${({ isMobile }) => isMobile ? "8px" : "13px"};
+    width: ${({ isMobile: o }) => o ? "16px" : "26px"};
+    height: ${({ isMobile: o }) => o ? "16px" : "26px"};
+    border-radius: ${({ isMobile: o }) => o ? "8px" : "13px"};
     background-color: #eff1f5;
   }
 `;
+export {
+  ke as default
+};