amotify/dist/fn/Input/Autocomplete.js

UI Component for React,NextJS,esbuild

import{b as S,c as O,d as Q,e as Y}from"../../chunk-C5N2D3ZX.js";import{Fragment as X,jsx as l,jsxs as P}from"react/jsx-runtime";import{useState as I,useEffect as E,useRef as ne}from"react";import s,{UUID as W}from"jmini";import{ExtractStyles as ae}from"../../@utils";import{Box as R,Span as re,FAI as M,Column as ie}from"../../atoms";import{Text as N,Row as q}from"../../mols";import{Button as Z}from"../Button";import{Loader as se}from"../Loader";import{Sheet as ue}from"../Sheet";import{OptionalInputWrapper as ce,BoxWrapper as pe,CoreEffects as z,DefaultBoxishStyles as de}from"./core";import{InputAutocompleteClasses as U}from"../../@styles/componentClasses";import{InputLabel as Se}from"./Label";import{RightIcon as ee}from".";function me(e){let{value:t,states:u}=e,{required:c,options:n,min:o,max:f}=u;o=o||0,f=f||65535;let v=[],p=t.filter(d=>d!==null).length;return c&&(p||v.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"})),p<o&&v.push({type:"invalid",label:o+"\u500B\u4EE5\u4E0A\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044"}),p>f&&v.push({type:"invalid",label:f+"\u500B\u307E\u3067\u9078\u629E\u3067\u304D\u307E\u3059"}),{ok:!v.filter(({type:d})=>d=="invalid").length,notice:v}}const B={InitOptions:e=>{let t=[];return e.forEach(u=>{let{type:c,label:n,value:o,searchValue:f}=u,v=f||(s.is.string(n)?n:"")||(s.is.string(o)?o:"");s.is.nullish(n)&&(n=String(o)),t.push(O(S({},u),{searchValue:v,type:c||"selector",label:n,value:o}))}),t},FilterSelectableOptions:(e,t)=>{let u=e.val_options;if(t||(u=e.val_options.filter(c=>c.type!="label")),e.val_keyword){let c=e.val_keyword.toLower().replace(/ /g,"");u=u.filter(n=>(n.searchValue||"").toLower().replace(/ /g,"").includes(c))}return u}},L={Shallow:e=>{let{rootStates:t,val_status:u}=e,c=ae(t);return l(R,{position:"absolute",top:0,left:0,right:0,height:0,overflow:"hidden",opacity:"trans",freeCSS:{zIndex:3,pointerEvents:"none"},children:l(N.Description,O(S({className:t.className},c),{position:"absolute",width:1,freeCSS:O(S({},c.freeCSS),{color:"orange"}),"data-id":"shallow_"+u.componentID,children:l(R,{"data-input-value-shallow":u.componentID,children:"A"})}))})},Button:e=>{let{rootStates:t,val_keyword:u,set_keyword:c,val_optionFocused:n,set_optionFocused:o,val_options:f,set_options:v,val_optionsDict:p,set_optionsDict:d,val_preventOpenSelectorOnFocus:a,set_preventOpenSelectorOnFocus:m,val_selectorOpen:r,set_selectorOpen:i,val_status:y,set_status:w,val_validate:b,set_validate:C}=e,j=t,{tone:_,required:k,form:D,className:x,multiSelect:K,enableFormSubmit:T,checkValidationAtFirst:A,onValidate:$,onUpdateValue:J,onUpdateValidValue:H,value:fe="",options:ve,leftIndicator:ye,rightIndicator:he,leftIcon:_e,rightIcon:ge,componentID:be,status_id:Oe,wrapStyles:Ie,emptySelect:Ce,SearchInput:De,SearchInputPlaceholder:we,SelectedComponent:Te,SelectorComponent:Ve,SelectorStyles:ke,SelectorPosition:xe,DynamicOptionsOnSearch:Re}=j,g=Q(j,["tone","required","form","className","multiSelect","enableFormSubmit","checkValidationAtFirst","onValidate","onUpdateValue","onUpdateValidValue","value","options","leftIndicator","rightIndicator","leftIcon","rightIcon","componentID","status_id","wrapStyles","emptySelect","SearchInput","SearchInputPlaceholder","SelectedComponent","SelectorComponent","SelectorStyles","SelectorPosition","DynamicOptionsOnSearch"]);return E(()=>{var V,F;if(t.disabled||!r)return;let h=B.FilterSelectableOptions(e);o((F=(V=h[0])==null?void 0:V.value)!=null?F:null)},[u]),E(()=>{y.eventType!="init"&&(t.max==y.dataValue.length?(i(!1),m(!0),setTimeout(()=>{let h=s('[data-input-origin="'+t.componentID+'"]');h&&h.focus()},10)):s("#SearchInput_"+t.componentID).focus())},[y.dataValue]),E(()=>{let h="autocomplete-click-"+t.componentID;if(r){if(!s('[data-input-origin="'+t.componentID+'"]'))return;s("#SearchInput_"+t.componentID).focus(),s(document).addEvent({eventID:h,eventType:"mousedown",callback:F=>{let G=s(F.target),oe=!!s(G).parent("."+U("Core")).length,le=!!s(G).parent("."+U("Selector")).length;oe||le||(i(!1),F.preventDefault(),F.stopPropagation())}})}else s(document).removeEvent([h]),c("")},[r]),P(X,{children:[l(R,O(S({tabIndex:0},g),{"data-disabled":t.disabled,"data-show-validation":z.isShowValidation(b,y,!!A),"data-component-id":y.componentID,"data-input-origin":y.componentID,"data-focus":!!r,className:[x,U("Core")].join(" "),onFocus:h=>{if(g!=null&&g.onFocus&&(g==null||g.onFocus(h)),!t.disabled){if(a)return m(!1);i(!0),h.preventDefault()}},onClick:h=>{g!=null&&g.onClick&&(g==null||g.onClick(h)),!t.disabled&&i(!0)},onKeyDown:h=>{let{key:V}=h;T&&z.SubmitForm(h,D),!r&&(V==" "||V=="ArrowDown"||V=="ArrowUp"||V=="Enter")&&i(!0)},children:P(q.Left,{flexWrap:!0,gap:"1/3",freeCSS:{letterSpacing:".5px"},children:[l(L.Selected,S({},e)),l(re,{width:0,overflow:"hidden",opacity:"trans",children:"A"}),l(L.SearchInput,S({},e))]})})),r&&l(L.Selector,S({},e))]})},SearchInput:e=>{let{rootStates:t}=e,[u,c]=I(!1);return t.disabled||!e.val_selectorOpen?null:l(R,{id:"SearchInput_"+t.componentID,placeholder:t.SearchInputPlaceholder||"\u691C\u7D22...",opacity:e.val_selectorOpen?"max":"trans",transition:"middle",flexSizing:0,htmlTag:"input",border:"unset",backgroundColor:"trans",value:e.val_keyword,freeCSS:{outline:"none"},onCompositionStart:n=>{t.onCompositionStart&&t.onCompositionStart(n),c(!0)},onCompositionEnd:n=>{t.onCompositionEnd&&t.onCompositionEnd(n),c(!1)},onKeyDown:n=>{let{key:o,metaKey:f,ctrlKey:v}=n,p=f||v;o=="Escape"?(e.set_selectorOpen(!1),e.set_preventOpenSelectorOnFocus(!0),setTimeout(()=>{let d=s('[data-input-origin="'+t.componentID+'"]');d&&d.focus()},10)):o=="Tab"?e.set_selectorOpen(!1):o==" "?s.scope(()=>{e.val_selectorOpen||e.val_keyword||(n.preventDefault(),e.set_selectorOpen(!0))}):o=="Backspace"?s.scope(()=>{if(e.val_keyword)return;let d=[...e.val_status.dataValue];d.pop(),e.set_status(a=>O(S({},a),{dataValue:d,eventType:"update",eventID:W()}))}):o=="Enter"&&s.scope(()=>{if(u)return;if(!e.val_selectorOpen)return e.set_selectorOpen(!0);let d=e.val_options.find(m=>m.value==e.val_optionFocused);if(!d)return;let{value:a}=d;e.set_status(m=>{let r=[...m.dataValue];return s.scope(()=>{if(a===null)return r=[];m.dataValue.includes(a)?r=r.filter(y=>y!==a):t.multiSelect?r.push(a):r=[a]}),O(S({},m),{dataValue:r,eventType:"update",eventID:W()})}),e.set_keyword(""),e.set_preventDynamicSearchOnKeywordChange(!0)}),s.scope(()=>{if(!["ArrowDown","ArrowUp"].includes(o))return;if(n.preventDefault(),!e.val_selectorOpen)return e.set_selectorOpen(!0);let d=o=="ArrowDown"?1:-1,a=B.FilterSelectableOptions(e),m=a.length-1,r=null;s.scope(()=>{var y,w,b,C,_,k,D,x,K,T;let i=a.findIndex(A=>A.value==e.val_optionFocused);if(i==-1&&(i=0),d==1){if(r=(w=(y=a[0])==null?void 0:y.value)!=null?w:null,p){r=(b=a[m].value)!=null?b:null;return}if(i==-1||i==m)return;r=(_=(C=a[i+1])==null?void 0:C.value)!=null?_:null}else{if(r=(k=a[m].value)!=null?k:null,p){r=(x=(D=a[0])==null?void 0:D.value)!=null?x:null;return}if(i==-1||i==0)return;r=(T=(K=a[i-1])==null?void 0:K.value)!=null?T:null}}),e.set_optionFocused(r)}),t.enableFormSubmit&&z.SubmitForm(n,e.rootStates.form)},onChange:n=>{let f=n.target.value;e.set_keyword(f)}},"searchInput")},Selector:e=>{var d;let[t,u]=I("idle"),[c,n]=I("idle");E(()=>{if(!e.val_selectorOpen||!e.rootStates.DynamicOptionsOnSearch)return;if(e.val_preventDynamicSearchOnKeywordChange)return e.set_preventDynamicSearchOnKeywordChange(!1);if(t=="idle")return u("ok");n("fetch");let a="autocomplete-search-"+e.rootStates.componentID;s.interval.once(()=>Y(void 0,null,function*(){let m=yield e.rootStates.DynamicOptionsOnSearch(e.val_keyword);n("idle");let r=B.InitOptions(m||[]);e.set_options(r)}),300,a)},[e.val_keyword]);let o=[],f=B.FilterSelectableOptions(e,!0),v=B.FilterSelectableOptions(e);f.forEach((a,m)=>{let{type:r,value:i}=a,y=e.val_optionFocused==i,w=e.val_status.dataValue.includes(i),b=e.rootStates.SelectorComponent;o.push(l(b,{option:a,isFocused:y,isSelected:w,addCallback:()=>{e.set_status(C=>{let _=[...C.dataValue];return s.scope(()=>{if(i===null)return _=[];C.dataValue.includes(i)?_=_.filter(D=>D!==i):e.rootStates.multiSelect?_.push(i):_=[i]}),O(S({},C),{dataValue:_,eventType:"update",eventID:W()})})}},s.Stringify(i)||W()))}),v.length||(o=[l(N.Supplement,{padding:[0,1],fontColor:"4.thin",children:"\u5019\u88DC\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093"},"no-selector-notice")]),c=="fetch"&&(o=[P(q.Left,{padding:1,fontColor:"3.blur",children:[l(se.Theme.R,{showInitial:!0}),l(N.Supplement,{children:"Loading..."})]},"loader")]);let p={position:"absolute",minWidth:1,freeCSS:{zIndex:1e3}};switch(e.rootStates.SelectorPosition){case 1:p.bottom="100%",p.left=0,p.paddingBottom="1/3";break;case 2:p.bottom="100%",p.right=0,p.paddingBottom="1/3";break;case 3:p.top="100%",p.left=0,p.paddingTop="1/3";break;case 4:p.top="100%",p.right=0,p.paddingTop="1/3";break;default:break}return l(R,O(S({},p),{children:l(ue.Body,O(S({className:U("Selector"),borderRadius:"2.tone.secondary",ssCardBox:!0,boxShadow:"1.normal",overflow:"auto"},e.rootStates.SelectorStyles),{freeCSS:S({maxHeight:12*24},(d=e.rootStates.SelectorStyles)==null?void 0:d.freeCSS),children:l(ie,{gap:"1/12",padding:[1,0],children:o})}))}))},Selected:e=>{let{rootStates:t,val_status:u,set_status:c,val_optionsDict:n}=e,o=[];return u.dataValue.forEach(f=>{let v=n[s.Stringify(f)];if(!v)return;let p=t.SelectedComponent,d=v.label;v.value===null&&(d=""),o.push(l(R,{className:U("SelectedCell"),children:l(p,{value:v.value,label:d,removeCallback:a=>{if(a.stopPropagation(),a.preventDefault(),t.disabled)return;let m=[...u.dataValue];m=m.filter(r=>r!==f),c(r=>O(S({},r),{dataValue:m,eventType:"update",eventID:W()}))}})},s.Stringify(v.value)))}),l(X,{children:o})},Core:e=>{var A;let{value:t}=e,[u,c]=I(!1),[n,o]=I(!1),[f,v]=I(!1),[p,d]=I(""),[a,m]=I(e.options),[r,i]=I((A=e.value[0])!=null?A:null),[y,w]=I({}),[b,C]=I(z.DefaultStatus(e.componentID,t)),[_,k]=I({ok:!1,notice:[]}),D=ne(!1);E(()=>{D.current?m(e.options):D.current=!0},[e.options]),E(()=>{if(!a.length)return;let $=[...a],J=S({},y);$.forEach(H=>{H.type!="label"&&(J[s.Stringify(H.value)]=H)}),w(J)},[a]);let x={rootStates:e,val_options:a,set_options:m,val_optionFocused:r,set_optionFocused:i,val_optionsDict:y,set_optionsDict:w,val_preventDynamicSearchOnKeywordChange:n,set_preventDynamicSearchOnKeywordChange:o,val_preventOpenSelectorOnFocus:u,set_preventOpenSelectorOnFocus:c,val_selectorOpen:f,set_selectorOpen:v,val_keyword:p,set_keyword:d,val_status:b,set_status:C,val_validate:_,set_validate:k},K=!!e.multiSelect;z.CommonEffects({type:K?"autocomplete.multi":"autocomplete.single",states:e,val_status:b,set_status:C,val_validate:_,set_validate:k,SystemValidation:me});let T=b.dataValue.length&&b.dataValue[0]!==null;return T=T||f,P(pe,{val_status:b,set_status:C,val_validate:_,states:e,children:[l(Se,{componentID:e.componentID,fontSize:e.fontSize,required:e.required,label:e.label,isActive:T}),l(L.Shallow,S({},x)),l(L.Button,S({},x))]})}},te=e=>{var u;let t=S({},e);return t=O(S({value:[],min:0,max:65535,multiSelect:!0,SearchInput:!0,emptySelect:!0,SelectorComponent:({option:c,isSelected:n,isFocused:o,addCallback:f})=>c.type=="selector"?l(Z.Sub.S,{color:"cloud",backgroundColor:"trans",borderRadius:0,fontColor:"2.normal",textAlign:"left",padding:["1/2",1.5],isActive:o,isActiveStyles:{backgroundColor:"cloud"},onClick:v=>{f()},children:P(q.Left,{gap:"1/2",children:[n&&l(M.Check,{fontColor:"theme"}),l(N.Supplement,{transition:"short",children:c.label})]})}):l(X,{children:c.label}),SelectedComponent:({value:c,label:n,removeCallback:o})=>P(q.Left,{ssCardBox:"cloud",borderRadius:"2.tone.secondary",fontSize:"1.mini",padding:"1/2",gap:0,children:[l(R,{padding:[0,"1/4"],children:n}),l(Z.Sub,{flexSizing:"none",color:"cloud",fontColor:"white",backgroundColor:"layer.5",isRounded:!0,padding:"1/4",onClick:o,freeCSS:{lineHeight:1,aspectRatio:"1/1"},children:l(M.Times,{ssSphere:1})})]}),SelectorPosition:3},t),{freeCSS:S({cursor:"pointer"},t.freeCSS)}),t.multiSelect||(t.min=0,t.max=1),t.options=t.options||[],t.emptySelect&&(t.options=[{value:null,label:l(N.Supplement,{fontColor:"4.thin",children:"\u9078\u629E\u3092\u89E3\u9664"})},...t.options]),t.value=s.flatArray((u=t.value)!=null?u:null),t.options=B.InitOptions(t.options),s.is.nullish(t.rightIcon)&&(t.rightIcon=l(ee,{ssSphere:2,children:l(M.Search,{})}),t.disabled&&(t.rightIcon=l(ee,{ssSphere:2,fontColor:"5.translucent",children:l(M.Ban,{})}))),t.rightIcon&&(t=S({paddingRight:3},t)),t.leftIcon&&(t=S({paddingLeft:3},t)),l(ce,{componentID:t.componentID,children:L.Core,states:de(t)})};export{te as Autocomplete,te as default};