@blocklet/ui-react
Version:
Some useful front-end web components that can be used in Blocklets.
265 lines (264 loc) • 8.87 kB
JavaScript
import { jsxs as l, jsx as r, Fragment as N } from "react/jsx-runtime";
import { Box as s, Typography as z, Divider as T, IconButton as F, Collapse as W } from "@mui/material";
import O from "@arcblock/ux/lib/Avatar";
import Q from "@arcblock/ux/lib/DID";
import { useMemoizedFn as V } from "ahooks";
import { translate as Y } from "@arcblock/ux/lib/Locale/util";
import { useLocaleContext as $ } from "@arcblock/ux/lib/Locale/context";
import q from "lodash/noop";
import { lazy as G, useState as C, useEffect as j } from "react";
import I from "@arcblock/ux/lib/Toast";
import { parseURL as H, joinURL as J } from "ufo";
import { KeyboardArrowUp as X, KeyboardArrowDown as Z } from "@mui/icons-material";
import { getBlockletSDK as _ } from "@blocklet/js-sdk";
import { translations as P } from "../../libs/locales.js";
import { formatAxiosError as R } from "../../libs/utils.js";
import { currentTimezone as M, getStatusDuration as tt, isValidUrl as rt, isDuplicateUrl as et } from "./utils.js";
import ot from "./switch-role.js";
import at from "./user-status.js";
import nt from "./user-info.js";
import it from "./social-actions/index.js";
const lt = G(() => import("./metadata.js"));
function kt({
user: t,
isMyself: o = !0,
showFullDid: f = !0,
switchPassport: k,
switchProfile: A,
isMobile: a = !1,
onlyProfile: c = !1,
refreshProfile: u,
isShowSocialActions: D = !1,
...m
}) {
const h = _(), { locale: x } = $(), [g, v] = C(void 0), w = V((i, e = {}) => Y(P, i, x, "en", e)), [d, S] = C(!a || c);
j(() => {
v(t?.metadata?.status);
}, [t]), j(() => {
S(!a || c);
}, [a, c]);
const L = async (i) => {
if (o)
try {
if (i) {
const e = tt(i);
i.dateRange = e.length > 0 ? e : g?.dateRange ?? [];
}
v(i), await h.user.saveProfile({
// @ts-ignore
metadata: {
...t?.metadata ?? { joinedAt: t?.createdAt, email: t?.email, phone: t?.phone },
status: i || {}
}
}), u();
} catch (e) {
console.error(e), I.error(R(e));
}
}, b = () => {
S(!d);
}, B = async (i) => {
if (!o)
return;
const { metadata: e, address: E } = i;
try {
const p = e?.links?.map((n, U) => {
if (!n.url || !rt(n.url) || U > 0 && e.links?.slice(0, U)?.some((K) => et(K.url, n.url)))
return null;
try {
return H(n.url).protocol || (n.url = J("https://", n.url)), n;
} catch {
return console.error("Invalid URL:", n.url), null;
}
}).filter((n) => !!n) || [];
e.links = p, await h.user.saveProfile({ metadata: e, address: E }), u();
} catch (p) {
console.error(p), I.error(R(p));
}
};
return /* @__PURE__ */ l(
s,
{
...m,
sx: {
position: "relative",
...m.sx ?? {}
},
children: [
/* @__PURE__ */ l(
s,
{
className: "user-info",
sx: {
display: "flex",
flexDirection: a ? "row" : "column",
gap: 2
},
children: [
/* @__PURE__ */ l(
s,
{
className: "user-avatar",
sx: {
position: "relative",
display: "flex",
alignItems: "center",
justifyContent: "space-between"
},
children: [
/* @__PURE__ */ r(
O,
{
src: t?.avatar,
did: t?.did,
size: m.size || (a ? 64 : 100),
variant: "circle",
shape: "circle",
sx: {
borderRadius: "100%",
backgroundColor: "#fff",
position: "relative",
overflow: "hidden",
flexShrink: 0,
...o ? {
cursor: "pointer",
"&::after": {
content: `"${w("switchProfile")}"`,
color: "white",
position: "absolute",
fontSize: "12px",
bottom: 0,
left: 0,
right: 0,
height: "25%",
backgroundColor: "rgba(0, 0, 0, 0.3)",
display: "flex",
justifyContent: "center",
alignItems: "center"
}
} : {}
},
onClick: o ? A : q
}
),
/* @__PURE__ */ r(
at,
{
isMobile: a,
size: m.size || (a ? 64 : 100),
isMyself: o,
timezone: t?.metadata?.timezone || M,
status: g,
onChange: L
}
)
]
}
),
/* @__PURE__ */ l(
s,
{
sx: {
flex: 1,
overflow: "hidden"
},
children: [
/* @__PURE__ */ l(
z,
{
variant: "h6",
component: "div",
sx: {
flex: 1,
fontWeight: 600,
display: "flex",
alignItems: "center",
gap: 1,
fontSize: "24px !important",
flexWrap: "wrap"
},
children: [
/* @__PURE__ */ r(
"span",
{
style: {
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap"
},
children: t?.fullName
}
),
o ? /* @__PURE__ */ r(ot, { user: t, switchPassport: k }) : null
]
}
),
/* @__PURE__ */ r(
Q,
{
did: t.did,
size: 16,
showQrcode: !0,
copyable: !0,
compact: !f,
responsive: !f,
locale: x
}
)
]
}
)
]
}
),
!o && D ? /* @__PURE__ */ r(s, { sx: { mt: 2 }, children: /* @__PURE__ */ r(it, { user: t }) }) : null,
/* @__PURE__ */ r(lt, { isMobile: a, isMyself: o, user: t, onSave: B }),
o ? /* @__PURE__ */ l(N, { children: [
/* @__PURE__ */ r(T, { sx: { my: a ? 1 : 3 } }),
a && !c ? /* @__PURE__ */ r(
s,
{
sx: {
display: "flex",
justifyContent: "center",
mb: 0
},
children: /* @__PURE__ */ r(
F,
{
size: "small",
onClick: b,
sx: {
backgroundColor: "grey.50",
"&:hover": {
backgroundColor: "grey.50",
opacity: 0.8
}
},
children: d ? /* @__PURE__ */ r(X, {}) : /* @__PURE__ */ r(Z, {})
}
)
}
) : null,
/* @__PURE__ */ l(W, { in: d, timeout: "auto", children: [
/* @__PURE__ */ r(
z,
{
component: "p",
sx: {
color: "text.secondary",
fontSize: "14px",
mb: 2
},
children: w("profile.justForYou")
}
),
/* @__PURE__ */ r(nt, { user: t, isMySelf: o })
] })
] }) : null
]
}
);
}
export {
kt as default
};