@nitrogenbuilder/core/src/controls/CtrlSearch/CtrlUrl.js

CMS Agnostic Page Builder for React projects

import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import React from"react";import classNames from"classnames";import getProvider from"../../utils/getProvider.js";import"./CtrlUrl.scss";const PROVIDER=getProvider();export default function CtrlUrl({currMod:e,updatePath:t,prop:s,value:a,inheritVal:r,deleteProp:l,updateProps:c}){const{search:u}=s,[i,o]=React.useState([]),[n,m]=React.useState(""),[h,p]=React.useState(null);React.useEffect((()=>{n&&n.trim().length>0?async function(e){const t=await(u??PROVIDER.searchUrls)(e);o(t)}(n):o([])}),[n]);const[d,_]=React.useState(null);return _jsxs("div",{className:"ctrl-search",children:[_jsx("input",{className:classNames("ctrl-search__input",{"ctrl-search__input--has-results":i.length>0}),type:"text",placeholder:r?a:"",value:r?"":a,onChange:function(s){h&&clearTimeout(h),p(setTimeout((()=>{m(s.target.value)}),500)),s.target.value&&s.target.value.trim().length>0?c(e.id,t,s.target.value):(h&&(clearTimeout(h),o([])),l(t))},onBlur:function(){d&&clearTimeout(d),_(setTimeout((()=>{o([])}),300))},onFocus:function(){d&&clearTimeout(d)}},e.id+t),i.length>0&&_jsx("div",{className:"ctrl-search__results",children:i.map(((s,a)=>_jsxs("div",{className:"ctrl-search__result",onClick:()=>{d&&clearTimeout(d),o([]),c(e.id,t,s.value)},children:[s.label," ",s.slug&&_jsxs("span",{title:`/${s.slug.replaceAll("/","")}`,className:"ctrl-search__result__slug",children:["/",s.slug.replaceAll("/","")]})]},a)))})]})}