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 c}from"react/jsx-runtime";import{useState as Q,useEffect as Y}from"react";import _,{UUID as b,useStore as ee}from"jmini";import{$$fromRoot as k,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:l,states:o}=e,{required:u}=o,t=[];return u&&!l.length&&t.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"}),{ok:!t.filter(({type:m})=>m=="invalid").length,notice:t}}const ae={List:e=>{let{rootStates:l,val_status:o,set_status:u}=e;if(l.useSystemOnly)return null;let t=l.limit-(o.rawValue||[]).length,m=(o.rawValue||[]).map((p,a)=>n(ae.ListCell,f(r({},e),{index:a,val_file:p}),p.name));t>0&&m.push(n(h,f(r({htmlTag:"label"},l.cellStyles),{className:[l.cellClassName,y("AddButton")].join(" "),"data-component-id":o.componentId,htmlFor:l.id,tabIndex:l.tabIndex,onKeyDown:p=>{let{key:a}=p;l.tabIndex!=-1&&_.isOneOf(a," ","Enter")&&k("#"+l.id).click()},children:c(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"})}),c(h,{children:[c(h,{fontColor:"theme",fontSize:"2.normal",isSemiBoldFont:!0,children:["\u30D5\u30A1\u30A4\u30EB\u3092\u9078\u629E(",t,")"]}),n(re.Micro,{fontColor:"4.thin",isSemiBoldFont:!0,children:"\u30D5\u30A1\u30A4\u30EB\u3092\u30C9\u30ED\u30C3\u30D7"})]})]})}),"AddButton"));let[i]=se(l);return n(te,f(r({flexSizing:"auto"},i),{className:l.className,children:m}))},ListCell:e=>{let{index:l,rootStates:o,val_file:u,val_status:t,set_status:m}=e,{name:i,size:p,type:a}=u,[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(()=>{k("#"+I).focus()},100)},[d]),c(R,f(r({verticalAlign:"center",flexWrap:!1,gap:1,className:o.cellClassName},o.cellStyles),{children:[n(L.File,{fontSize:"4.thirdTitle",fontColor:"4.thin"}),c(h,{flexSizing:0,children:[n(h,{children:n(R,{verticalAlign:"center",gap:"2/3",flexWrap:!1,className:y("FileName"),children:d?n(ne,{children:c(te,{flexSizing:0,gap:"1/2",children:[c(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)}}),c(h,{children:[". ",W]})]}),c(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=[...t.rawValue],N=w[l],X=N.id;if(!N)return;let P=yield String(yield N.convert("dataURL")).toBlob(u.type);if(!P)return;let $=new File([P],B+"."+W,{type:N.type});$.id=X,w[l]=$,m(O=>f(r({},O),{rawValue:w,eventType:"update",eventID:b(12),isInspected:!1})),v(!1)})],children:"\u6C7A\u5B9A"})]})]})}):c(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&&c(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=[...t.rawValue];F[l]&&(F.splice(l,1),m(w=>f(r({},w),{rawValue:F,eventType:"update",eventID:b(12),isInspected:!1})))},children:n(L.X,{})})]}))}},ye=e=>{let Z=e,{tone:l,required:o,form:u,isNameEditable:t,useSystemOnly:m,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:E,name:z}=S;if(g+1+C.length>p){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(i&&i=="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}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),c(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(),E=S.name;if(S.id=b(),g+1+T.rawValue.length>p){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}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:l,accept:o}=e,u=b();const t=document.createElement("input");t.type="file",t.multiple=!!l,t.value="",t.id=u,o&&(o=="image"?t.accept="image/png,image/jpeg,image/jpg,image/webp":t.accept=o),_("body").append(t),t.onchange=m=>{var a;let i=((a=m==null?void 0:m.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),_("#"+u).remove()},t.oncancel=()=>{_("#"+u).remove()},t.click()}},typeof window!="undefined"&&window.document&&_(document).onEvent("dragover",e=>{e.preventDefault(),k("."+y("AddButton")).addClass(y("Draggable"))},{passive:!1}).onEvent("drop",e=>{e.preventDefault(),k("."+y("AddButton")).removeClass(y("Draggable"));let l=e.dataTransfer.files;if(l.length){let o=e.target;if(k(o).hasClass(y("AddButton"))){let{componentId:u}=o.dataset,t=ee.get("AddFiles-"+u);t&&t(l)}}},{passive:!1});export{q as Filer,q as default};