UNPKG

@anoki/fse-ui

Version:

FSE UI components library

3 lines (2 loc) 2.32 kB
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./components/ui/SearchStructure/SearchStructure.css');const s=require("./index.cjs237.js");;/* empty css */const o=require("./index.cjs238.js"),d=require("react"),C=require("./index.cjs281.js"),E=require("./index.cjs179.js"),N=require("./index.cjs61.js"),S=require("./index.cjs32.js"),y=({btnText:h,helperText:u,mobileHelperText:m=u,value:p,items:j,setValue:g})=>{const[r,l]=d.useState(p),[x,i]=d.useState([]),f=C.useMediaQuery("(min-width: 768px)"),b=e=>{const t=e.target.value;if(l(t),t.length>=3){const n=j.filter(a=>[a.address.streetName,a.address.zipCode,a.address.city].some(c=>c==null?void 0:c.toLowerCase().includes(t.toLowerCase())));i(n)}else i([])},w=e=>{l(e.address.plainAddress),i([])},R=(e,t)=>{if(!t)return e;const n=e.toLowerCase().indexOf(t.toLowerCase());if(n===-1)return e;const a=e.slice(0,n),c=e.slice(n,n+t.length),v=e.slice(n+t.length);return s.jsxRuntimeExports.jsxs(s.jsxRuntimeExports.Fragment,{children:[a,s.jsxRuntimeExports.jsx("span",{className:"text-primary fw-bold",children:c}),v]})};return s.jsxRuntimeExports.jsxs("div",{className:o.clsx("ui-search","br-x4 bg-border-secondary w-full"),children:[s.jsxRuntimeExports.jsxs("div",{className:"position-relative",children:[s.jsxRuntimeExports.jsx("input",{id:"search",type:"text",className:o.clsx("ui-search-input","fs-6 md-fs-custom text-slate-20 br-x4 w-full pl-x24",r&&r.length>=3&&"has-clear-icon"),placeholder:f?u:m,value:r,onChange:b,maxLength:30}),r&&r.length>=3&&s.jsxRuntimeExports.jsx(E.Close,{className:"ui-clean-button",onClick:()=>{l(""),i([])}})]}),x.length>0&&s.jsxRuntimeExports.jsx("div",{className:"ui-wrap-list-item-search shadow position-absolute p-x24",children:s.jsxRuntimeExports.jsx(N.Col,{gap:"x24",fw:"regular",text:"secondary",fs:"6",className:"ui-list-item-search overflow-y-auto ",children:x.map((e,t)=>s.jsxRuntimeExports.jsx("div",{onClick:()=>w(e),children:R(e.address.plainAddress,r||"")},t))})}),s.jsxRuntimeExports.jsx("div",{className:o.clsx("ui-div-btn"),children:s.jsxRuntimeExports.jsx(S.Button,{className:o.clsx("ui-btn-search","bg-primary text-white fs-7 md-fs-6 fw-semibold br-x4"),onClick:()=>{i([]),g(r??"")},children:h})})]})};exports.SearchStructure=y; //# sourceMappingURL=index.cjs121.js.map