@blocklet/ui-react 2.9.13 → 2.9.14

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

@@ -0,0 +1,66 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Box, Chip, Typography } from "@mui/material";
+import { Icon } from "@iconify/react";
+import SwapHorizRoundedIcon from "@iconify-icons/material-symbols/swap-horiz-rounded";
+import { temp as colors } from "@arcblock/ux/lib/Colors";
+import DID from "@arcblock/ux/lib/DID";
+import { useCreation } from "ahooks";
+export default function UserBasicInfo({
+  user,
+  isMyself = true,
+  switchPassport,
+  ...rest
+}) {
+  const currentRole = useCreation(
+    () => (user?.passports || [])?.find((item) => item.name === user.role),
+    [user?.passports, user?.role]
+  );
+  return /* @__PURE__ */ jsxs(Box, { ...rest, children: [
+    /* @__PURE__ */ jsxs(
+      Typography,
+      {
+        variant: "h4",
+        sx: {
+          fontWeight: "bold",
+          display: "flex",
+          alignItems: "center",
+          gap: 1,
+          mb: 1
+        },
+        children: [
+          user?.fullName,
+          isMyself ? /* @__PURE__ */ jsx(
+            Chip,
+            {
+              label: currentRole?.title || user?.role || "Guest",
+              size: "small",
+              variant: "outlined",
+              sx: {
+                flexShrink: 0,
+                fontWeight: "bold",
+                fontSize: "12px",
+                color: colors.textBase,
+                borderColor: colors.strokeBorderStrong,
+                backgroundColor: "white",
+                textTransform: "capitalize",
+                pr: 1,
+                pl: 0.5,
+                "&:hover": {
+                  backgroundColor: "rgba(0, 0, 0, 0.04)"
+                },
+                "&:active": {
+                  boxShadow: "none"
+                }
+              },
+              clickable: true,
+              deleteIcon: /* @__PURE__ */ jsx(Icon, { icon: SwapHorizRoundedIcon, color: colors.textBase }),
+              onDelete: switchPassport,
+              onClick: switchPassport
+            }
+          ) : null
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(DID, { did: user.did, copyable: false })
+  ] });
+}

package/es/UserCenter/components/user-center.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { PaperProps } from '@mui/material';
+export default function UserCenter({ children, currentTab, contentProps, disableAutoRedirect, autoPopupSetting, }: {
+    children: any;
+    currentTab: string;
+    contentProps?: PaperProps;
+    disableAutoRedirect?: boolean;
+    autoPopupSetting?: boolean;
+}): import("react").JSX.Element | null;

package/es/UserCenter/components/user-center.js

@@ -0,0 +1,397 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { Box, CircularProgress, IconButton, Paper, Typography } from "@mui/material";
+import { useCreation, useMemoizedFn, useMount, useRequest } from "ahooks";
+import { Icon } from "@iconify/react";
+import SettingsOutlineRoundedIcon from "@iconify-icons/material-symbols/settings-outline-rounded";
+import { SessionContext } from "@arcblock/did-connect/lib/Session";
+import Avatar from "@arcblock/ux/lib/Avatar";
+import Tabs from "@arcblock/ux/lib/Tabs";
+import Empty from "@arcblock/ux/lib/Empty";
+import { temp as colors } from "@arcblock/ux/lib/Colors";
+import { useConfirm } from "@arcblock/ux/lib/Dialog";
+import { translate } from "@arcblock/ux/lib/Locale/util";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { ErrorFallback } from "@arcblock/ux/lib/ErrorBoundary";
+import cloneDeep from "lodash/cloneDeep";
+import { getQuery, withQuery } from "ufo";
+import Header from "../../Header/index.js";
+import { translations } from "../libs/locales.js";
+import banner from "../assets/banner.png";
+import UserInfo from "./user-info.js";
+import UserBasicInfo from "./user-basic-info.js";
+import { formatBlockletInfo, getLocalizedNavigation } from "../../blocklets.js";
+import Passport from "./passport.js";
+import Settings from "./settings.js";
+import { client } from "../libs/client.js";
+export default function UserCenter({
+  children,
+  currentTab,
+  contentProps = {},
+  disableAutoRedirect = false,
+  autoPopupSetting = false
+}) {
+  const { locale } = useLocaleContext();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, "en", data);
+  });
+  const sessionCtx = useContext(SessionContext);
+  const session = sessionCtx?.session;
+  const currentDid = useCreation(() => {
+    const currentUrl = window.location.href;
+    const query = getQuery(currentUrl);
+    if (query?.did) {
+      if (Array.isArray(query.did)) {
+        return query.did[0];
+      }
+      return query.did;
+    }
+    return session?.user?.did;
+  }, [session?.user?.did]);
+  const isMyself = useCreation(() => {
+    if (session?.user) {
+      return currentDid === session?.user?.did;
+    }
+    return false;
+  }, [currentDid, session?.user?.did]);
+  const userState = useRequest(
+    async () => {
+      if (isMyself) {
+        return session.user;
+      }
+      if (currentDid) {
+        return await client.user.getUserPublicInfo({ did: currentDid });
+      }
+      throw new Error(t("noUserFound"));
+    },
+    {
+      refreshDeps: [currentDid, isMyself]
+    }
+  );
+  const privacyState = useRequest(
+    async () => {
+      if (userState.data && currentTab) {
+        const config = await client.user.getUserPrivacyConfig({ did: currentDid });
+        return config;
+      }
+      return null;
+    },
+    {
+      refreshDeps: [currentDid, userState.data, currentTab],
+      loadingDelay: 300
+    }
+  );
+  const { confirmHolder, confirmApi } = useConfirm({
+    sx: {
+      ".MuiDialog-paper": {
+        borderRadius: 2
+      },
+      ".ux-dialog_title": {
+        fontWeight: 600
+      },
+      ".ux-dialog_closeButton": {
+        p: 1
+      },
+      ".MuiDialogActions-root": {
+        display: {
+          xs: "none",
+          md: "flex"
+        }
+      }
+    }
+  });
+  const formattedBlocklet = useCreation(() => {
+    const blocklet = cloneDeep(window.blocklet);
+    try {
+      return formatBlockletInfo(blocklet);
+    } catch (e) {
+      console.error("Failed to format blocklet info", e, blocklet);
+      return blocklet;
+    }
+  }, []);
+  const userCenterTabs = useCreation(() => {
+    const menus = formattedBlocklet?.navigation?.userCenter || [];
+    const localizedMenus = getLocalizedNavigation(menus, locale) || [];
+    return localizedMenus.map((x) => {
+      const value = x._rawLink ?? x.link;
+      return {
+        value,
+        label: x.title,
+        url: x.link,
+        protected: privacyState?.data?.[value] ?? false
+        // icon: x.icon,
+      };
+    });
+  }, [formattedBlocklet, userState.data, privacyState?.data]);
+  const currentActiveTab = useCreation(() => {
+    return userCenterTabs.find((x) => x.value === currentTab);
+  }, [userCenterTabs]);
+  const handleChangeTab = useMemoizedFn((value) => {
+    const findTab = userCenterTabs.find((x) => x.value === value);
+    if (findTab) {
+      window.location.href = withQuery(findTab.url, {
+        did: isMyself ? void 0 : currentDid
+      });
+    }
+  });
+  const xsGridTemplateAreas = useCreation(() => {
+    return [
+      '"avatar settings"',
+      '"basicInfo basicInfo"',
+      userCenterTabs.length > 0 || !isMyself ? '"tabs tabs"' : null,
+      isMyself ? '"passport passport"' : null,
+      isMyself ? '"extraInfo extraInfo"' : null
+    ];
+  }, [userCenterTabs, isMyself]);
+  const mdGridTemplateAreas = useCreation(() => {
+    if (!isMyself) {
+      return ['"avatar"', '"basicInfo"', '"tabs"'];
+    }
+    return [
+      '"avatar settings"',
+      '"basicInfo extraInfo"',
+      userCenterTabs.length > 0 ? '"tabs extraInfo"' : null,
+      '"passport extraInfo"'
+    ];
+  }, [userCenterTabs, isMyself]);
+  const openSettings = useMemoizedFn(() => {
+    confirmApi.open({
+      title: t("settings"),
+      content: /* @__PURE__ */ jsx(
+        Settings,
+        {
+          user: userState.data,
+          settings: {
+            userCenterTabs
+          },
+          sx: { mt: -2 },
+          onSave: async () => {
+            await privacyState.runAsync();
+            return privacyState.data;
+          }
+        }
+      ),
+      showCancelButton: false,
+      confirmButtonText: t("done"),
+      onConfirm: confirmApi.close
+    });
+  });
+  useMount(() => {
+    if (autoPopupSetting) {
+      openSettings();
+    }
+  });
+  const content = useCreation(() => {
+    if (userState.loading || session.loading) {
+      return null;
+    }
+    if (userState.error) {
+      const errorMessage = userState.error.response?.data?.error || userState.error.message || "error occurred";
+      const formatError = {
+        message: errorMessage
+      };
+      return /* @__PURE__ */ jsx(ErrorFallback, { error: formatError });
+    }
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        sx: {
+          maxWidth: 1200,
+          margin: "0 auto",
+          px: 3,
+          pb: 3,
+          display: "grid",
+          gap: 2.5,
+          gridTemplateAreas: {
+            xs: xsGridTemplateAreas.filter(Boolean).join(" "),
+            md: mdGridTemplateAreas.filter(Boolean).join(" ")
+          },
+          gridTemplateRows: {
+            xs: "64px auto auto auto",
+            md: "64px auto 1fr"
+          },
+          gridTemplateColumns: {
+            xs: "1fr",
+            md: isMyself ? "1fr 300px" : "1fr"
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+            Avatar,
+            {
+              src: userState.data?.avatar,
+              did: userState.data?.did,
+              size: 120,
+              variant: "circle",
+              shape: "circle",
+              style: {
+                border: "4px solid #fff",
+                transform: "translateY(-50%)",
+                borderRadius: "100%",
+                gridArea: "avatar",
+                backgroundColor: "#fff"
+              }
+            }
+          ) }),
+          isMyself ? /* @__PURE__ */ jsx(
+            Box,
+            {
+              sx: {
+                gridArea: "settings",
+                display: "flex",
+                justifyContent: "flex-end",
+                alignItems: "center"
+              },
+              children: /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  sx: {
+                    borderRadius: 2,
+                    color: colors.textBase,
+                    backgroundColor: "white",
+                    border: `1px solid ${colors.strokeBorderBase}`
+                  },
+                  disableFocusRipple: true,
+                  onClick: openSettings,
+                  children: /* @__PURE__ */ jsx(Icon, { icon: SettingsOutlineRoundedIcon })
+                }
+              )
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            UserBasicInfo,
+            {
+              isMyself,
+              switchPassport: session.switchPassport,
+              user: userState.data,
+              sx: {
+                gridArea: "basicInfo"
+              }
+            }
+          ),
+          userCenterTabs.length > 0 && currentTab ? /* @__PURE__ */ jsxs(
+            Box,
+            {
+              sx: {
+                gridArea: "tabs",
+                overflow: "auto",
+                padding: "1px"
+              },
+              children: [
+                /* @__PURE__ */ jsx(Tabs, { variant: "card", tabs: userCenterTabs, current: currentTab, onChange: handleChangeTab }),
+                !privacyState.data || privacyState.loading ? /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    sx: {
+                      height: "100%",
+                      minWidth: "160px",
+                      minHeight: "160px",
+                      display: "flex",
+                      justifyContent: "center",
+                      alignItems: "center"
+                    },
+                    children: /* @__PURE__ */ jsx(CircularProgress, { sx: { color: colors.primary100 } })
+                  }
+                ) : /* @__PURE__ */ jsx(Fragment, { children: currentActiveTab?.protected && !isMyself ? /* @__PURE__ */ jsx(Paper, { variant: "outlined", sx: { mt: 2, borderRadius: 2, p: 2 }, children: /* @__PURE__ */ jsx(Empty, { children: t("underProtected") }) }) : /* @__PURE__ */ jsx(Fragment, { children: children && /* @__PURE__ */ jsx(
+                  Paper,
+                  {
+                    ...contentProps,
+                    variant: "outlined",
+                    sx: { mt: 2, borderRadius: 2, p: 2, ...contentProps?.sx },
+                    children
+                  }
+                ) }) })
+              ]
+            }
+          ) : null,
+          !isMyself && userCenterTabs.length === 0 ? /* @__PURE__ */ jsx(
+            Box,
+            {
+              sx: {
+                gridArea: "tabs",
+                overflow: "auto",
+                padding: "1px"
+              },
+              children: /* @__PURE__ */ jsx(
+                Paper,
+                {
+                  variant: "outlined",
+                  sx: {
+                    borderRadius: 2,
+                    p: 2
+                  },
+                  children: /* @__PURE__ */ jsx(Empty, { children: t("emptyContent") })
+                }
+              )
+            }
+          ) : null,
+          isMyself ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs(
+              Box,
+              {
+                sx: {
+                  gridArea: "passport"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(Typography, { variant: "h5", sx: { fontWeight: "bold", mb: 1.5 }, children: "Passport" }),
+                  /* @__PURE__ */ jsx(Passport, { user: userState.data })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                sx: {
+                  gridArea: "extraInfo"
+                },
+                children: /* @__PURE__ */ jsx(
+                  UserInfo,
+                  {
+                    user: userState.data,
+                    sx: {
+                      padding: 3,
+                      borderRadius: 3
+                    }
+                  }
+                )
+              }
+            )
+          ] }) : null
+        ]
+      }
+    );
+  }, [userState, userCenterTabs, mdGridTemplateAreas, xsGridTemplateAreas]);
+  if (!disableAutoRedirect && !currentTab && formattedBlocklet?.navigation?.userCenter?.length > 0) {
+    window.location.replace(formattedBlocklet?.navigation?.userCenter[0]?.link);
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        backgroundColor: colors.backgroundsBgSubtitle,
+        minHeight: "100vh"
+      },
+      children: [
+        /* @__PURE__ */ jsx(Header, {}),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              pt: {
+                xs: `${400 / 1280 * 100}%`,
+                sm: `${300 / 1280 * 100}%`,
+                md: `${200 / 1280 * 100}%`
+              },
+              backgroundImage: `url(${banner})`,
+              backgroundSize: "cover",
+              minHeight: "60px"
+            }
+          }
+        ),
+        content,
+        confirmHolder
+      ]
+    }
+  );
+}

