react-searchbox-like-youtube/index.js

Customizable Searchbox with autocomplete and highlighted results for React applications.

"use strict";
require('./index.css')
var y=Object.defineProperty;var ie=Object.getOwnPropertyDescriptor;var ce=Object.getOwnPropertyNames;var ue=Object.prototype.hasOwnProperty;var me=(e,t)=>{for(var o in t)y(e,o,{get:t[o],enumerable:!0})},fe=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let c of ce(t))!ue.call(e,c)&&c!==o&&y(e,c,{get:()=>t[c],enumerable:!(r=ie(t,c))||r.enumerable});return e};var de=e=>fe(y({},"__esModule",{value:!0}),e);var Me={};me(Me,{default:()=>ke});module.exports=de(Me);var s=require("react");var R=require("react");var k=require("react"),pe=()=>{let[e,t]=(0,k.useState)(window.innerWidth),o=e<=768,r=()=>{t(window.innerWidth)};return(0,k.useEffect)(()=>(window.addEventListener("resize",r),()=>{window.removeEventListener("resize",r)}),[]),{isMobile:o}},S=pe;var b=(e,t)=>{let o;return e.title.toLowerCase().includes(t.toLocaleLowerCase())&&(o=e),o};var M=require("react/jsx-runtime"),he=({size:e="mini"})=>(0,M.jsx)("svg",{viewBox:"0 0 24 24",className:`fill-black dark:fill-white transition-all ${e==="normal"?"w-6 h-6":"w-5 h-5"}`,role:"search",focusable:"false",children:(0,M.jsx)("g",{children:(0,M.jsx)("path",{d:"M20.87,20.17l-5.59-5.59C16.35,13.35,17,11.75,17,10c0-3.87-3.13-7-7-7s-7,3.13-7,7s3.13,7,7,7c1.75,0,3.35-0.65,4.58-1.71 l5.59,5.59L20.87,20.17z M10,16c-3.31,0-6-2.69-6-6s2.69-6,6-6s6,2.69,6,6S13.31,16,10,16z"})})}),w=he;var E=require("react/jsx-runtime"),ve=()=>(0,E.jsx)("div",{children:(0,E.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",enableBackground:"new 0 0 24 24",height:"24",className:"fill-black dark:fill-white",viewBox:"0 0 24 24",width:"24",children:(0,E.jsx)("path",{d:"M21,11v1H5.64l6.72,6.72l-0.71,0.71L3.72,11.5l7.92-7.92l0.71,0.71L5.64,11H21z"})})}),T=ve;var C=require("react/jsx-runtime"),ge=()=>(0,C.jsx)("div",{children:(0,C.jsx)("svg",{viewBox:"0 0 24 24",className:"fill-gray-600 dark:fill-white",focusable:"false",children:(0,C.jsx)("g",{children:(0,C.jsx)("path",{d:"M12.7,12l6.6,6.6l-0.7,0.7L12,12.7l-6.6,6.6l-0.7-0.7l6.6-6.6L4.6,5.4l0.7-0.7l6.6,6.6l6.6-6.6l0.7,0.7L12.7,12z"})})})}),L=ge;var N=require("react/jsx-runtime"),Se=({size:e="mini"})=>(0,N.jsx)("svg",{viewBox:"0 0 24 24",className:e==="normal"?"w-6 h-6":"w-5 h-5",fill:"black",role:"search",focusable:"false",children:(0,N.jsx)("g",{children:(0,N.jsx)("path",{d:"M20.87,20.17l-5.59-5.59C16.35,13.35,17,11.75,17,10c0-3.87-3.13-7-7-7s-7,3.13-7,7s3.13,7,7,7c1.75,0,3.35-0.65,4.58-1.71 l5.59,5.59L20.87,20.17z M10,16c-3.31,0-6-2.69-6-6s2.69-6,6-6s6,2.69,6,6S13.31,16,10,16z"})})}),D=Se;var i=require("react/jsx-runtime"),be=()=>{let e=x(),{isMobile:t}=S(),[o,r]=(0,R.useState)(!1),c=()=>{e.setShowLeftSearchSvg(!0),e.refs.respBg.current?.classList.remove("hidden")},l=n=>{n.target.value!==" "&&(e.setValue(n.target.value),e.setTempVal(n.target.value),e.onChange(n.target.value),e.setArr(e.results?.slice(0,10).filter(p=>b(p,n.target.value))))},m=()=>{e.setValue(""),e.setTempVal(""),e.refs.input.current?.focus()},f=()=>{t?e.value!==""&&(e.setTempVal(e.value),e.setValue(e.value),e.setArr(void 0),e.setShowSB(!1),e.setShowDummyInput(!0),e.refs.respSbButton.current?.classList.add("hidden")):(e.setTempVal(e.value),e.setValue(""),e.setArr(void 0),e.setShowLeftSearchSvg(!1))},B=()=>{e.setValue(""),e.setTempVal(""),e.setShowSB(!1),e.setShowDummyInput(!1),e.refs.respSbButton.current?.classList.remove("hidden")},d=n=>{switch(n.type){case"mouseenter":r(!0);break;case"mouseleave":r(!1);break}},V=n=>{if(n.code==="Backspace"&&e.tempVal.length<1&&(e.setArr(void 0),e.setActive(-1)),e.arr!==void 0)switch(n.code){case"ArrowDown":n.preventDefault(),e.active<e.arr.length-1?(e.setActive(e.active+1),e.setTempVal(e.arr[e.active+1].title)):(e.setActive(0),e.setTempVal(e.arr[0].title));break;case"ArrowUp":n.preventDefault(),e.active>0?(e.setActive(e.active-1),e.setTempVal(e.arr[e.active-1].title)):(e.setActive(e.arr.length-1),e.setTempVal(e.arr[e.arr.length-1].title));break;case"Enter":n.preventDefault(),e.active>-1?(e.setArr(void 0),e.setTempVal(e.arr[e.active].title),e.setValue(e.arr[e.active].title),e.setActive(-1),e.setShowLeftSearchSvg(!1),e.refs.input.current?.blur(),e.onSearch(e.arr[e.active])):(e.setTempVal(e.value),e.setValue(""),e.setShowLeftSearchSvg(!1),e.refs.input.current?.blur(),e.onSearch(e.value));break}};return(0,R.useEffect)(()=>{e.showLeftSearchSvg&&(e.refs.input.current?.classList.add("!transition-none"),setTimeout(()=>{e.refs.input.current?.classList.remove("!transition-none")},150))},[e.showLeftSearchSvg]),(0,i.jsxs)("div",{className:"relative flex w-full",children:[t?(0,i.jsx)("button",{type:"button",onClick:B,role:"back-button",className:"input-back-button",children:(0,i.jsx)(T,{})}):e.showLeftSearchSvg&&(0,i.jsxs)("div",{ref:e.refs.inputSearchIcon,role:"inputSearchIcon",className:"input-search-icon",children:[(0,i.jsx)(w,{size:"mini"}),(0,i.jsx)("div",{className:"absolute w-[4px] h-[34px] -right-[1px] bottom-0 md:bg-white md:dark:dark-bg"})]}),(0,i.jsxs)("div",{className:`input-comp ${e.tempVal.length>0?"input-comp-resp":""}`,children:[(0,i.jsx)("input",{type:"text",ref:e.refs.input,onFocus:c,onChange:l,onKeyDown:V,value:e.tempVal,placeholder:e.placeholder??"Search something",className:`input ${e.showLeftSearchSvg?"input-focus":""}`}),(0,i.jsx)("button",{onClick:m,role:"clear",ref:e.refs.clearButton,className:`input-clear-button ${e.tempVal.length>0?"":"hidden"}`,children:(0,i.jsx)("div",{className:"input-clear-button-svg",children:(0,i.jsx)(L,{})})}),(0,i.jsxs)("button",{role:"search-button",onClick:f,onMouseEnter:d,onMouseLeave:d,className:"input-search-button",children:[(0,i.jsx)(w,{size:"normal"}),o&&!t&&(0,i.jsx)("div",{role:"popup",className:"search-popup",children:(0,i.jsx)("p",{children:"Search!"})})]})]}),t&&(0,i.jsx)("div",{ref:e.refs.respBg,className:"resp-background",role:"responsive-bg"})]})},F=be;var X=require("react");var v=require("react/jsx-runtime"),we=()=>(0,v.jsx)("div",{children:(0,v.jsxs)("svg",{width:"13",height:"13",viewBox:"0 0 28 28",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[(0,v.jsx)("rect",{width:"22",height:"6",fill:"#B7B7B7"}),(0,v.jsx)("rect",{width:"22",height:"6",transform:"translate(0 22) rotate(-90)",fill:"#B7B7B7"}),(0,v.jsx)("rect",{width:"32.8325",height:"6",transform:"translate(23.2158 27.4585) rotate(-135)",fill:"#B7B7B7"})]})}),U=we;var a=require("react/jsx-runtime"),xe=()=>{let e=x(),{isMobile:t}=S(),o=l=>{let m=(0,a.jsx)("span",{role:"results-text",className:"",children:l}),f=l.split(new RegExp(`(${e.value})`,"gi"));return f.length>1&&(m=(0,a.jsxs)("div",{role:"results-text",className:"text-sm md:text-base",children:[(0,a.jsx)("span",{children:f[0]}),(0,a.jsx)("span",{className:"font-semibold",children:f[1]}),(0,a.jsx)("span",{children:f[2]})]})),m},r=l=>{e.setTempVal(l.title),e.setValue(""),e.onClick(l),t&&(e.setShowSB(!1),e.setShowDummyInput(!0),e.refs.respSbButton.current?.classList.add("hidden"))},c=l=>{e.setValue(l),e.setTempVal(l),e.refs.input.current?.focus(),e.setArr(e.results?.slice(0,10).filter(m=>b(m,l)))};return(0,X.useEffect)(()=>{e.value.length<2&&e.setArr(void 0)},[e.value]),(0,a.jsx)(a.Fragment,{children:e.arr!==void 0&&e.arr.length>0&&e.value.length>1&&(0,a.jsxs)("div",{ref:e.refs.result,className:"results",children:[(0,a.jsx)("div",{className:"ghost"}),(0,a.jsx)("ul",{role:"search-results",className:"results-ul",children:e.arr.map((l,m)=>(0,a.jsxs)("li",{className:`results-li ${e.active===m?"bg-[#00000010]":""}`,children:[(0,a.jsxs)("button",{className:"w-full text-left flex",onClick:()=>r(l),children:[!t&&(0,a.jsx)("div",{className:"results-li-icon",children:(0,a.jsx)(D,{size:"mini"})}),o(l.title)]}),(0,a.jsx)("button",{type:"button",role:"arrow-button",className:"arrow",onClick:()=>c(l.title),children:(0,a.jsx)(U,{})})]},l.id))})]})})},A=xe;var g=require("react/jsx-runtime"),Be=()=>{let e=x(),t=()=>{e.setShowSB(!0),e.refs.input.current?.focus()};return(0,g.jsx)("div",{ref:e.refs.dummyInput,onClick:t,role:"dummy-input",className:"w-full",children:(0,g.jsxs)("div",{className:"w-full h-8 bg-gray-100 dark:dark-bg-secondary rounded-lg items-center px-1.5 flex justify-between",children:[(0,g.jsx)("span",{className:"truncate text-sm text-gray-500 dark:text-white",children:e.tempVal}),(0,g.jsx)("div",{className:"w-6 h-6",children:(0,g.jsx)(L,{})})]})})},q=Be;var G=require("react"),Ce=e=>{(0,G.useEffect)(()=>{e?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark")},[e])},Q=Ce;var Le=(e,t)=>{let o=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e),r=o!==null?{r:parseInt(o[1],16),g:parseInt(o[2],16),b:parseInt(o[3],16)}:null;r!==null&&(r.r=r.r+t>255?255:r.r+t,r.g=r.g+t>255?255:r.g+t,r.b=r.b+t>255?255:r.b+t);let c=`
    rgb(
      ${r?.r.toString()},
      ${r?.b.toString()},
      ${r?.b.toString()}
      )
    `;return c.replaceAll(/[\n ]/gi,""),{lightDark:c}},Y=Le;var u=require("react/jsx-runtime"),Z=(0,s.createContext)({}),Ie=({onChange:e,onClick:t,onSearch:o,results:r,nightMode:c=!1,placeholder:l,sx:m={}})=>{let{lightBg:f="#FFFFFF",darkBg:B="#0F0F0F"}=m,{isMobile:d}=S(),{lightDark:V}=Y(B,20),[n,p]=(0,s.useState)(!0),[z,$]=(0,s.useState)(""),[_,j]=(0,s.useState)(""),[ee,te]=(0,s.useState)([]),[re,P]=(0,s.useState)(),[se,oe]=(0,s.useState)(-1),[ae,W]=(0,s.useState)(!1),[O,K]=(0,s.useState)(!1),h={main:(0,s.useRef)(null),input:(0,s.useRef)(null),result:(0,s.useRef)(null),respBg:(0,s.useRef)(null),inputSearchIcon:(0,s.useRef)(null),clearButton:(0,s.useRef)(null),dummyInput:(0,s.useRef)(null),respSbButton:(0,s.useRef)(null)},le=()=>{p(!0)},ne={refs:h,showSB:n,setShowSB:p,results:r,placeholder:l,onChange:e,onClick:t,filteredResults:ee,setFilteredResults:te,value:z,setValue:$,tempVal:_,setTempVal:j,showLeftSearchSvg:ae,setShowLeftSearchSvg:W,showDummyInput:O,setShowDummyInput:K,darkBg:B,lightBg:f,arr:re,setArr:P,active:se,setActive:oe,onSearch:o};return(0,s.useEffect)(()=>{let I=J=>{h.main.current?.contains(J.target)||(W(!1),$("")),d&&h.respBg.current?.contains(J.target)&&(p(!1),K(!1),h.respSbButton.current?.classList.remove("hidden"))};return window.addEventListener("click",I),()=>window.removeEventListener("click",I)},[]),(0,s.useEffect)(()=>{p(!d)},[d]),(0,s.useEffect)(()=>{d&&n&&h.input.current?.focus()},[n]),(0,s.useEffect)(()=>{P(r?.slice(0,10).filter(async I=>b(I,z)))},[r]),Q(c),(0,u.jsx)("div",{style:{"--lightBg":f,"--darkBg":B,"--darkBgSecondary":V},children:(0,u.jsxs)(Z.Provider,{value:ne,children:[d&&(0,u.jsxs)("div",{className:"flex",children:[O&&(0,u.jsx)(q,{}),(0,u.jsx)("button",{ref:h.respSbButton,role:"responsive-search-button",type:"button",onClick:le,className:"w-fit block ml-auto",children:(0,u.jsx)(w,{size:"normal"})})]}),n&&(0,u.jsxs)("div",{ref:h.main,id:"sbly",role:"searchbox",className:"searchbox",children:[(0,u.jsx)(F,{}),(0,u.jsx)(A,{})]})]})})},x=()=>(0,s.useContext)(Z),H=Ie;var ke=H;0&&(module.exports={});