@blocklet/ui-react
Version:
Some useful front-end web components that can be used in Blocklets.
254 lines (253 loc) • 8.89 kB
JavaScript
import { jsxs as s, Fragment as P, jsx as n } from "react/jsx-runtime";
import { Icon as m } from "@iconify/react";
import { Box as c, Tooltip as y, Typography as I } from "@mui/material";
import E from "@iconify-icons/material-symbols/link-rounded";
import z from "@arcblock/ux/lib/Button";
import G from "@arcblock/ux/lib/Avatar";
import { useReactive as H, useMemoizedFn as k, useCreation as v } from "ahooks";
import { translate as M } from "@arcblock/ux/lib/Locale/util";
import { useConfirm as D } from "@arcblock/ux/lib/Dialog";
import { useLocaleContext as F } from "@arcblock/ux/lib/Locale/context";
import W from "@iconify-icons/material-symbols/mail-outline-rounded";
import N from "@iconify-icons/material-symbols/info-outline-rounded";
import K from "@iconify-icons/material-symbols/passkey";
import V from "@iconify-icons/material-symbols/wallet-sharp";
import Y from "@iconify-icons/logos/apple";
import j from "@iconify-icons/logos/github-icon";
import $ from "@iconify-icons/logos/google-icon";
import { SessionContext as q } from "@arcblock/did-connect-react/lib/Session";
import { use as J } from "react";
import Q from "lodash/pick";
import { getFederatedEnabled as X, getMaster as Z } from "@arcblock/ux/lib/Util/federated";
import { LOGIN_PROVIDER as a, LOGIN_PROVIDER_NAME as oo } from "@arcblock/ux/lib/Util/constant";
import { useStateContext as ro } from "@arcblock/did-connect-react/lib/Connect/contexts/state";
import { translations as no } from "../../libs/locales.js";
function Ao({
item: o
}) {
const { blocklet: w } = ro(), { confirmApi: f, confirmHolder: C } = D(), p = H({
loading: !1
}), { locale: B } = F(), e = k((r, t = {}) => M(no, r, B, "en", t)), { session: l } = J(q), { bindOAuth: S, unbindOAuth: A, setBaseUrl: u, baseUrl: L } = l.useOAuth(), { disconnectPasskey: _, setTargetAppPid: h } = l.usePasskey(), O = {
// email: MailOutlineRoundedIcon,
[a.AUTH0]: W,
[a.APPLE]: Y,
[a.GITHUB]: j,
[a.GOOGLE]: $,
[a.PASSKEY]: K,
[a.WALLET]: V
}, R = v(() => O[o?.provider], [o?.provider]), d = v(() => oo[o?.provider] || "unknown", [o?.provider]), T = k(async () => {
if (o?.provider === a.PASSKEY) {
await new Promise((r, t) => {
f.open({
title: e("thirdPartyLogin.disconnectPasskey", { name: d }),
content: e("thirdPartyLogin.disconnectPasskeyDescription", { name: d }),
confirmButtonText: e("common.confirm"),
confirmButtonProps: {
color: "error"
},
cancelButtonText: e("common.cancel"),
onConfirm(i) {
_({ session: l, connectedAccount: o }).then(r).catch(t), i();
},
// @ts-ignore
onCancel: r
});
});
return;
}
try {
p.loading = !0, await new Promise((r, t) => {
if (o?._bind)
f.open({
title: e("thirdPartyLogin.confirmUnbind", { name: d }),
content: e("thirdPartyLogin.confirmUnbindDescription", { name: d }),
confirmButtonText: e("common.confirm"),
confirmButtonProps: {
color: "error"
},
cancelButtonText: e("common.cancel"),
onConfirm(i) {
A({
session: l,
connectedAccount: {
...Q(o, ["did", "pk"]),
showProvider: o.provider,
provider: o._rawProvider
}
}).then(r).catch(t), i();
},
// @ts-ignore
onCancel: r
});
else {
const i = L, g = window?.blocklet;
let x = "/";
const U = X(g), b = Z(g);
U && b?.appPid && l?.user?.sourceAppPid && (x = b.appUrl), u(x), h(w?.appPid), S({
session: l,
oauthItem: {
...o,
provider: o._rawProvider
}
}).then(r).catch(t).finally(() => {
u(i), h();
});
}
});
} catch (r) {
console.error(`Failed to ${o?._bind ? "unbind" : "bind"} oauth account`, r);
} finally {
p.loading = !1;
}
});
return /* @__PURE__ */ s(P, { children: [
/* @__PURE__ */ s(
c,
{
sx: {
borderRadius: 1,
border: "1px solid",
borderColor: "divider",
backgroundColor: "grey.50",
display: "flex",
alignItems: "center",
py: 1,
px: 1.5,
gap: 0.75,
fontSize: "14px",
lineHeight: 1,
overflow: "hidden"
},
children: [
/* @__PURE__ */ n(
c,
{
component: m,
icon: R,
fill: "currentColor",
sx: {
width: "1em",
height: "1em",
flexShrink: 0,
fontSize: 16,
// githubIcon 不支持变色，dark 模式做一个反色处理
filter: ({ palette: r }) => o?.provider === a.GITHUB && r.mode === "dark" ? "invert(1)" : "none"
}
}
),
/* @__PURE__ */ n(
c,
{
sx: {
flex: 1
},
children: d
}
),
/* @__PURE__ */ s(
c,
{
sx: {
display: "flex",
alignItems: "center",
gap: 0.5
},
children: [
/* @__PURE__ */ n(
c,
{
sx: {
flex: 1,
textOverflow: "ellipsis",
overflow: "hidden",
lineHeight: "normal"
},
children: o.userInfo?.email || o.did
}
),
o.userInfo?.name ? /* @__PURE__ */ n(
y,
{
title: /* @__PURE__ */ n(P, { children: /* @__PURE__ */ s(c, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
/* @__PURE__ */ n(G, { size: 36, variant: "circle", shape: "circle", src: o.userInfo?.picture, did: o.did }),
/* @__PURE__ */ s(c, { children: [
/* @__PURE__ */ n(
I,
{
sx: {
whiteSpace: "normal",
wordBreak: "break-all",
fontSize: "0.9rem"
},
children: o.userInfo?.name
}
),
/* @__PURE__ */ n(
I,
{
sx: {
whiteSpace: "normal",
wordBreak: "break-all",
fontSize: "0.9rem"
},
children: o.userInfo?.email
}
)
] })
] }) }),
children: /* @__PURE__ */ n(
c,
{
component: m,
icon: N,
sx: {
color: "text.secondary",
fontSize: 16,
cursor: "pointer",
flexShrink: 0
}
}
)
}
) : null
]
}
)
]
}
),
/* @__PURE__ */ n(y, { title: o._mainProvider ? e("thirdPartyLogin.mainProviderCantRemove") : "", children: /* @__PURE__ */ n(c, { children: /* @__PURE__ */ n(
z,
{
variant: "outlined",
size: "small",
sx: (r) => {
const t = r.palette.error.main, i = r.palette.primary.main;
return {
color: o?._bind ? t : i,
borderColor: o?._bind ? t : i,
backgroundColor: "background.default",
"&:hover": {
borderColor: o?._bind ? t : i,
backgroundColor: "action.hover"
},
py: 0.5,
borderRadius: 1,
fontWeight: 500,
whiteSpace: "nowrap"
};
},
fullWidth: !0,
startIcon: p.loading ? null : /* @__PURE__ */ n(m, { icon: E }),
onClick: T,
disabled: o._mainProvider,
loading: p.loading,
children: o?._bind ? e("thirdPartyLogin.disconnect") : e("thirdPartyLogin.connect")
}
) }) }),
C
] });
}
export {
Ao as default
};