package/es/UserCenter/components/user-info-item.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+type TUserInfoItemProps = {
+    data: {
+        icon: any;
+        title: string;
+        content: any;
+    };
+};
+export default function UserInfoItem({ data }: TUserInfoItemProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,54 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Box, Typography } from "@mui/material";
+import { temp as colors } from "@arcblock/ux/lib/Colors";
+export default function UserInfoItem({ data }) {
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        display: "grid",
+        gridTemplateColumns: "auto 1fr",
+        gridTemplateAreas: `"icon title" ". content"`,
+        alignItems: "center",
+        rowGap: 0.75,
+        columnGap: 1
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              gridArea: "icon",
+              display: "flex",
+              alignItems: "center"
+            },
+            children: data.icon
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            sx: {
+              color: colors.textBase,
+              gridArea: "title",
+              fontSize: "14px"
+            },
+            children: data.title
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            sx: {
+              color: colors.textSubtitle,
+              whiteSpace: "pre-wrap",
+              gridArea: "content",
+              fontSize: "14px"
+            },
+            children: data.content
+          }
+        )
+      ]
+    }
+  );
+}

package/es/UserCenter/components/user-info.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { PaperProps } from '@mui/material';
+import type { User } from '../../@types';
+export default function UserInfo({ user, ...rest }: {
+    user: User;
+} & PaperProps): import("react").JSX.Element;

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

