@anoki/fse-ui
Version:
FSE UI components library
3 lines (2 loc) • 2.21 kB
JavaScript
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./components/ui/filters/FilterSearchSection/FilterSearchSection.css');const r=require("./index.cjs278.js"),R=require("./index.cjs66.js"),d=require("./index.cjs82.js"),E=require("./index.cjs219.js"),s=require("react");;/* empty css */const C=require("./index.cjs225.js"),v=require("./index.cjs80.js"),w=({items:n,selectedItems:i,onChange:a,searchPlaceholder:p,canMultiple:h=!0})=>{const[u,m]=s.useState(""),[o,l]=s.useState(!1),c=s.useRef(null);s.useEffect(()=>{if(!o)return;const e=t=>{c.current&&(c.current.contains(t.target)||l(!1))};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[o]);const f=s.useMemo(()=>{const e=u.trim().toLowerCase();return e?n.filter(t=>t.label.toLowerCase().includes(e)):n},[n,u]),x=s.useMemo(()=>{if(!i.length)return[];const e=new Map(n.map(t=>[t.id,t.label]));return i.map(t=>({id:t,label:e.get(t)??t}))},[n,i]),j=e=>{a(i.filter(t=>t!==e))};return r.jsxRuntimeExports.jsx(d.Col,{className:"ui-filter-search-section",children:r.jsxRuntimeExports.jsxs(d.Col,{className:"ui-filter-search-body",ref:c,children:[r.jsxRuntimeExports.jsxs("div",{className:"ui-filter-search-dropdown-anchor",children:[r.jsxRuntimeExports.jsxs(E.Row,{className:"ui-filter-search-input-row",children:[r.jsxRuntimeExports.jsx(C.SearchIcon,{fillColor:"#5C6F82"}),r.jsxRuntimeExports.jsx("input",{className:"ui-filter-search-input",value:u,onChange:e=>{m(e.target.value),l(!0)},onFocus:()=>l(!0),placeholder:p})]}),r.jsxRuntimeExports.jsx("div",{className:`ui-filter-search-list${o?" is-open":""}`,"aria-hidden":!o,children:r.jsxRuntimeExports.jsx(R.CategoryContent,{canMultiple:h,items:f,selectedItems:i,onChange:a})})]}),x.length>0&&r.jsxRuntimeExports.jsx("div",{className:"ui-filter-chips",children:x.map(e=>r.jsxRuntimeExports.jsxs("button",{type:"button",className:"ui-filter-chip",onClick:()=>j(e.id),children:[r.jsxRuntimeExports.jsx("span",{children:e.label}),r.jsxRuntimeExports.jsx(v.Close,{className:"ui-filter-chip-close",width:24,height:24,decorative:!0})]},e.id))})]})})};exports.FilterSearchSection=w;
//# sourceMappingURL=index.cjs137.js.map