@blocklet/ui-react 2.13.69 → 3.0.0

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

@@ -1,136 +1,110 @@
-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 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 PasskeyIcon from "@iconify-icons/material-symbols/passkey";
-import WalletIcon from "@iconify-icons/material-symbols/wallet-sharp";
-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, LOGIN_PROVIDER_NAME } from "@arcblock/ux/lib/Util/constant";
-import { useStateContext } from "@arcblock/did-connect/lib/Connect/contexts/state";
-import { translations } from "../../libs/locales.js";
-export default function ThirdPartyItem({
-  item
+import { jsxs as s, Fragment as S, jsx as n } from "react/jsx-runtime";
+import { Icon as g } from "@iconify/react";
+import { Box as t, Tooltip as A, Typography as B } from "@mui/material";
+import F from "@iconify-icons/material-symbols/link-rounded";
+import W from "@arcblock/ux/lib/Button";
+import N from "@arcblock/ux/lib/Avatar";
+import { useReactive as K, useMemoizedFn as L, useCreation as _ } from "ahooks";
+import { translate as V } from "@arcblock/ux/lib/Locale/util";
+import { useConfirm as Y } from "@arcblock/ux/lib/Dialog";
+import { useLocaleContext as j } from "@arcblock/ux/lib/Locale/context";
+import $ from "@iconify-icons/material-symbols/mail-outline-rounded";
+import q from "@iconify-icons/material-symbols/info-outline-rounded";
+import J from "@iconify-icons/material-symbols/passkey";
+import Q from "@iconify-icons/material-symbols/wallet-sharp";
+import X from "@iconify-icons/logos/apple";
+import Z from "@iconify-icons/logos/github-icon";
+import oo from "@iconify-icons/logos/google-icon";
+import { SessionContext as ro } from "@arcblock/did-connect/lib/Session";
+import { use as no } from "react";
+import eo from "lodash/pick";
+import { getFederatedEnabled as co, getMaster as to } from "@arcblock/ux/lib/Util/federated";
+import { LOGIN_PROVIDER as l, LOGIN_PROVIDER_NAME as ao } from "@arcblock/ux/lib/Util/constant";
+import { useStateContext as io } from "@arcblock/did-connect/lib/Connect/contexts/state";
+import { translations as lo } from "../../libs/locales.js";
+function Uo({
+  item: o
 }) {
-  const { blocklet: targetBlocklet } = useStateContext();
-  const { confirmApi, confirmHolder } = useConfirm();
-  const currentState = useReactive({
-    loading: false
-  });
-  const { locale } = useLocaleContext();
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, "en", data);
-  });
-  const { session } = useContext(SessionContext);
-  const { bindOAuth, unbindOAuth, setBaseUrl, baseUrl: oauthBaseUrl } = session.useOAuth();
-  const { disconnectPasskey, setTargetAppPid } = session.usePasskey();
-  const iconMap = {
+  var m, y, I, k, v;
+  const { blocklet: u } = io(), { confirmApi: x, confirmHolder: O } = Y(), p = K({
+    loading: !1
+  }), { locale: R } = j(), e = L((r, c = {}) => V(lo, r, R, "en", c)), { session: a } = no(ro), { bindOAuth: T, unbindOAuth: U, setBaseUrl: b, baseUrl: E } = a.useOAuth(), { disconnectPasskey: z, setTargetAppPid: P } = a.usePasskey(), G = {
     // email: MailOutlineRoundedIcon,
-    [LOGIN_PROVIDER.AUTH0]: MailOutlineRoundedIcon,
-    [LOGIN_PROVIDER.APPLE]: AppleIcon,
-    [LOGIN_PROVIDER.GITHUB]: GithubIcon,
-    [LOGIN_PROVIDER.GOOGLE]: GoogleIcon,
-    [LOGIN_PROVIDER.PASSKEY]: PasskeyIcon,
-    [LOGIN_PROVIDER.WALLET]: WalletIcon
-  };
-  const icon = useCreation(() => {
-    return iconMap[item?.provider];
-  }, [item?.provider]);
-  const title = useCreation(() => {
-    return LOGIN_PROVIDER_NAME[item?.provider] || "unknown";
-  }, [item?.provider]);
-  const toggleBind = useMemoizedFn(async () => {
-    if (item?.provider === LOGIN_PROVIDER.PASSKEY) {
-      await new Promise((resolve, reject) => {
-        confirmApi.open({
-          title: t("thirdPartyLogin.disconnectPasskey", { name: title }),
-          content: t("thirdPartyLogin.disconnectPasskeyDescription", { name: title }),
-          confirmButtonText: t("common.confirm"),
+    [l.AUTH0]: $,
+    [l.APPLE]: X,
+    [l.GITHUB]: Z,
+    [l.GOOGLE]: oo,
+    [l.PASSKEY]: J,
+    [l.WALLET]: Q
+  }, H = _(() => G[o == null ? void 0 : o.provider], [o == null ? void 0 : o.provider]), d = _(() => ao[o == null ? void 0 : o.provider] || "unknown", [o == null ? void 0 : o.provider]), M = L(async () => {
+    if ((o == null ? void 0 : o.provider) === l.PASSKEY) {
+      await new Promise((r, c) => {
+        x.open({
+          title: e("thirdPartyLogin.disconnectPasskey", { name: d }),
+          content: e("thirdPartyLogin.disconnectPasskeyDescription", { name: d }),
+          confirmButtonText: e("common.confirm"),
           confirmButtonProps: {
             color: "error"
           },
-          cancelButtonText: t("common.cancel"),
-          onConfirm(close) {
-            disconnectPasskey({ session, connectedAccount: item }).then(resolve).catch(reject);
-            close();
+          cancelButtonText: e("common.cancel"),
+          onConfirm(i) {
+            z({ session: a, connectedAccount: o }).then(r).catch(c), i();
           },
           // @ts-ignore
-          onCancel: resolve
+          onCancel: r
         });
       });
       return;
     }
     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 }),
-            confirmButtonText: t("common.confirm"),
+      p.loading = !0, await new Promise((r, c) => {
+        var i;
+        if (o != null && o._bind)
+          x.open({
+            title: e("thirdPartyLogin.confirmUnbind", { name: d }),
+            content: e("thirdPartyLogin.confirmUnbindDescription", { name: d }),
+            confirmButtonText: e("common.confirm"),
             confirmButtonProps: {
               color: "error"
             },
-            cancelButtonText: t("common.cancel"),
-            onConfirm(close) {
-              unbindOAuth({
-                session,
+            cancelButtonText: e("common.cancel"),
+            onConfirm(h) {
+              U({
+                session: a,
                 connectedAccount: {
-                  ...pick(item, ["did", "pk"]),
-                  showProvider: item.provider,
-                  provider: item._rawProvider
+                  ...eo(o, ["did", "pk"]),
+                  showProvider: o.provider,
+                  provider: o._rawProvider
                 }
-              }).then(resolve).catch(reject);
-              close();
+              }).then(r).catch(c), h();
             },
             // @ts-ignore
-            onCancel: resolve
+            onCancel: r
           });
-        } else {
-          const backupBaseUrl = oauthBaseUrl;
-          const blocklet = window?.blocklet;
-          let baseUrl = "/";
-          const federatedEnabled = getFederatedEnabled(blocklet);
-          const master = getMaster(blocklet);
-          if (federatedEnabled && master?.appPid && session?.user?.sourceAppPid) {
-            baseUrl = master.appUrl;
-          }
-          setBaseUrl(baseUrl);
-          setTargetAppPid(targetBlocklet?.appPid);
-          bindOAuth({
-            session,
+        else {
+          const h = E, w = window == null ? void 0 : window.blocklet;
+          let C = "/";
+          const D = co(w), f = to(w);
+          D && (f != null && f.appPid) && ((i = a == null ? void 0 : a.user) != null && i.sourceAppPid) && (C = f.appUrl), b(C), P(u == null ? void 0 : u.appPid), T({
+            session: a,
             oauthItem: {
-              ...item,
-              provider: item._rawProvider
+              ...o,
+              provider: o._rawProvider
             }
-          }).then(resolve).catch(reject).finally(() => {
-            setBaseUrl(backupBaseUrl);
-            setTargetAppPid();
+          }).then(r).catch(c).finally(() => {
+            b(h), P();
           });
         }
       });
-    } catch (err) {
-      console.error(`Failed to ${item?._bind ? "unbind" : "bind"} oauth account`, err);
+    } catch (r) {
+      console.error(`Failed to ${o != null && o._bind ? "unbind" : "bind"} oauth account`, r);
     } finally {
-      currentState.loading = false;
+      p.loading = !1;
     }
   });
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      Box,
+  return /* @__PURE__ */ s(S, { children: [
+    /* @__PURE__ */ s(
+      t,
       {
         sx: {
           borderRadius: 1,
@@ -147,33 +121,33 @@ export default function ThirdPartyItem({
           overflow: "hidden"
         },
         children: [
-          /* @__PURE__ */ jsx(
-            Box,
+          /* @__PURE__ */ n(
+            t,
             {
-              component: Icon,
-              icon,
-              width: "1em",
-              height: "1em",
+              component: g,
+              icon: H,
               fill: "currentColor",
               sx: {
+                width: "1em",
+                height: "1em",
                 flexShrink: 0,
                 fontSize: 16,
                 // githubIcon 不支持变色，dark 模式做一个反色处理
-                filter: ({ palette }) => item?.provider === LOGIN_PROVIDER.GITHUB && palette.mode === "dark" ? "invert(1)" : "none"
+                filter: ({ palette: r }) => (o == null ? void 0 : o.provider) === l.GITHUB && r.mode === "dark" ? "invert(1)" : "none"
               }
             }
           ),
-          /* @__PURE__ */ jsx(
-            Box,
+          /* @__PURE__ */ n(
+            t,
             {
               sx: {
                 flex: 1
               },
-              children: title
+              children: d
             }
           ),
-          /* @__PURE__ */ jsxs(
-            Box,
+          /* @__PURE__ */ s(
+            t,
             {
               sx: {
                 display: "flex",
@@ -181,8 +155,8 @@ export default function ThirdPartyItem({
                 gap: 0.5
               },
               children: [
-                /* @__PURE__ */ jsx(
-                  Box,
+                /* @__PURE__ */ n(
+                  t,
                   {
                     sx: {
                       flex: 1,
@@ -190,47 +164,50 @@ export default function ThirdPartyItem({
                       overflow: "hidden",
                       lineHeight: "normal"
                     },
-                    children: item.userInfo?.email || item.did
+                    children: ((m = o.userInfo) == null ? void 0 : m.email) || o.did
                   }
                 ),
-                item.userInfo?.name ? /* @__PURE__ */ jsx(
-                  Tooltip,
+                (y = o.userInfo) != null && y.name ? /* @__PURE__ */ n(
+                  A,
                   {
-                    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,
+                    title: /* @__PURE__ */ n(S, { children: /* @__PURE__ */ s(t, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                      /* @__PURE__ */ n(N, { size: 36, variant: "circle", shape: "circle", src: (I = o.userInfo) == null ? void 0 : I.picture, did: o.did }),
+                      /* @__PURE__ */ s(t, { children: [
+                        /* @__PURE__ */ n(
+                          B,
                           {
                             sx: {
                               whiteSpace: "normal",
                               wordBreak: "break-all",
                               fontSize: "0.9rem"
                             },
-                            children: item.userInfo?.name
+                            children: (k = o.userInfo) == null ? void 0 : k.name
                           }
                         ),
-                        /* @__PURE__ */ jsx(
-                          Typography,
+                        /* @__PURE__ */ n(
+                          B,
                           {
                             sx: {
                               whiteSpace: "normal",
                               wordBreak: "break-all",
                               fontSize: "0.9rem"
                             },
-                            children: item.userInfo?.email
+                            children: (v = o.userInfo) == null ? void 0 : v.email
                           }
                         )
                       ] })
                     ] }) }),
-                    children: /* @__PURE__ */ jsx(
-                      Box,
+                    children: /* @__PURE__ */ n(
+                      t,
                       {
-                        component: Icon,
-                        icon: InfoOutlineRoundedIcon,
-                        color: "text.secondary",
-                        fontSize: 16,
-                        sx: { cursor: "pointer", flexShrink: 0 }
+                        component: g,
+                        icon: q,
+                        sx: {
+                          color: "text.secondary",
+                          fontSize: 16,
+                          cursor: "pointer",
+                          flexShrink: 0
+                        }
                       }
                     )
                   }
@@ -241,20 +218,19 @@ export default function ThirdPartyItem({
         ]
       }
     ),
-    /* @__PURE__ */ jsx(Tooltip, { title: item._mainProvider ? t("thirdPartyLogin.mainProviderCantRemove") : "", children: /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
-      Button,
+    /* @__PURE__ */ n(A, { title: o._mainProvider ? e("thirdPartyLogin.mainProviderCantRemove") : "", children: /* @__PURE__ */ n(t, { children: /* @__PURE__ */ n(
+      W,
       {
         variant: "outlined",
         size: "small",
-        sx: (theme) => {
-          const textRed = theme.palette.error.main;
-          const textPrimary = theme.palette.primary.main;
+        sx: (r) => {
+          const c = r.palette.error.main, i = r.palette.primary.main;
           return {
-            color: item?._bind ? textRed : textPrimary,
-            borderColor: item?._bind ? textRed : textPrimary,
+            color: o != null && o._bind ? c : i,
+            borderColor: o != null && o._bind ? c : i,
             backgroundColor: "background.default",
             "&:hover": {
-              borderColor: item?._bind ? textRed : textPrimary,
+              borderColor: o != null && o._bind ? c : i,
               backgroundColor: "action.hover"
             },
             py: 0.5,
@@ -263,14 +239,17 @@ export default function ThirdPartyItem({
             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")
+        fullWidth: !0,
+        startIcon: p.loading ? null : /* @__PURE__ */ n(g, { icon: F }),
+        onClick: M,
+        disabled: o._mainProvider,
+        loading: p.loading,
+        children: o != null && o._bind ? e("thirdPartyLogin.disconnect") : e("thirdPartyLogin.connect")
       }
     ) }) }),
-    confirmHolder
+    O
   ] });
 }
+export {
+  Uo as default
+};