@blocklet/ui-react 2.9.91 → 2.10.0

package/lib/UserCenter/components/third-party-login/third-party-item.js

@@ -1,89 +1,66 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-module.exports = ThirdPartyItem;
-var _jsxRuntime = require("react/jsx-runtime");
-var _react = require("@iconify/react");
-var _material = require("@mui/material");
-var _linkRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/link-rounded"));
-var _Colors = require("@arcblock/ux/lib/Colors");
-var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
-var _Avatar = _interopRequireDefault(require("@arcblock/ux/lib/Avatar"));
-var _ahooks = require("ahooks");
-var _util = require("@arcblock/ux/lib/Locale/util");
-var _Dialog = require("@arcblock/ux/lib/Dialog");
-var _context = require("@arcblock/ux/lib/Locale/context");
-var _mailOutlineRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/mail-outline-rounded"));
-var _infoOutlineRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/info-outline-rounded"));
-var _apple = _interopRequireDefault(require("@iconify-icons/logos/apple"));
-var _githubIcon = _interopRequireDefault(require("@iconify-icons/logos/github-icon"));
-var _googleIcon = _interopRequireDefault(require("@iconify-icons/logos/google-icon"));
-var _Session = require("@arcblock/did-connect/lib/Session");
-var _react2 = require("react");
-var _pick = _interopRequireDefault(require("lodash/pick"));
-var _federated = require("@arcblock/ux/lib/Util/federated");
-var _constant = require("@arcblock/ux/lib/Util/constant");
-var _locales = require("../../libs/locales");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function ThirdPartyItem({
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Icon } from "@iconify/react";
+import { Box, Tooltip, Typography } from "@mui/material";
+import LinkRoundedIcon from "@iconify-icons/material-symbols/link-rounded";
+import { temp as colors } from "@arcblock/ux/lib/Colors";
+import Button from "@arcblock/ux/lib/Button";
+import Avatar from "@arcblock/ux/lib/Avatar";
+import { useCreation, useMemoizedFn, useReactive } from "ahooks";
+import { translate } from "@arcblock/ux/lib/Locale/util";
+import { useConfirm } from "@arcblock/ux/lib/Dialog";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import MailOutlineRoundedIcon from "@iconify-icons/material-symbols/mail-outline-rounded";
+import InfoOutlineRoundedIcon from "@iconify-icons/material-symbols/info-outline-rounded";
+import AppleIcon from "@iconify-icons/logos/apple";
+import GithubIcon from "@iconify-icons/logos/github-icon";
+import GoogleIcon from "@iconify-icons/logos/google-icon";
+import { SessionContext } from "@arcblock/did-connect/lib/Session";
+import { useContext } from "react";
+import pick from "lodash/pick";
+import { getFederatedEnabled, getMaster } from "@arcblock/ux/lib/Util/federated";
+import { LOGIN_PROVIDER, OAUTH_PROVIDER } from "@arcblock/ux/lib/Util/constant";
+import { translations } from "../../libs/locales.js";
+export default function ThirdPartyItem({
   item
 }) {
-  const {
-    confirmApi,
-    confirmHolder
-  } = (0, _Dialog.useConfirm)();
-  const currentState = (0, _ahooks.useReactive)({
+  const { confirmApi, confirmHolder } = useConfirm();
+  const currentState = useReactive({
     loading: false
   });
-  const {
-    locale
-  } = (0, _context.useLocaleContext)();
-  const t = (0, _ahooks.useMemoizedFn)((key, data = {}) => {
-    return (0, _util.translate)(_locales.translations, key, locale, "en", data);
+  const { locale } = useLocaleContext();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, "en", data);
   });
-  const {
-    session
-  } = (0, _react2.useContext)(_Session.SessionContext);
-  const {
-    bindOAuth,
-    unbindOAuth,
-    setBaseUrl,
-    baseUrl: oauthBaseUrl
-  } = session.useOAuth();
+  const { session } = useContext(SessionContext);
+  const { bindOAuth, unbindOAuth, setBaseUrl, baseUrl: oauthBaseUrl } = session.useOAuth();
   const iconMap = {
     // email: MailOutlineRoundedIcon,
-    [_constant.LOGIN_PROVIDER.AUTH0]: _mailOutlineRounded.default,
-    [_constant.LOGIN_PROVIDER.APPLE]: _apple.default,
-    [_constant.LOGIN_PROVIDER.GITHUB]: _githubIcon.default,
-    [_constant.LOGIN_PROVIDER.GOOGLE]: _googleIcon.default
+    [LOGIN_PROVIDER.AUTH0]: MailOutlineRoundedIcon,
+    [LOGIN_PROVIDER.APPLE]: AppleIcon,
+    [LOGIN_PROVIDER.GITHUB]: GithubIcon,
+    [LOGIN_PROVIDER.GOOGLE]: GoogleIcon
   };
-  const icon = (0, _ahooks.useCreation)(() => {
+  const icon = useCreation(() => {
     return iconMap[item?.provider];
   }, [item?.provider]);
-  const title = (0, _ahooks.useCreation)(() => {
-    return _constant.OAUTH_PROVIDER[item?.provider] || "unknown";
+  const title = useCreation(() => {
+    return OAUTH_PROVIDER[item?.provider] || "unknown";
   }, [item?.provider]);
-  const toggleBind = (0, _ahooks.useMemoizedFn)(async () => {
+  const toggleBind = useMemoizedFn(async () => {
     try {
       currentState.loading = true;
       await new Promise((resolve, reject) => {
         if (item?._bind) {
           confirmApi.open({
-            title: t("thirdPartyLogin.confirmUnbind", {
-              name: title
-            }),
-            content: t("thirdPartyLogin.confirmUnbindDescription", {
-              name: title
-            }),
+            title: t("thirdPartyLogin.confirmUnbind", { name: title }),
+            content: t("thirdPartyLogin.confirmUnbindDescription", { name: title }),
             confirmButtonText: t("common.confirm"),
             cancelButtonText: t("common.cancel"),
             onConfirm(close) {
               unbindOAuth({
                 session,
                 connectedAccount: {
-                  ...(0, _pick.default)(item, ["did", "pk"]),
+                  ...pick(item, ["did", "pk"]),
                   showProvider: item.provider,
                   provider: item._rawProvider
                 }
@@ -96,8 +73,8 @@ function ThirdPartyItem({
           const backupBaseUrl = oauthBaseUrl;
           const blocklet = window?.blocklet;
           let baseUrl = "/";
-          const federatedEnabled = (0, _federated.getFederatedEnabled)(blocklet);
-          const master = (0, _federated.getMaster)(blocklet);
+          const federatedEnabled = getFederatedEnabled(blocklet);
+          const master = getMaster(blocklet);
           if (federatedEnabled && master?.appPid && session?.user?.sourceAppPid) {
             baseUrl = master.appUrl;
           }
@@ -119,123 +96,129 @@ function ThirdPartyItem({
       currentState.loading = false;
     }
   });
-  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-      sx: {
-        borderRadius: 2,
-        border: `1px solid ${_Colors.temp.strokeBorderBase}`,
-        background: _Colors.temp.backgroundsBgField,
-        display: "flex",
-        alignItems: "center",
-        py: 1,
-        px: 1.5,
-        gap: 0.75,
-        fontSize: "14px",
-        lineHeight: 1,
-        overflow: "hidden"
-      },
-      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-        component: _react.Icon,
-        icon,
-        width: "1em",
-        height: "1em",
-        sx: {
-          flexShrink: 0,
-          fontSize: 16
-        }
-      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-        sx: {
-          flex: 1
-        },
-        children: title
-      }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
         sx: {
+          borderRadius: 2,
+          border: `1px solid ${colors.strokeBorderBase}`,
+          background: colors.backgroundsBgField,
           display: "flex",
           alignItems: "center",
-          gap: 0.5
+          py: 1,
+          px: 1.5,
+          gap: 0.75,
+          fontSize: "14px",
+          lineHeight: 1,
+          overflow: "hidden"
         },
-        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-          sx: {
-            flex: 1,
-            textOverflow: "ellipsis",
-            overflow: "hidden",
-            lineHeight: "normal"
-          },
-          children: item.userInfo?.email || item.did
-        }), item.userInfo?.email ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Tooltip, {
-          title: /* @__PURE__ */(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-            children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+        children: [
+          /* @__PURE__ */ jsx(Box, { component: Icon, icon, width: "1em", height: "1em", sx: { flexShrink: 0, fontSize: 16 } }),
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              sx: {
+                flex: 1
+              },
+              children: title
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Box,
+            {
               sx: {
                 display: "flex",
                 alignItems: "center",
-                gap: 1
+                gap: 0.5
               },
-              children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_Avatar.default, {
-                size: 36,
-                variant: "circle",
-                shape: "circle",
-                src: item.userInfo?.picture,
-                did: item.did
-              }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-                children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-                  sx: {
-                    whiteSpace: "normal",
-                    wordBreak: "break-all",
-                    fontSize: "0.9rem"
-                  },
-                  children: item.userInfo?.name
-                }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-                  sx: {
-                    whiteSpace: "normal",
-                    wordBreak: "break-all",
-                    fontSize: "0.9rem"
-                  },
-                  children: item.userInfo?.email
-                })]
-              })]
-            })
-          }),
-          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-            component: _react.Icon,
-            icon: _infoOutlineRounded.default,
-            color: _Colors.temp.textSubtitle,
-            fontSize: 16,
-            sx: {
-              cursor: "pointer",
-              flexShrink: 0
+              children: [
+                /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    sx: {
+                      flex: 1,
+                      textOverflow: "ellipsis",
+                      overflow: "hidden",
+                      lineHeight: "normal"
+                    },
+                    children: item.userInfo?.email || item.did
+                  }
+                ),
+                item.userInfo?.email ? /* @__PURE__ */ jsx(
+                  Tooltip,
+                  {
+                    title: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                      /* @__PURE__ */ jsx(Avatar, { size: 36, variant: "circle", shape: "circle", src: item.userInfo?.picture, did: item.did }),
+                      /* @__PURE__ */ jsxs(Box, { children: [
+                        /* @__PURE__ */ jsx(
+                          Typography,
+                          {
+                            sx: {
+                              whiteSpace: "normal",
+                              wordBreak: "break-all",
+                              fontSize: "0.9rem"
+                            },
+                            children: item.userInfo?.name
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Typography,
+                          {
+                            sx: {
+                              whiteSpace: "normal",
+                              wordBreak: "break-all",
+                              fontSize: "0.9rem"
+                            },
+                            children: item.userInfo?.email
+                          }
+                        )
+                      ] })
+                    ] }) }),
+                    children: /* @__PURE__ */ jsx(
+                      Box,
+                      {
+                        component: Icon,
+                        icon: InfoOutlineRoundedIcon,
+                        color: colors.textSubtitle,
+                        fontSize: 16,
+                        sx: { cursor: "pointer", flexShrink: 0 }
+                      }
+                    )
+                  }
+                ) : null
+              ]
             }
-          })
-        }) : null]
-      })]
-    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Tooltip, {
-      title: item._mainProvider ? t("thirdPartyLogin.mainProviderCantRemove") : "",
-      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_Button.default, {
-          variant: "outlined",
-          size: "small",
-          sx: {
-            color: item?._bind ? _Colors.temp.red : _Colors.temp.foregroundsFgBase,
-            borderColor: item?._bind ? _Colors.temp.red : _Colors.temp.strokeBorderBase,
-            backgroundColor: _Colors.temp.buttonsButtonNeutral,
-            "&:hover": {
-              borderColor: item?._bind ? _Colors.temp.red : _Colors.temp.strokeBorderBase,
-              backgroundColor: _Colors.temp.buttonsButtonNeutralHover
-            },
-            py: 0.5,
-            borderRadius: 2,
-            fontWeight: 500,
-            whiteSpace: "nowrap"
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Tooltip, { title: item._mainProvider ? t("thirdPartyLogin.mainProviderCantRemove") : "", children: /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "outlined",
+        size: "small",
+        sx: {
+          color: item?._bind ? colors.red : colors.foregroundsFgBase,
+          borderColor: item?._bind ? colors.red : colors.strokeBorderBase,
+          backgroundColor: colors.buttonsButtonNeutral,
+          "&:hover": {
+            borderColor: item?._bind ? colors.red : colors.strokeBorderBase,
+            backgroundColor: colors.buttonsButtonNeutralHover
           },
-          fullWidth: true,
-          startIcon: currentState.loading ? null : /* @__PURE__ */(0, _jsxRuntime.jsx)(_react.Icon, {
-            icon: _linkRounded.default
-          }),
-          onClick: toggleBind,
-          disabled: item._mainProvider,
-          loading: currentState.loading,
-          children: item?._bind ? t("thirdPartyLogin.disconnect") : t("thirdPartyLogin.connect")
-        })
-      })
-    }), confirmHolder]
-  });
-}
+          py: 0.5,
+          borderRadius: 2,
+          fontWeight: 500,
+          whiteSpace: "nowrap"
+        },
+        fullWidth: true,
+        startIcon: currentState.loading ? null : /* @__PURE__ */ jsx(Icon, { icon: LinkRoundedIcon }),
+        onClick: toggleBind,
+        disabled: item._mainProvider,
+        loading: currentState.loading,
+        children: item?._bind ? t("thirdPartyLogin.disconnect") : t("thirdPartyLogin.connect")
+      }
+    ) }) }),
+    confirmHolder
+  ] });
+}