@devgateway/dvz-ui-react/dist/cjs/layout/SearchControl.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"),p=require("react"),v=require("@devgateway/wp-react-lib"),I=require("./CustomSemanticSearch.js"),M=require("react-dom"),L=require("semantic-ui-react"),C=require("react-intl"),w=(s,r)=>{if(!s||!r)return s||"";const a=new RegExp(`(${r})`,"gi");return s.replace(a,"<strong>$1</strong>")},R=C.injectIntl(({ID:s,title:r,slug:a,parent_title:i,parent_slug:t,parent_link:n,extract:c,type:u,link:m,terms:y,subtype:g,bread_crumbs:d=[],metadata:o,intl:{locale:f},searchTerm:S})=>{let x=n?v.utils.replaceLink(n,f)+`#${a}`:v.utils.replaceLink(m,f);const E=o==null?void 0:o.redirect_url;x=E?E+`#${a}`:x;const l=w(String(r),S),h=w(c,S);return e.jsx("div",{className:"search-results-wrapper searching-results",style:{display:"flex",flexDirection:"column"},children:e.jsxs("div",{className:"has-standard-12-font-size",onClick:N=>document.location.href=x,children:[e.jsx("h5",{className:"breadcrumbs-search",dangerouslySetInnerHTML:{__html:d&&d.length>0?w(d.join(" / "),S):""}}),e.jsx("div",{className:"has-standard-14-font-size",children:e.jsx("h4",{className:"search-title",dangerouslySetInnerHTML:{__html:l}})}),e.jsx("div",{className:"search-content",dangerouslySetInnerHTML:{__html:v.utils.replaceHTMLinks(h,f)}})]})})}),T=({results:s,meta:r,perPage:a,intl:i,searchTerm:t})=>{const n=r?r["x-wp-total"]:0;return r&&r["x-wp-totalpages"],e.jsxs("div",{id:"float-results-container",children:[e.jsx("span",{className:"float-results-header",children:i.formatMessage({id:"search.results.summary",defaultMessage:"{count} of {total} Results"},{count:n<a?n:a,total:n})}),s.map(c=>e.jsx(R,{...c,searchTerm:t},c.ID))]})},_=({onSearch:s,perPage:r,loading:a,results:i,meta:t,intl:n})=>(t&&t["x-wp-total"],t&&t["x-wp-totalpages"],e.jsx("input",{placeholder:n.formatMessage({id:"search.placeholder",defaultMessage:"Search..."}),type:"text",className:"input search",name:"search",onChange:c=>{s(c.target.value)}})),b=({onSearch:s,onSetSelected:r,perPage:a,loading:i,results:t,meta:n,locale:c,intl:u,searchTerm:m,selected:y})=>{const[g,d]=p.useState(!1),o=p.useRef(null),f=()=>{d(!1)},S=()=>{const l=document.getElementsByClassName("has-child-items");for(let h=0;h<l.length;h++){const j=l[h].getElementsByTagName("span");j.length>0&&j[0].addEventListener("mouseover",f)}},x=()=>{const l=document.getElementsByClassName("has-child-items");for(let h=0;h<l.length;h++){const j=l[h].getElementsByTagName("span");j.length>0&&j[0].removeEventListener("mouseover",f)}};p.useEffect(()=>{const l=document.createElement("div");l.setAttribute("id","float-input-container"),l.setAttribute("class","input container"),l.style.display="none";const h=document.getElementById("root");return h&&(h.appendChild(l),o.current=l),()=>{o.current&&o.current.parentNode&&o.current.parentNode.removeChild(o.current)}},[]),p.useEffect(()=>{o.current&&(o.current.style.display=g?"block":"none"),g?S():x()},[g]);const E=()=>{d(!0)};return e.jsxs(e.Fragment,{children:[e.jsx("div",{id:"ui-float-search",className:"ui float-search",onMouseOver:E,children:e.jsx(L.Icon,{name:"search",size:"small"})}),o.current&&M.createPortal(g?e.jsxs("div",{onMouseLeave:f,children:[e.jsx("div",{className:"float-search-container",children:e.jsx(_,{onSearch:s,perPage:a,loading:i,results:t,meta:n,intl:u,searchTerm:m})}),t&&t.length>0&&e.jsx(C.IntlProvider,{locale:c,children:e.jsx(T,{results:t,meta:n,perPage:a,intl:u,searchTerm:m})})]}):null,o.current)]})},q=({onSearch:s,perPage:r,loading:a,results:i,meta:t,intl:n})=>{const c=t?t["x-wp-total"]:0,u=t?t["x-wp-totalpages"]:0,[m,y]=p.useState("");p.useEffect(()=>{const d=setTimeout(()=>{s(m)},300);return()=>clearTimeout(d)},[m]);const g=d=>e.jsx(R,{...d,searchTerm:m});return e.jsx(I.default,{value:m,loading:a,placeholder:n.formatMessage({id:"search.placeholder",defaultMessage:"Search..."}),onResultSelect:(d,o)=>null,total:c,perPage:r,totalPages:u,onSearchChange:(d,o)=>{y(o.value)},resultRenderer:g,results:i,showNoResults:!1,intl:n,searchTerm:m})},P=C.injectIntl(s=>{const{intl:r,onSetSelected:a}=s,[i,t]=p.useState(""),[n,c]=p.useState(!1);return p.useEffect(()=>{const u=()=>{c(window.innerWidth<=1365)};return u(),window.addEventListener("resize",u),()=>window.removeEventListener("resize",u)},[]),e.jsx(v.SearchProvider,{search:i,perPage:5,locale:r.locale,children:e.jsx(z,{...s,onSetSelected:a,setQuery:t,query:i,isSmallScreen:n,intl:r})})}),z=({onSetSelected:s,selected:r,setQuery:a,query:i,isSmallScreen:t,intl:n,...c})=>{const u=p.useContext(v.SearchContext);return c.settings.react_search_type==="floating"||t?e.jsx(b,{onSetSelected:s,selected:r,onSearch:a,perPage:5,intl:n,...c,...u,searchTerm:i}):e.jsx(q,{onSetSelected:s,onSearch:a,perPage:5,intl:n,...c,...u})};exports.default=P;