@blocklet/ui-react
Version:
Some useful front-end web components that can be used in Blocklets.
253 lines (252 loc) • 8.31 kB
JavaScript
import { jsxs as c, jsx as r, Fragment as E } from "react/jsx-runtime";
import { Box as l, Typography as y, Divider as B, IconButton as N, Collapse as T } from "@mui/material";
import F from "@arcblock/ux/lib/Avatar";
import K from "@arcblock/ux/lib/DID";
import { useMemoizedFn as W } from "ahooks";
import { translate as O } from "@arcblock/ux/lib/Locale/util";
import { useLocaleContext as Q } from "@arcblock/ux/lib/Locale/context";
import V from "lodash/noop";
import { useState as S, useEffect as U } from "react";
import C from "@arcblock/ux/lib/Toast";
import { parseURL as Y, joinURL as $ } from "ufo";
import { KeyboardArrowUp as q, KeyboardArrowDown as G } from "@mui/icons-material";
import { translations as H } from "../../libs/locales.js";
import { formatAxiosError as z } from "../../libs/utils.js";
import { currentTimezone as J, getStatusDuration as X, isValidUrl as Z } from "./utils.js";
import _ from "./switch-role.js";
import P from "./metadata.js";
import M from "./user-status.js";
import tt from "./user-info.js";
import { client as j } from "../../../libs/client.js";
function St({
user: t,
isMyself: a = !0,
showFullDid: f = !0,
switchPassport: I,
switchProfile: R,
isMobile: o = !1,
onlyProfile: s = !1,
refreshProfile: u,
...m
}) {
const { locale: x } = Q(), [h, g] = S(void 0), w = W((n, e = {}) => O(H, n, x, "en", e)), [d, v] = S(!o || s);
U(() => {
g(t?.metadata?.status);
}, [t]), U(() => {
v(!o || s);
}, [o, s]);
const A = async (n) => {
if (a)
try {
if (n) {
const e = X(n);
n.dateRange = e.length > 0 ? e : h?.dateRange ?? [];
}
g(n), await j.user.saveProfile({
// @ts-ignore
metadata: {
...t?.metadata ?? { joinedAt: t?.createdAt, email: t?.email, phone: t?.phone },
status: n || {}
}
}), u();
} catch (e) {
console.error(e), C.error(z(e));
}
}, b = () => {
v(!d);
};
if (!t)
return null;
const D = async (n) => {
if (!a)
return;
const { metadata: e, address: L } = n;
try {
const p = e?.links?.map((i) => {
if (!i.url || !Z(i.url)) return null;
try {
return Y(i.url).protocol || (i.url = $("https://", i.url)), i;
} catch {
return console.error("Invalid URL:", i.url), null;
}
}).filter((i) => !!i) || [];
e.links = p, await j.user.saveProfile({ metadata: e, address: L }), u();
} catch (p) {
console.error(p), C.error(z(p));
}
};
return /* @__PURE__ */ c(
l,
{
...m,
sx: {
position: "relative",
...m.sx ?? {}
},
children: [
/* @__PURE__ */ c(
l,
{
className: "user-info",
sx: {
display: "flex",
flexDirection: o ? "row" : "column",
gap: 2
},
children: [
/* @__PURE__ */ c(
l,
{
className: "user-avatar",
sx: {
position: "relative",
display: "flex",
alignItems: "center",
justifyContent: "space-between"
},
children: [
/* @__PURE__ */ r(
F,
{
src: t?.avatar,
did: t?.did,
size: m.size || (o ? 64 : 100),
variant: "circle",
shape: "circle",
sx: {
borderRadius: "100%",
backgroundColor: "#fff",
position: "relative",
overflow: "hidden",
flexShrink: 0,
...a ? {
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: a ? R : V
}
),
/* @__PURE__ */ r(
M,
{
isMobile: o,
size: m.size || (o ? 64 : 100),
isMyself: a,
timezone: t?.metadata?.timezone || J,
status: h,
onChange: A
}
)
]
}
),
/* @__PURE__ */ c(
l,
{
sx: {
flex: 1,
overflow: "hidden"
},
children: [
/* @__PURE__ */ c(
y,
{
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
}
),
a ? /* @__PURE__ */ r(_, { user: t, switchPassport: I }) : null
]
}
),
/* @__PURE__ */ r(K, { did: t.did, showQrcode: !0, copyable: !0, compact: !f, responsive: !f, locale: x })
]
}
)
]
}
),
/* @__PURE__ */ r(P, { isMobile: o, isMyself: a, user: t, onSave: D }),
a ? /* @__PURE__ */ c(E, { children: [
/* @__PURE__ */ r(B, { sx: { my: o ? 1 : 3 } }),
o && !s ? /* @__PURE__ */ r(
l,
{
sx: {
display: "flex",
justifyContent: "center",
mb: 0
},
children: /* @__PURE__ */ r(
N,
{
size: "small",
onClick: b,
sx: {
backgroundColor: "grey.50",
"&:hover": {
backgroundColor: "grey.50",
opacity: 0.8
}
},
children: d ? /* @__PURE__ */ r(q, {}) : /* @__PURE__ */ r(G, {})
}
)
}
) : null,
/* @__PURE__ */ c(T, { in: d, timeout: "auto", children: [
/* @__PURE__ */ r(
y,
{
component: "p",
sx: {
color: "text.secondary",
fontSize: "14px",
mb: 2
},
children: w("profile.justForYou")
}
),
/* @__PURE__ */ r(tt, { user: t, isMySelf: a })
] })
] }) : null
]
}
);
}
export {
St as default
};