UNPKG

@iqmo/browser

Version:

Browser Stlite

2 lines (1 loc) 12.3 kB
import{r as p,E as S,_ as j,c as d,F as T,j as l,bW as h,bV as f,bB as X,bC as x,cX as W,cY as $,bs as O,ca as Y,R as _,b2 as G,bQ as K,K as m,b as u,bS as Q,bR as Z,bY as q,bZ as J,cb as ee,b_ as te,bH as se}from"./index-C9lG8Cnd.js";import{a as U}from"./index-qCq0L4jN.js";import{F as ie}from"./FormClearHelper-CzLLXFUf.js";import{g as z,F as w,D as le,b as ae,I as ne,C as oe,a as re,s as de}from"./FileHelper-DoJtA5BN.js";import{P as pe,S as ce}from"./ProgressBar-JKc8s6V7.js";import{u as ge}from"./Hooks-BW4e2yrJ.js";import{U as b}from"./UploadFileInfo-B5SttewO.js";var I=p.forwardRef(function(e,i){var t={fill:"currentColor",xmlns:"http://www.w3.org/2000/svg"};return p.createElement(S,j({iconAttrs:t,iconVerticalAlign:"middle",iconViewBox:"0 0 24 24"},e,{ref:i}),p.createElement("path",{fill:"none",d:"M0 0h24v24H0V0z"}),p.createElement("path",{d:"M19.35 10.04A7.49 7.49 0 0012 4C9.11 4 6.6 5.64 5.35 8.04A5.994 5.994 0 000 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM19 18H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95A5.469 5.469 0 0112 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11A2.98 2.98 0 0122 15c0 1.65-1.35 3-3 3zM8 13h2.55v3h2.9v-3H16l-4-4z"}))});I.displayName="CloudUpload";var v=p.forwardRef(function(e,i){var t={fill:"currentColor",xmlns:"http://www.w3.org/2000/svg"};return p.createElement(S,j({iconAttrs:t,iconVerticalAlign:"middle",iconViewBox:"0 0 24 24"},e,{ref:i}),p.createElement("path",{d:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"}))});v.displayName="Error";const C=d("section",{target:"e1b2p2ww15"})(({isDisabled:e,theme:i})=>({display:"flex",alignItems:"center",padding:i.spacing.lg,backgroundColor:i.colors.secondaryBg,borderRadius:i.radii.default,border:i.colors.widgetBorderColor?`${i.sizes.borderWidth} solid ${i.colors.widgetBorderColor}`:void 0,":focus":{outline:"none"},":focus-visible":{boxShadow:`0 0 0 1px ${i.colors.primary}`},color:e?i.colors.gray:i.colors.bodyText}),""),M=d("div",{target:"e1b2p2ww14"})({name:"9xni5b",styles:"margin-right:auto;align-items:center;display:flex"}),B=d("span",{target:"e1b2p2ww13"})(({theme:e})=>({color:e.colors.darkenedBgMix100,marginRight:e.spacing.lg}),""),he=d("span",{target:"e1b2p2ww12"})(({theme:e})=>({marginBottom:e.spacing.twoXS}),""),me=d("div",{target:"e1b2p2ww11"})({name:"1fttcpj",styles:"display:flex;flex-direction:column"}),D=d("div",{target:"e1b2p2ww10"})(({theme:e})=>({left:0,right:0,lineHeight:e.lineHeights.tight,paddingTop:e.spacing.md,paddingLeft:e.spacing.lg,paddingRight:e.spacing.lg}),""),ue=d("ul",{target:"e1b2p2ww9"})(({theme:e})=>({listStyleType:"none",margin:e.spacing.none,padding:e.spacing.none}),""),V=d("li",{target:"e1b2p2ww8"})(({theme:e})=>({margin:e.spacing.none,padding:e.spacing.none}),""),L=d("div",{target:"e1b2p2ww7"})(({theme:e})=>({display:"flex",alignItems:"baseline",flex:1,paddingLeft:e.spacing.lg,overflow:"hidden"}),""),k=d("div",{target:"e1b2p2ww6"})(({theme:e})=>({marginRight:e.spacing.sm,marginBottom:e.spacing.twoXS,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}),""),A=d("div",{target:"e1b2p2ww5"})(({theme:e})=>({display:"flex",alignItems:"center",marginBottom:e.spacing.twoXS}),""),fe=d("span",{target:"e1b2p2ww4"})(({theme:e})=>({marginRight:e.spacing.twoXS}),""),xe=d("div",{target:"e1b2p2ww3"})(({theme:e})=>({display:"flex",padding:e.spacing.twoXS,color:e.colors.darkenedBgMix100}),""),E=d("small",{target:"e1b2p2ww2"})(({theme:e})=>({color:e.colors.red,fontSize:e.fontSizes.sm,height:e.fontSizes.sm,lineHeight:e.fontSizes.sm,display:"flex",alignItems:"center",whiteSpace:"nowrap"}),""),H=d("span",{target:"e1b2p2ww1"})({name:"0",styles:""}),we=e=>({[C]:{display:"flex",flexDirection:"column",alignItems:"flex-start"},[M]:{marginBottom:e.spacing.lg},[B]:{display:"none"},[D]:{paddingRight:e.spacing.lg},[A]:{maxWidth:"inherit",flex:1,alignItems:"flex-start",marginBottom:e.spacing.sm},[k]:{width:e.sizes.full},[L]:{flexDirection:"column"},[E]:{height:"auto",whiteSpace:"initial"},[H]:{display:"none"},[V]:{margin:e.spacing.none,padding:e.spacing.none}}),Fe=d("div",{target:"e1b2p2ww0"})(({theme:e,width:i})=>{if(i<T("23rem"))return we(e)},""),y=d("small",{target:"e1bju1570"})(({kind:e,theme:i})=>{const{danger:t,fadedText60:s}=i.colors;return{color:e==="danger"?t:s,fontSize:i.fontSizes.sm,lineHeight:i.lineHeights.tight}},""),be=({multiple:e,acceptedExtensions:i,maxSizeBytes:t})=>l.jsxs(M,{"data-testid":"stFileUploaderDropzoneInstructions",children:[l.jsx(B,{children:l.jsx(h,{content:I,size:"threeXL"})}),l.jsxs(me,{children:[l.jsxs(he,{children:["Drag and drop file",e?"s":""," here"]}),l.jsxs(y,{children:[`Limit ${z(t,w.Byte,0)} per file`,i.length?` \u2022 ${i.map(s=>s.replace(/^\./,"").toUpperCase()).join(", ")}`:null]})]})]}),ye=p.memo(be),Se=({onDrop:e,multiple:i,acceptedExtensions:t,maxSizeBytes:s,disabled:a,label:n})=>l.jsx(le,{onDrop:e,multiple:i,accept:ae(t),maxSize:s,disabled:a,useFsAccessApi:!1,children:({getRootProps:o,getInputProps:r})=>l.jsxs(C,{...o(),"data-testid":"stFileUploaderDropzone",isDisabled:a,"aria-label":n,children:[l.jsx("input",{"data-testid":"stFileUploaderDropzoneInput",...r()}),l.jsx(ye,{multiple:i,acceptedExtensions:t,maxSizeBytes:s}),l.jsx(f,{kind:x.SECONDARY,disabled:a,size:X.SMALL,children:"Browse files"})]})}),je=p.memo(Se),Ue=d("div",{target:"e1nlpozb1"})(({theme:e})=>({display:"flex",alignItems:"center",justifyContent:"space-between",paddingBottom:e.spacing.twoXS,marginBottom:e.spacing.twoXS}),""),ze=d("div",{target:"e1nlpozb0"})(({theme:e})=>({display:"flex",alignItems:"center",justifyContent:"center",color:e.colors.fadedText40}),""),Ie=({currentPage:e,totalPages:i,onNext:t,onPrevious:s})=>l.jsxs(Ue,{"data-testid":"stFileUploaderPagination",children:[l.jsx(y,{children:`Showing page ${e} of ${i}`}),l.jsxs(ze,{children:[l.jsx(f,{onClick:s,kind:x.MINIMAL,children:l.jsx(h,{content:W,size:"xl"})}),l.jsx(f,{onClick:t,kind:x.MINIMAL,children:l.jsx(h,{content:$,size:"xl"})})]})]}),ve=p.memo(Ie),P=(e,i)=>Math.ceil(e.length/i),Ce=e=>O(({pageSize:i,items:t,resetOnAdd:s,...a})=>{const[n,o]=p.useState(0),[r,c]=p.useState(()=>P(t,i)),g=ge(t);p.useEffect(()=>{g&&g.length!==t.length&&c(P(t,i)),g&&g.length<t.length?s&&o(0):n+1>=r&&o(r-1)},[t,n,i,g,s,r]);const F=()=>{o(Math.min(n+1,r-1))},R=()=>{o(Math.max(0,n-1))},N=t.slice(n*i,n*i+i);return l.jsxs(l.Fragment,{children:[l.jsx(e,{items:N,...a}),t.length>i?l.jsx(ve,{pageSize:i,totalPages:r,currentPage:n+1,onNext:F,onPrevious:R}):null]})},e),Me=({fileInfo:e})=>e.status.type==="uploading"?l.jsx(pe,{value:e.status.progress,size:ce.SMALL}):e.status.type==="error"?l.jsxs(E,{children:[l.jsx(fe,{"data-testid":"stFileUploaderFileErrorMessage",children:e.status.errorMessage}),l.jsx(H,{children:l.jsx(h,{content:v,size:"lg"})})]}):e.status.type==="uploaded"?l.jsx(y,{children:z(e.size,w.Byte)}):null,Be=({fileInfo:e,onDelete:i})=>l.jsxs(A,{className:"stFileUploaderFile","data-testid":"stFileUploaderFile",children:[l.jsx(xe,{children:l.jsx(h,{content:ne,size:"twoXL"})}),l.jsxs(L,{className:"stFileUploaderFileData",children:[l.jsx(k,{className:"stFileUploaderFileName","data-testid":"stFileUploaderFileName",title:e.name,children:e.name}),l.jsx(Me,{fileInfo:e})]}),l.jsx("div",{"data-testid":"stFileUploaderDeleteBtn",children:l.jsx(f,{onClick:()=>i(e.id),kind:x.MINIMAL,children:l.jsx(h,{content:oe,size:"lg"})})})]}),De=p.memo(Be),Ve=({items:e,onDelete:i})=>l.jsx(ue,{children:e.map(t=>l.jsx(V,{children:l.jsx(De,{fileInfo:t,onDelete:i})},t.id))}),Le=Ce(Ve),ke=e=>l.jsx(D,{children:l.jsx(Le,{...e})}),Ae=p.memo(ke);class Ee extends _.PureComponent{constructor(i){super(i),this.formClearHelper=new ie,this.localFileIdCounter=1,this.forceUpdatingStatus=!1,this.componentDidUpdate=()=>{if(this.status!=="ready")return;const t=this.createWidgetValue(),{element:s,widgetMgr:a,fragmentId:n}=this.props,o=a.getFileUploaderStateValue(s);G(t,o)||a.setFileUploaderStateValue(s,t,{fromUi:!0},n)},this.dropHandler=(t,s)=>{const{element:a}=this.props,{multipleFiles:n}=a;if(!n&&t.length===0&&s.length>1){const o=s.findIndex(r=>r.errors.length===1&&r.errors[0].code==="too-many-files");o>=0&&(t.push(s[o].file),s.splice(o,1))}if(this.props.uploadClient.fetchFileURLs(t).then(o=>{if(!n&&t.length>0){const r=this.state.files.find(c=>c.status.type!=="error");r&&(this.forceUpdatingStatus=!0,this.deleteFile(r.id),this.forceUpdatingStatus=!1)}K(o,t).forEach(([r,c])=>{this.uploadFile(r,c)})}).catch(o=>{this.addFiles(t.map(r=>new b(r.name,r.size,this.nextLocalFileId(),{type:"error",errorMessage:o})))}),s.length>0){const o=s.map(r=>re(r,this.nextLocalFileId(),this.maxUploadSizeInBytes));this.addFiles(o)}},this.uploadFile=(t,s)=>{const a=U.CancelToken.source(),n=new b(s.name,s.size,this.nextLocalFileId(),{type:"uploading",cancelToken:a,progress:1});this.addFile(n),this.props.uploadClient.uploadFile(this.props.element,t.uploadUrl,s,o=>this.onUploadProgress(o,n.id),a.token).then(()=>this.onUploadComplete(n.id,t)).catch(o=>{U.isCancel(o)||this.updateFile(n.id,n.setStatus({type:"error",errorMessage:o?o.toString():"Unknown error"}))})},this.onUploadComplete=(t,s)=>{const a=this.getFile(t);m(a)||a.status.type!=="uploading"||this.updateFile(a.id,a.setStatus({type:"uploaded",fileId:s.fileId,fileUrls:s}))},this.deleteFile=t=>{const s=this.getFile(t);m(s)||(s.status.type==="uploading"&&s.status.cancelToken.cancel(),s.status.type==="uploaded"&&s.status.fileUrls.deleteUrl&&this.props.uploadClient.deleteFile(s.status.fileUrls.deleteUrl),this.removeFile(t))},this.addFile=t=>{u.flushSync(()=>{this.setState(s=>({files:[...s.files,t]}))})},this.addFiles=t=>{u.flushSync(()=>{this.setState(s=>({files:[...s.files,...t]}))})},this.removeFile=t=>{u.flushSync(()=>{this.setState(s=>({files:s.files.filter(a=>a.id!==t)}))})},this.getFile=t=>this.state.files.find(s=>s.id===t),this.updateFile=(t,s)=>{u.flushSync(()=>{this.setState(a=>({files:a.files.map(n=>n.id===t?s:n)}))})},this.onUploadProgress=(t,s)=>{const a=this.getFile(s);if(m(a)||a.status.type!=="uploading")return;const n=Math.round(t.loaded*100/t.total);a.status.progress!==n&&this.updateFile(s,a.setStatus({type:"uploading",cancelToken:a.status.cancelToken,progress:n}))},this.onFormCleared=()=>{u.flushSync(()=>{this.setState({files:[]},()=>{const t=this.createWidgetValue();if(m(t))return;const{widgetMgr:s,element:a,fragmentId:n}=this.props;s.setFileUploaderStateValue(a,t,{fromUi:!0},n)})})},this.state=this.initialValue}get initialValue(){const i={files:[]},{widgetMgr:t,element:s}=this.props,a=t.getFileUploaderStateValue(s);if(m(a))return i;const{uploadedFileInfo:n}=a;return m(n)||n.length===0?i:{files:n.map(o=>{const r=o.name,c=o.size,g=o.fileId,F=o.fileUrls;return new b(r,c,this.nextLocalFileId(),{type:"uploaded",fileId:g,fileUrls:F})})}}componentWillUnmount(){this.formClearHelper.disconnect()}get maxUploadSizeInBytes(){const i=this.props.element.maxUploadSizeMb;return de(i,w.Megabyte,w.Byte)}get status(){const i=t=>t.status.type==="uploading";return this.state.files.some(i)||this.forceUpdatingStatus?"updating":"ready"}componentDidMount(){const i=this.createWidgetValue(),{element:t,widgetMgr:s,fragmentId:a}=this.props;s.getFileUploaderStateValue(t)===void 0&&s.setFileUploaderStateValue(t,i,{fromUi:!1},a)}createWidgetValue(){const i=this.state.files.filter(t=>t.status.type==="uploaded").map(t=>{const{name:s,size:a,status:n}=t,{fileId:o,fileUrls:r}=n;return new Q({fileId:o,fileUrls:r,name:s,size:a})});return new Z({uploadedFileInfo:i})}render(){var i;const{files:t}=this.state,{element:s,disabled:a,widgetMgr:n,width:o}=this.props,r=s.type;this.formClearHelper.manageFormClearListener(n,s.formId,this.onFormCleared);const c=t.slice().reverse();return l.jsxs(Fe,{className:"stFileUploader","data-testid":"stFileUploader",width:o,children:[l.jsx(q,{label:s.label,disabled:a,labelVisibility:J((i=s.labelVisibility)==null?void 0:i.value),children:s.help&&l.jsx(ee,{children:l.jsx(te,{content:s.help,placement:se.TOP_RIGHT})})}),l.jsx(je,{onDrop:this.dropHandler,multiple:s.multipleFiles,acceptedExtensions:r,maxSizeBytes:this.maxUploadSizeInBytes,label:s.label,disabled:a}),c.length>0&&l.jsx(Ae,{items:c,pageSize:3,onDelete:this.deleteFile,resetOnAdd:!0})]})}nextLocalFileId(){return this.localFileIdCounter++}}const He=Y(p.memo(Ee));export{He as default};