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