react-searchbox-like-google/index.esm.js

Customizable Searchbox with autocomplete and highlighted results for React applications.

import './index.css';
var se=(l,n,r)=>new Promise((s,d)=>{var p=h=>{try{g(r.next(h))}catch(E){d(E)}},I=h=>{try{g(r.throw(h))}catch(E){d(E)}},g=h=>h.done?s(h.value):Promise.resolve(h.value).then(p,I);g((r=r.apply(l,n)).next())});import c,{Fragment as q,useEffect as H,useRef as V,useState as G,memo as Be}from"react";import{useEffect as be,useState as Le}from"react";var Se=()=>{let[l,n]=Le(window.innerWidth),r=l<=768,s=()=>{n(window.innerWidth)};return be(()=>(window.addEventListener("resize",s),()=>{window.removeEventListener("resize",s)}),[]),{isMobile:r}},te=Se;var we=(l,n)=>{let r=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(l),s=r!==null?{r:parseInt(r[1],16),g:parseInt(r[2],16),b:parseInt(r[3],16)}:null;s!==null&&(s.r=s.r+n>255?255:s.r+n,s.g=s.g+n>255?255:s.g+n,s.b=s.b+n>255?255:s.b+n);let d=`
  rgb(
    ${s==null?void 0:s.r.toString()},
    ${s==null?void 0:s.b.toString()},
    ${s==null?void 0:s.b.toString()}
    )
  `;return d.replaceAll(/[\n ]/gi,""),{lightDark:d}},ne=we;var $=(l,n)=>{let r;return l.title.toLowerCase().includes(n.toLocaleLowerCase())&&(r=l),r};import re from"react";var ke=()=>re.createElement("svg",{width:"24",height:"24",fill:"#1a73e8",focusable:"false",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},re.createElement("path",{d:"M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"})),j=ke;import ie from"react";var xe=()=>ie.createElement("svg",{focusable:"false",fill:"#898e94",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},ie.createElement("path",{d:"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"})),K=xe;import oe from"react";var Ie=()=>oe.createElement("svg",{focusable:"false",width:"20",height:"20",fill:"#9AA0A6",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},oe.createElement("path",{d:"M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"})),C=Ie;import u from"react";import B,{Fragment as Ee,useState as ae}from"react";var ye=l=>{let[n,r]=ae(!1),[s,d]=ae(!1),p=g=>{r(!0),g.style.display="none"},I=()=>{d(!0)};return l.showImage&&l.data.image!==""&&l.data.image!==void 0?B.createElement(Ee,null,B.createElement("div",{className:n?"sb-result-svg":"sb-result-image"},B.createElement("img",{onError:({currentTarget:g})=>p(g),onLoad:I,style:{display:s?"block":"none"},src:l.data.image,alt:"poster"})),n&&B.createElement(C,null),!s&&!n&&B.createElement("div",{className:"img-skeleton"})):B.createElement("div",{className:"sb-result-svg"},B.createElement(C,null))},le=ye;var Ce=l=>{let{darkMode:n,showImage:r,showDetail:s,handleOnClick:d,arr:p,dropdownRef:I,active:g,isMobile:h,sx:E={},handleBtn:W,value:J}=l,{textColor:N="#1f2937",highlightColor:O="#1f2937"}=E,P=t=>{let D=u.createElement("span",{className:"sb-highlight-span",style:{color:n?"#ffffff":N}},t),F=t.split(new RegExp(`(${J})`,"gi"));return F.length>1&&(D=u.createElement("div",{className:"sb-highlight-div"},u.createElement("span",{style:{color:n?"#ffffff":N}},F[0]),u.createElement("span",{style:{color:n?"#ffffff":O,fontWeight:700}},F[1]),u.createElement("span",{style:{color:n?"#ffffff":N}},F[2]))),D};return u.createElement("div",null,p!==void 0&&p.length>0&&u.createElement("div",{id:"dropdown",ref:I,style:{padding:l.buttons===void 0?"0 0 24px 0":"0"},className:n?"sb-dropdown-dark":"sb-dropdown-light"},u.createElement("div",{id:"shadowGhost",className:n?"sb-ghost-dark":"sb-ghost-light"},u.createElement("div",{className:"sb-ghost-border"})),u.createElement("div",null,p==null?void 0:p.map((t,D)=>u.createElement("div",{key:t.id.toString()+t.title,className:[n?"sb-result-dark":"sb-result-light",g===D?n?"sb-result-active-dark":"sb-result-active":""].join(" ")},u.createElement("div",{className:"sb-result-image-div"},u.createElement(le,{showImage:r,data:t})),u.createElement("button",{type:"button",className:"sb-result-button",onClick:()=>d(t)},u.createElement("div",{style:{padding:t.detail?"2px 0 2px 0":0},className:"sb-result-text"},P(t.title),s&&u.createElement("span",{className:"sb-detail"},t.detail))))),l.buttons!==void 0&&p!==void 0&&!h&&u.createElement("div",{className:n?"sb-button-div-dark":"sb-button-div"},l.buttons.map(t=>u.createElement("button",{type:"button",onClick:()=>W(t==null?void 0:t.handler),key:t==null?void 0:t.label}," ",t==null?void 0:t.label," "))))))},U=Ce;var Ne=({onChange:l,onClick:n,results:r,placeHolder:s,darkMode:d,showImage:p=!1,showDetail:I=!1,buttons:g=void 0,limit:h=10,thresHold:E=1,sx:W={}})=>{let{mainBackground:J="#ffffff",darkThemeColor:N="#202124",borderRadius:O=24,transitionDuraiton:P=150}=W,{isMobile:t}=te(),{lightDark:D}=ne(N,30),F=V(null),S=V(null),i=V(null),A=V(null),T=V(null),z=V(null),[o,w]=G(),[M,y]=G(""),[Y,b]=G(""),[f,k]=G(-1),[ce,X]=G(!1),ue=()=>{var e;y(""),b(""),k(-1),S.current!==null&&!t&&((e=i.current)==null||e.classList.add(d?"sb-main-focus-dark":"sb-main-focus-light"),S.current.focus())},me=e=>{e!==void 0&&e.target.value[0]!==""&&(y(e.target.value),b(e.target.value),e.target.value.length>E&&(l(e.target.value),w(r==null?void 0:r.slice(0,h).filter(a=>$(a,e.target.value)))))},fe=e=>{var a,m,v,L;if(e.code==="Backspace"&&Y.length<1&&(w(void 0),k(-1),(a=i.current)==null||a.classList.remove("sb-rounded-none")),o!==void 0&&o.length>0)switch(e.code){case"ArrowDown":e.preventDefault(),f<o.length-1?(k(f+1),b(o[f+1].title)):(k(0),b(o[0].title));break;case"ArrowUp":e.preventDefault(),f>0?(k(f-1),b(o[f-1].title)):(k(o.length-1),b(o[o.length-1].title));break;case"Enter":e.preventDefault(),f>-1&&(w(void 0),b(o[f].title),(m=i.current)==null||m.classList.remove("sb-rounded-none"),(v=i.current)==null||v.classList.remove(d?"sb-main-focus-dark":"sb-main-focus-light"),(L=S.current)==null||L.blur(),y(o[f].title),k(-1));break}},ve=e=>{var a,m,v,L,x,Z,_,R,ee;w(void 0),n(e),y(e.title),b(e.title),(a=i.current)==null||a.classList.remove("sb-rounded-none"),(m=i.current)==null||m.classList.remove(d?"sb-main-focus-dark":"sb-main-focus-light"),t&&((v=i.current)==null||v.classList.remove("main-resp-dark"),(L=i.current)==null||L.classList.remove("main-resp-light"),(x=i.current)==null||x.classList.remove("sb-rounded-none"),(Z=S.current)==null||Z.classList.remove("input-resp"),(_=A.current)==null||_.classList.remove("sb-top-resp"),(R=T.current)==null||R.classList.remove("sb-hidden"),(ee=z.current)==null||ee.classList.add("sb-hidden"),X(!1))},pe=e=>{o!==void 0&&e!==void 0&&(f===-1?(e(o[0]),y(o[0].title),b(o[0].title)):(e(o[f]),y(o[f].title),b(o[f].title)))},he=()=>{var e,a,m,v,L,x;y(""),b(""),t&&((e=i.current)==null||e.classList.remove("main-resp-light"),(a=i.current)==null||a.classList.remove("main-resp-dark"),(m=S.current)==null||m.classList.remove("input-resp"),(v=A.current)==null||v.classList.remove("sb-top-resp"),X(!1)),(L=T.current)==null||L.classList.remove("sb-hidden"),(x=z.current)==null||x.classList.add("sb-hidden")},ge=()=>{var e,a,m,v,L,x;(e=i.current)==null||e.classList.add(d?"sb-main-focus-dark":"sb-main-focus-light"),t&&((a=i.current)==null||a.classList.add(d?"main-resp-dark":"main-resp-light"),(m=S.current)==null||m.classList.add("input-resp"),(v=A.current)==null||v.classList.add("sb-top-resp"),(L=T.current)==null||L.classList.add("sb-hidden"),(x=z.current)==null||x.classList.remove("sb-hidden"),X(!0))};return H(()=>{w(r==null?void 0:r.slice(0,t?7:h).filter(e=>se(void 0,null,function*(){return $(e,M)})))},[r]),H(()=>{var e,a;o!==void 0&&(o.length>0&&M.length>0?(e=i.current)==null||e.classList.add("sb-rounded-none"):(a=i.current)==null||a.classList.remove("sb-rounded-none"))},[o]),H(()=>{var e;M.length<2&&(w(void 0),(e=i.current)==null||e.classList.remove("sb-rounded-none"))},[M]),H(()=>{var e,a;w(void 0),(e=i.current)==null||e.classList.add("border-transition"),(a=S.current)==null||a.classList.add("transition"),setTimeout(()=>{var m,v;(m=i.current)==null||m.classList.remove("border-transition"),(v=S.current)==null||v.classList.remove("transition")},P)},[d]),H(()=>{let e=a=>{var m;i.current!=null&&!((m=i.current)!=null&&m.contains(a.target))&&!t&&(i.current.classList.remove("sb-main-focus-dark"),i.current.classList.remove("sb-main-focus-light"),i.current.classList.remove("sb-rounded-none"),w(void 0),k(-1))};return window.addEventListener("click",e),()=>window.removeEventListener("click",e)},[]),c.createElement("div",{ref:A,style:{"--mainBg":J,"--darkPrimary":N,"--darkSecondary":D,"--duration":P.toString().concat("ms"),"--borderRadius":O.toString().concat("px"),position:t?"":"relative"}},c.createElement("div",{ref:i,className:d?"sb-main-dark":"sb-main-light"},c.createElement(q,null,t?c.createElement(q,null,c.createElement("div",{ref:T,className:"search"},c.createElement(C,null)),c.createElement("button",{ref:z,onClick:he,className:["back","sb-hidden"].join(" ")},c.createElement(j,null))):c.createElement(q,null,c.createElement("div",{className:"search"},c.createElement(C,null))),c.createElement("div",{className:d?"input-dark":"input-light"},c.createElement("input",{ref:S,value:Y,onKeyDown:fe,onFocus:ge,onChange:me,placeholder:s,type:"text"})),c.createElement("div",{className:"clear"},c.createElement("button",{type:"button",style:{display:M.length>0?"block":"none"},onClick:ue},c.createElement("div",null,c.createElement(K,null)))))),c.createElement(U,{arr:o,dropdownRef:F,active:f,isMobile:t,handleOnClick:ve,handleBtn:pe,value:M,showDetail:I,showImage:p,darkMode:d,buttons:g}),ce&&c.createElement("div",{className:d?"resp-bg-dark":"resp-bg-light"}))},de=Be(Ne);var Q=de;var Ss=Q;export{Ss as default};