amotify/dist/fn/Input/Filer.js

UI Component for React,NextJS,esbuild

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