@blocklet/ui-react
Version:
Some useful front-end web components that can be used in Blocklets.
302 lines (301 loc) • 10 kB
JavaScript
import { jsxs as i, jsx as t, Fragment as $ } from "react/jsx-runtime";
import A from "prop-types";
import { useState as v, useRef as Y, useMemo as E, useEffect as ee } from "react";
import { useMemoizedFn as k, useRequest as te, useDebounce as re, useInfiniteScroll as oe } from "ahooks";
import { WELLKNOWN_SERVICE_PATH_PREFIX as ne } from "@abtnode/constant";
import { Box as r, Button as P, Avatar as w, Typography as s, Menu as ie, TextField as se, InputAdornment as ae, Divider as W, MenuItem as L, ListItemAvatar as R, ListItemText as D } from "@mui/material";
import { withQuery as le, joinURL as ce } from "ufo";
import { KeyboardArrowDown as de, Search as pe, Add as he, OpenInNew as me } from "@mui/icons-material";
import { translate as ue } from "@arcblock/ux/lib/Locale/util";
import ge from "./use-org.js";
import xe from "./create.js";
import fe from "./locales.js";
const H = 20;
function ye({ session: a, locale: h = "en" }) {
const [S, C] = v(null), [m, I] = v(""), [j, u] = v(!1), F = Y(null), l = k((e, o = {}) => ue(fe, e, h, "en", o)), { getOrgs: N, getCurrentOrg: _ } = ge(a), n = E(() => a?.user?.role || "", [a?.user?.role]), { data: g = {} } = te(
() => _(n),
{
ready: !!n,
refreshDeps: [n],
onError: (e) => {
console.error("Failed to get organization role", e);
}
}
), d = E(() => g || {
name: a?.user?.passports?.find((o) => o.name === n)?.title || n || "-"
}, [g, n, a?.user?.passports]), B = re(m, { wait: 500 }), { data: K, loadMore: V, loadingMore: z, reload: O } = oe(
async (e) => {
const c = { page: e ? Math.ceil(e.list.length / H) + 1 : 1, pageSize: H, search: m }, y = await N(c), { orgs: b = [], paging: Z } = y || {};
return { list: b, total: Z?.total || 0 };
},
{
ready: !!n,
reloadDeps: [B],
isNoMore: (e) => e?.list.length ? e.list.length >= e?.total : !0,
onError: (e) => {
console.error("Failed to fetch organizations list", e);
}
}
), { list: p = [], total: q = 0 } = K || {}, M = p.length < q, U = k((e) => {
const o = e.target, { scrollTop: c, scrollHeight: y, clientHeight: b } = o;
y - c - b < 50 && !z && M && V();
}), x = !!S;
ee(() => {
x && O();
}, [x, O]);
const G = (e) => {
C(e.currentTarget);
}, f = () => {
C(null), u(!1), I("");
}, J = (e) => {
a.switchPassport(
() => {
window.location.reload();
},
{ orgId: e.id }
), f();
}, Q = () => {
u(!0);
}, T = () => {
const e = le(ce(ne, "user/orgs"), { locale: h });
window.location.href = e, f();
}, X = (e) => /* @__PURE__ */ i(
L,
{
onClick: () => J(e),
selected: e.id === d.id,
sx: {
py: 1.5,
px: 2,
"&.Mui-selected": {
backgroundColor: "action.selected",
"&:hover": {
backgroundColor: "action.hover"
}
}
},
children: [
/* @__PURE__ */ t(R, { sx: { minWidth: 40 }, children: /* @__PURE__ */ t(
w,
{
sx: {
width: 28,
height: 28,
fontSize: 14,
bgcolor: e.isOwner ? "primary.main" : "grey.400"
},
children: e.name?.[0]
}
) }),
/* @__PURE__ */ i(r, { sx: { display: "flex", alignItems: "center", flex: 1 }, children: [
/* @__PURE__ */ t(
D,
{
sx: {
"& .MuiListItemText-primary": {
mb: 0
},
"& .MuiListItemText-secondary": {
mt: "-2px"
}
},
primary: /* @__PURE__ */ t(s, { variant: "body2", sx: { fontWeight: 500, lineHeight: 1.2 }, children: e.name }),
secondary: /* @__PURE__ */ t(s, { variant: "caption", color: "text.secondary", sx: { lineHeight: 1.1 }, children: e.passports?.[0]?.title })
}
),
e.id === d.id && /* @__PURE__ */ t(r, { sx: { display: "flex", alignItems: "center", justifyContent: "center", ml: 1 }, children: /* @__PURE__ */ t(s, { variant: "caption", color: "primary", sx: { fontSize: 10 }, children: "✓" }) })
] })
]
},
e.id
);
return /* @__PURE__ */ i(r, { children: [
/* @__PURE__ */ i(
P,
{
ref: F,
onClick: G,
endIcon: /* @__PURE__ */ t(de, {}),
sx: {
display: "flex",
alignItems: "center",
gap: 1,
px: 2,
py: 1,
borderRadius: 1,
textTransform: "none",
color: "text.primary",
"&:hover": {
backgroundColor: "action.hover"
}
},
"data-testid": "org-switch-button",
children: [
/* @__PURE__ */ t(
w,
{
sx: {
width: 24,
height: 24,
fontSize: 12,
bgcolor: "primary.main"
},
children: d.name?.[0]
}
),
/* @__PURE__ */ t(s, { variant: "body2", sx: { fontWeight: 500 }, children: d.name })
]
}
),
/* @__PURE__ */ i(
ie,
{
anchorEl: S,
open: x,
onClose: f,
anchorOrigin: {
vertical: "bottom",
horizontal: "left"
},
transformOrigin: {
vertical: "top",
horizontal: "left"
},
PaperProps: {
sx: {
width: 340,
maxHeight: 480,
overflow: "visible",
mt: 0.5,
borderRadius: 2,
boxShadow: "0px 4px 20px rgba(0, 0, 0, 0.08)",
border: (e) => `1px solid ${e.palette.divider}`
}
},
MenuListProps: {
sx: { py: 0 }
},
children: [
/* @__PURE__ */ t(r, { sx: { p: 1.5, pb: 1 }, children: /* @__PURE__ */ t(
se,
{
fullWidth: !0,
size: "small",
placeholder: l("search"),
value: m,
onChange: (e) => I(e.target.value),
InputProps: {
startAdornment: /* @__PURE__ */ t(ae, { position: "start", children: /* @__PURE__ */ t(pe, { fontSize: "small", color: "action" }) })
},
onClick: (e) => e.stopPropagation(),
onKeyDown: (e) => e.stopPropagation(),
sx: {
"& .MuiOutlinedInput-root": {
borderRadius: 1
}
}
}
) }),
/* @__PURE__ */ t(r, { sx: { px: 2, pb: 1 }, children: /* @__PURE__ */ t(
s,
{
variant: "subtitle2",
color: "text.secondary",
sx: {
fontSize: 11,
fontWeight: 600,
textTransform: "uppercase",
letterSpacing: 0.5
},
children: l("orgs")
}
) }),
/* @__PURE__ */ t(r, { sx: { maxHeight: 240, overflow: "auto" }, onScroll: U, children: p.length > 0 ? /* @__PURE__ */ t($, { children: p.map((e, o) => {
const c = o === p.length - 1;
return /* @__PURE__ */ i(r, { children: [
X(e),
c && M && /* @__PURE__ */ t(
r,
{
sx: {
display: "flex",
justifyContent: "center",
py: 1,
color: "text.secondary",
fontSize: "0.875rem"
},
children: z ? l("loadingMore") : ""
}
)
] }, e.id);
}) }) : /* @__PURE__ */ t(r, { sx: { px: 2, py: 3, textAlign: "center" }, children: /* @__PURE__ */ t(s, { variant: "body2", color: "text.secondary", children: l("myJoinedEmpty") }) }) }),
/* @__PURE__ */ t(W, {}),
/* @__PURE__ */ i(
L,
{
onClick: Q,
sx: {
py: 1.5,
px: 2,
"&:hover": {
backgroundColor: "action.hover"
}
},
children: [
/* @__PURE__ */ t(R, { sx: { minWidth: 40 }, children: /* @__PURE__ */ t(
w,
{
sx: {
width: 28,
height: 28,
bgcolor: "success.main",
color: "success.contrastText"
},
children: /* @__PURE__ */ t(he, { fontSize: "small" })
}
) }),
/* @__PURE__ */ t(
D,
{
primary: /* @__PURE__ */ t(s, { variant: "body2", sx: { fontWeight: 500 }, children: l("createNew") })
}
)
]
}
),
/* @__PURE__ */ t(W, {}),
/* @__PURE__ */ t(r, { sx: { p: 1.5 }, children: /* @__PURE__ */ t(
P,
{
onClick: T,
variant: "text",
component: "a",
size: "small",
endIcon: /* @__PURE__ */ t(me, { fontSize: "small" }),
sx: {
color: "primary.main",
fontWeight: 500,
p: 0,
fontSize: 14,
minWidth: "auto",
"&:hover": {
backgroundColor: "transparent",
textDecoration: "underline"
}
},
children: l("viewAll")
}
) })
]
}
),
j && /* @__PURE__ */ t(xe, { onSuccess: T, onCancel: () => u(!1), locale: h })
] });
}
ye.propTypes = {
session: A.object.isRequired,
locale: A.string
};
export {
ye as default
};