@blocklet/ui-react
Version:
Some useful front-end web components that can be used in Blocklets.
272 lines (271 loc) • 7.21 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 A, Stack as T } from "@mui/material";
import { useMemoizedFn as c, useReactive as j, useRequest as F, useCreation as v } from "ahooks";
import { Icon as B } 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 { translations as _ } from "../libs/locales.js";
import b from "./webhook-item.js";
import { formatAxiosError as S } from "../libs/utils.js";
import { client as g } from "../../libs/client.js";
function y({
title: i = void 0,
description: n = void 0,
value: m,
onChange: a,
isMobile: s
}) {
const r = c((l) => {
l.stopPropagation();
});
return /* @__PURE__ */ h(
w,
{
sx: {
display: "flex",
alignItems: "center",
gap: 1
},
children: [
/* @__PURE__ */ o(G, { checked: m, size: "small", onChange: a }),
/* @__PURE__ */ h(
A,
{
component: "div",
onClick: r,
sx: {
color: "text.primary",
fontSize: 14,
display: "flex",
flexWrap: s ? "wrap" : "nowrap",
columnGap: 1,
flex: 1,
whiteSpace: s ? "normal" : "nowrap"
},
children: [
i,
n
]
}
)
]
}
);
}
function ie({ user: i, isMobile: n }) {
const { locale: m } = P(), a = c((e, t = {}) => M(_, e, m, "en", t)), s = j({
showAdd: !1
}), r = F(
async () => await g.user.getUserNotificationConfig(),
{
refreshDeps: [i],
loadingDelay: 300
}
), l = v(() => ({
wallet: !0,
email: !0,
phone: !1,
push: !0,
...r?.data?.notifications || {}
}), [r?.data?.notifications]), p = v(() => r?.data?.webhooks || [], [r?.data?.webhooks]), u = c(async (e) => {
try {
await g.user.saveUserNotificationConfig(e), f.success(a("saveSuccess")), r.run();
} catch (t) {
f.error(S(t));
}
}), x = c(async (e, t) => {
await u({
notifications: {
[e]: t
}
});
}), k = async (e) => {
try {
await g.user.testNotificationWebhook(e), f.success(a("webhookTested"));
} catch (t) {
f.error(S(t));
}
}, D = c(async (e) => {
await u({
webhooks: p.filter((t, d) => d !== e)
});
}), I = c(async (e, t) => {
await u({
webhooks: p.map((d, N) => N === e ? t : d)
});
}), W = c(async (e) => {
await u({
webhooks: [...p, e]
}), s.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: l.wallet,
isMobile: n,
title: a("walletNotification"),
onChange: (e) => x("wallet", e.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: l.email,
isMobile: n,
onChange: (e) => x("email", e.target.checked),
title: a("emailNotification"),
description: i?.email && /* @__PURE__ */ o(
A,
{
component: "span",
sx: {
color: "text.secondary",
fontSize: 13
},
children: i?.email
}
)
}
),
/* @__PURE__ */ o(
y,
{
isMobile: n,
value: l.push,
title: a("pushNotification"),
onChange: (e) => x("push", e.target.checked)
}
)
]
}
),
/* @__PURE__ */ h(
T,
{
spacing: 1.5,
useFlexGap: !0,
direction: "column",
sx: {
alignItems: "start"
},
children: [
p.map((e, t) => /* @__PURE__ */ o(
b,
{
onTest: k,
onDelete: () => D(t),
onSave: (...d) => I(t, ...d),
type: e.type,
url: e.url,
edit: !1
},
`${t}_${e.url}`
)),
s.showAdd && /* @__PURE__ */ o(
b,
{
onTest: k,
onCancel: () => {
s.showAdd = !1;
},
onSave: (...e) => W(...e),
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(B, { icon: E }),
onClick: () => {
s.showAdd = !0;
},
children: a("addWebhook")
}
)
]
}
)
] });
}
export {
ie as default
};