@blocklet/ui-react 2.9.90 → 2.10.0

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

@@ -1,414 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useContext } from "react";
-import { Box, CircularProgress, Typography } from "@mui/material";
-import { useCreation, useMemoizedFn, useMount, useRequest, useUpdateEffect } from "ahooks";
-import pWaitFor from "p-wait-for";
-import { SessionContext } from "@arcblock/did-connect/lib/Session";
-import Tabs from "@arcblock/ux/lib/Tabs";
-import Empty from "@arcblock/ux/lib/Empty";
-import Button from "@arcblock/ux/lib/Button";
-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 Footer from "../../Footer/index.js";
-import Header from "../../Header/index.js";
-import { translations } from "../libs/locales.js";
-import { UserInfo, UserBasicInfo } from "./user-info/index.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,
-  notLoginContent = null,
-  currentTab,
-  contentProps = {},
-  disableAutoRedirect = false,
-  autoPopupSetting = false,
-  hideFooter = false,
-  headerProps = {},
-  footerProps = {},
-  userDid = void 0,
-  stickySidebar = 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(() => {
-    if (userDid) {
-      return userDid;
-    }
-    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, userDid]);
-  const isMyself = useCreation(() => {
-    if (session?.user) {
-      return currentDid === session?.user?.did;
-    }
-    return false;
-  }, [currentDid, session?.user?.did]);
-  const userState = useRequest(
-    // eslint-disable-next-line consistent-return
-    async () => {
-      await pWaitFor(() => session?.initialized);
-      if (isMyself) {
-        return session.user;
-      }
-      if (currentDid) {
-        return client.user.getUserPublicInfo({ did: currentDid });
-      }
-    },
-    {
-      refreshDeps: [currentDid, isMyself, session?.initialized, session?.user]
-    }
-  );
-  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,
-        maxWidth: 1200
-      },
-      ".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, locale]);
-  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 settingContent = useCreation(() => {
-    return /* @__PURE__ */ jsx(
-      Settings,
-      {
-        user: userState.data,
-        settings: { userCenterTabs },
-        onSave: async () => {
-          await privacyState.runAsync();
-          return privacyState.data;
-        }
-      }
-    );
-  }, [userState.data]);
-  const openSettings = useMemoizedFn(() => {
-    confirmApi.open({
-      title: t("settings"),
-      content: settingContent,
-      showCancelButton: false,
-      confirmButtonText: t("done"),
-      onConfirm: confirmApi.close
-    });
-  });
-  useUpdateEffect(() => {
-    confirmApi.update({
-      content: settingContent
-    });
-  }, [settingContent]);
-  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(Box, { sx: { width: "100%" }, children: /* @__PURE__ */ jsx(ErrorFallback, { error: formatError }) });
-    }
-    if (!currentDid && !userState.data) {
-      if (notLoginContent) {
-        return notLoginContent;
-      }
-      return /* @__PURE__ */ jsx(Box, { sx: { width: "100%" }, children: /* @__PURE__ */ jsxs(
-        Box,
-        {
-          sx: {
-            display: "flex",
-            flexDirection: "column",
-            justifyContent: "center",
-            alignItems: "center",
-            gap: 1
-          },
-          children: [
-            /* @__PURE__ */ jsx(Empty, { children: t("viewAfterLogin") }),
-            /* @__PURE__ */ jsx(Button, { size: "small", variant: "contained", onClick: () => session.login(), children: t("loginNow") })
-          ]
-        }
-      ) });
-    }
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs(Box, { sx: { flex: 1, overflow: "hidden" }, children: [
-        userState?.data?.fullName ? /* @__PURE__ */ jsx(
-          Typography,
-          {
-            variant: "h4",
-            sx: {
-              py: 1.5,
-              fontWeight: 700,
-              display: {
-                xs: "none",
-                md: "block"
-              }
-            },
-            children: userState.data.fullName
-          }
-        ) : null,
-        /* @__PURE__ */ jsx(
-          UserBasicInfo,
-          {
-            isMyself,
-            switchPassport: session.switchPassport,
-            switchProfile: session.switchProfile,
-            openSettings,
-            user: userState.data,
-            showFullDid: false,
-            sx: {
-              display: {
-                md: "none",
-                xs: "block"
-              },
-              mb: 1.5
-            }
-          }
-        ),
-        userCenterTabs.length > 0 && currentTab ? /* @__PURE__ */ jsxs(
-          Box,
-          {
-            sx: {
-              overflow: "auto",
-              padding: "1px"
-            },
-            children: [
-              /* @__PURE__ */ jsx(
-                Tabs,
-                {
-                  variant: "line",
-                  tabs: userCenterTabs,
-                  current: currentTab,
-                  onChange: handleChangeTab,
-                  sx: { mb: 1.5 }
-                }
-              ),
-              !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 } })
-                }
-              ) : (
-                // eslint-disable-next-line react/jsx-no-useless-fragment
-                /* @__PURE__ */ jsx(Fragment, { children: currentActiveTab?.protected && !isMyself ? /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Empty, { children: t("underProtected") }) }) : (
-                  // eslint-disable-next-line react/jsx-no-useless-fragment
-                  /* @__PURE__ */ jsx(Fragment, { children: children && /* @__PURE__ */ jsx(Box, { ...contentProps, children }) })
-                ) })
-              )
-            ]
-          }
-        ) : null,
-        userCenterTabs.length === 0 ? /* @__PURE__ */ jsx(
-          Box,
-          {
-            sx: {
-              display: {
-                xs: isMyself ? "none" : "block",
-                md: "block"
-              },
-              py: 3
-            },
-            children: /* @__PURE__ */ jsx(Empty, { children: t("emptyContent") })
-          }
-        ) : null
-      ] }),
-      /* @__PURE__ */ jsx(
-        Box,
-        {
-          sx: {
-            display: {
-              xs: "none",
-              md: "block"
-            },
-            width: "1px",
-            my: -3,
-            backgroundColor: colors.strokeSep
-          }
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Box,
-        {
-          sx: {
-            width: {
-              sx: "100%",
-              md: 420
-            },
-            maxWidth: "100%",
-            position: "relative"
-          },
-          children: /* @__PURE__ */ jsxs(
-            Box,
-            {
-              sx: {
-                display: "flex",
-                flexDirection: "column",
-                gap: 2.5,
-                position: {
-                  xs: "static",
-                  md: stickySidebar ? "sticky" : "static"
-                },
-                top: (theme) => stickySidebar ? theme.spacing(3) : "unset"
-              },
-              children: [
-                /* @__PURE__ */ jsx(
-                  UserBasicInfo,
-                  {
-                    isMyself,
-                    switchPassport: session.switchPassport,
-                    switchProfile: session.switchProfile,
-                    openSettings,
-                    user: userState.data,
-                    sx: {
-                      display: {
-                        xs: "none",
-                        md: "block"
-                      }
-                    }
-                  }
-                ),
-                isMyself ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsxs(Box, { children: [
-                    /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: 600, mb: 1.5 }, children: t("myInfo") }),
-                    /* @__PURE__ */ jsx(UserInfo, { user: userState.data })
-                  ] }),
-                  /* @__PURE__ */ jsxs(Box, { children: [
-                    /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: 600, mb: 1.5 }, children: t("passport") }),
-                    /* @__PURE__ */ jsx(Passport, { user: userState.data })
-                  ] })
-                ] }) : null
-              ]
-            }
-          )
-        }
-      )
-    ] });
-  }, [userState, userCenterTabs, isMyself, currentActiveTab, privacyState, currentTab, stickySidebar]);
-  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",
-        display: "flex",
-        flexDirection: "column"
-      },
-      children: [
-        /* @__PURE__ */ jsx(Header, { bordered: true, ...headerProps }),
-        /* @__PURE__ */ jsxs(
-          Box,
-          {
-            flex: 1,
-            sx: {
-              width: "100%",
-              maxWidth: 1200,
-              margin: "0 auto",
-              p: 3,
-              display: "flex",
-              alignItems: "stretch",
-              flexDirection: {
-                xs: "column",
-                md: "row"
-              },
-              gap: 2.5
-            },
-            children: [
-              content,
-              confirmHolder
-            ]
-          }
-        ),
-        hideFooter ? null : /* @__PURE__ */ jsx(Footer, { bordered: true, ...footerProps })
-      ]
-    }
-  );
-}

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

