ponchojs
Version:
Poncho
38 lines (37 loc) • 2.92 kB
JavaScript
import{a as i,j as e}from"./emotion-react-jsx-runtime.esm-991ce217.js";import{useState as t,useMemo as o,useCallback as s,useEffect as n}from"react";import{CircleLoader as l}from"react-spinners";import{useField as r}from"formik";import{a}from"./useFormContext-57a22edf.js";import{s as d}from"./styled-components.esm-0d53f334.js";import{BaseInput as c}from"./baseinput.js";import{IconButton as p}from"./iconbutton.js";import{D as m}from"./close-3228efe8.js";import{u}from"./useInputDisable-b6a59f7b.js";import"./tslib.es6-d703c724.js";import"@material-ui/styles";import"classnames";const h=n,g=d.div`
position: absolute;
top: 50px;
left: 0;
width: 100%;
display: grid;
opacity: ${({showOptions:i})=>i?1:0};
visibility: ${({showOptions:i})=>i?"visible":"hidden"};
transition: all 0.2s linear;
`,v=d.ul`
max-height: 250px;
min-height: 50px;
overflow-y: auto;
background-color: white;
z-index: 20;
`,b=d.div`
position: relative;
display: flex;
`,f=d.div`
position: absolute;
top: 0;
bottom: 0;
right: 16px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s linear;
opacity: ${({showDelete:i})=>i?1:0};
visibility: ${({showDelete:i})=>i?"visible":"hidden"};
`,j=d.a`
cursor: pointer;
`,x=d.div`
display: flex;
justify-content: space-between;
align-items: center;
`,y=(t,o)=>o?e("span",{children:[i("b",{children:t.slice(0,o[0].length)},void 0),t.slice(o[0].length)]},void 0):t,w=(i,e,t)=>new RegExp(""+(t?"":"^")+i,"i").test(e.toString()),O=n=>{const{options:d,id:O,onChangeText:C}=n,[{value:D},,{setValue:N}]=r(O),[k,S]=t(""),[$,z]=t("");a(n);var B=u(n);const E=1<k.length&&!B,F=o((()=>(null==d?void 0:d.filter((({title:i,id:e})=>w(k,i||e))))||[]),[d,k]),I=s((()=>{var t=i("li",Object.assign({className:"list-group-item"},{children:e(x,{children:[i("span",{children:"Buscando"},void 0),i(l,{size:25,color:"#0072bb"},void 0)]},void 0)}),void 0);return D===k?null:i(g,Object.assign({showOptions:E},{children:e(v,Object.assign({className:"list-group"},{children:[0===F.length&&!n.loading&&i("li",Object.assign({className:"list-group-item"},{children:"Sin resultados"}),void 0),n.loading&&t,F.map((({id:e,title:t})=>{const o=t||e.toString()||"";return i(j,Object.assign({className:"list-group-item",onClick:()=>{z(e),S(o)}},{children:y(o,o.match(new RegExp("^"+k,"i")))}),o)}))]}),void 0)}),void 0)}),[k,n.loading,D,E,F]);return h((()=>{N($)}),[$]),i(c,Object.assign({},n,{children:e(b,{children:[i("input",{disabled:B,autoFocus:!0,type:"text",value:k,className:"form-control",onBlur:()=>{S((i=>{const[e]=F;return e&&w(i,e.title||e.id)?(z(e.id),e.title||e.id.toString()):""}))},onChange:({target:i})=>{C(i.value),S(i.value)}},void 0),I(),i(f,Object.assign({showDelete:!!D},{children:i(p,{onClick:()=>{S(""),z("")},size:22,Icon:m},void 0)}),void 0)]},void 0)}),void 0)};export{O as AutoComplete};
//# sourceMappingURL=autocomplete.js.map