@devgateway/dvz-ui-react/dist/cjs/embeddable/featuredtabs/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"),d=require("react"),o=require("semantic-ui-react"),m=require("@devgateway/wp-react-lib"),S=require("../connected-templates/PostIntro.js"),_=require("../../lib/hooks/window-dimensions.js"),M=require("react-redux"),T=({post:n,onClick:x,active:a,moreLabel:l})=>{const f=n._embedded?n._embedded["wp:featuredmedia"]:null;return e.jsxs("div",{className:"cover",style:{backgroundImage:`url(${f?f[0].source_url:""})`},children:[e.jsx(S.default,{post:n}),a?e.jsxs(o.Label,{onClick:x,children:[e.jsx(o.Icon,{name:"arrow alternate circle left outline",size:"large"})," Back "]}):e.jsxs(o.Label,{onClick:x,children:[e.jsx(o.Icon,{name:"search",size:"large"})," ",l]})]})},L=({post:n})=>{const l=new DOMParser().parseFromString(n.content.rendered,"text/html").querySelector("figure");return l?e.jsx("div",{style:{flex:"0 0 40px"},dangerouslySetInnerHTML:{__html:l.outerHTML}}):null},A=({posts:n,width:x,height:a,color:l,moreLabel:f,closeLabel:j})=>{const[s,h]=d.useState(null),[y,b]=d.useState(!1),[p,v]=d.useState([0,0]),c=l.split(","),g=i=>{y?(b(!1),h(i)):(h(i),b(!0))};return d.useEffect(()=>{s&&v([window.scrollX,window.scrollY]),s==null&&window.scrollTo(p[0],p[1])},[s]),d.useEffect(()=>{window.setTimeout(()=>{if(window.location.hash){const i=window.location.hash.substr(1),t=document.getElementById(i);t&&n&&n.map(r=>r.slug).indexOf(i)>-1&&(h(i),t.scrollIntoView({behavior:"auto",block:"start"}))}},0)},[n]),e.jsx(o.Container,{fluid:!0,className:"featured tabs",style:{minHeight:`${a}px`},children:e.jsx(o.Grid,{stackable:!0,columns:s!=null?1:n==null?void 0:n.length,className:"desktop",children:n==null?void 0:n.map((i,t)=>{var r;return e.jsxs(d.Fragment,{children:[e.jsxs(o.Grid.Column,{style:s==null?{display:"block",visibility:"visible",backgroundColor:c[t]}:{display:"none",visibility:"hidden"},children:[e.jsx("a",{id:i.slug}),e.jsx(T,{post:i,moreLabel:f,onClick:()=>g(i.slug)})]}),e.jsxs(o.Grid.Column,{className:"expanded",style:s!=i.slug?{display:"none",visibility:"hidden"}:{display:"block",visibility:"visible"},children:[e.jsxs(o.Segment,{style:{backgroundColor:c[t]},children:[((r=i.meta_fields)==null?void 0:r.icon)&&e.jsx(m.MediaProvider,{id:i.meta_fields?i.meta_fields.icon[0]:null,children:e.jsx(m.MediaConsumer,{children:e.jsx(m.PostIcon,{})})}),e.jsx(m.PostTitle,{as:"h2",post:i,className:"has-standard-36-font-size has-white-color"}),e.jsx(o.Label,{className:"closeIcon",onClick:()=>h(null),children:e.jsx(o.Icon,{name:"times circle outline",size:"large"})})]}),e.jsx(m.PostContent,{as:"div",fluid:!0,post:i,style:{maxHeight:`calc(${a}px - 150px)`}}),e.jsxs(o.Label,{className:"closeIconText",style:{backgroundColor:`${c[t]}`},onClick:()=>h(null),children:[e.jsx(o.Icon,{name:"times circle outline",size:"large"})," ",j||"Close"," "]})]})]},i.slug)})})})},q=({posts:n,activeItem:x,setActive:a,color:l})=>{const[f,j]=d.useState(n.findIndex(t=>t.slug===x)),[s,h]=d.useState(null),y=l.split(","),b=()=>{var t;return((t=window.screen.orientation)==null?void 0:t.type)||(window.innerWidth>window.innerHeight?"landscape-primary":"portrait-primary")},[p,v]=d.useState(b()),c=()=>{setTimeout(()=>{v(b())},100)},g=(t,r,u)=>{document.querySelectorAll(t).forEach(C=>{C.querySelector(r)&&C.classList.add(u)})};d.useEffect(()=>{if(s){const t=s.getBoundingClientRect().top+window.scrollY;window.scrollTo({top:t,behavior:"smooth"})}g(".ui.fluid.container.viz.featured.tabs",".accordion .accordion-post-ft-title","has-accordion-title"),g(".ui.fluid.container.viz.featured.tabs",".accordion .accordion-post-vft-content","has-accordion-content"),g(".ui.fluid.container.viz.featured.tabs","blockquote","has-blockquote"),g(".ui.fluid.container.viz.featured.tabs",".vt-accordion-post-intro figure","has-vt-accordion-figure"),g(".ui.fluid.container.viz.featured.tabs",".content.active.accordion-post-content .wp-block-columns","has-wp-block-columns")},[s]),d.useEffect(()=>(window.screen.orientation&&window.screen.orientation.addEventListener("change",c),window.addEventListener("resize",c),()=>{window.removeEventListener("resize",c),window.screen.orientation&&window.screen.orientation.removeEventListener("change",c)}),[]);const i=(t,r)=>{const{index:u}=r,w=f===u?-1:u;j(w),a(n[u].slug),w!==-1&&h(t.currentTarget)};return e.jsx(o.Accordion,{fluid:!0,styled:!0,children:n.map((t,r)=>{var w;const u=(w=t.meta_fields)!=null&&w.icon?t.meta_fields.icon[0]:null;return e.jsxs(d.Fragment,{children:[e.jsx(o.Accordion.Title,{active:f===r,index:r,onClick:i,style:{backgroundColor:y[r]},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(m.MediaProvider,{id:u,children:e.jsx(m.MediaConsumer,{children:e.jsx(m.PostIcon,{className:"icon"})})}),!u&&e.jsx(L,{post:t}),e.jsx("p",{className:"accordion-post-ft-title",dangerouslySetInnerHTML:{__html:t.title.rendered},style:{marginLeft:"10px"}})]}),e.jsx(o.Icon,{name:"chevron down"})]})}),e.jsx(o.Accordion.Content,{className:"accordion-post-ft-content",active:f===r,children:e.jsx(m.PostContent,{post:t})})]},t.id)})})},z=n=>{var I;let{"data-width":x,"data-height":a,"data-type":l,"data-taxonomy":f,"data-categories":j,"data-items":s,"data-color":h,"data-use-scrolls":y,"data-read-more-label":b="READ More","data-close-label":p="Close","data-preview-mode":v="Desktop",editing:c,parent:g,unique:i,pageModuleProps:t}=n;const r=n.intl.locale;t!=null&&t.editing&&(t!=null&&t.previewMode)&&(c=t.editing,v=t.previewMode);const u=y=="true",{width:w}=_.useWindowDimensionsAndDevice(),C=w<=1250,k=v!=="Desktop"&&c,P=C&&!c;return e.jsx(o.Container,{className:`viz featured tabs ${c?"editing":""} ${u?"scrollable":""}`,fluid:!0,children:e.jsx(m.PostProvider,{locale:r,type:l,taxonomy:f,categories:j,store:`tabbedposts_${g}_${i}`,page:1,perPage:s,children:e.jsx(m.PostConsumer,{children:k||P?e.jsx(q,{posts:s,activeItem:(I=s==null?void 0:s[0])==null?void 0:I.slug,color:h,setActive:()=>{}}):e.jsx(A,{moreLabel:b,closeLabel:p,color:h,width:x,height:a})})})})},E=(n,x)=>{const a=n.getIn(["data","pageModuleProps"]),l={};return a&&(l.pageModuleProps=a),l},N={},D=M.connect(E,N)(z);exports.default=D;