UNPKG

ponchojs

Version:

Poncho

38 lines (37 loc) 2.92 kB
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