component-library-mustafa-akagunduz/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:m="Select options...",disabled:d=!1,className:p,searchPlaceholder:_="Search...",t:h})=>{const[v,f]=t(!1),[g,b]=t(""),[N,w]=t(-1),x=a(null),k=a(null),C=s.filter(e=>e.label.toLowerCase().includes(g.toLowerCase())),D=s.filter(e=>u.includes(e.value));n(()=>{const e=e=>{x.current&&!x.current.contains(e.target)&&(f(!1),b(""),w(-1))};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[]),n(()=>{v&&k.current&&k.current.focus()},[v]);const E=()=>{d||(f(!0),b(""))},L=e=>{const o=u.includes(e.value)?u.filter(o=>o!==e.value):[...u,e.value];null==i||i(o),w(-1)},j=e=>{if(!d)switch(e.key){case"Enter":e.preventDefault(),v&&N>=0&&C[N]?L(C[N]):v||f(!0);break;case"Escape":f(!1),b(""),w(-1);break;case"ArrowDown":e.preventDefault(),v?w(e=>e<C.length-1?e+1:0):f(!0);break;case"ArrowUp":e.preventDefault(),v&&w(e=>e>0?e-1:C.length-1)}};return e("div",{ref:x,className:l("autocomplete",p,{"autocomplete--open":v,"autocomplete--disabled":d}),children:[e("div",{className:"autocomplete__trigger",children:[v?o(r,{ref:k,value:g,onChange:e=>{b(e.target.value),w(-1)},onKeyDown:j,placeholder:_,className:"autocomplete__trigger-input"}):o("div",{className:"autocomplete__trigger-content",onClick:E,onKeyDown:j,tabIndex:d?-1:0,role:"combobox","aria-expanded":v,"aria-haspopup":"listbox",children:o("span",{className:"autocomplete__value",children:0===D.length?m:1===D.length?D[0].label:h?h("common.selected",{count:D.length}):`${D.length} selected`})}),o(c,{className:l("autocomplete__arrow",{"autocomplete__arrow--open":v}),onClick:v?void 0:E})]}),v&&o("div",{className:"autocomplete__dropdown",children:e("ul",{className:"autocomplete__list",role:"listbox",children:[C.map((t,a)=>e("li",{className:l("autocomplete__option",{"autocomplete__option--selected":u.includes(t.value),"autocomplete__option--hovered":a===N}),onClick:()=>L(t),onMouseEnter:()=>w(a),onMouseLeave:()=>w(-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===C.length&&o("li",{className:"autocomplete__no-results",children:h?h("common.noResults"):"No results found"})]})})]})};export{s as AutoComplete};
//# sourceMappingURL=AutoComplete.js.map