@blocklet/ui-react
Version:
Some useful front-end web components that can be used in Blocklets.
272 lines (271 loc) • 7.23 kB
JavaScript
import { jsx as o, jsxs as h } from "react/jsx-runtime";
import { Alert as z, Box as w, CircularProgress as R, Typography as D, Stack as T } from "@mui/material";
import { useMemoizedFn as s, useReactive as j, useRequest as B, useCreation as v } from "ahooks";
import { Icon as F } from "@iconify/react";
import E from "@iconify-icons/material-symbols/add-rounded";
import G from "@arcblock/ux/lib/Switch";
import L from "@arcblock/ux/lib/Button";
import f from "@arcblock/ux/lib/Toast";
import { getWalletDid as C } from "@arcblock/ux/lib/SessionUser/libs/utils";
import { translate as M } from "@arcblock/ux/lib/Locale/util";
import { useLocaleContext as P } from "@arcblock/ux/lib/Locale/context";
import U from "@arcblock/ux/lib/DID";
import { getBlockletSDK as _ } from "@blocklet/js-sdk";
import { translations as $ } from "../libs/locales.js";
import S from "./webhook-item.js";
import { formatAxiosError as b } from "../libs/utils.js";
function y({
title: i = void 0,
description: n = void 0,
value: m,
onChange: l,
isMobile: a
}) {
const c = s((r) => {
r.stopPropagation();
});
return /* @__PURE__ */ h(
w,
{
sx: {
display: "flex",
alignItems: "center",
gap: 1
},
children: [
/* @__PURE__ */ o(G, { checked: m, size: "small", onChange: l }),
/* @__PURE__ */ h(
D,
{
component: "div",
onClick: c,
sx: {
color: "text.primary",
fontSize: 14,
display: "flex",
flexWrap: a ? "wrap" : "nowrap",
columnGap: 1,
flex: 1,
whiteSpace: a ? "normal" : "nowrap"
},
children: [
i,
n
]
}
)
]
}
);
}
function nt({ user: i, isMobile: n }) {
const { locale: m } = P(), l = _(), a = s((t, e = {}) => M($, t, m, "en", e)), c = j({
showAdd: !1
}), r = B(
async () => await l.user.getUserNotificationConfig(),
{
refreshDeps: [i],
loadingDelay: 300
}
), x = v(() => ({
wallet: !0,
email: !0,
phone: !1,
push: !0,
...r?.data?.notifications || {}
}), [r?.data?.notifications]), p = v(() => r?.data?.webhooks || [], [r?.data?.webhooks]), u = s(async (t) => {
try {
await l.user.saveUserNotificationConfig(t), f.success(a("saveSuccess")), r.run();
} catch (e) {
f.error(b(e));
}
}), g = s(async (t, e) => {
await u({
notifications: {
[t]: e
}
});
}), k = async (t) => {
try {
await l.user.testNotificationWebhook(t), f.success(a("webhookTested"));
} catch (e) {
f.error(b(e));
}
}, A = s(async (t) => {
await u({
webhooks: p.filter((e, d) => d !== t)
});
}), I = s(async (t, e) => {
await u({
webhooks: p.map((d, N) => N === t ? e : d)
});
}), W = s(async (t) => {
await u({
webhooks: [...p, t]
}), c.showAdd = !1;
});
return r.error ? /* @__PURE__ */ o(z, { severity: "error", children: r.error.message }) : r.loading || !r.data ? /* @__PURE__ */ o(
w,
{
sx: {
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "100px"
},
children: /* @__PURE__ */ o(R, {})
}
) : /* @__PURE__ */ h(w, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: [
/* @__PURE__ */ h(
w,
{
sx: {
display: "flex",
flexDirection: "column",
gap: 1,
alignItems: "start",
".MuiFormControlLabel-root": {
gap: 1,
m: 0,
flexDirection: {
xs: "row-reverse",
md: "row"
},
width: {
xs: "100%",
md: "unset"
}
},
".MuiSwitch-track": {
borderRadius: "100vw"
},
".MuiSwitch-thumb": {
borderRadius: "100%"
},
".MuiSwitch-root.MuiSwitch-sizeSmall": {
height: "20px",
width: "36px",
".MuiSwitch-thumb": {
width: "16px",
height: "16px"
}
}
},
children: [
/* @__PURE__ */ o(
y,
{
value: x.wallet,
isMobile: n,
title: a("walletNotification"),
onChange: (t) => g("wallet", t.target.checked),
description: C(i) && /* @__PURE__ */ o(
U,
{
did: C(i),
showQrcode: !1,
showAvatar: !n,
copyable: !0,
compact: !0,
responsive: !0,
locale: m,
startChars: n ? 2 : 6
}
)
}
),
/* @__PURE__ */ o(
y,
{
value: x.email,
isMobile: n,
onChange: (t) => g("email", t.target.checked),
title: a("emailNotification"),
description: i?.email && /* @__PURE__ */ o(
D,
{
component: "span",
sx: {
color: "text.secondary",
fontSize: 13
},
children: i?.email
}
)
}
),
/* @__PURE__ */ o(
y,
{
isMobile: n,
value: x.push,
title: a("pushNotification"),
onChange: (t) => g("push", t.target.checked)
}
)
]
}
),
/* @__PURE__ */ h(
T,
{
spacing: 1.5,
useFlexGap: !0,
direction: "column",
sx: {
alignItems: "start"
},
children: [
p.map((t, e) => /* @__PURE__ */ o(
S,
{
onTest: k,
onDelete: () => A(e),
onSave: (...d) => I(e, ...d),
type: t.type,
url: t.url,
edit: !1
},
`${e}_${t.url}`
)),
c.showAdd && /* @__PURE__ */ o(
S,
{
onTest: k,
onCancel: () => {
c.showAdd = !1;
},
onSave: (...t) => W(...t),
edit: !0
},
"add"
),
/* @__PURE__ */ o(
L,
{
variant: "outlined",
size: "small",
sx: {
color: "text.primary",
borderColor: "divider",
"&:hover": {
borderColor: "divider"
},
py: 0.5,
borderRadius: 1
},
startIcon: /* @__PURE__ */ o(F, { icon: E }),
onClick: () => {
c.showAdd = !0;
},
children: a("addWebhook")
}
)
]
}
)
] });
}
export {
nt as default
};