@@ -0,0 +1,68 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Paper } from "@mui/material";
+import { Icon } from "@iconify/react";
+import { useMemoizedFn, useCreation } from "ahooks";
+import MailOutlineRoundedIcon from "@iconify-icons/material-symbols/mail-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";
+import { translate } from "@arcblock/ux/lib/Locale/util";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import RelativeTime from "@arcblock/ux/lib/RelativeTime";
+import UserInfoItem from "./user-info-item.js";
+import { translations } from "../libs/locales.js";
+export default function UserInfo({
+  user,
+  ...rest
+}) {
+  const { locale } = useLocaleContext();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, "en", data);
+  });
+  const readableProvider = useCreation(() => {
+    const nameMap = {
+      wallet: "DID Wallet",
+      auth0: "Auth0"
+    };
+    return nameMap[user.sourceProvider] || t("unknown");
+  }, [user?.sourceProvider]);
+  const userInfoListData = [];
+  userInfoListData.push({
+    icon: /* @__PURE__ */ jsx(Icon, { fontSize: 16, icon: MailOutlineRoundedIcon }),
+    title: t("email"),
+    content: user?.email || t("emptyField")
+  });
+  userInfoListData.push({
+    icon: /* @__PURE__ */ jsx(Icon, { fontSize: 16, icon: ScheduleOutlineRoundedIcon }),
+    title: t("lastLogin"),
+    content: /* @__PURE__ */ jsx(Fragment, { children: user?.lastLoginAt || user?.lastLoginIp ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      user?.lastLoginAt ? /* @__PURE__ */ jsx(RelativeTime, { locale, value: user?.lastLoginAt }) : null,
+      user?.lastLoginAt && user?.lastLoginIp ? /* @__PURE__ */ jsx("br", {}) : null,
+      user?.lastLoginIp
+    ] }) : t("unknown") })
+  });
+  userInfoListData.push({
+    icon: /* @__PURE__ */ jsx(Icon, { fontSize: 16, icon: MoreTimeRoundedIcon }),
+    title: t("createdAt"),
+    content: user?.createdAt ? /* @__PURE__ */ jsx(RelativeTime, { locale, value: user?.createdAt }) : t("unknown")
+  });
+  userInfoListData.push({
+    icon: /* @__PURE__ */ jsx(Icon, { fontSize: 16, icon: CaptivePortalRoundedIcon }),
+    title: t("registerFrom"),
+    content: readableProvider
+  });
+  return /* @__PURE__ */ jsx(
+    Paper,
+    {
+      variant: "outlined",
+      ...rest,
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 3,
+        ...rest?.sx
+      },
+      children: userInfoListData.map((item) => /* @__PURE__ */ jsx(UserInfoItem, { data: item }, item.title))
+    }
+  );
+}

package/es/UserCenter/components/webhook-item.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { WebhookItemProps } from '../../@types';
+export default function WebhookItem({ onTest, onDelete, onSave, onCancel, type, url, edit, }: WebhookItemProps): import("react").JSX.Element;