UNPKG

@iqmo/browser

Version:

Browser Stlite

github.com/whitphx/stlite

whitphx/stlite

2 lines (1 loc) • 13.2 kB
1
2
import{r as d,E as u,_ as x,c as p,ap as $,j as l,bX as g,bW as w,bD as O,bE as b,bQ as _,ce as G,b3 as Q,bS as Y,cf as j,D as m,d as f,bU as q,bT as J,b_ as K,b$ as Z,cg as ee,c0 as te,bI as ie}from"./index-0xtYjrTa.js";import{F as se}from"./FormClearHelper-DpOGb8He.js";import{g as z,F,D as le,b as ae,I as ne,C as oe,a as re,s as de}from"./FileHelper-8IqgwBWr.js";import{P as pe,S as ce}from"./ProgressBar-DbcR4zPs.js";import{u as he}from"./Hooks-C_rTzxVQ.js";import{U as y}from"./UploadFileInfo-B5SttewO.js";var U=d.forwardRef(function(e,i){var t={fill:"currentColor",xmlns:"http://www.w3.org/2000/svg"};return d.createElement(u,x({iconAttrs:t,iconVerticalAlign:"middle",iconViewBox:"0 0 24 24"},e,{ref:i}),d.createElement("path",{fill:"none",d:"M0 0h24v24H0V0z"}),d.createElement("path",{d:"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12l4.58-4.59z"}))});U.displayName="ChevronLeft";var I=d.forwardRef(function(e,i){var t={fill:"currentColor",xmlns:"http://www.w3.org/2000/svg"};return d.createElement(u,x({iconAttrs:t,iconVerticalAlign:"middle",iconViewBox:"0 0 24 24"},e,{ref:i}),d.createElement("path",{fill:"none",d:"M0 0h24v24H0V0z"}),d.createElement("path",{d:"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z"}))});I.displayName="ChevronRight";var v=d.forwardRef(function(e,i){var t={fill:"currentColor",xmlns:"http://www.w3.org/2000/svg"};return d.createElement(u,x({iconAttrs:t,iconVerticalAlign:"middle",iconViewBox:"0 0 24 24"},e,{ref:i}),d.createElement("path",{fill:"none",d:"M0 0h24v24H0V0z"}),d.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"}))});v.displayName="CloudUpload";var C=d.forwardRef(function(e,i){var t={fill:"currentColor",xmlns:"http://www.w3.org/2000/svg"};return d.createElement(u,x({iconAttrs:t,iconVerticalAlign:"middle",iconViewBox:"0 0 24 24"},e,{ref:i}),d.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"}))});C.displayName="Error";const M=p("section",{target:"e1b2p2ww16"})(({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,height:i.sizes.largestElementHeight,":focus":{outline:"none"},":focus-visible":{boxShadow:`0 0 0 1px ${i.colors.primary}`},cursor:e?"not-allowed":"pointer"}),""),B=p("div",{target:"e1b2p2ww15"})({name:"9xni5b",styles:"margin-right:auto;align-items:center;display:flex"}),V=p("span",{target:"e1b2p2ww14"})(({theme:e})=>({color:e.colors.darkenedBgMix100,marginRight:e.spacing.lg}),""),L=p("span",{target:"e1b2p2ww13"})(({theme:e,disabled:i})=>({color:i?e.colors.fadedText40:e.colors.bodyText}),""),ge=p("span",{target:"e1b2p2ww12"})(({theme:e,disabled:i})=>({fontSize:e.fontSizes.sm,color:i?e.colors.fadedText40:e.colors.fadedText60}),""),me=p("div",{target:"e1b2p2ww11"})({name:"1fttcpj",styles:"display:flex;flex-direction:column"}),D=p("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}),""),fe=p("ul",{target:"e1b2p2ww9"})(({theme:e})=>({listStyleType:"none",margin:e.spacing.none,padding:e.spacing.none}),""),E=p("li",{target:"e1b2p2ww8"})(({theme:e})=>({margin:e.spacing.none,padding:e.spacing.none}),""),A=p("div",{target:"e1b2p2ww7"})(({theme:e})=>({display:"flex",alignItems:"baseline",flex:1,paddingLeft:e.spacing.lg,overflow:"hidden"}),""),k=p("div",{target:"e1b2p2ww6"})(({theme:e})=>({marginRight:e.spacing.sm,marginBottom:e.spacing.twoXS,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}),""),H=p("div",{target:"e1b2p2ww5"})(({theme:e})=>({display:"flex",alignItems:"center",marginBottom:e.spacing.twoXS}),""),ue=p("span",{target:"e1b2p2ww4"})(({theme:e})=>({marginRight:e.spacing.twoXS}),""),xe=p("div",{target:"e1b2p2ww3"})(({theme:e})=>({display:"flex",padding:e.spacing.twoXS,color:e.colors.darkenedBgMix100}),""),T=p("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"}),""),N=p("span",{target:"e1b2p2ww1"})({name:"0",styles:""}),we=e=>({[M]:{display:"flex",flexDirection:"column",alignItems:"flex-start",height:"auto"},[B]:{marginBottom:e.spacing.sm},[V]:{display:"none"},[L]:{marginBottom:e.spacing.twoXS},[D]:{paddingRight:e.spacing.lg},[H]:{maxWidth:"inherit",flex:1,alignItems:"flex-start",marginBottom:e.spacing.sm},[k]:{width:e.sizes.full},[A]:{flexDirection:"column"},[T]:{height:"auto",whiteSpace:"initial"},[N]:{display:"none"},[E]:{margin:e.spacing.none,padding:e.spacing.none}}),be=p("div",{target:"e1b2p2ww0"})(({theme:e,width:i})=>{if(i<$("23rem"))return we(e)},""),Fe=({multiple:e,acceptedExtensions:i,maxSizeBytes:t,disabled:s})=>l.jsxs(B,{"data-testid":"stFileUploaderDropzoneInstructions",children:[l.jsx(V,{children:l.jsx(g,{content:v,size:"threeXL"})}),l.jsxs(me,{children:[l.jsxs(L,{disabled:s,children:["Drag and drop file",e?"s":""," here"]}),l.jsxs(ge,{disabled:s,children:[`Limit ${z(t,F.Byte,0)} per file`,i.length?` \u2022 ${i.map(a=>a.replace(/^\./,"").toUpperCase()).join(", ")}`:null]})]})]}),Se=d.memo(Fe),ye=({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(M,{...o(),"data-testid":"stFileUploaderDropzone",isDisabled:a,"aria-label":n,children:[l.jsx("input",{"data-testid":"stFileUploaderDropzoneInput",...r()}),l.jsx(Se,{multiple:i,acceptedExtensions:t,maxSizeBytes:s,disabled:a}),l.jsx(w,{kind:b.SECONDARY,disabled:a,size:O.SMALL,children:"Browse files"})]})}),je=d.memo(ye),P=p("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}},""),ze=({fileInfo:e})=>e.status.type==="uploading"?l.jsx(pe,{value:e.status.progress,size:ce.SMALL}):e.status.type==="error"?l.jsxs(T,{children:[l.jsx(ue,{"data-testid":"stFileUploaderFileErrorMessage",children:e.status.errorMessage}),l.jsx(N,{children:l.jsx(g,{content:C,size:"lg"})})]}):e.status.type==="uploaded"?l.jsx(P,{children:z(e.size,F.Byte)}):null,Ue=({fileInfo:e,onDelete:i})=>l.jsxs(H,{className:"stFileUploaderFile","data-testid":"stFileUploaderFile",children:[l.jsx(xe,{children:l.jsx(g,{content:ne,size:"twoXL"})}),l.jsxs(A,{className:"stFileUploaderFileData",children:[l.jsx(k,{className:"stFileUploaderFileName","data-testid":"stFileUploaderFileName",title:e.name,children:e.name}),l.jsx(ze,{fileInfo:e})]}),l.jsx("div",{"data-testid":"stFileUploaderDeleteBtn",children:l.jsx(w,{onClick:()=>i(e.id),kind:b.MINIMAL,children:l.jsx(g,{content:oe,size:"lg"})})})]}),Ie=d.memo(Ue),ve=p("div",{target:"e1nlpozb1"})(({theme:e})=>({display:"flex",alignItems:"center",justifyContent:"space-between",paddingBottom:e.spacing.twoXS,marginBottom:e.spacing.twoXS}),""),Ce=p("div",{target:"e1nlpozb0"})(({theme:e})=>({display:"flex",alignItems:"center",justifyContent:"center",color:e.colors.fadedText40}),""),Me=({currentPage:e,totalPages:i,onNext:t,onPrevious:s})=>l.jsxs(ve,{"data-testid":"stFileUploaderPagination",children:[l.jsx(P,{children:`Showing page ${e} of ${i}`}),l.jsxs(Ce,{children:[l.jsx(w,{onClick:s,kind:b.MINIMAL,children:l.jsx(g,{content:U,size:"xl"})}),l.jsx(w,{onClick:t,kind:b.MINIMAL,children:l.jsx(g,{content:I,size:"xl"})})]})]}),Be=d.memo(Me),R=(e,i)=>Math.ceil(e.length/i),Ve=e=>_(({pageSize:i,items:t,resetOnAdd:s,...a})=>{const[n,o]=d.useState(0),[r,c]=d.useState(()=>R(t,i)),h=he(t);d.useEffect(()=>{h&&h.length!==t.length&&c(R(t,i)),h&&h.length<t.length?s&&o(0):n+1>=r&&o(r-1)},[t,n,i,h,s,r]);const S=()=>{o(Math.min(n+1,r-1))},X=()=>{o(Math.max(0,n-1))},W=t.slice(n*i,n*i+i);return l.jsxs(l.Fragment,{children:[l.jsx(e,{items:W,...a}),t.length>i?l.jsx(Be,{pageSize:i,totalPages:r,currentPage:n+1,onNext:S,onPrevious:X}):null]})},e),Le=({items:e,onDelete:i})=>l.jsx(fe,{children:e.map(t=>l.jsx(E,{children:l.jsx(Ie,{fileInfo:t,onDelete:i})},t.id))}),De=Ve(Le),Ee=e=>l.jsx(D,{children:l.jsx(De,{...e})}),Ae=d.memo(Ee);class ke extends d.PureComponent{constructor(i){super(i),this.formClearHelper=new se,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);Q(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)}Y(o,t).forEach(([r,c])=>{this.uploadFile(r,c)})}).catch(o=>{this.addFiles(t.map(r=>new y(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=j.CancelToken.source(),n=new y(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=>{j.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=>{f.flushSync(()=>{this.setState(s=>({files:[...s.files,t]}))})},this.addFiles=t=>{f.flushSync(()=>{this.setState(s=>({files:[...s.files,...t]}))})},this.removeFile=t=>{f.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)=>{f.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=()=>{f.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,h=o.fileId,S=o.fileUrls;return new y(r,c,this.nextLocalFileId(),{type:"uploaded",fileId:h,fileUrls:S})})}}componentWillUnmount(){this.formClearHelper.disconnect()}get maxUploadSizeInBytes(){const i=this.props.element.maxUploadSizeMb;return de(i,F.Megabyte,F.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 J({uploadedFileInfo:i})}render(){const{files:i}=this.state,{element:t,disabled:s,widgetMgr:a,width:n}=this.props,o=t.type;this.formClearHelper.manageFormClearListener(a,t.formId,this.onFormCleared);const r=i.slice().reverse();return l.jsxs(be,{className:"stFileUploader","data-testid":"stFileUploader",width:n,children:[l.jsx(K,{label:t.label,disabled:s,labelVisibility:Z(t.labelVisibility?.value),children:t.help&&l.jsx(ee,{children:l.jsx(te,{content:t.help,placement:ie.TOP_RIGHT})})}),l.jsx(je,{onDrop:this.dropHandler,multiple:t.multipleFiles,acceptedExtensions:o,maxSizeBytes:this.maxUploadSizeInBytes,label:t.label,disabled:s}),r.length>0&&l.jsx(Ae,{items:r,pageSize:3,onDelete:this.deleteFile,resetOnAdd:!0})]})}nextLocalFileId(){return this.localFileIdCounter++}}const He=G(d.memo(ke));export{He as default};