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