react-box-tools/dist/multivalue.cjs

Box tools react components, utils and hooks

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),w=require("./clsx-CeOg4f1g.cjs"),r=require("react"),K=require("./form-CbCMpsmd.cjs"),P=x=>{const{label:f,icon:h,disabled:l,onAdd:j,onFocus:v,onKeyDown:p,...S}=x,{validateField:C,getRegisteredField:I,error:d,event:b,initValues:m}=K.useFormContext(),n=I(x),[y,M]=r.useState(m[n]??[]),[N,g]=r.useState(d[n]),[c,a]=r.useState(m[n]??[]),E=r.useId(),i=r.useRef(null);b.onClear(()=>V()),b.onReset(()=>{M(m[n])});const F=c.length>0,k=t=>{let s="";if(i.current&&(s=i.current.value.trim()),t.key==="Enter"&&s){if(!c.includes(s)){var o=[...c,s];a(o),u(o),j&&j(s,o)}R("")}p&&p(t)},q=t=>{u(c),v&&v(t)},D=t=>{var s=c.filter(o=>o!==t);a(s),u(s)},u=t=>{n&&C(n,t).then(s=>g(s.error))},V=()=>{l||(a([]),u([]))},R=t=>{i.current&&(i.current.value=t)};return r.useEffect(()=>{a(y)},[y]),r.useEffect(()=>{g(d[n])},[d]),e.jsxs("div",{className:w.clsx(`control ${l&&"disabled"}`),children:[f&&e.jsx("label",{htmlFor:E,children:f}),e.jsxs("div",{className:"content",children:[F&&e.jsx("div",{className:"multi-items",children:c.map((t,s)=>e.jsxs("div",{className:"item",children:[e.jsx("span",{children:t}),e.jsx("button",{type:"button",className:"x",disabled:l,onClick:()=>D(t),children:e.jsx("i",{children:"×"})})]},s))}),e.jsxs("div",{className:"input",children:[e.jsx("div",{className:"icon",children:h||e.jsx("i",{children:"⊌"})}),e.jsx("input",{autoComplete:"off",...S,ref:i,disabled:l,type:"text",id:E,onKeyDown:k,onFocus:q}),F&&e.jsx("button",{className:"clear",type:"button",onClick:V,disabled:l,children:e.jsx("i",{children:"×"})})]})]}),N&&e.jsx("span",{className:"error",children:N})]})};exports.MultivalueInput=P;