amotify/dist/fn/Input/Select.js

UI Component for React,NextJS,esbuild

import{b as n,c as u,d as z}from"../../chunk-C5N2D3ZX.js";import{Fragment as H,jsx as a,jsxs as w}from"react/jsx-runtime";import c,{UUID as R}from"jmini";import{useState as k,useEffect as oe}from"react";import{ExtractStyles as Te}from"../../@utils";import{Box as I,Span as xe,FAI as ne,Column as Fe}from"../../atoms";import{Literal as B,Row as re}from"../../mols";import{Button as we}from"../Button";import{Sheet as Re}from"../Sheet";import{OptionalInputWrapper as ke,BoxWrapper as Ae,CoreEffects as F,DefaultBoxishStyles as Ee}from"./core";import{InputAutocompleteClasses as A}from"../../@styles/componentClasses";import{InputLabel as Be}from"./Label";import{RightIcon as Le}from".";function We(e){let{value:t,states:o}=e,{required:l,options:y}=o,p=[];return l&&t===null&&p.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"}),{ok:!p.filter(({type:S})=>S=="invalid").length,notice:p}}const se={FilterSelectableOptions:(e,t)=>{let o=e.rootStates.options;return t||(o=o.filter(l=>l.type!="label")),o}},C={Shallow:e=>{let{rootStates:t,val_status:o}=e,l=Te(t);return a(I,{position:"absolute",top:0,left:0,right:0,height:0,overflow:"hidden",opacity:"trans",freeCSS:{zIndex:3,pointerEvents:"none"},children:a(B.Description,u(n({className:t.className},l),{position:"absolute",width:1,freeCSS:u(n({},l.freeCSS),{color:"orange"}),children:a(I,{"data-input-value-shallow":o.componentID,children:"A"})}))})},Button:e=>w(H,{children:[a(C.LegacySelector,n({},e)),a(C.Original,n({},e))]}),Placeholder:e=>!e.rootStates.placeholder||e.val_status.dataValue!==null?null:a(I,{position:"absolute",opacity:"middle",fontColor:"3.blur",children:e.rootStates.placeholder||""}),Original:e=>{let{rootStates:t,val_preventOpenSelectorOnFocus:o,set_preventOpenSelectorOnFocus:l,val_optionFocused:y,set_optionFocused:p,val_validate:S,set_validate:h,val_status:s,set_status:g,val_selectorOpen:d,set_selectorOpen:f}=e,U=t,{tone:D,required:E,form:L,className:W,label:ue,isLabelActive:ce,placeholder:pe,enableFormSubmit:P,emptySelect:$,checkValidationAtFirst:M,onValidate:Se,onUpdateValue:de,onUpdateValidValue:fe,value:N="",options:K,leftIndicator:me,rightIndicator:j,leftIcon:ve,rightIcon:ye,componentID:be,status_id:ge,wrapStyles:he,SelectedCellStyles:Ie,SelectorCellStyles:Ce,SelectorMode:_e,SelectorStyles:Ve,SelectorPosition:De}=U,r=z(U,["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","SelectorMode","SelectorStyles","SelectorPosition"]);return oe(()=>{if(e.rootStates.SelectorMode!="original"||t.disabled)return;let i="select-click-"+t.componentID;if(d){if(!c('[data-input-origin="'+t.componentID+'"]'))return;c(document).addEvent({eventID:i,eventType:"click",callback:m=>{let O=c(m.target),T=!!c(O).parent("."+A("Core")).length;c(O).parent("."+A("Selector")).length||T||f(!1)}})}else c(document).removeEvent([i])},[d]),oe(()=>{if(e.rootStates.SelectorMode!="original"||s.eventType=="init"||!d)return;let i=c('[data-input-origin="'+t.componentID+'"]');i&&i.focus()},[s.dataValue]),e.rootStates.SelectorMode!="original"?null:w(H,{children:[a(I,u(n({tabIndex:0},r),{"data-disabled":t.disabled,"data-show-validation":F.isShowValidation(S,s,!!M),"data-component-id":s.componentID,"data-input-origin":s.componentID,className:[W,A("Core")].join(" "),onFocus:i=>{if(r!=null&&r.onFocus&&(r==null||r.onFocus(i)),!t.disabled){if(o)return l(!1);f(!0)}},onClick:i=>{r!=null&&r.onClick&&(r==null||r.onClick(i)),!t.disabled&&f(!0)},onKeyDown:i=>{let{key:b,metaKey:m,ctrlKey:O}=i,T=m||O;if(r!=null&&r.onKeyDown&&(r==null||r.onKeyDown(i)),P&&F.SubmitForm(i,L),!t.disabled){if(c.scope(()=>{if(!["ArrowDown","ArrowUp"].includes(b))return;if(i.preventDefault(),!d)return f(!0);let _=b=="ArrowDown"?1:-1,v=se.FilterSelectableOptions(e),q=v.length-1,V=null;c.scope(()=>{var J,X,G,Q,Y,Z,ee,te,le,ae;let x=v.findIndex(Oe=>Oe.value==y);if(_==1){if(V=(X=(J=v[0])==null?void 0:J.value)!=null?X:null,T){V=(G=v[q].value)!=null?G:null;return}if(x==-1||x==q)return;V=(Y=(Q=v[x+1])==null?void 0:Q.value)!=null?Y:null}else{if(V=(Z=v[q].value)!=null?Z:null,T){V=(te=(ee=v[0])==null?void 0:ee.value)!=null?te:null;return}if(x==-1||x==0)return;V=(ae=(le=v[x-1])==null?void 0:le.value)!=null?ae:null}}),p(V)}),b=="Escape")f(!1);else if(b=="Tab")f(!1);else if(b=="Backspace")g(_=>u(n({},_),{dataValue:null,eventType:"update",eventID:R()}));else if(b==" ")i.preventDefault(),f(!0);else if(b=="Enter"){if(!d)return f(!0);i.preventDefault();let _=t.options.find(v=>v.value==y);if(!_)return;g(v=>u(n({},v),{dataValue:_.value,eventType:"update",eventID:R()})),f(!1)}}},children:w(re.Left,{flexWrap:!0,gap:"1/3",freeCSS:{letterSpacing:".5px"},children:[a(C.Placeholder,n({},e)),a(C.Selected,n({},e)),a(xe,{width:0,overflow:"hidden",opacity:"trans",children:"A"})]})})),d&&a(C.Selector,n({},e))]})},LegacySelector:e=>{let{rootStates:t,val_preventOpenSelectorOnFocus:o,set_preventOpenSelectorOnFocus:l,val_optionFocused:y,set_optionFocused:p,val_validate:S,set_validate:h,val_status:s,set_status:g,val_selectorOpen:d,set_selectorOpen:f}=e,b=t,{tone:D,required:E,form:L,className:W,label:ue,isLabelActive:ce,placeholder:pe,enableFormSubmit:P,emptySelect:$,checkValidationAtFirst:M,onValidate:Se,onUpdateValue:de,onUpdateValidValue:fe,onKeyDown:N,onChange:K,value:me="",options:j,leftIndicator:ve,rightIndicator:ye,leftIcon:be,rightIcon:ge,componentID:he,status_id:Ie,wrapStyles:Ce,SelectedCellStyles:_e,SelectorCellStyles:Ve,SelectorMode:De,SelectorStyles:r,SelectorPosition:U}=b,i=z(b,["tone","required","form","className","label","isLabelActive","placeholder","enableFormSubmit","emptySelect","checkValidationAtFirst","onValidate","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:w(I,u(n({htmlTag:"select",tabIndex:0},i),{"data-disabled":t.disabled,"data-show-validation":F.isShowValidation(S,s,!!M),"data-component-id":s.componentID,"data-input-origin":s.componentID,className:[W,A("Core")].join(" "),onKeyDown:m=>{N&&N(m),P&&F.SubmitForm(m,L)},onChange:m=>{let{value:O}=m.target;S.ok&&h({ok:!1,notice:[]}),g(T=>u(n({},T),{dataValue:O,eventType:"update",eventID:R()})),K&&K(m)},children:[!!$&&a("option",{value:"null",children:"\u9078\u629E"}),j.map(m=>c.is.nullish(m.value)?null:a("option",{value:m.value,children:m.label},String(m.value)))]}))},Selector:e=>{var y;let t=[],o=se.FilterSelectableOptions(e,!0);o.forEach((p,S)=>{let{type:h,value:s}=p,g=e.val_optionFocused==s,d=e.val_status.dataValue===s;if(h=="selector"){t.push(a(we.Sub.S,u(n({color:"cloud",backgroundColor:"trans",borderRadius:0,fontColor:"2.normal",textAlign:"left",padding:["1/2",1],isActive:d||g,isActiveStyles:g?{backgroundColor:"cloud"}:{backgroundColor:"theme.opa.few",fontColor:"theme"}},e.rootStates.SelectorCellStyles),{onClick:f=>{e.set_status(D=>u(n({},D),{dataValue:s,eventType:"update",eventID:R()})),e.set_selectorOpen(!1),e.set_preventOpenSelectorOnFocus(!0)},children:w(re.Left,{gap:"1/2",children:[d&&a(ne.Check,{fontColor:"theme"}),a(B.Supplement,{transition:"short",flexSizing:0,children:p.label})]})}),String(s)));return}t.push(a(I,{children:p.label},R()))}),o.length||(t=[a(B.Supplement,{padding:[0,1],fontColor:"4.thin",children:"\u5019\u88DC\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093"},"no-selector-notice")]);let 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(I,u(n({},l),{children:a(Re.Body,u(n({className:A("Selector"),ssCardBox:!0,borderRadius:"2.tone.secondary",boxShadow:"1.normal",overflow:"auto"},e.rootStates.SelectorStyles),{freeCSS:n({minWidth:12*6,maxHeight:12*24},(y=e.rootStates.SelectorStyles)==null?void 0:y.freeCSS),children:a(Fe,{gap:"1/12",padding:[1,0],children:t})}))}))},Selected:e=>{let t=[];return e.val_status.dataValue!==null&&c.scope(()=>{let o=e.rootStates.options.find(l=>c.is.equal(l.value,e.val_status.dataValue));o&&t.push(a(I,u(n({},e.rootStates.SelectedCellStyles),{children:o.label}),String(o.value)))}),a(H,{children:t})},Core:e=>{var E;let{value:t}=e,[o,l]=k(F.DefaultStatus(e.componentID,t)),[y,p]=k(!1),[S,h]=k(!1),[s,g]=k((E=e.value)!=null?E:null),[d,f]=k({ok:!1,notice:[]}),D={rootStates:e,val_preventOpenSelectorOnFocus:y,set_preventOpenSelectorOnFocus:p,val_optionFocused:s,set_optionFocused:g,val_selectorOpen:S,set_selectorOpen:h,val_status:o,set_status:l,val_validate:d,set_validate:f};return F.CommonEffects({type:"select",states:e,val_status:o,set_status:l,val_validate:d,set_validate:f,SystemValidation:We}),w(Ae,{val_status:o,set_status:l,val_validate:d,states:e,children:[a(Be,{componentID:e.componentID,fontSize:e.fontSize,required:e.required,label:e.label,isActive:e.isLabelActive||o.dataValue!==null}),a(C.Shallow,n({},D)),a(C.Button,n({},D))]})}},ie=e=>{var o;let t=n({},e);return t=u(n({emptySelect:!0,SelectorMode:"original",SelectorPosition:3},t),{freeCSS:n({cursor:"pointer"},t.freeCSS)}),t.emptySelect&&(t.options=[{value:null,label:a(B.Supplement,{fontColor:"4.thin",children:"\u672A\u9078\u629E"})},...t.options]),t.value=(o=t.value)!=null?o:null,t.options.forEach((l,y)=>{let{type:p,value:S,searchValue:h}=l,s=h||c.is.string(S)&&S||c.Stringify(S||"")||"";t.options[y]=u(n({},l),{value:S,searchValue:s,type:p||"selector"})}),c.is.nullish(t.rightIcon)&&(t.rightIcon=a(Le,{ssSphere:2,children:a(ne.AngleDown,{})})),a(ke,{componentID:t.componentID,children:C.Core,states:Ee(t)})};export{ie as Select,ie as default};