@blocklet/ui-react
Version:
Some useful front-end web components that can be used in Blocklets.
109 lines (108 loc) • 3.7 kB
JavaScript
import { jsx as i } from "react/jsx-runtime";
import "iconify-icon";
import { use as I, useMemo as v, useLayoutEffect as w } from "react";
import t from "prop-types";
import { SessionContext as R } from "@arcblock/did-connect/lib/Session";
import { useLocaleContext as T } from "@arcblock/ux/lib/Locale/context";
import z from "@arcblock/ux/lib/Img";
import A from "@arcblock/ux/lib/Layout/dashboard";
import C from "@arcblock/ux/lib/hooks/use-blocklet-logo";
import { SessionManagerProps as D, BlockletMetaProps as M } from "../types.js";
import { mapRecursive as O, flatRecursive as j, matchPaths as H } from "../utils.js";
import { formatBlockletInfo as S, getLocalizedNavigation as _, filterNavByRole as E, publicPath as m } from "../blocklets.js";
import U from "../common/header-addons.js";
import { useWalletHiddenTopbar as q } from "../common/wallet-hidden-topbar.js";
function F({
meta: s = {},
fallbackUrl: a = m,
invalidPathFallback: l = null,
headerAddons: k = void 0,
sessionManagerProps: L = {
showRole: !0,
// dashboard 默认退出登录行为: 跳转到 (root) blocklet 首页
onLogout: () => {
window.location.href = m;
}
},
links: c = [],
showDomainWarningDialog: N = !0,
...h
}) {
q();
const d = I(R)?.session?.user, g = d?.role, { locale: x } = T() || {}, r = v(() => {
const e = Object.assign({}, window.blocklet, s);
try {
return S(e);
} catch (n) {
return console.error("Failed to format blocklet info", n, e), e;
}
}, [s]), { localizedNav: y, flattened: f, matchedIndex: b } = v(() => {
let e = _(r?.navigation?.dashboard, x) || [];
e = E(e, g), e = O(
e,
(o) => {
let u = null;
return o.icon && (o.icon.startsWith("http") || o.icon.startsWith("data:") ? u = /* @__PURE__ */ i(z, { src: o.icon }) : u = /* @__PURE__ */ i("iconify-icon", { height: "100%", width: "100%", icon: o.icon })), {
id: o.id,
title: o.title,
url: o.link,
icon: u,
// https://github.com/ArcBlock/ux/issues/755#issuecomment-1208692620
external: !0,
children: o.items
};
},
"items"
);
const n = j(e).filter((o) => !!o.url), p = H(n.map((o) => o.url));
return p !== -1 && (n[p].active = !0), { localizedNav: e, flattened: n, matchedIndex: p };
}, [r, x, g]), P = typeof c == "function" ? c(y) : [...y, ...c], W = C({
meta: s
});
if (w(() => {
d && !f?.length && a && (window.location.href = a);
}, [a]), w(() => {
d && f?.length && b === -1 && l && l();
}, [l, f, b]), !r.appName)
return null;
const { appName: B } = r;
return /* @__PURE__ */ i(
A,
{
title: B,
fullWidth: !0,
sidebarWidth: 128,
legacy: !1,
links: P,
...h,
headerProps: {
homeLink: m,
logo: /* @__PURE__ */ i("img", { src: W, alt: "logo" }),
addons: /* @__PURE__ */ i(
U,
{
formattedBlocklet: r,
addons: k,
sessionManagerProps: L,
showDomainWarningDialog: N
}
),
...h.headerProps
}
}
);
}
F.propTypes = {
meta: M,
// 如果当前用户没有权限访问任何导航菜单, 则自动跳转到 fallbackUrl, 默认值为 publicPath, 设置为 null 表示禁用自动跳转
fallbackUrl: t.string,
// 当前路径未匹配任何 nav links 时的 fallback, 默认行为跳转到首个可用的 nav link
invalidPathFallback: t.func,
headerAddons: t.oneOfType([t.func, t.node]),
sessionManagerProps: D,
links: t.oneOfType([t.array, t.func]),
showDomainWarningDialog: t.bool
};
export {
F as default
};