amotify/dist/fn/Input/Filer.js

UI Component for React,NextJS,esbuild

import{b as s,c as u,d as Q,e as U}from"../../chunk-C5N2D3ZX.js";import{Fragment as le,jsx as l,jsxs as p}from"react/jsx-runtime";import{useState as H,useEffect as X}from"react";import ie,{UUID as T,useStore as Y}from"jmini";import{$$fromRoot as V,ExtractStyles as se}from"../../@utils";import{Box as d,FAI as R,Flex as P,Column as ee}from"../../atoms";import{Row as re}from"../../mols";import{Button as L}from"../Button";import j from"../Snackbar";import{OptionalInputWrapper as pe,BoxWrapper as ue,CoreEffects as te,DefaultBoxishStyles as me}from"./core";import ce from"./TextField";import{InputFilerClasses as f}from"../../@styles/componentClasses";import{faCloudArrowUp as de}from"@fortawesome/free-solid-svg-icons/faCloudArrowUp";function fe(e){let{value:t,states:n}=e,{required:m}=n,a=[];return m&&!t.length&&a.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"}),{ok:!a.filter(({type:c})=>c=="invalid").length,notice:a}}const ae={List:e=>{let{rootStates:t,val_status:n,set_status:m}=e;if(t.useSystemOnly)return null;let a=t.limit-(n.dataValue||[]).length,c=(n.dataValue||[]).map((r,g)=>l(ae.ListCell,u(s({},e),{index:g,val_file:r}),r.name));return a>0&&c.push(l(d,u(s({htmlTag:"label"},t.cellStyles),{className:[t.cellClassName,f("AddButton")].join(" "),"data-component-id":n.componentID,htmlFor:t.id,tabIndex:t.tabIndex,onKeyDown:r=>{let{key:g}=r;t.tabIndex!=-1&&[" ","Enter"].includes(g)&&V("#"+t.id).click()},children:p(re.Center,{padding:["1/3",0],children:[l(d,{isRounded:!0,className:f("AddIcon"),children:l(R,{icon:de,className:f("Icon"),fontColor:"theme",fontSize:"4.thirdTitle",backgroundColor:"theme.opa.low",ssSphere:3,padding:"1/2"})}),p(d,{children:[p(d,{fontColor:"theme",fontSize:"2.normal",isSemiBoldFont:!0,children:["\u30D5\u30A1\u30A4\u30EB\u3092\u9078\u629E(",a,")"]}),l(d,{fontColor:"4.thin",fontSize:"0.xs",isSemiBoldFont:!0,children:"\u30D5\u30A1\u30A4\u30EB\u3092\u30C9\u30ED\u30C3\u30D7"})]})]})}),"AddButton")),l(ee,u(s({flexSizing:"auto"},se(t)),{className:t.className,children:c}))},ListCell:e=>{let{index:t,rootStates:n,val_file:m,val_status:a,set_status:c}=e,{name:r,size:g,type:o}=m,[x,D]=H(!1),B=T(),K=g.rank(),[W,M]=r.replace(/\s/,"").replace(/(.*)\.(.*)$/,"$1 $2").split(" "),i="\u30D5\u30A1\u30A4\u30EB";return o.match(/image/)?i=o.replace(/image\//,""):o.match(/pdf/)?i="PDF":o.match(/csv/)?i="CSV":o.match(/spreadsheet/)?i="SpreadSheet":o.match(/presentation/)?i="PowerPoint":o.match(/word/)?i="Word":o.match(/zip/)?i="Zip":o.match(/powerpoint/)?i="PowerPoint":o.match(/html/)?i="HTML":o.match(/js/)?i="JavaScript":o.match(/css/)?i="CSS":o.match(/text\/plain/)&&(i="\u30C6\u30AD\u30B9\u30C8"),X(()=>{x&&setTimeout(()=>{V("#"+B).focus()},100)},[x]),p(P,u(s({verticalAlign:"center",flexWrap:!1,gap:1,className:n.cellClassName},n.cellStyles),{children:[l(R.File,{fontSize:"4.thirdTitle",fontColor:"4.thin"}),p(d,{flexSizing:0,children:[l(d,{children:l(P,{verticalAlign:"center",gap:"2/3",flexWrap:!1,className:f("FileName"),children:x?l(le,{children:p(ee,{flexSizing:0,gap:"1/2",children:[p(P,{gap:"2/3",verticalAlign:"center",children:[l(ce,{tone:"border",wrapStyles:{flexSizing:"auto"},restrict:"fileName",name:"name",required:!0,id:B,form:"form-"+B,enableFormSubmit:!0,value:W,onKeyDown:C=>{let{key:N}=C;N=="Escape"&&D(!1)}}),p(d,{children:[". ",M]})]}),p(P,{gap:"2/3",horizontalAlign:"right",flexWrap:!1,children:[l(L.Sub,{padding:["2/3",1],onClick:()=>{D(!1)},children:"\u9589\u3058\u308B"}),l(L,{padding:["2/3",1],submitOption:{formName:"form-"+B,callback:C=>U(void 0,null,function*(){let{name:N}=C,b=[...a.dataValue],w=b[t],J=w.id;if(!w)return;let{target:$}=yield w.convert();if(!$)return;let y=yield String($.result).toBlob(m.type);if(!y)return;let F=new File([y],N+"."+M,{type:w.type});F.id=J,b[t]=F,c(_=>u(s({},_),{dataValue:b,eventType:"update",eventID:T()})),D(!1)})},children:"\u6C7A\u5B9A"})]})]})}):p(le,{children:[r,!!n.isNameEditable&&l(L.Clear,{ssSphere:2.5,flexSizing:"none",fontColor:"4.thin",padding:"1/3",ssEffectsOnActive:"expand",color:"cloud",onClick:()=>{D(!0)},children:l(R.Pen,{})})]})})}),!x&&p(d,{fontSize:"1.mini",fontColor:"4.thin",flexSizing:0,children:[i,"\u30D5\u30A1\u30A4\u30EB / ",K,"B"]})]}),l(L.Sub,{color:"cloud",fontColor:"4.thin",ssSphere:3,onClick:()=>{let C=[...a.dataValue];C[t]&&(C.splice(t,1),c(b=>u(s({},b),{dataValue:C,eventType:"update",eventID:T()})))},children:l(R.Times,{})})]}))}},ge=e=>{let G=e,{tone:t,required:n,form:m,isNameEditable:a,useSystemOnly:c,accept:r="*",limit:g=1,checkValidationAtFirst:o,onChange:x,onValidate:D,onUpdateValue:B,onUpdateValidValue:K,value:W=[],className:M,cellStyles:i,cellClassName:C,componentID:N,status_id:b,enableFormSubmit:w,freeCSS:J,wrapStyles:$}=G,Z=Q(G,["tone","required","form","isNameEditable","useSystemOnly","accept","limit","checkValidationAtFirst","onChange","onValidate","onUpdateValue","onUpdateValidValue","value","className","cellStyles","cellClassName","componentID","status_id","enableFormSubmit","freeCSS","wrapStyles"]),[y,F]=H(te.DefaultStatus(e.componentID||"",W)),[_,ne]=H({ok:!1,notice:[]}),oe={rootStates:e,val_status:y,set_status:F};X(()=>{Y.set({["AddFiles-"+y.componentID]:v=>{F(A=>{let I=A.dataValue,k=[];for(var S=0;S<(v==null?void 0:v.length);S++){let h=v[S],{type:E,name:z}=h;if(S+1+I.length>g){j.add({componentID:z,secondsToClose:12e3,children:`\u30D5\u30A1\u30A4\u30EB\u9078\u629E\u4E0A\u9650\u3092\u8D85\u3048\u305F\u305F\u3081\u3001${z}}\u306F\u8FFD\u52A0\u3067\u304D\u307E\u305B\u3093\u3002`,backgroundColor:"nega"});continue}if(r&&r=="image"&&!E.match(/image/)){j.add({componentID:z,secondsToClose:12e3,children:`\u30D5\u30A1\u30A4\u30EB\u5F62\u5F0F\u304C\u7570\u306A\u308B\u305F\u3081\u3001${z} \u306F\u8FFD\u52A0\u3067\u304D\u307E\u305B\u3093\u3002`,backgroundColor:"nega"});continue}k.push(h)}return u(s({},A),{dataValue:[...I,...k],eventType:"update",eventID:T()})})}})},[]),te.CommonEffects({type:"file",states:e,val_status:y,set_status:F,val_validate:_,set_validate:ne,SystemValidation:fe});let O="";return r&&(r=="image"?O="image/png,image/jpeg":O=r),p(ue,{val_status:y,set_status:F,val_validate:_,states:e,children:[l(d,u(s({htmlTag:"input",type:"file",className:f("Input"),"data-component-id":y.componentID,accept:O,multiple:g!=1,onChange:v=>U(void 0,null,function*(){x&&x(v);let A=v.target,I=A.files,k=[];for(var S=0;S<(I==null?void 0:I.length);S++){let h=I[S],E=h.name;if(h.id=T(),S+1+y.dataValue.length>g){j.add({componentID:E,secondsToClose:12e3,children:`\u30D5\u30A1\u30A4\u30EB\u767B\u9332\u6570\u3092\u8D85\u3048\u305F\u305F\u3081\u3001${E}}\u306F\u8FFD\u52A0\u3067\u304D\u307E\u305B\u3093\u3067\u3057\u305F\u3002`,backgroundColor:"nega"});continue}k.push(h)}F(h=>u(s({},h),{dataValue:[...h.dataValue,...k],eventType:"update",eventID:T()})),A.value=""})},Z),{opacity:"low",tabIndex:-1,value:""})),l(ae.List,s({},oe))]})},q=e=>(e=u(s({limit:1,isNameEditable:!0,useSystemOnly:!1,tone:"border",value:[]},e),{override:"force",cellStyles:s(s({},me({tone:e.tone||"border"})),e.cellStyles)}),l(pe,{componentID:e.componentID,children:ge,states:e}));q.fn={openDialog:e=>{let{multiple:t,accept:n}=e;return new Promise(m=>{const a=document.createElement("input");a.type="file",a.multiple=t!=null?t:!0,n&&(n=="image"?a.accept="image/png,image/jpeg":a.accept=n),a.onchange=c=>{m(c.target.files)},a.click()})}},typeof window!="undefined"&&window.document&&ie(document).addEvent({eventType:"dragover",callback:e=>{e.preventDefault(),V("."+f("AddButton")).addClass(f("Draggable"))},options:{passive:!1}}).addEvent({eventType:"drop",callback:e=>{e.preventDefault(),V("."+f("AddButton")).removeClass(f("Draggable"));let t=e.dataTransfer.files;if(t.length){let n=e.target;if(V(n).hasClass(f("AddButton"))){let{componentId:m}=n.dataset,a=Y.get("AddFiles-"+m);a&&a(t)}}},options:{passive:!1}});export{q as Filer,q as default};