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

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

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