@blocklet/ui-react 2.9.13 → 2.9.14

package/lib/UserCenter/components/settings.js

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = Settings;
+var _jsxRuntime = require("react/jsx-runtime");
+var _Tabs = _interopRequireDefault(require("@arcblock/ux/lib/Tabs"));
+var _material = require("@mui/material");
+var _ahooks = require("ahooks");
+var _util = require("@arcblock/ux/lib/Locale/util");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _locales = require("../libs/locales");
+var _notification = _interopRequireDefault(require("./notification"));
+var _privacy = _interopRequireDefault(require("./privacy"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function Settings({
+  user,
+  settings,
+  onSave,
+  ...rest
+}) {
+  const {
+    locale
+  } = (0, _context.useLocaleContext)();
+  const t = (0, _ahooks.useMemoizedFn)((key, data = {}) => {
+    return (0, _util.translate)(_locales.translations, key, locale, "en", data);
+  });
+  const privacyConfigList = (0, _ahooks.useCreation)(() => {
+    const userCenterTabs = settings?.userCenterTabs || [];
+    return userCenterTabs.map(item => {
+      return {
+        key: item.value,
+        name: item.label,
+        value: item.protected
+      };
+    });
+  }, [settings?.userCenterTabs]);
+  const tabs = (0, _ahooks.useCreation)(() => {
+    return [{
+      label: t("notificationManagement"),
+      value: "notification",
+      content: /* @__PURE__ */(0, _jsxRuntime.jsx)(_notification.default, {
+        user
+      })
+    }, {
+      label: t("privacyManagement"),
+      value: "privacy",
+      content: /* @__PURE__ */(0, _jsxRuntime.jsx)(_privacy.default, {
+        configList: privacyConfigList,
+        onSave
+      })
+    }];
+  }, [user, privacyConfigList]);
+  const currentState = (0, _ahooks.useReactive)({
+    tab: tabs[0].value
+  });
+  const currentTab = (0, _ahooks.useCreation)(() => {
+    return tabs.find(x => x.value === currentState.tab);
+  }, [currentState.tab]);
+  const handleChangeTab = (0, _ahooks.useMemoizedFn)(value => {
+    currentState.tab = value;
+  });
+  return currentTab && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+    ...rest,
+    sx: {
+      ...rest?.sx,
+      width: 520,
+      maxWidth: "100%"
+    },
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_Tabs.default, {
+      variant: "card",
+      tabs,
+      current: currentTab.value,
+      onChange: handleChangeTab
+    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+      mt: 2.5,
+      children: currentTab.content
+    })]
+  });
+}

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

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

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

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = UserBasicInfo;
+var _jsxRuntime = require("react/jsx-runtime");
+var _material = require("@mui/material");
+var _react = require("@iconify/react");
+var _swapHorizRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/swap-horiz-rounded"));
+var _Colors = require("@arcblock/ux/lib/Colors");
+var _DID = _interopRequireDefault(require("@arcblock/ux/lib/DID"));
+var _ahooks = require("ahooks");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function UserBasicInfo({
+  user,
+  isMyself = true,
+  switchPassport,
+  ...rest
+}) {
+  const currentRole = (0, _ahooks.useCreation)(() => (user?.passports || [])?.find(item => item.name === user.role), [user?.passports, user?.role]);
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+    ...rest,
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+      variant: "h4",
+      sx: {
+        fontWeight: "bold",
+        display: "flex",
+        alignItems: "center",
+        gap: 1,
+        mb: 1
+      },
+      children: [user?.fullName, isMyself ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Chip, {
+        label: currentRole?.title || user?.role || "Guest",
+        size: "small",
+        variant: "outlined",
+        sx: {
+          flexShrink: 0,
+          fontWeight: "bold",
+          fontSize: "12px",
+          color: _Colors.temp.textBase,
+          borderColor: _Colors.temp.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__ */(0, _jsxRuntime.jsx)(_react.Icon, {
+          icon: _swapHorizRounded.default,
+          color: _Colors.temp.textBase
+        }),
+        onDelete: switchPassport,
+        onClick: switchPassport
+      }) : null]
+    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_DID.default, {
+      did: user.did,
+      copyable: false
+    })]
+  });
+}

package/lib/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/lib/UserCenter/components/user-center.js

