@devgateway/dvz-ui-react/dist/cjs/embeddable/tabbedposts/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";const e=require("react/jsx-runtime"),d=require("react"),a=require("semantic-ui-react"),g=require("@devgateway/wp-react-lib"),z=require("react-intl"),V=require("react-redux"),D=require("../connected-templates/PostIntro.js"),U=require("../../lib/hooks/window-dimensions.js"),Y=({posts:t,activeItem:u,setActive:i,showLabels:n})=>t?t.map(s=>e.jsx(a.Menu.Item,{onClick:()=>i(s.slug),className:s.slug===u?"active":"",children:n?e.jsx(g.PostLabel,{post:s}):e.jsx(a.Label,{children:e.jsx("span",{dangerouslySetInnerHTML:{__html:s.title.rendered}})})},s.id)):null,J=({posts:t,activeItem:u,setActive:i,showIcons:n,showLabels:s})=>{const c=t.length;return t?t.map(l=>{var f,b;return(f=l._embedded)!=null&&f["wp:featuredmedia"]&&l._embedded["wp:featuredmedia"][0].source_url,e.jsx(a.Grid.Column,{className:(l.slug===u?"active":"")+(n?" has-icon":""),children:e.jsxs(a.Button,{onClick:()=>i(l.slug),className:`nav  ${c===1?"one":""}`,children:[n&&e.jsx(g.MediaProvider,{id:(b=l.meta_fields)!=null&&b.icon?l.meta_fields.icon[0]:null,children:e.jsx(g.MediaConsumer,{children:e.jsx(g.PostIcon,{className:"icon"})})}),s?e.jsx(g.PostLabel,{post:l}):e.jsx(a.Label,{children:e.jsx("span",{dangerouslySetInnerHTML:{__html:l.title.rendered}})})]})},l.id)}):null},F=({posts:t,activeItem:u})=>(d.useEffect(()=>{const i=document.querySelector(".ui.container.content-tab");i&&(i.scrollTop=0)},[u]),t?t.map(i=>{let n={};return i.slug!==u?n={position:"absolute",left:"-3000px",width:"auto",height:"0px",overflow:"hidden",visibility:"hidden"}:n={visibility:"visible",position:"relative",width:"auto"},e.jsx(D,{as:a.Container,fluid:!0,post:i,style:n},i.slug)}):null),K=({posts:t,activeItem:u,setActive:i})=>{const[n,s]=d.useState(t.findIndex(o=>o.slug===u)),[c,l]=d.useState(null),f=d.useRef(null),[b,M]=d.useState(window.innerWidth<=1250);d.useEffect(()=>{if(c){const o=c.getBoundingClientRect().top+window.scrollY;window.scrollTo({top:o,behavior:"smooth"})}},[c]);const j=()=>{var o;return((o=window.screen.orientation)==null?void 0:o.type)||(window.innerWidth>window.innerHeight?"landscape-primary":"portrait-primary")},[w,N]=d.useState(j()),x=()=>{setTimeout(()=>{N(j()),M(window.innerWidth<=1250)},100)},P=o=>{setTimeout(()=>{var m;const h=o.querySelectorAll(".accordion .legends.container.has-standard-12-font-size.bottom, .legends.container.items-section");if(h.length!==0)for(const r of h){const y=r.closest(".ui.fluid.container.content"),p=y?y.querySelector(".data-source"):null;if(!p||r.offsetParent===null||p.offsetParent===null||r.offsetHeight===0||p.offsetHeight===0)continue;const T=p.getBoundingClientRect(),B=r.getBoundingClientRect(),H=window.getComputedStyle(p),E=window.getComputedStyle(r),W=Number.parseFloat(H.marginTop)||0,G=Number.parseFloat(E.marginBottom)||0,S=B.bottom+G,k=T.top-W;if(S>k){const C=S-k;p.style.marginTop=`${C+20}px`}const I=(m=r.closest(".wp-block-column.is-layout-flow.wp-block-column-is-layout-flow"))==null?void 0:m.nextElementSibling;if(I){const C=I.getBoundingClientRect(),R=window.getComputedStyle(I),_=Number.parseFloat(R.marginTop)||0,v=C.top-_;if(S>v){const q=S-v;I.style.marginTop=`${q+20}px`}}const L=r.closest(".chart.container");if(L){const C=L.getBoundingClientRect(),R=window.getComputedStyle(L),_=Number.parseFloat(R.marginBottom)||0,v=C.bottom+_,q=Number.parseFloat(E.marginTop)||0,$=B.top-q;if($<v){const O=v-$;r.style.marginTop=`${O+20}px`}}}},10)};d.useEffect(()=>(window.screen.orientation&&window.screen.orientation.addEventListener("change",x),window.addEventListener("resize",x),()=>window.removeEventListener("resize",x)),[]),d.useEffect(()=>{let o;const h=[];return n!==-1&&(o=setTimeout(()=>{document.querySelectorAll(".accordion").forEach(r=>P(r))},0)),()=>{clearTimeout(o),h.forEach(m=>m.disconnect())}},[n,b,w]);const A=(o,h)=>{const{index:m}=h,r=n===m?-1:m;s(r),i(t[m].slug),r!==-1&&l(o.currentTarget)};return e.jsx(a.Accordion,{fluid:!0,styled:!0,children:t.map((o,h)=>{var r;const m=(r=o.meta_fields)!=null&&r.icon?o.meta_fields.icon[0]:null;return e.jsxs(d.Fragment,{children:[e.jsx(a.Accordion.Title,{active:n===h,index:h,onClick:A,children:e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center"},children:[m&&e.jsx(g.MediaProvider,{id:m,children:e.jsx(g.MediaConsumer,{children:e.jsx(g.PostIcon,{className:"icon"})})}),e.jsx("span",{dangerouslySetInnerHTML:{__html:o.title.rendered},style:{marginLeft:m?"10px":"0"}})]}),e.jsx(a.Icon,{name:"chevron down"})]})}),e.jsx(a.Accordion.Content,{className:"accordion-post-content",active:n===h,children:e.jsx("div",{ref:f,children:e.jsx(D,{post:o,as:a.Container,fluid:!0})})})]},o.id)})})},Q=({posts:t,showLabels:u,height:i})=>{const[n,s]=d.useState(t?t[0].slug:null);return d.useEffect(()=>{setTimeout(()=>{if(window.location.hash){const c=window.location.hash.substr(1),l=document.getElementById(c);l&&t.map(f=>f.slug).indexOf(c)>-1&&(s(c),l.scrollIntoView({behavior:"auto",block:"start"}))}},0)},[t]),d.useEffect(()=>{n&&window.scrollTo({top:0,behavior:"smooth"})},[n]),e.jsxs(d.Fragment,{children:[t.map(c=>e.jsx("anchor",{id:c.slug},c.slug)),e.jsx(a.Menu,{className:"tabbed posts",text:!0,children:e.jsx(Y,{showLabels:u,posts:t,setActive:s,activeItem:n})}),e.jsx(a.Container,{className:"content-tab",style:{height:`${i}px`},children:e.jsx(F,{posts:t,activeItem:n})})]})},X=({posts:t,showLabels:u,showIcons:i,height:n})=>{const[s,c]=d.useState(t?t[0].slug:null);return e.jsx(d.Fragment,{children:e.jsxs(a.Grid,{stackable:!0,className:"tabbed posts",columns:t.length,style:{height:n+"px"},children:[e.jsx(J,{showIcons:i,showLabels:u,posts:t,activeItem:s,setActive:c}),e.jsx(a.Grid.Row,{style:{height:`${n}px`},children:e.jsx(a.Grid.Column,{width:16,className:"content",children:e.jsx(a.Container,{className:"content-tab",style:{height:`${n}px`},children:e.jsx(F,{className:"content-tab",posts:t,activeItem:s})})})})]})})},Z=t=>{var T;let{"data-type":u,"data-taxonomy":i,"data-categories":n,"data-items":s,"data-theme":c="light","data-show-icons":l,"data-use-scrolls":f,"data-show-labels":b,"data-height":M,"data-preview-mode":j="Desktop",pageModuleProps:w,parent:N,editing:x,unique:P}=t;w!=null&&w.previewMode&&(w!=null&&w.editing)&&(j=w.previewMode,x=w.editing);const A=t.intl.locale,o=f==="true",h=o?M:void 0,{width:m}=U.useWindowDimensionsAndDevice(),r=m<=1024,y=j!=="Desktop"&&x,p=r&&!x;return e.jsx(a.Container,{className:`viz tabbed posts ${x?"editing":""} ${o?"scrollable":""}`,fluid:!0,children:e.jsx(g.PostProvider,{locale:A,type:u,taxonomy:i,categories:n,store:`tabbedposts_${N}_${P}`,page:1,perPage:s,children:e.jsx(g.PostConsumer,{children:e.jsx(g.PostConsumer,{children:p||y?e.jsx(K,{posts:s,activeItem:(T=s[0])==null?void 0:T.slug,setActive:()=>{}}):c==="light"?e.jsx(Q,{height:h,showLabels:b==="true"}):e.jsx(X,{height:h,showLabels:b==="true",showIcons:l==="true"})})})})})},ee=(t,u)=>{const i=t.getIn(["data","pageModuleProps"]),n={};return i&&(n.pageModuleProps=i),n},te={},ne=V.connect(ee,te)(z.injectIntl(Z));module.exports=ne;