@@ -1,3 +0,0 @@
-export { default as UserBasicInfo } from './user-basic-info';
-export { default as UserInfoItem } from './user-info-item';
-export { default as UserInfo } from './user-info';

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

@@ -1,3 +0,0 @@
-export { default as UserBasicInfo } from "./user-basic-info.js";
-export { default as UserInfoItem } from "./user-info-item.js";
-export { default as UserInfo } from "./user-info.js";

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

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-import type { BoxProps } from '@mui/material';
-import type { User } from '../../../@types';
-export default function UserBasicInfo({ user, isMyself, showFullDid, switchPassport, switchProfile, openSettings, ...rest }: {
-    user: User;
-    isMyself?: boolean;
-    showFullDid?: boolean;
-    switchPassport: () => void;
-    switchProfile: () => void;
-    openSettings: () => void;
-} & BoxProps): import("react").JSX.Element | null;

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

@@ -1,151 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Box, Chip, IconButton, Typography } from "@mui/material";
-import { Icon } from "@iconify/react";
-import SwapHorizRoundedIcon from "@iconify-icons/material-symbols/swap-horiz-rounded";
-import SettingsOutlineRoundedIcon from "@iconify-icons/material-symbols/settings-outline-rounded";
-import Avatar from "@arcblock/ux/lib/Avatar";
-import { temp as colors } from "@arcblock/ux/lib/Colors";
-import { useTheme } from "@arcblock/ux/lib/Theme";
-import DID from "@arcblock/ux/lib/DID";
-import { useCreation, 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 { translations } from "../../libs/locales.js";
-export default function UserBasicInfo({
-  user,
-  isMyself = true,
-  showFullDid = true,
-  switchPassport,
-  switchProfile,
-  openSettings,
-  ...rest
-}) {
-  const { locale } = useLocaleContext();
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, "en", data);
-  });
-  const currentRole = useCreation(
-    () => (user?.passports || [])?.find((item) => item.name === user.role),
-    [user?.passports, user?.role]
-  );
-  const theme = useTheme();
-  const isSmallView = theme.breakpoints.down("md");
-  if (!user) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      ...rest,
-      sx: {
-        position: "relative",
-        ...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",
-              position: "relative",
-              overflow: "hidden",
-              mb: 1.5,
-              ...isMyself ? {
-                cursor: "pointer",
-                "&:hover": {
-                  "&::after": {
-                    content: `"${t("switchProfile")}"`
-                  }
-                },
-                "&::after": {
-                  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(
-          Typography,
-          {
-            variant: "h6",
-            sx: {
-              fontWeight: "bold",
-              display: "flex",
-              alignItems: "center",
-              gap: 1,
-              fontSize: "24px !important"
-            },
-            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: "transparent",
-                    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, showQrcode: true, copyable: true, compact: !showFullDid, responsive: !showFullDid, locale }),
-        isMyself ? /* @__PURE__ */ jsx(
-          IconButton,
-          {
-            sx: {
-              borderRadius: 2,
-              color: colors.textBase,
-              backgroundColor: "white",
-              border: `1px solid ${colors.strokeBorderBase}`,
-              position: "absolute",
-              top: 0,
-              right: 0
-            },
-            disableFocusRipple: true,
-            onClick: openSettings,
-            children: /* @__PURE__ */ jsx(Icon, { icon: SettingsOutlineRoundedIcon })
-          }
-        ) : null
-      ]
-    }
-  );
-}

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

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

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

@@ -1,47 +0,0 @@
-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, ...rest }) {
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      ...rest,
-      sx: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        ...rest.sx
-      },
-      children: [
-        /* @__PURE__ */ jsxs(
-          Typography,
-          {
-            sx: {
-              display: "flex",
-              alignItems: "center",
-              color: colors.textBase,
-              fontSize: "14px",
-              gap: 1,
-              fontWeight: 500
-            },
-            children: [
-              data.icon,
-              data.title
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Typography,
-          {
-            sx: {
-              color: colors.textSubtitle,
-              whiteSpace: "pre-wrap",
-              fontSize: "14px"
-            },
-            children: data.content
-          }
-        )
-      ]
-    }
-  );
-}

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

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