@@ -0,0 +1,376 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = UserCenter;
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _material = require("@mui/material");
+var _ahooks = require("ahooks");
+var _react2 = require("@iconify/react");
+var _settingsOutlineRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/settings-outline-rounded"));
+var _Session = require("@arcblock/did-connect/lib/Session");
+var _Avatar = _interopRequireDefault(require("@arcblock/ux/lib/Avatar"));
+var _Tabs = _interopRequireDefault(require("@arcblock/ux/lib/Tabs"));
+var _Empty = _interopRequireDefault(require("@arcblock/ux/lib/Empty"));
+var _Colors = require("@arcblock/ux/lib/Colors");
+var _Dialog = require("@arcblock/ux/lib/Dialog");
+var _util = require("@arcblock/ux/lib/Locale/util");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _ErrorBoundary = require("@arcblock/ux/lib/ErrorBoundary");
+var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
+var _ufo = require("ufo");
+var _Header = _interopRequireDefault(require("../../Header"));
+var _locales = require("../libs/locales");
+var _banner = _interopRequireDefault(require("../assets/banner.png"));
+var _userInfo = _interopRequireDefault(require("./user-info"));
+var _userBasicInfo = _interopRequireDefault(require("./user-basic-info"));
+var _blocklets = require("../../blocklets");
+var _passport = _interopRequireDefault(require("./passport"));
+var _settings = _interopRequireDefault(require("./settings"));
+var _client = require("../libs/client");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function UserCenter({
+  children,
+  currentTab,
+  contentProps = {},
+  disableAutoRedirect = false,
+  autoPopupSetting = false
+}) {
+  const {
+    locale
+  } = (0, _context.useLocaleContext)();
+  const t = (0, _ahooks.useMemoizedFn)((key, data = {}) => {
+    return (0, _util.translate)(_locales.translations, key, locale, "en", data);
+  });
+  const sessionCtx = (0, _react.useContext)(_Session.SessionContext);
+  const session = sessionCtx?.session;
+  const currentDid = (0, _ahooks.useCreation)(() => {
+    const currentUrl = window.location.href;
+    const query = (0, _ufo.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 = (0, _ahooks.useCreation)(() => {
+    if (session?.user) {
+      return currentDid === session?.user?.did;
+    }
+    return false;
+  }, [currentDid, session?.user?.did]);
+  const userState = (0, _ahooks.useRequest)(async () => {
+    if (isMyself) {
+      return session.user;
+    }
+    if (currentDid) {
+      return await _client.client.user.getUserPublicInfo({
+        did: currentDid
+      });
+    }
+    throw new Error(t("noUserFound"));
+  }, {
+    refreshDeps: [currentDid, isMyself]
+  });
+  const privacyState = (0, _ahooks.useRequest)(async () => {
+    if (userState.data && currentTab) {
+      const config = await _client.client.user.getUserPrivacyConfig({
+        did: currentDid
+      });
+      return config;
+    }
+    return null;
+  }, {
+    refreshDeps: [currentDid, userState.data, currentTab],
+    loadingDelay: 300
+  });
+  const {
+    confirmHolder,
+    confirmApi
+  } = (0, _Dialog.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 = (0, _ahooks.useCreation)(() => {
+    const blocklet = (0, _cloneDeep.default)(window.blocklet);
+    try {
+      return (0, _blocklets.formatBlockletInfo)(blocklet);
+    } catch (e) {
+      console.error("Failed to format blocklet info", e, blocklet);
+      return blocklet;
+    }
+  }, []);
+  const userCenterTabs = (0, _ahooks.useCreation)(() => {
+    const menus = formattedBlocklet?.navigation?.userCenter || [];
+    const localizedMenus = (0, _blocklets.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 = (0, _ahooks.useCreation)(() => {
+    return userCenterTabs.find(x => x.value === currentTab);
+  }, [userCenterTabs]);
+  const handleChangeTab = (0, _ahooks.useMemoizedFn)(value => {
+    const findTab = userCenterTabs.find(x => x.value === value);
+    if (findTab) {
+      window.location.href = (0, _ufo.withQuery)(findTab.url, {
+        did: isMyself ? void 0 : currentDid
+      });
+    }
+  });
+  const xsGridTemplateAreas = (0, _ahooks.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 = (0, _ahooks.useCreation)(() => {
+    if (!isMyself) {
+      return ['"avatar"', '"basicInfo"', '"tabs"'];
+    }
+    return ['"avatar settings"', '"basicInfo extraInfo"', userCenterTabs.length > 0 ? '"tabs extraInfo"' : null, '"passport extraInfo"'];
+  }, [userCenterTabs, isMyself]);
+  const openSettings = (0, _ahooks.useMemoizedFn)(() => {
+    confirmApi.open({
+      title: t("settings"),
+      content: /* @__PURE__ */(0, _jsxRuntime.jsx)(_settings.default, {
+        user: userState.data,
+        settings: {
+          userCenterTabs
+        },
+        sx: {
+          mt: -2
+        },
+        onSave: async () => {
+          await privacyState.runAsync();
+          return privacyState.data;
+        }
+      }),
+      showCancelButton: false,
+      confirmButtonText: t("done"),
+      onConfirm: confirmApi.close
+    });
+  });
+  (0, _ahooks.useMount)(() => {
+    if (autoPopupSetting) {
+      openSettings();
+    }
+  });
+  const content = (0, _ahooks.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__ */(0, _jsxRuntime.jsx)(_ErrorBoundary.ErrorFallback, {
+        error: formatError
+      });
+    }
+    return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.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__ */(0, _jsxRuntime.jsx)(_material.Box, {
+        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_Avatar.default, {
+          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__ */(0, _jsxRuntime.jsx)(_material.Box, {
+        sx: {
+          gridArea: "settings",
+          display: "flex",
+          justifyContent: "flex-end",
+          alignItems: "center"
+        },
+        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.IconButton, {
+          sx: {
+            borderRadius: 2,
+            color: _Colors.temp.textBase,
+            backgroundColor: "white",
+            border: `1px solid ${_Colors.temp.strokeBorderBase}`
+          },
+          disableFocusRipple: true,
+          onClick: openSettings,
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_react2.Icon, {
+            icon: _settingsOutlineRounded.default
+          })
+        })
+      }) : null, /* @__PURE__ */(0, _jsxRuntime.jsx)(_userBasicInfo.default, {
+        isMyself,
+        switchPassport: session.switchPassport,
+        user: userState.data,
+        sx: {
+          gridArea: "basicInfo"
+        }
+      }), userCenterTabs.length > 0 && currentTab ? /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+        sx: {
+          gridArea: "tabs",
+          overflow: "auto",
+          padding: "1px"
+        },
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_Tabs.default, {
+          variant: "card",
+          tabs: userCenterTabs,
+          current: currentTab,
+          onChange: handleChangeTab
+        }), !privacyState.data || privacyState.loading ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          sx: {
+            height: "100%",
+            minWidth: "160px",
+            minHeight: "160px",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center"
+          },
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {
+            sx: {
+              color: _Colors.temp.primary100
+            }
+          })
+        }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+          children: currentActiveTab?.protected && !isMyself ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Paper, {
+            variant: "outlined",
+            sx: {
+              mt: 2,
+              borderRadius: 2,
+              p: 2
+            },
+            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_Empty.default, {
+              children: t("underProtected")
+            })
+          }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+            children: children && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Paper, {
+              ...contentProps,
+              variant: "outlined",
+              sx: {
+                mt: 2,
+                borderRadius: 2,
+                p: 2,
+                ...contentProps?.sx
+              },
+              children
+            })
+          })
+        })]
+      }) : null, !isMyself && userCenterTabs.length === 0 ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+        sx: {
+          gridArea: "tabs",
+          overflow: "auto",
+          padding: "1px"
+        },
+        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Paper, {
+          variant: "outlined",
+          sx: {
+            borderRadius: 2,
+            p: 2
+          },
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_Empty.default, {
+            children: t("emptyContent")
+          })
+        })
+      }) : null, isMyself ? /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+          sx: {
+            gridArea: "passport"
+          },
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            variant: "h5",
+            sx: {
+              fontWeight: "bold",
+              mb: 1.5
+            },
+            children: "Passport"
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_passport.default, {
+            user: userState.data
+          })]
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          sx: {
+            gridArea: "extraInfo"
+          },
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_userInfo.default, {
+            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__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+    sx: {
+      backgroundColor: _Colors.temp.backgroundsBgSubtitle,
+      minHeight: "100vh"
+    },
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_Header.default, {}), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+      sx: {
+        pt: {
+          xs: `${400 / 1280 * 100}%`,
+          sm: `${300 / 1280 * 100}%`,
+          md: `${200 / 1280 * 100}%`
+        },
+        backgroundImage: `url(${_banner.default})`,
+        backgroundSize: "cover",
+        minHeight: "60px"
+      }
+    }), content, confirmHolder]
+  });
+}

package/lib/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/lib/UserCenter/components/user-info-item.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = UserInfoItem;
+var _jsxRuntime = require("react/jsx-runtime");
+var _material = require("@mui/material");
+var _Colors = require("@arcblock/ux/lib/Colors");
+function UserInfoItem({
+  data
+}) {
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+    sx: {
+      display: "grid",
+      gridTemplateColumns: "auto 1fr",
+      gridTemplateAreas: `"icon title" ". content"`,
+      alignItems: "center",
+      rowGap: 0.75,
+      columnGap: 1
+    },
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+      sx: {
+        gridArea: "icon",
+        display: "flex",
+        alignItems: "center"
+      },
+      children: data.icon
+    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+      sx: {
+        color: _Colors.temp.textBase,
+        gridArea: "title",
+        fontSize: "14px"
+      },
+      children: data.title
+    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+      sx: {
+        color: _Colors.temp.textSubtitle,
+        whiteSpace: "pre-wrap",
+        gridArea: "content",
+        fontSize: "14px"
+      },
+      children: data.content
+    })]
+  });
+}

package/lib/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;