@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";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),m=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:d,setActive:i,showLabels:n})=>t?t.map(s=>e.jsx(a.Menu.Item,{onClick:()=>i(s.slug),className:s.slug===d?"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:d,setActive:i,showIcons:n,showLabels:s})=>{const c=t.length;return t?t.map(l=>{var w,b;return(w=l._embedded)!=null&&w["wp:featuredmedia"]&&l._embedded["wp:featuredmedia"][0].source_url,e.jsx(a.Grid.Column,{className:(l.slug===d?"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:d})=>(m.useEffect(()=>{const i=document.querySelector(".ui.container.content-tab");i&&(i.scrollTop=0)},[d]),t?t.map(i=>{let n={};return i.slug!==d?n={position:"absolute",left:"-3000px",width:"auto",height:"0px",overflow:"hidden",visibility:"hidden"}:n={visibility:"visible",position:"relative",width:"auto"},e.jsx(D.default,{as:a.Container,fluid:!0,post:i,style:n},i.slug)}):null),K=({posts:t,activeItem:d,setActive:i})=>{const[n,s]=m.useState(t.findIndex(o=>o.slug===d)),[c,l]=m.useState(null),w=m.useRef(null),[b,I]=m.useState(window.innerWidth<=1250);m.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")},[f,N]=m.useState(j()),x=()=>{setTimeout(()=>{N(j()),I(window.innerWidth<=1250)},100)},P=o=>{setTimeout(()=>{var u;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 S=p.getBoundingClientRect(),B=r.getBoundingClientRect(),H=window.getComputedStyle(p),E=window.getComputedStyle(r),O=Number.parseFloat(H.marginTop)||0,W=Number.parseFloat(E.marginBottom)||0,T=B.bottom+W,k=S.top-O;if(T>k){const C=T-k;p.style.marginTop=`${C+20}px`}const M=(u=r.closest(".wp-block-column.is-layout-flow.wp-block-column-is-layout-flow"))==null?void 0:u.nextElementSibling;if(M){const C=M.getBoundingClientRect(),L=window.getComputedStyle(M),R=Number.parseFloat(L.marginTop)||0,v=C.top-R;if(T>v){const q=T-v;M.style.marginTop=`${q+20}px`}}const A=r.closest(".chart.container");if(A){const C=A.getBoundingClientRect(),L=window.getComputedStyle(A),R=Number.parseFloat(L.marginBottom)||0,v=C.bottom+R,q=Number.parseFloat(E.marginTop)||0,$=B.top-q;if($<v){const G=v-$;r.style.marginTop=`${G+20}px`}}}},10)};m.useEffect(()=>(window.screen.orientation&&window.screen.orientation.addEventListener("change",x),window.addEventListener("resize",x),()=>window.removeEventListener("resize",x)),[]),m.useEffect(()=>{let o;const h=[];return n!==-1&&(o=setTimeout(()=>{document.querySelectorAll(".accordion").forEach(r=>P(r))},0)),()=>{clearTimeout(o),h.forEach(u=>u.disconnect())}},[n,b,f]);const _=(o,h)=>{const{index:u}=h,r=n===u?-1:u;s(r),i(t[u].slug),r!==-1&&l(o.currentTarget)};return e.jsx(a.Accordion,{fluid:!0,styled:!0,children:t.map((o,h)=>{var r;const u=(r=o.meta_fields)!=null&&r.icon?o.meta_fields.icon[0]:null;return e.jsxs(m.Fragment,{children:[e.jsx(a.Accordion.Title,{active:n===h,index:h,onClick:_,children:e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center"},children:[u&&e.jsx(g.MediaProvider,{id:u,children:e.jsx(g.MediaConsumer,{children:e.jsx(g.PostIcon,{className:"icon"})})}),e.jsx("span",{dangerouslySetInnerHTML:{__html:o.title.rendered},style:{marginLeft:u?"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:w,children:e.jsx(D.default,{post:o,as:a.Container,fluid:!0})})})]},o.id)})})},Q=({posts:t,showLabels:d,height:i})=>{const[n,s]=m.useState(t?t[0].slug:null);return m.useEffect(()=>{setTimeout(()=>{if(window.location.hash){const c=window.location.hash.substr(1),l=document.getElementById(c);l&&t.map(w=>w.slug).indexOf(c)>-1&&(s(c),l.scrollIntoView({behavior:"auto",block:"start"}))}},0)},[t]),e.jsxs(m.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:d,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:d,showIcons:i,height:n})=>{const[s,c]=m.useState(t?t[0].slug:null);return e.jsx(m.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:d,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 S;let{"data-type":d,"data-taxonomy":i,"data-categories":n,"data-items":s,"data-theme":c="light","data-show-icons":l,"data-use-scrolls":w,"data-show-labels":b,"data-height":I,"data-preview-mode":j="Desktop",pageModuleProps:f,parent:N,editing:x,unique:P}=t;f!=null&&f.previewMode&&(f!=null&&f.editing)&&(j=f.previewMode,x=f.editing);const _=t.intl.locale,o=w==="true",h=o?I:void 0,{width:u}=U.useWindowDimensionsAndDevice(),r=u<=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:_,type:d,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:(S=s[0])==null?void 0:S.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,d)=>{const i=t.getIn(["data","pageModuleProps"]),n={};return i&&(n.pageModuleProps=i),n},te={},ne=V.connect(ee,te)(z.injectIntl(Z));exports.default=ne;