@devgateway/dvz-ui-react/dist/cjs/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.

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