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