amotify 0.2.58 → 0.2.60
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
import{b as v,c as C,d as j,e as Q}from"../../chunk-C5N2D3ZX.js";import{Fragment as U,jsx as l,jsxs as K}from"react/jsx-runtime";import{useState as b,useEffect as V,useRef as ne}from"react";import s from"@mingoo/jsmin";import{ExtractStyles as ae,useStore as Y}from"../../@utils";import{Box as x,Span as re,FAI as N,Column as ie}from"../../atoms";import{Text as B,Row as M}from"../../mols";import Z from"../Button";import{Loader as se}from"../Loader";import{Sheet as z}from"../Sheet";import{OptionalInputWrapper as ue,BoxWrapper as ce,CoreEffects as L,DefaultBoxishStyles as pe}from"./core";import{InputAutocompleteClasses as P}from"../../@styles/componentClasses";import{InputLabel as de}from"./Label";import{RightIcon as ee}from".";function me(t){let{value:e,states:n}=t,{required:o,options:p,min:u,max:m}=n;u=u||0,m=m||65535;let r=[],a=e.filter(S=>S!==null).length;return o&&(a||r.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"})),a<u&&r.push({type:"invalid",label:u+"\u500B\u4EE5\u4E0A\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044"}),a>m&&r.push({type:"invalid",label:m+"\u500B\u307E\u3067\u9078\u629E\u3067\u304D\u307E\u3059"}),{ok:!r.filter(({type:S})=>S=="invalid").length,notice:r}}const R={InitOptions:t=>{let e=[];return t.forEach(n=>{let{type:o,label:p,value:u,searchValue:m}=n,r=m||(s.is.string(p)?p:"")||(s.is.string(u)?u:"");e.push(C(v({},n),{searchValue:r,type:o||"selector",value:u}))}),e},FilterSelectableOptions:(t,e)=>{let n=t.val_options;if(e||(n=t.val_options.filter(o=>o.type!="label")),t.val_keyword){let o=t.val_keyword.toLower().replace(/ /g,"");n=n.filter(p=>(p.searchValue||"").toLower().replace(/ /g,"").includes(o))}return n}},A={Shallow:t=>{let{rootStates:e,val_status:n}=t,o=ae(e);return l(x,{position:"absolute",top:0,left:0,right:0,height:0,overflow:"hidden",opacity:"trans",freeCSS:{zIndex:3,pointerEvents:"none"},children:l(B.Description,C(v({className:e.className},o),{position:"absolute",width:1,freeCSS:C(v({},o.freeCSS),{color:"orange"}),"data-id":"shallow_"+n.componentID,children:l(x,{"data-input-value-shallow":n.componentID,children:"A"})}))})},Button:t=>{let{rootStates:e,val_keyword:n,set_keyword:o,val_optionFocused:p,set_optionFocused:u,val_options:m,set_options:r,val_optionsDict:a,set_optionsDict:S,val_preventOpenSelectorOnFocus:i,set_preventOpenSelectorOnFocus:d,val_selectorOpen:f,set_selectorOpen:y,val_status:c,set_status:I,val_validate:_,set_validate:T}=t,X=e,{tone:w,required:O,form:F,className:k,multiSelect:J,enableFormSubmit:E,checkValidationAtFirst:q,onValidate:G,onUpdateValue:W,onUpdateValidValue:Se,value:fe="",options:ve,leftIndicator:he,rightIndicator:ye,leftIcon:_e,rightIcon:ge,componentID:be,status_id:Ie,wrapStyles:Oe,emptySelect:De,SearchInput:Ce,SearchInputPlaceholder:we,SelectedComponent:Ve,SelectorComponent:Te,SelectorGravityPoint:ke,DynamicOptionsOnSearch:xe}=X,g=j(X,["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","SelectorGravityPoint","DynamicOptionsOnSearch"]);V(()=>{var D;if(e.disabled||!f)return;let h=R.FilterSelectableOptions(t);u(((D=h[0])==null?void 0:D.value)||null)},[n]),V(()=>{c.eventType!="init"&&(e.max==c.dataValue.length?(y(!1),d(!0),setTimeout(()=>{let h=s('[data-input-origin="'+e.componentID+'"]');h&&h.focus()},10)):s("#SearchInput_"+e.componentID).focus())},[c.dataValue]);let H="autocomplete-sheet-"+e.componentID;return V(()=>{let h="autocomplete-click-"+e.componentID;if(f){let D=s('[data-input-origin="'+e.componentID+'"]');if(!D)return;s("#SearchInput_"+e.componentID).focus(),z.open({sheetID:H,type:"custom",parent:D[0],padding:["1/4",0],gravityPoint:e.SelectorGravityPoint||22,close_option:{aroundClick:!1},content:l(A.Selector,v({},t))}),s(document).addEvent({eventID:h,eventType:"mousedown",callback:oe=>{let $=s(oe.target),le=!!s($).parent("."+P("Core")).length;s($).parent("."+P("Selector")).length||le||y(!1)}})}else s(document).removeEvent([h]),o(""),z.close(H)},[f]),V(()=>{if(e.disabled||!f)return;z.customSheet.reposition(H);let h=Y.get("refresh-autocomplete-selector-"+e.componentID);h&&h(t)},[m,c.dataValue,n,p]),l(U,{children:l(x,C(v({tabIndex:0},g),{"data-disabled":e.disabled,"data-show-validation":L.isShowValidation(_,c,!!q),"data-component-id":c.componentID,"data-input-origin":c.componentID,"data-focus":!!f,className:[k,P("Core")].join(" "),onFocus:h=>{if(g!=null&&g.onFocus&&(g==null||g.onFocus(h)),!e.disabled){if(i)return d(!1);y(!0),h.preventDefault()}},onClick:h=>{g!=null&&g.onClick&&(g==null||g.onClick(h)),!e.disabled&&y(!0)},onKeyDown:h=>{let{key:D}=h;E&&L.SubmitForm(h,F),!f&&(D==" "||D=="ArrowDown"||D=="ArrowUp"||D=="Enter")&&y(!0)},children:K(M.Left,{flexWrap:!0,gap:"1/3",freeCSS:{letterSpacing:".5px"},children:[l(A.Selected,v({},t)),l(re,{width:0,overflow:"hidden",opacity:"trans",children:"A"}),l(A.SearchInput,v({},t))]})}))})},SearchInput:t=>{let{rootStates:e}=t;return e.disabled||!t.val_selectorOpen?null:l(x,{id:"SearchInput_"+e.componentID,placeholder:e.SearchInputPlaceholder||"\u691C\u7D22...",opacity:t.val_selectorOpen?"max":"trans",transition:"middle",flexSizing:0,htmlTag:"input",border:"unset",backgroundColor:"trans",value:t.val_keyword,freeCSS:{outline:"none"},onKeyDown:n=>{let{key:o,metaKey:p,ctrlKey:u}=n,m=p||u;o=="Escape"?(t.set_selectorOpen(!1),t.set_preventOpenSelectorOnFocus(!0),setTimeout(()=>{let r=s('[data-input-origin="'+e.componentID+'"]');r&&r.focus()},10)):o=="Tab"?t.set_selectorOpen(!1):o==" "?s.scope(()=>{t.val_selectorOpen||t.val_keyword||(n.preventDefault(),t.set_selectorOpen(!0))}):o=="Backspace"?s.scope(()=>{if(t.val_keyword)return;let r=[...t.val_status.dataValue];r.pop(),t.set_status(a=>C(v({},a),{dataValue:r,eventType:"update",eventID:s.uuid.gen()}))}):o=="Enter"&&s.scope(()=>{if(!t.val_selectorOpen)return t.set_selectorOpen(!0);if(!t.val_optionFocused)return;let r=t.val_options.find(S=>S.value==t.val_optionFocused);if(!r)return;let{value:a}=r;t.set_status(S=>{let i=[...S.dataValue];return s.scope(()=>{if(a===null)return i=[];S.dataValue.includes(a)?i=i.filter(f=>f!==a):e.multiSelect?i.push(a):i=[a]}),C(v({},S),{dataValue:i,eventType:"update",eventID:s.uuid.gen()})}),t.set_keyword(""),t.set_preventDynamicSearchOnKeywordChange(!0)}),s.scope(()=>{if(!["ArrowDown","ArrowUp"].includes(o))return;if(n.preventDefault(),!t.val_selectorOpen)return t.set_selectorOpen(!0);let r=o=="ArrowDown"?1:-1,a=R.FilterSelectableOptions(t),S=a.length-1,i=null;s.scope(()=>{var d,f,y,c;if(r==1){if(i=((d=a[0])==null?void 0:d.value)||null,m){i=a[S].value||null;return}let I=a.findIndex(_=>_.value==t.val_optionFocused);if(I==-1)return;i=((f=a[I+1])==null?void 0:f.value)||i||null}else{if(i=a[S].value||null,m){i=((y=a[0])==null?void 0:y.value)||null;return}let I=a.findIndex(_=>_.value==t.val_optionFocused);if(I==-1)return;i=((c=a[I-1])==null?void 0:c.value)||i||null}}),t.set_optionFocused(i)}),e.enableFormSubmit&&L.SubmitForm(n,t.rootStates.form)},onChange:n=>{let p=n.target.value;t.set_keyword(p)}},"searchInput")},Selector:t=>{let[e,n]=b(t),{rootStates:o}=e,[p,u]=b("idle"),[m,r]=b("idle");V(()=>{Y.set({["refresh-autocomplete-selector-"+o.componentID]:d=>{n(d)}})},[]),V(()=>{if(!e.val_selectorOpen||!o.DynamicOptionsOnSearch)return;if(e.val_preventDynamicSearchOnKeywordChange)return e.set_preventDynamicSearchOnKeywordChange(!1);if(p=="idle")return u("ok");r("fetch");let d="autocomplete-search-"+o.componentID;s.interval.clear(d),s.interval.standBy(d,300,()=>Q(void 0,null,function*(){let f=yield o.DynamicOptionsOnSearch(e.val_keyword);r("idle");let y=R.InitOptions(f||[]);e.set_options(y)}))},[e.val_keyword]);let a=[],S=R.FilterSelectableOptions(e,!0),i=R.FilterSelectableOptions(e);return S.forEach((d,f)=>{let{type:y,value:c}=d,I=e.val_optionFocused==c,_=e.val_status.dataValue.includes(c),T=o.SelectorComponent;a.push(l(T,{option:d,isFocused:I,isSelected:_,addCallback:()=>{e.set_status(w=>{let O=[...w.dataValue];return s.scope(()=>{if(c===null)return O=[];w.dataValue.includes(c)?O=O.filter(k=>k!==c):o.multiSelect?O.push(c):O=[c]}),C(v({},w),{dataValue:O,eventType:"update",eventID:s.uuid.gen()})})}},String(c)||s.uuid.gen()))}),i.length||(a=[l(B.Supplement,{padding:[0,1],fontColor:"4.thin",children:"\u5019\u88DC\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093"},"no-selector-notice")]),m=="fetch"&&(a=[K(M.Left,{padding:1,fontColor:"3.blur",children:[l(se.Theme.R,{showInitial:!0}),l(B.Supplement,{children:"Loading..."})]},"loader")]),l(z.Body,{className:P("Selector"),ssCardBox:!0,borderRadius:"3.tone.tertiary",boxShadow:"1.normal",freeCSS:{minWidth:12*18},children:l(ie,{gap:0,padding:[1,0],children:a})})},Selected:t=>{let{rootStates:e,val_status:n,set_status:o,val_optionsDict:p}=t,u=[];return n.dataValue.forEach(m=>{let r=p[String(m)];if(!r)return;let a=e.SelectedComponent,S=r.label;r.value===null&&(S=""),u.push(l(x,{className:P("SelectedCell"),children:l(a,{value:r.value,label:S,removeCallback:i=>{if(i.stopPropagation(),i.preventDefault(),e.disabled)return;let d=[...n.dataValue];d=d.filter(f=>f!==m),o(f=>C(v({},f),{dataValue:d,eventType:"update",eventID:s.uuid.gen()}))}})},String(r.value)))}),l(U,{children:u})},Core:t=>{let{value:e}=t,[n,o]=b(!1),[p,u]=b(!1),[m,r]=b(!1),[a,S]=b(""),[i,d]=b(t.options),[f,y]=b(t.value[0]||null),[c,I]=b({}),[_,T]=b(L.DefaultStatus(t.componentID,e)),[w,O]=b({ok:!1,notice:[]}),F=ne(!1);V(()=>{F.current?d(t.options):F.current=!0},[t.options]),V(()=>{if(!i.length)return;let q=[...i],G=v({},c);q.forEach(W=>{W.type!="label"&&(G[String(W.value)]=W)}),I(G)},[i]);let k={rootStates:t,val_options:i,set_options:d,val_optionFocused:f,set_optionFocused:y,val_optionsDict:c,set_optionsDict:I,val_preventDynamicSearchOnKeywordChange:p,set_preventDynamicSearchOnKeywordChange:u,val_preventOpenSelectorOnFocus:n,set_preventOpenSelectorOnFocus:o,val_selectorOpen:m,set_selectorOpen:r,val_keyword:a,set_keyword:S,val_status:_,set_status:T,val_validate:w,set_validate:O},J=!!t.multiSelect;L.CommonEffects({type:J?"autocomplete.multi":"autocomplete.single",states:t,val_status:_,set_status:T,val_validate:w,set_validate:O,SystemValidation:me});let E=_.dataValue.length&&_.dataValue[0]!==null;return E=E||m,K(ce,{val_status:_,set_status:T,val_validate:w,states:t,children:[l(de,{componentID:t.componentID,fontSize:t.fontSize,required:t.required,label:t.label,isActive:E}),l(A.Shallow,v({},k)),l(A.Button,v({},k))]})}},te=t=>{let e=v({},t);return e=C(v({value:[],min:0,max:65535,multiSelect:!0,SearchInput:!0,emptySelect:!0,SelectorComponent:({option:n,isSelected:o,isFocused:p,addCallback:u})=>n.type=="selector"?l(Z.Button.Sub.S,{color:"cloud",backgroundColor:"trans",borderRadius:0,fontColor:"2.normal",textAlign:"left",padding:["1/2",1.5],isActive:p,isActiveStyles:{backgroundColor:"cloud"},onClick:m=>{u()},children:K(M.Left,{gap:"1/2",children:[o&&l(N.Check,{fontColor:"theme"}),l(B.Supplement,{transition:"short",children:n.label})]})}):l(U,{children:n.label}),SelectedComponent:({value:n,label:o,removeCallback:p})=>K(M.Left,{ssCardBox:"cloud",backgroundColor:"layer.3",borderRadius:"2.tone.secondary",fontSize:"1.mini",padding:"1/2",gap:0,children:[l(x,{padding:[0,"1/4"],children:o}),l(Z.Button.Sub.R,{color:"cloud",fontColor:"white",backgroundColor:"layer.6",isRounded:!0,padding:"1/4",onClick:p,children:l(N.Times,{ssSphere:1})})]})},e),{freeCSS:v({cursor:"pointer"},e.freeCSS)}),e.multiSelect||(e.min=1,e.max=1),e.options=e.options||[],e.emptySelect&&(e.options=[{value:null,label:l(B.Supplement,{fontColor:"4.thin",children:"\u9078\u629E\u3092\u89E3\u9664"})},...e.options]),e.value=s.flatArray(e.value||null),e.options=R.InitOptions(e.options),s.is.nullish(e.rightIcon)&&(e.rightIcon=l(ee,{ssSphere:2,children:l(N.Search,{})}),e.disabled&&(e.rightIcon=l(ee,{ssSphere:2,fontColor:"5.translucent",children:l(N.Ban,{})}))),e.rightIcon&&(e=v({paddingRight:3},e)),e.leftIcon&&(e=v({paddingLeft:3},e)),l(ue,{componentID:e.componentID,children:A.Core,states:pe(e)})};export{te as Autocomplete,te as default};
|
|
1
|
+
import{b as v,c as D,d as j,e as Q}from"../../chunk-C5N2D3ZX.js";import{Fragment as U,jsx as l,jsxs as K}from"react/jsx-runtime";import{useState as g,useEffect as V,useRef as ne}from"react";import i from"@mingoo/jsmin";import{ExtractStyles as ae,useStore as Y}from"../../@utils";import{Box as R,Span as re,FAI as N,Column as ie}from"../../atoms";import{Text as B,Row as M}from"../../mols";import Z from"../Button";import{Loader as se}from"../Loader";import{Sheet as z}from"../Sheet";import{OptionalInputWrapper as ue,BoxWrapper as ce,CoreEffects as L,DefaultBoxishStyles as pe}from"./core";import{InputAutocompleteClasses as P}from"../../@styles/componentClasses";import{InputLabel as de}from"./Label";import{RightIcon as ee}from".";function me(t){let{value:e,states:n}=t,{required:o,options:d,min:c,max:S}=n;c=c||0,S=S||65535;let a=[],r=e.filter(m=>m!==null).length;return o&&(r||a.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"})),r<c&&a.push({type:"invalid",label:c+"\u500B\u4EE5\u4E0A\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044"}),r>S&&a.push({type:"invalid",label:S+"\u500B\u307E\u3067\u9078\u629E\u3067\u304D\u307E\u3059"}),{ok:!a.filter(({type:m})=>m=="invalid").length,notice:a}}const x={InitOptions:t=>{let e=[];return t.forEach(n=>{let{type:o,label:d,value:c,searchValue:S}=n,a=S||(i.is.string(d)?d:"")||(i.is.string(c)?c:"");e.push(D(v({},n),{searchValue:a,type:o||"selector",value:c}))}),e},FilterSelectableOptions:(t,e)=>{let n=t.val_options;if(e||(n=t.val_options.filter(o=>o.type!="label")),t.val_keyword){let o=t.val_keyword.toLower().replace(/ /g,"");n=n.filter(d=>(d.searchValue||"").toLower().replace(/ /g,"").includes(o))}return n}},A={Shallow:t=>{let{rootStates:e,val_status:n}=t,o=ae(e);return l(R,{position:"absolute",top:0,left:0,right:0,height:0,overflow:"hidden",opacity:"trans",freeCSS:{zIndex:3,pointerEvents:"none"},children:l(B.Description,D(v({className:e.className},o),{position:"absolute",width:1,freeCSS:D(v({},o.freeCSS),{color:"orange"}),"data-id":"shallow_"+n.componentID,children:l(R,{"data-input-value-shallow":n.componentID,children:"A"})}))})},Button:t=>{let{rootStates:e,val_keyword:n,set_keyword:o,val_optionFocused:d,set_optionFocused:c,val_options:S,set_options:a,val_optionsDict:r,set_optionsDict:m,val_preventOpenSelectorOnFocus:s,set_preventOpenSelectorOnFocus:u,val_selectorOpen:f,set_selectorOpen:y,val_status:p,set_status:C,val_validate:b,set_validate:T}=t,X=e,{tone:w,required:O,form:F,className:k,multiSelect:J,enableFormSubmit:E,checkValidationAtFirst:q,onValidate:G,onUpdateValue:W,onUpdateValidValue:Se,value:fe="",options:ve,leftIndicator:he,rightIndicator:ye,leftIcon:_e,rightIcon:ge,componentID:be,status_id:Oe,wrapStyles:Ie,emptySelect:De,SearchInput:Ce,SearchInputPlaceholder:we,SelectedComponent:Ve,SelectorComponent:Te,SelectorGravityPoint:ke,DynamicOptionsOnSearch:Re}=X,_=j(X,["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","SelectorGravityPoint","DynamicOptionsOnSearch"]);V(()=>{var I;if(e.disabled||!f)return;let h=x.FilterSelectableOptions(t);c(((I=h[0])==null?void 0:I.value)||null)},[n]),V(()=>{p.eventType!="init"&&(e.max==p.dataValue.length?(y(!1),u(!0),setTimeout(()=>{let h=i('[data-input-origin="'+e.componentID+'"]');h&&h.focus()},10)):i("#SearchInput_"+e.componentID).focus())},[p.dataValue]);let H="autocomplete-sheet-"+e.componentID;return V(()=>{let h="autocomplete-click-"+e.componentID;if(f){let I=i('[data-input-origin="'+e.componentID+'"]');if(!I)return;i("#SearchInput_"+e.componentID).focus(),z.open({sheetID:H,type:"custom",parent:I[0],padding:["1/4",0],gravityPoint:e.SelectorGravityPoint||22,close_option:{aroundClick:!1},content:l(A.Selector,v({},t))}),i(document).addEvent({eventID:h,eventType:"mousedown",callback:oe=>{let $=i(oe.target),le=!!i($).parent("."+P("Core")).length;i($).parent("."+P("Selector")).length||le||y(!1)}})}else i(document).removeEvent([h]),o(""),z.close(H)},[f]),V(()=>{if(e.disabled||!f)return;z.customSheet.reposition(H);let h=Y.get("refresh-autocomplete-selector-"+e.componentID);h&&h(t)},[S,p.dataValue,n,d]),l(U,{children:l(R,D(v({tabIndex:0},_),{"data-disabled":e.disabled,"data-show-validation":L.isShowValidation(b,p,!!q),"data-component-id":p.componentID,"data-input-origin":p.componentID,"data-focus":!!f,className:[k,P("Core")].join(" "),onFocus:h=>{if(_!=null&&_.onFocus&&(_==null||_.onFocus(h)),!e.disabled){if(s)return u(!1);y(!0),h.preventDefault()}},onClick:h=>{_!=null&&_.onClick&&(_==null||_.onClick(h)),!e.disabled&&y(!0)},onKeyDown:h=>{let{key:I}=h;E&&L.SubmitForm(h,F),!f&&(I==" "||I=="ArrowDown"||I=="ArrowUp"||I=="Enter")&&y(!0)},children:K(M.Left,{flexWrap:!0,gap:"1/3",freeCSS:{letterSpacing:".5px"},children:[l(A.Selected,v({},t)),l(re,{width:0,overflow:"hidden",opacity:"trans",children:"A"}),l(A.SearchInput,v({},t))]})}))})},SearchInput:t=>{let{rootStates:e}=t;return e.disabled||!t.val_selectorOpen?null:l(R,{id:"SearchInput_"+e.componentID,placeholder:e.SearchInputPlaceholder||"\u691C\u7D22...",opacity:t.val_selectorOpen?"max":"trans",transition:"middle",flexSizing:0,htmlTag:"input",border:"unset",backgroundColor:"trans",value:t.val_keyword,freeCSS:{outline:"none"},onKeyDown:n=>{let{key:o,metaKey:d,ctrlKey:c}=n,S=d||c;o=="Escape"?(t.set_selectorOpen(!1),t.set_preventOpenSelectorOnFocus(!0),setTimeout(()=>{let a=i('[data-input-origin="'+e.componentID+'"]');a&&a.focus()},10)):o=="Tab"?t.set_selectorOpen(!1):o==" "?i.scope(()=>{t.val_selectorOpen||t.val_keyword||(n.preventDefault(),t.set_selectorOpen(!0))}):o=="Backspace"?i.scope(()=>{if(t.val_keyword)return;let a=[...t.val_status.dataValue];a.pop(),t.set_status(r=>D(v({},r),{dataValue:a,eventType:"update",eventID:i.uuid.gen()}))}):o=="Enter"&&i.scope(()=>{if(!t.val_selectorOpen)return t.set_selectorOpen(!0);let a=t.val_options.find(m=>m.value==t.val_optionFocused);if(!a)return;let{value:r}=a;t.set_status(m=>{let s=[...m.dataValue];return i.scope(()=>{if(r===null)return s=[];m.dataValue.includes(r)?s=s.filter(f=>f!==r):e.multiSelect?s.push(r):s=[r]}),D(v({},m),{dataValue:s,eventType:"update",eventID:i.uuid.gen()})}),t.set_keyword(""),t.set_preventDynamicSearchOnKeywordChange(!0)}),i.scope(()=>{if(!["ArrowDown","ArrowUp"].includes(o))return;if(n.preventDefault(),!t.val_selectorOpen)return t.set_selectorOpen(!0);let a=o=="ArrowDown"?1:-1,r=x.FilterSelectableOptions(t),m=r.length-1,s=null;i.scope(()=>{var f,y,p,C;let u=r.findIndex(b=>b.value==t.val_optionFocused);if(a==1){if(s=((f=r[0])==null?void 0:f.value)||null,S){s=r[m].value||null;return}if(u==-1||u==m)return;s=((y=r[u+1])==null?void 0:y.value)||null}else{if(s=r[m].value||null,S){s=((p=r[0])==null?void 0:p.value)||null;return}if(u==-1||u==0)return;s=((C=r[u-1])==null?void 0:C.value)||null}}),t.set_optionFocused(s)}),e.enableFormSubmit&&L.SubmitForm(n,t.rootStates.form)},onChange:n=>{let d=n.target.value;t.set_keyword(d)}},"searchInput")},Selector:t=>{let[e,n]=g(t),{rootStates:o}=e,[d,c]=g("idle"),[S,a]=g("idle");V(()=>{Y.set({["refresh-autocomplete-selector-"+o.componentID]:u=>{n(u)}})},[]),V(()=>{if(!e.val_selectorOpen||!o.DynamicOptionsOnSearch)return;if(e.val_preventDynamicSearchOnKeywordChange)return e.set_preventDynamicSearchOnKeywordChange(!1);if(d=="idle")return c("ok");a("fetch");let u="autocomplete-search-"+o.componentID;i.interval.clear(u),i.interval.standBy(u,300,()=>Q(void 0,null,function*(){let f=yield o.DynamicOptionsOnSearch(e.val_keyword);a("idle");let y=x.InitOptions(f||[]);e.set_options(y)}))},[e.val_keyword]);let r=[],m=x.FilterSelectableOptions(e,!0),s=x.FilterSelectableOptions(e);return m.forEach((u,f)=>{let{type:y,value:p}=u,C=e.val_optionFocused==p,b=e.val_status.dataValue.includes(p),T=o.SelectorComponent;r.push(l(T,{option:u,isFocused:C,isSelected:b,addCallback:()=>{e.set_status(w=>{let O=[...w.dataValue];return i.scope(()=>{if(p===null)return O=[];w.dataValue.includes(p)?O=O.filter(k=>k!==p):o.multiSelect?O.push(p):O=[p]}),D(v({},w),{dataValue:O,eventType:"update",eventID:i.uuid.gen()})})}},String(p)||i.uuid.gen()))}),s.length||(r=[l(B.Supplement,{padding:[0,1],fontColor:"4.thin",children:"\u5019\u88DC\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093"},"no-selector-notice")]),S=="fetch"&&(r=[K(M.Left,{padding:1,fontColor:"3.blur",children:[l(se.Theme.R,{showInitial:!0}),l(B.Supplement,{children:"Loading..."})]},"loader")]),l(z.Body,{className:P("Selector"),ssCardBox:!0,borderRadius:"3.tone.tertiary",boxShadow:"1.normal",freeCSS:{minWidth:12*18},children:l(ie,{gap:0,padding:[1,0],children:r})})},Selected:t=>{let{rootStates:e,val_status:n,set_status:o,val_optionsDict:d}=t,c=[];return n.dataValue.forEach(S=>{let a=d[String(S)];if(!a)return;let r=e.SelectedComponent,m=a.label;a.value===null&&(m=""),c.push(l(R,{className:P("SelectedCell"),children:l(r,{value:a.value,label:m,removeCallback:s=>{if(s.stopPropagation(),s.preventDefault(),e.disabled)return;let u=[...n.dataValue];u=u.filter(f=>f!==S),o(f=>D(v({},f),{dataValue:u,eventType:"update",eventID:i.uuid.gen()}))}})},String(a.value)))}),l(U,{children:c})},Core:t=>{let{value:e}=t,[n,o]=g(!1),[d,c]=g(!1),[S,a]=g(!1),[r,m]=g(""),[s,u]=g(t.options),[f,y]=g(t.value[0]||null),[p,C]=g({}),[b,T]=g(L.DefaultStatus(t.componentID,e)),[w,O]=g({ok:!1,notice:[]}),F=ne(!1);V(()=>{F.current?u(t.options):F.current=!0},[t.options]),V(()=>{if(!s.length)return;let q=[...s],G=v({},p);q.forEach(W=>{W.type!="label"&&(G[String(W.value)]=W)}),C(G)},[s]);let k={rootStates:t,val_options:s,set_options:u,val_optionFocused:f,set_optionFocused:y,val_optionsDict:p,set_optionsDict:C,val_preventDynamicSearchOnKeywordChange:d,set_preventDynamicSearchOnKeywordChange:c,val_preventOpenSelectorOnFocus:n,set_preventOpenSelectorOnFocus:o,val_selectorOpen:S,set_selectorOpen:a,val_keyword:r,set_keyword:m,val_status:b,set_status:T,val_validate:w,set_validate:O},J=!!t.multiSelect;L.CommonEffects({type:J?"autocomplete.multi":"autocomplete.single",states:t,val_status:b,set_status:T,val_validate:w,set_validate:O,SystemValidation:me});let E=b.dataValue.length&&b.dataValue[0]!==null;return E=E||S,K(ce,{val_status:b,set_status:T,val_validate:w,states:t,children:[l(de,{componentID:t.componentID,fontSize:t.fontSize,required:t.required,label:t.label,isActive:E}),l(A.Shallow,v({},k)),l(A.Button,v({},k))]})}},te=t=>{let e=v({},t);return e=D(v({value:[],min:0,max:65535,multiSelect:!0,SearchInput:!0,emptySelect:!0,SelectorComponent:({option:n,isSelected:o,isFocused:d,addCallback:c})=>n.type=="selector"?l(Z.Button.Sub.S,{color:"cloud",backgroundColor:"trans",borderRadius:0,fontColor:"2.normal",textAlign:"left",padding:["1/2",1.5],isActive:d,isActiveStyles:{backgroundColor:"cloud"},onClick:S=>{c()},children:K(M.Left,{gap:"1/2",children:[o&&l(N.Check,{fontColor:"theme"}),l(B.Supplement,{transition:"short",children:n.label})]})}):l(U,{children:n.label}),SelectedComponent:({value:n,label:o,removeCallback:d})=>K(M.Left,{ssCardBox:"cloud",backgroundColor:"layer.3",borderRadius:"2.tone.secondary",fontSize:"1.mini",padding:"1/2",gap:0,children:[l(R,{padding:[0,"1/4"],children:o}),l(Z.Button.Sub.R,{color:"cloud",fontColor:"white",backgroundColor:"layer.6",isRounded:!0,padding:"1/4",onClick:d,children:l(N.Times,{ssSphere:1})})]})},e),{freeCSS:v({cursor:"pointer"},e.freeCSS)}),e.multiSelect||(e.min=1,e.max=1),e.options=e.options||[],e.emptySelect&&(e.options=[{value:null,label:l(B.Supplement,{fontColor:"4.thin",children:"\u9078\u629E\u3092\u89E3\u9664"})},...e.options]),e.value=i.flatArray(e.value||null),e.options=x.InitOptions(e.options),i.is.nullish(e.rightIcon)&&(e.rightIcon=l(ee,{ssSphere:2,children:l(N.Search,{})}),e.disabled&&(e.rightIcon=l(ee,{ssSphere:2,fontColor:"5.translucent",children:l(N.Ban,{})}))),e.rightIcon&&(e=v({paddingRight:3},e)),e.leftIcon&&(e=v({paddingLeft:3},e)),l(ue,{componentID:e.componentID,children:A.Core,states:pe(e)})};export{te as Autocomplete,te as default};
|
package/dist/fn/Input/Select.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{b as
|
|
1
|
+
import{b as s,c as m,d as J}from"../../chunk-C5N2D3ZX.js";import{Fragment as j,jsx as l,jsxs as P}from"react/jsx-runtime";import{useState as D,useEffect as R}from"react";import i from"@mingoo/jsmin";import{ExtractStyles as le,useStore as M}from"../../@utils";import{Box as T,Span as ae,FAI as U,Column as oe}from"../../atoms";import{Text as F,Row as $}from"../../mols";import ne from"../Button";import{Sheet as W}from"../Sheet";import{OptionalInputWrapper as re,BoxWrapper as se,CoreEffects as w,DefaultBoxishStyles as ie}from"./core";import{InputAutocompleteClasses as E}from"../../@styles/componentClasses";import{InputLabel as ue}from"./Label";import{RightIcon as ce}from".";function pe(t){let{value:e,states:a}=t,{required:r,options:p}=a,d=[];return r&&e===null&&d.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"}),{ok:!d.filter(({type:b})=>b=="invalid").length,notice:d}}const L={FilterSelectableOptions:(t,e)=>{let a=t.rootStates.options;return e||(a=a.filter(r=>r.type!="label")),a}},V={Shallow:t=>{let{rootStates:e,val_status:a}=t,r=le(e);return l(T,{position:"absolute",top:0,left:0,right:0,height:0,overflow:"hidden",opacity:"trans",freeCSS:{zIndex:3,pointerEvents:"none"},children:l(F.Description,m(s({className:e.className},r),{position:"absolute",width:1,freeCSS:m(s({},r.freeCSS),{color:"orange"}),children:l(T,{"data-input-value-shallow":a.componentID,children:"A"})}))})},Button:t=>{let{rootStates:e,val_preventOpenSelectorOnFocus:a,set_preventOpenSelectorOnFocus:r,val_optionFocused:p,set_optionFocused:d,val_validate:b,set_validate:y,val_status:v,set_status:g,val_selectorOpen:u,set_selectorOpen:c}=t,K=e,{tone:C,required:Q,form:k,className:Y,label:Se,isLabelActive:de,placeholder:fe,enableFormSubmit:Z,emptySelect:me,checkValidationAtFirst:ee,onValidate:ve,onUpdateValue:ye,onUpdateValidValue:be,value:Ie="",options:he,leftIndicator:ge,rightIndicator:Ce,leftIcon:_e,rightIcon:De,componentID:Te,status_id:Ve,wrapStyles:xe,SelectedCellStyles:Oe,SelectorCellStyles:Re,SelectorStyles:Fe,SelectorGravityPoint:we}=K,o=J(K,["tone","required","form","className","label","isLabelActive","placeholder","enableFormSubmit","emptySelect","checkValidationAtFirst","onValidate","onUpdateValue","onUpdateValidValue","value","options","leftIndicator","rightIndicator","leftIcon","rightIcon","componentID","status_id","wrapStyles","SelectedCellStyles","SelectorCellStyles","SelectorStyles","SelectorGravityPoint"]),N="select-sheet-"+e.componentID;return R(()=>{if(e.disabled)return;let n="select-click-"+e.componentID;if(u){let f=i('[data-input-origin="'+e.componentID+'"]');if(!f)return;W.open({sheetID:N,type:"custom",parent:f[0],padding:["1/4",0],gravityPoint:e.SelectorGravityPoint||22,close_option:{aroundClick:!1},content:l(V.Selector,s({},t))}),i(document).addEvent({eventID:n,eventType:"click",callback:A=>{let x=i(A.target),O=!!i(x).parent("."+E("Core")).length;i(x).parent("."+E("Selector")).length||O||c(!1)}})}else i(document).removeEvent([n]),W.close(N)},[u]),R(()=>{if(v.eventType=="init"||!u)return;let n=i('[data-input-origin="'+e.componentID+'"]');n&&n.focus()},[v.dataValue]),R(()=>{if(e.disabled||!u)return;let n=M.get("refresh-select-selector-"+e.componentID);n&&n(t)},[e.options,v.dataValue,p]),l(j,{children:l(T,m(s({tabIndex:0},o),{"data-disabled":e.disabled,"data-show-validation":w.isShowValidation(b,v,!!ee),"data-component-id":v.componentID,"data-input-origin":v.componentID,className:[Y,E("Core")].join(" "),onFocus:n=>{if(o!=null&&o.onFocus&&(o==null||o.onFocus(n)),!e.disabled){if(a)return r(!1);c(!0)}},onClick:n=>{o!=null&&o.onClick&&(o==null||o.onClick(n)),!e.disabled&&c(!0)},onKeyDown:n=>{let{key:f,metaKey:A,ctrlKey:x}=n,O=A||x;if(o!=null&&o.onKeyDown&&(o==null||o.onKeyDown(n)),Z&&w.SubmitForm(n,k),!e.disabled){if(i.scope(()=>{if(!["ArrowDown","ArrowUp"].includes(f))return;if(n.preventDefault(),!u)return c(!0);let I=f=="ArrowDown"?1:-1,S=L.FilterSelectableOptions(t),B=S.length-1,h=null;i.scope(()=>{var q,G,z,H;let _=S.findIndex(te=>te.value==p);if(I==1){if(h=((q=S[0])==null?void 0:q.value)||null,O){h=S[B].value||null;return}if(_==-1||_==B)return;h=((G=S[_+1])==null?void 0:G.value)||null}else{if(h=S[B].value||null,O){h=((z=S[0])==null?void 0:z.value)||null;return}if(_==-1||_==0)return;h=((H=S[_-1])==null?void 0:H.value)||null}}),d(h)}),f=="Escape")c(!1);else if(f=="Tab")c(!1);else if(f=="Backspace")g(I=>m(s({},I),{dataValue:null,eventType:"update",eventID:i.uuid.gen()}));else if(f==" ")n.preventDefault(),c(!0);else if(f=="Enter"){if(!u)return c(!0);n.preventDefault();let I=e.options.find(S=>S.value==p);if(!I)return;g(S=>m(s({},S),{dataValue:I.value,eventType:"update",eventID:i.uuid.gen()})),c(!1)}}},children:P($.Left,{flexWrap:!0,gap:"1/3",freeCSS:{letterSpacing:".5px"},children:[l(V.Placeholder,s({},t)),l(V.Selected,s({},t)),l(ae,{width:0,overflow:"hidden",opacity:"trans",children:"A"})]})}))})},Placeholder:t=>!t.rootStates.placeholder||t.val_status.dataValue!==null?null:l(T,{position:"absolute",opacity:"middle",fontColor:"3.blur",children:t.rootStates.placeholder||""}),Selector:t=>{let[e,a]=D(t),{rootStates:r}=e;R(()=>{M.set({["refresh-select-selector-"+r.componentID]:y=>{a(y)}})},[]);let p=[],d=L.FilterSelectableOptions(e,!0),b=L.FilterSelectableOptions(e);return d.forEach((y,v)=>{let{type:g,value:u}=y,c=e.val_optionFocused==u,C=e.val_status.dataValue===u;if(g=="selector"){p.push(l(ne.Button.Sub.S,{color:"cloud",backgroundColor:"trans",borderRadius:0,fontColor:"2.normal",textAlign:"left",padding:["1/2",1.5],isActive:C||c,isActiveStyles:c?{backgroundColor:"cloud"}:{backgroundColor:"theme.opa.few",fontColor:"theme"},onClick:Q=>{e.set_status(k=>m(s({},k),{dataValue:u,eventType:"update",eventID:i.uuid.gen()})),e.set_selectorOpen(!1),e.set_preventOpenSelectorOnFocus(!0)},children:P($.Left,{gap:"1/2",children:[C&&l(U.Check,{fontColor:"theme"}),l(F.Supplement,{transition:"short",children:y.label})]})},String(u)));return}p.push(l(T,{children:y.label},i.uuid.gen()))}),b.length||(p=[l(F.Supplement,{padding:[0,1],fontColor:"4.thin",children:"\u5019\u88DC\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093"},"no-selector-notice")]),l(W.Body,{className:E("Selector"),ssCardBox:!0,borderRadius:"3.tone.tertiary",boxShadow:"1.normal",freeCSS:{minWidth:12*14},children:l(oe,{gap:0,padding:[1,0],children:p})})},Selected:t=>{let e=[];return t.val_status.dataValue!==null&&i.scope(()=>{let a=t.rootStates.options.find(r=>i.JsonTo(r.value)==i.JsonTo(t.val_status.dataValue));a&&e.push(l(T,m(s({},t.rootStates.SelectedCellStyles),{children:a.label}),String(a.value)))}),l(j,{children:e})},Core:t=>{let{value:e}=t,[a,r]=D(w.DefaultStatus(t.componentID,e)),[p,d]=D(!1),[b,y]=D(!1),[v,g]=D(t.value||null),[u,c]=D({ok:!1,notice:[]}),C={rootStates:t,val_preventOpenSelectorOnFocus:p,set_preventOpenSelectorOnFocus:d,val_optionFocused:v,set_optionFocused:g,val_selectorOpen:b,set_selectorOpen:y,val_status:a,set_status:r,val_validate:u,set_validate:c};return w.CommonEffects({type:"select",states:t,val_status:a,set_status:r,val_validate:u,set_validate:c,SystemValidation:pe}),P(se,{val_status:a,set_status:r,val_validate:u,states:t,children:[l(ue,{componentID:t.componentID,fontSize:t.fontSize,required:t.required,label:t.label,isActive:t.isLabelActive||a.dataValue!==null}),l(V.Shallow,s({},C)),l(V.Button,s({},C))]})}},X=t=>{let e=s({},t);return e=m(s({emptySelect:!0},e),{freeCSS:s({cursor:"pointer"},e.freeCSS)}),e.emptySelect&&(e.options=[{value:null,label:l(F.Supplement,{fontColor:"4.thin",children:"\u9078\u629E\u3092\u89E3\u9664"})},...e.options]),e.value=e.value||null,e.options.forEach((a,r)=>{let{type:p,value:d}=a;e.options[r]=m(s({},a),{value:d,type:p||"selector"})}),i.is.nullish(e.rightIcon)&&(e.rightIcon=l(ce,{ssSphere:2,children:l(U.AngleDown,{})})),l(re,{componentID:e.componentID,children:V.Core,states:ie(e)})};export{X as Select,X as default};
|