@devgateway/dvz-ui-react/dist/esm/embeddable/pagemodules/index.js

A modular, embeddable React component library for data visualization and UI, built with TypeScript. Provides reusable components for charts, maps, dashboards, and more, with built-in support for internationalization and Redux integration.

import { jsxs as f, jsx as t } from "react/jsx-runtime";
import { Menu as h, Image as x, Container as b } from "semantic-ui-react";
import { InView as M } from "react-intersection-observer";
import T, { useEffect as N, useState as S, useCallback as I } from "react";
import { PageProvider as w, PageConsumer as k, MediaProvider as P, MediaConsumer as p, PostContent as y } from "@devgateway/wp-react-lib";
import { injectIntl as H } from "react-intl";
import { connect as L } from "react-redux";
import { setPageModuleProps as $ } from "../reducers/data.js";
import j from "./FloatingNavigator.js";
const _ = function(e) {
  return e ? e.toString().replace(/&#(\d+);/g, function(n, o) {
    return String.fromCharCode(o);
  }) : "";
}, E = ({ title: e, subtitle: n, icon: o, media: r }) => /* @__PURE__ */ f(h, { className: "header title", text: !0, children: [
  /* @__PURE__ */ t(h.Item, { children: /* @__PURE__ */ t(
    x,
    {
      src: r && r.guid ? r.guid.rendered : o,
      alt: r && r.alt_text ? r.alt_text : ""
    }
  ) }),
  /* @__PURE__ */ t(h.Header, { children: /* @__PURE__ */ t("div", { children: /* @__PURE__ */ f("h2", { className: "page-module-title", children: [
    e,
    /* @__PURE__ */ t("span", { style: { display: "block" }, className: "page-module-subtitle", children: n })
  ] }) }) })
] }), O = (e) => {
  var n;
  return /* @__PURE__ */ t("img", { src: (n = e.media) != null && n.guid ? e.media.guid.rendered : null, alt: "" });
}, R = ({ page: e }) => {
  var n;
  return /* @__PURE__ */ f(b, { fluid: !0, className: `section ${e.slug}`, id: e.id, children: [
    /* @__PURE__ */ t("div", { id: `${e.slug}` }),
    /* @__PURE__ */ t(P, { id: (n = e.meta_fields) != null && n.icon ? e.meta_fields.icon[0] : null, children: /* @__PURE__ */ t(p, { children: /* @__PURE__ */ t(E, { title: _(e.title.rendered), subtitle: _(e.meta_fields.subtitle) }) }) }),
    e && /* @__PURE__ */ t(y, { as: b, fluid: !0, post: e })
  ] });
}, q = ({ pages: e, locale: n, editing: o, navTitle: r, toTopLabel: d }) => {
  const [c, l] = S([]), s = I((i, {
    // @ts-ignore
    direction: a = "down",
    onScreen: g
  }) => {
    l(g ? (u) => u.indexOf(i) === -1 ? [...u, i] : u : (u) => u.filter((C) => C !== i));
  }, []), m = e ? e.sort((i, a) => i.menu_order - a.menu_order) : [], v = m.map((i) => {
    var a;
    return {
      active: c.includes(i.id),
      id: i.id,
      label: i.meta_fields.label ? i.meta_fields.label : i.title.rendered,
      iconComponent: /* @__PURE__ */ t(P, { id: (a = i.meta_fields) != null && a.icon ? i.meta_fields.icon[0] : null, children: /* @__PURE__ */ t(p, { children: /* @__PURE__ */ t(O, {}) }) })
    };
  });
  return /* @__PURE__ */ f(T.Fragment, { children: [
    !o && /* @__PURE__ */ t(j, { navTitle: r, toTopLabel: d, sections: v }),
    /* @__PURE__ */ t("div", { className: "pages", children: m.map((i) => /* @__PURE__ */ t(
      M,
      {
        as: "div",
        onChange: (a, g) => s(i.id, {
          onScreen: a,
          direction: g.boundingClientRect.top < 0 ? "up" : "down"
        }),
        children: /* @__PURE__ */ t(
          R,
          {
            locale: n,
            page: i,
            onVisibilityUpdate: s
          }
        )
      },
      i.id
    )) })
  ] });
}, D = (e) => {
  const {
    navTitle: n,
    toTopLabel: o,
    editing: r,
    parent: d,
    unique: c,
    locale: l,
    onLoadPageModule: s
  } = e;
  return N(() => {
    s({ data: e });
  }, [e]), /* @__PURE__ */ t(b, { className: "viz dashboard green", fluid: !0, children: e.parent && /* @__PURE__ */ t(
    w,
    {
      locale: l,
      parent: e.parent,
      store: `modules_${d}_${c}`,
      perPage: 100,
      children: /* @__PURE__ */ t(k, { children: /* @__PURE__ */ t(
        q,
        {
          toTopLabel: o,
          navTitle: n,
          editing: r === "true",
          locale: l
        }
      ) })
    }
  ) });
}, V = (e, n) => {
  let {
    "data-nav-label": o = "Sections",
    "data-to-top-label": r = "TO THE TOP",
    "data-preview-mode": d = "Desktop",
    editing: c,
    parent: l,
    unique: s,
    intl: { locale: m }
  } = n;
  return d === "undefined" && (d = "Desktop"), {
    navTitle: o,
    toTopLabel: r,
    previewMode: d,
    editing: c,
    parent: l,
    unique: s,
    locale: m
  };
}, z = {
  onLoadPageModule: $
}, X = L(V, z)(H(D));
export {
  E as SectionHeader,
  X as default
};