@devgateway/dvz-ui-react/dist/esm/embeddable/child-page-menu/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 c, jsx as t } from "react/jsx-runtime";
import { Container as N, Grid as g, Segment as I, Menu as o, Image as S } from "semantic-ui-react";
import { PageProvider as x, PageConsumer as _, MediaProvider as y, MediaConsumer as M } from "@devgateway/wp-react-lib";
import { useState as v, useEffect as b } from "react";
import { injectIntl as w } from "react-intl";
import D from "../connected-templates/PostContent.js";
const j = (n) => /* @__PURE__ */ t("img", { src: n.media && n.media.guid ? n.media.guid.rendered : null, className: "svg-icon" }), A = function(n) {
  return n ? n.toString().replace(/&#(\d+);/g, function(f, s) {
    return String.fromCharCode(s);
  }) : "";
}, E = ({ pages: n, title: f, selected: s, onPageSelected: p }) => {
  const a = n ? n.sort((e, r) => e.menu_order - r.menu_order) : [], [l, m] = v({ id: -1 });
  b(() => {
    m(a[0]);
  }, [n]);
  const P = a.map((e) => ({
    page: e,
    id: e.id,
    label: e.meta_fields.label ? e.meta_fields.label : e.title.rendered,
    iconComponent: /* @__PURE__ */ t(y, { id: e.meta_fields && e.meta_fields.icon ? e.meta_fields.icon[0] : null, children: /* @__PURE__ */ t(M, { children: /* @__PURE__ */ t(j, {}) }) })
  })), [u, C] = v(null);
  b(() => {
    p(u);
  }, [u]);
  const d = ({ pages: e, selected: r, expanded: h }) => (!u && h && C(e[0]), e && e.map((i) => /* @__PURE__ */ t(
    o.Item,
    {
      className: `${r && i.id == r.id ? "selected" : ""}`,
      onClick: (k) => p(i),
      children: i.title.rendered
    },
    i.id
  )));
  return /* @__PURE__ */ c(N, { fluid: !0, children: [
    /* @__PURE__ */ c(o, { vertical: !0, text: !0, size: "mini", className: "navbar-menu", children: [
      /* @__PURE__ */ t(o.Item, { header: !0, children: f }),
      P.map((e) => /* @__PURE__ */ c(
        o.Item,
        {
          className: `group ${e.id === l.id ? "group-selected" : ""}`,
          onClick: (r) => {
            m(e);
            const h = document.getElementsByClassName("group");
            for (let i = 0; i < h.length; i++)
              h[i].classList.remove("group-selected");
            r.currentTarget.classList.add("group-selected");
          },
          children: [
            e.iconComponent ? e.iconComponent : /* @__PURE__ */ t(S, { src: e.icon }),
            /* @__PURE__ */ t("span", { children: A(e.label) }),
            /* @__PURE__ */ t("div", { className: "green-rectangle" }),
            /* @__PURE__ */ t(o.Menu, { className: `${e.id == l.id ? "expanded" : "collapsed"}`, children: /* @__PURE__ */ t(
              x,
              {
                locale: "en",
                parent: e.id,
                store: "child_menu" + e.id,
                perPage: 100,
                children: /* @__PURE__ */ t(_, { children: /* @__PURE__ */ t(d, { selected: s, expanded: e.id == l.id }) })
              }
            ) })
          ]
        },
        e.label
      ))
    ] }),
    /* @__PURE__ */ t("div", { className: "navbar-footer", children: /* @__PURE__ */ t("p", { className: "navbar-footer-text", children: "Data and publications were made possible through support of the United States Agency for International Development (USAID)." }) })
  ] });
}, G = ({ page: n }) => /* @__PURE__ */ t(N, { children: /* @__PURE__ */ t(D, { post: n }) }), $ = (n) => {
  const {
    "data-height": f,
    "data-style": s,
    "data-columns": p,
    "data-parent": a,
    "data-title": l = "Menu",
    editing: m,
    component: P,
    unique: u,
    intl: { locale: C }
  } = n, [d, e] = v(null);
  return /* @__PURE__ */ c(N, { style: m ? { padding: "4px", margin: "0px" } : {}, fluid: !0, className: "viz child page navigator", children: [
    a && /* @__PURE__ */ t(
      x,
      {
        locale: C,
        parent: a,
        noCache: !0,
        store: "child_menu" + n.parent + "_" + n.unique,
        perPage: 100,
        children: /* @__PURE__ */ t(g, { children: /* @__PURE__ */ c(g.Row, { children: [
          /* @__PURE__ */ t(g.Column, { className: "navigator", width: 2, children: /* @__PURE__ */ t(_, { children: /* @__PURE__ */ t(
            E,
            {
              selected: d,
              title: l,
              onPageSelected: e
            }
          ) }) }),
          /* @__PURE__ */ t(g.Column, { width: 14, className: "content", children: d && /* @__PURE__ */ t(G, { page: d }) })
        ] }) })
      }
    ),
    !a && /* @__PURE__ */ t(I, { color: "red", children: "No child pages here" })
  ] });
}, H = w($);
export {
  H as default
};