@blocklet/ui-react/lib/Header/index.js

Some useful front-end web components that can be used in Blocklets.

import { jsx as n } from "react/jsx-runtime";
import { useMemo as k } from "react";
import { useMemoizedFn as $ } from "ahooks";
import { withErrorBoundary as N } from "react-error-boundary";
import { ErrorFallback as H } from "@arcblock/ux/lib/ErrorBoundary";
import { styled as y, useTheme as C, deepmerge as T, ThemeProvider as _ } from "@arcblock/ux/lib/Theme";
import { ResponsiveHeader as E } from "@arcblock/ux/lib/Header";
import B, { Products as F } from "@arcblock/ux/lib/NavMenu";
import { useLocaleContext as L } from "@arcblock/ux/lib/Locale/context";
import { translate as P } from "@arcblock/ux/lib/Locale/util";
import R from "@arcblock/ux/lib/hooks/use-blocklet-logo";
import z from "lodash/omit";
import A from "lodash/isFinite";
import M from "clsx";
import W from "../Icon/index.js";
import { mapRecursive as j, flatRecursive as S, matchPaths as U } from "../utils.js";
import { formatBlockletInfo as K, getLocalizedNavigation as O, publicPath as q } from "../blocklets.js";
import D from "../common/header-addons.js";
import { useWalletHiddenTopbar as G } from "../common/wallet-hidden-topbar.js";
import J from "../libs/with-hide-when-embed.js";
const Q = {
  en: {
    products: "Products"
  },
  zh: {
    products: "产品"
  }
}, V = (e) => {
  if (!e?.length)
    return { navItems: [], activeId: null };
  let r = 1;
  const s = j(e, (o) => {
    const i = o.icon ? /* @__PURE__ */ n(W, { icon: o.icon }) : null;
    if (o.items)
      return {
        id: `${r++}`,
        label: o.title,
        icon: i,
        children: o.items
      };
    let l = {};
    return (o.link?.startsWith("http") || o.link?.startsWith("//")) && (l = {
      target: "_blank",
      rel: "noreferrer"
    }), {
      id: `${r++}`,
      label: /* @__PURE__ */ n("a", { href: o.link, ...l, children: o.title }),
      icon: i,
      description: o.description,
      link: o.link
    };
  }, "items"), a = S(s), d = U(a.map((o) => o.link));
  return { navItems: s, activeId: d >= 0 ? a[d].id : null };
};
function X({
  meta: e = {},
  addons: r = void 0,
  sessionManagerProps: u = {
    showRole: !0
  },
  homeLink: s = q,
  theme: a = void 0,
  hideNavMenu: d = !1,
  showDomainWarningDialog: o = !0,
  ...i
}) {
  G();
  const l = C(), { locale: h } = L() || {}, v = $((t, f = {}) => P(Q, t, h, "en", f)), m = k(() => {
    const t = Object.assign({}, window.blocklet, e);
    try {
      return K(t);
    } catch (f) {
      return console.error("Failed to format blocklet info", f, t), t;
    }
  }, [e]), c = k(() => T(l, a), [l, a]), x = R({
    meta: e,
    theme: a
  });
  if (!m.appName)
    return null;
  const I = O(m?.navigation?.header, h), b = V(I), { navItems: p, activeId: w } = b, g = parseInt(window.blocklet?.USE_ARCBLOCK_THEME, 10);
  return A(g) && p.splice(g, 0, {
    label: v("products"),
    // eslint-disable-next-line react/no-unstable-nested-components
    children: ({ isOpen: t }) => /* @__PURE__ */ n(F, { isOpen: t })
  }), /* @__PURE__ */ n(_, { theme: c, children: /* @__PURE__ */ n(
    Y,
    {
      homeLink: s,
      logo: /* @__PURE__ */ n("img", { src: x, alt: "logo" }),
      addons: (
        // @ts-ignore
        /* @__PURE__ */ n(
          D,
          {
            formattedBlocklet: m,
            addons: typeof r == "function" ? (t) => r(t, { navigation: b }) : r,
            sessionManagerProps: u,
            showDomainWarningDialog: o
          }
        )
      ),
      ...z(i, ["bordered"]),
      $bordered: i?.bordered,
      $bgcolor: c.palette.background.default,
      className: M("blocklet__header", i.className),
      children: d || !p?.length ? null : ({ isMobile: t }) => (
        // @ts-ignore
        /* @__PURE__ */ n(
          B,
          {
            mode: t ? "inline" : "horizontal",
            activeId: w,
            items: p,
            className: "header-nav",
            bgColor: "transparent",
            textColor: c.palette.grey[500],
            activeTextColor: c.palette.text.primary
          }
        )
      )
    }
  ) });
}
const Y = y(E)`
  ${({ $bgcolor: e }) => `background-color: ${e || "#fff"};`}
  .header-logo {
    min-width: 44px;
  }
  ${({ $bordered: e, theme: r }) => e ? `border-bottom: 1px solid ${r.palette.divider};` : ""}
  ${(e) => e.theme.breakpoints.down("md")} {
    .header-logo {
      min-width: 32px;
    }
  }
`, wo = N(J(X), {
  FallbackComponent: H
});
export {
  wo as default
};