component-library-mustafa-akagunduz-obss/dist/components/AutoComplete.js

Air Command System projesi için geliştirilmiş React component kütüphanesi

import{jsxs as e,jsx as o}from"react/jsx-runtime";import{clsx as l}from"../node_modules/clsx/dist/clsx.js";import{useState as t,useRef as a,useEffect as n}from"react";import{FaChevronDown as c}from"../node_modules/react-icons/fa/index.js";import{Input as r}from"./Input.js";const s=({options:s,values:u=[],onChange:i,placeholder:d="Select options...",disabled:m=!1,className:p,searchPlaceholder:_="Search..."})=>{const[h,v]=t(!1),[f,g]=t(""),[b,N]=t(-1),w=a(null),x=a(null),k=s.filter(e=>e.label.toLowerCase().includes(f.toLowerCase())),C=s.filter(e=>u.includes(e.value));n(()=>{const e=e=>{w.current&&!w.current.contains(e.target)&&(v(!1),g(""),N(-1))};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[]),n(()=>{h&&x.current&&x.current.focus()},[h]);const D=()=>{m||(v(!0),g(""))},E=e=>{const o=u.includes(e.value)?u.filter(o=>o!==e.value):[...u,e.value];null==i||i(o),N(-1)},L=e=>{if(!m)switch(e.key){case"Enter":e.preventDefault(),h&&b>=0&&k[b]?E(k[b]):h||v(!0);break;case"Escape":v(!1),g(""),N(-1);break;case"ArrowDown":e.preventDefault(),h?N(e=>e<k.length-1?e+1:0):v(!0);break;case"ArrowUp":e.preventDefault(),h&&N(e=>e>0?e-1:k.length-1)}};return e("div",{ref:w,className:l("autocomplete",p,{"autocomplete--open":h,"autocomplete--disabled":m}),children:[e("div",{className:"autocomplete__trigger",children:[h?o(r,{ref:x,value:f,onChange:e=>{g(e.target.value),N(-1)},onKeyDown:L,placeholder:_,className:"autocomplete__trigger-input"}):o("div",{className:"autocomplete__trigger-content",onClick:D,onKeyDown:L,tabIndex:m?-1:0,role:"combobox","aria-expanded":h,"aria-haspopup":"listbox",children:o("span",{className:"autocomplete__value",children:0===C.length?d:1===C.length?C[0].label:`${C.length} selected`})}),o(c,{className:l("autocomplete__arrow",{"autocomplete__arrow--open":h}),onClick:h?void 0:D})]}),h&&o("div",{className:"autocomplete__dropdown",children:e("ul",{className:"autocomplete__list",role:"listbox",children:[k.map((t,a)=>e("li",{className:l("autocomplete__option",{"autocomplete__option--selected":u.includes(t.value),"autocomplete__option--hovered":a===b}),onClick:()=>E(t),onMouseEnter:()=>N(a),onMouseLeave:()=>N(-1),role:"option","aria-selected":u.includes(t.value),children:[o("div",{className:"autocomplete__checkbox",children:u.includes(t.value)&&"✓"}),o("span",{className:"autocomplete__label",children:t.label})]},t.value)),0===k.length&&o("li",{className:"autocomplete__no-results",children:"No results found"})]})})]})};export{s as AutoComplete};
//# sourceMappingURL=AutoComplete.js.map