@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 g, 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 _, 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 P = function(e) {
  return e ? e.toString().replace(/&#(\d+);/g, function(n, r) {
    return String.fromCharCode(r);
  }) : "";
}, E = ({ title: e, subtitle: n, icon: r, media: o }) => /* @__PURE__ */ f(g, { className: "header title", text: !0, children: [
  /* @__PURE__ */ t(g.Item, { children: /* @__PURE__ */ t(
    x,
    {
      src: o && o.guid ? o.guid.rendered : r,
      alt: o && o.alt_text ? o.alt_text : ""
    }
  ) }),
  /* @__PURE__ */ t(g.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, locale: n }) => {
  var r;
  return /* @__PURE__ */ f(b, { fluid: !0, className: `section ${e.slug}`, id: e.id, children: [
    /* @__PURE__ */ t("div", { id: `${e.slug}` }),
    /* @__PURE__ */ t(_, { id: (r = e.meta_fields) != null && r.icon ? e.meta_fields.icon[0] : null, children: /* @__PURE__ */ t(p, { children: /* @__PURE__ */ t(E, { title: P(e.title.rendered), subtitle: P(e.meta_fields.subtitle) }) }) }),
    e && /* @__PURE__ */ t(y, { as: b, fluid: !0, post: e })
  ] });
}, q = ({ pages: e, locale: n, editing: r, navTitle: o, toTopLabel: l }) => {
  const [s, d] = S([]), c = I((i, {
    direction: a = "down",
    onScreen: h
  }) => {
    d(h ? (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: s.includes(i.id),
      id: i.id,
      label: i.meta_fields.label ? i.meta_fields.label : i.title.rendered,
      iconComponent: /* @__PURE__ */ t(_, { 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: [
    !r && /* @__PURE__ */ t(j, { navTitle: o, toTopLabel: l, sections: v }),
    /* @__PURE__ */ t("div", { className: "pages", children: m.map((i) => /* @__PURE__ */ t(
      M,
      {
        as: "div",
        onChange: (a, h) => c(i.id, {
          onScreen: a,
          direction: h.boundingClientRect.top < 0 ? "up" : "down"
        }),
        children: /* @__PURE__ */ t(
          R,
          {
            locale: n,
            page: i,
            onVisibilityUpdate: c
          }
        )
      },
      i.id
    )) })
  ] });
}, D = (e) => {
  const {
    navTitle: n,
    toTopLabel: r,
    editing: o,
    parent: l,
    unique: s,
    locale: d,
    onLoadPageModule: c
  } = e;
  return N(() => {
    c({ data: e });
  }, [e]), /* @__PURE__ */ t(b, { className: "viz dashboard green", fluid: !0, children: e.parent && /* @__PURE__ */ t(
    w,
    {
      locale: d,
      parent: e.parent,
      store: `modules_${l}_${s}`,
      perPage: 100,
      children: /* @__PURE__ */ t(k, { children: /* @__PURE__ */ t(
        q,
        {
          toTopLabel: r,
          navTitle: n,
          editing: o === "true",
          locale: d
        }
      ) })
    }
  ) });
}, V = (e, n) => {
  let {
    "data-nav-label": r = "Sections",
    "data-to-top-label": o = "TO THE TOP",
    "data-preview-mode": l = "Desktop",
    editing: s,
    parent: d,
    unique: c,
    intl: { locale: m }
  } = n;
  return l === "undefined" && (l = "Desktop"), {
    navTitle: r,
    toTopLabel: o,
    previewMode: l,
    editing: s,
    parent: d,
    unique: c,
    locale: m
  };
}, z = {
  onLoadPageModule: $
}, X = L(V, z)(H(D));
export {
  E as SectionHeader,
  X as default
};