@arcgis/core/widgets/Attachments.js

ArcGIS Maps SDK for JavaScript: A complete 2D and 3D mapping and data visualization API

/* COPYRIGHT Esri - https://js.arcgis.com/5.0.8/LICENSE.txt */
import{__decorate as e}from"tslib";import t from"../Graphic.js";import{deprecatedModule as s}from"../core/deprecate.js";import i from"../core/Error.js";import a from"../core/Logger.js";import{on as n,watch as r,initial as l}from"../core/reactiveUtils.js";import{formatFileSize as o}from"../core/unitFormatUtils.js";import{property as d,cast as c,subclass as m}from"../core/accessorSupport/decorators.js";import h from"./Widget.js";import u from"./Attachments/AttachmentsViewModel.js";import{getIconPath as p,isSupportedImage as b}from"./Attachments/support/attachmentUtils.js";import{loadCalciteComponents as _}from"./support/componentsUtils.js";import{globalCss as g}from"./support/globalCss.js";import{legacyIcon as v}from"./support/legacyIcon.js";import{tsx as f,isRTL as y,messageBundle as w}from"./support/widget.js";import{discardNode as A,storeNode as M}from"./support/widgetUtils.js";const F={addButton:!0,addSubmitButton:!0,cancelAddButton:!0,cancelUpdateButton:!0,deleteButton:!0,errorMessage:!0,progressBar:!0,updateButton:!0},k="esri-attachments",I={base:k,loaderContainer:`${k}__loader-container`,loader:`${k}__loader`,container:`${k}__container`,containerList:`${k}__container--list`,containerPreview:`${k}__container--preview`,actions:`${k}__actions`,deleteButton:`${k}__delete-button`,addAttachmentButton:`${k}__add-attachment-button`,errorMessage:`${k}__error-message`,items:`${k}__items`,item:`${k}__item`,itemButton:`${k}__item-button`,itemMask:`${k}__item-mask`,itemMaskIcon:`${k}__item-mask--icon`,itemImage:`${k}__image`,itemImageResizable:`${k}__image--resizable`,itemLabel:`${k}__label`,itemFilename:`${k}__filename`,itemChevronIcon:`${k}__item-chevron-icon`,itemLink:`${k}__item-link`,itemLinkOverlay:`${k}__item-link-overlay`,itemLinkOverlayIcon:`${k}__item-link-overlay-icon`,itemAddIcon:`${k}__item-add-icon`,formNode:`${k}__form-node`,fileFieldset:`${k}__file-fieldset`,fileLabel:`${k}__file-label`,fileName:`${k}__file-name`,fileInput:`${k}__file-input`,metadata:`${k}__metadata`,metadataFieldset:`${k}__metadata-fieldset`,progressBar:`${k}__progress-bar`},$=window.CSS;let T=class extends h{constructor(e,t){super(e,t),this.displayType="auto",this.messages=null,this.messagesUnits=null,this.selectedFile=null,this.submitting=!1,this.viewModel=null,this.visibleElements={...F},this._supportsImageOrientation=$&&$.supports&&$.supports("image-orientation","from-image"),this._addAttachmentForm=null,this._updateAttachmentForm=null,e?.suppressDeprecationWarning||(this.announceDeprecation=()=>{s(a.getLogger("esri.widgets.Attachments"),"esri.widgets.Attachments",{replacement:"Use the Popup and Editor components to view and edit attachments respectively.",version:"5.0",see:"https://www.esriurl.com/components-transition-plan/",warnOnce:!0})})}normalizeCtorArgs(e){e?.viewModel||(e={viewModel:new u,...e});const{suppressDeprecationWarning:t,...s}=e;return s}initialize(){this.addHandles([n(()=>this.viewModel?.attachmentInfos,"change",()=>this.scheduleRender()),n(()=>this.viewModel?.fileInfos,"change",()=>this.scheduleRender()),r(()=>this.viewModel?.mode,()=>this._modeChanged(),l)])}loadDependencies(){return _({icon:()=>import("@esri/calcite-components/dist/components/calcite-icon")})}get capabilities(){return this.viewModel.capabilities}set capabilities(e){this.viewModel.capabilities=e}get effectiveDisplayType(){const{displayType:e}=this;return e&&"auto"!==e?e:this.viewModel.supportsResizeAttachments?"preview":"list"}get attachmentKeywords(){return this.viewModel.attachmentKeywords}set attachmentKeywords(e){this.viewModel.attachmentKeywords=e}get attachmentTypes(){return this.viewModel.attachmentTypes}set attachmentTypes(e){this.viewModel.attachmentTypes=e}get graphic(){return this.viewModel.graphic}set graphic(e){this.viewModel.graphic=e}get icon(){return"attachment"}set icon(e){this._overrideIfSome("icon",e)}get label(){return this.messages?.widgetLabel??""}set label(e){this._overrideIfSome("label",e)}castVisibleElements(e){return{...F,...e}}addAttachment(){const{_addAttachmentForm:e,viewModel:t}=this;return this._set("submitting",!0),this._set("error",null),t.addAttachment(e).then(e=>(this._set("submitting",!1),this._set("error",null),t.mode="view",e)).catch(e=>{throw this._set("submitting",!1),this._set("error",new i("attachments:add-attachment",this.messages.addErrorMessage,e)),e})}deleteAttachment(e){const{viewModel:t}=this;return this._set("submitting",!0),this._set("error",null),t.deleteAttachment(e).then(e=>(this._set("submitting",!1),this._set("error",null),t.mode="view",e)).catch(e=>{throw this._set("submitting",!1),this._set("error",new i("attachments:delete-attachment",this.messages.deleteErrorMessage,e)),e})}updateAttachment(){const{viewModel:e}=this,{_updateAttachmentForm:t}=this;return this._set("submitting",!0),this._set("error",null),e.updateAttachment(t).then(t=>(this._set("submitting",!1),this._set("error",null),e.mode="view",t)).catch(e=>{throw this._set("submitting",!1),this._set("error",new i("attachments:update-attachment",this.messages.updateErrorMessage,e)),e})}addFile(){const e=this.viewModel.addFile(this.selectedFile,this._addAttachmentForm);return this.viewModel.mode="view",e}updateFile(){const{viewModel:e}=this,t=e.updateFile(this.selectedFile,this._updateAttachmentForm,e.activeFileInfo);return e.mode="view",t}deleteFile(e){const t=this.viewModel.deleteFile(e||this.viewModel.activeFileInfo?.file);return this.viewModel.mode="view",t}render(){const{submitting:e,viewModel:t}=this,{state:s}=t;return f("div",{class:this.classes(I.base,g.widget)},e?this._renderProgressBar():null,"loading"===s?this._renderLoading():this._renderAttachments(),this._renderErrorMessage())}_renderErrorMessage(){const{error:e,visibleElements:t}=this;return e&&t.errorMessage?f("div",{class:I.errorMessage,key:"error-message"},e.message):null}_renderAttachments(){const{activeFileInfo:e,mode:t,activeAttachmentInfo:s}=this.viewModel;return"add"===t?this._renderAddForm():"edit"===t?this._renderDetailsForm(s||e):this._renderAttachmentContainer()}_renderLoading(){return f("div",{class:I.loaderContainer,key:"loader"},f("div",{class:I.loader}))}_renderProgressBar(){return this.visibleElements.progressBar?f("div",{class:I.progressBar,key:"progress-bar"}):null}_renderAddForm(){const{submitting:e,selectedFile:t}=this,s=e||!t,i=this.visibleElements.cancelAddButton?f("button",{bind:this,class:this.classes(g.button,g.buttonTertiary,g.buttonSmall,g.buttonHalf,e&&g.buttonDisabled),disabled:e,onclick:this._cancelForm,type:"button"},this.messages.cancel):null,a=this.visibleElements.addSubmitButton?f("button",{class:this.classes(g.button,g.buttonSecondary,g.buttonSmall,g.buttonHalf,{[g.buttonDisabled]:s}),disabled:s,type:"submit"},this.messages.add):null,n=t?f("span",{class:I.fileName,key:"file-name"},t.name):null,r=f("form",{afterCreate:M,afterRemoved:A,bind:this,"data-node-ref":"_addAttachmentForm",onsubmit:this._submitAddAttachment},f("fieldset",{class:I.fileFieldset},n,f("label",{class:this.classes(I.fileLabel,g.button,g.buttonSecondary)},t?this.messages.changeFile:this.messages.selectFile,f("input",{bind:this,class:I.fileInput,name:"attachment",onchange:this._handleFileInputChange,type:"file"}))),a,i);return f("div",{class:I.formNode,key:"add-form-container"},r)}_renderDetailsForm(e){const{visibleElements:t,viewModel:s,selectedFile:i,submitting:a}=this,{capabilities:n}=s,r=a||!i;let l,d,c,m;i?(l=i.type,d=i.name,c=i.size):e&&"file"in e?(l=e.file.type,d=e.file.name,c=e.file.size):e&&"contentType"in e&&(l=e.contentType,d=e.name,c=e.size,m=e.url);const h=n.editing&&n.operations?.delete&&t.deleteButton?f("button",{bind:this,class:this.classes(g.button,g.buttonSmall,g.buttonTertiary,I.deleteButton,{[g.buttonDisabled]:a}),disabled:a,key:"delete-button",onclick:t=>this._submitDeleteAttachment(t,e),type:"button"},this.messages.delete):void 0,u=n.editing&&n.operations?.update&&t.updateButton?f("button",{class:this.classes(g.button,g.buttonSmall,g.buttonThird,{[g.buttonDisabled]:r}),disabled:r,key:"update-button",type:"submit"},this.messages.update):void 0,p=this.visibleElements.cancelUpdateButton?f("button",{bind:this,class:this.classes(g.button,g.buttonSmall,g.buttonTertiary,g.buttonThird,{[g.buttonDisabled]:a}),disabled:a,key:"cancel-button",onclick:this._cancelForm,type:"button"},this.messages.cancel):void 0,b=n.editing&&n.operations?.update?f("fieldset",{class:I.fileFieldset,key:"file"},f("span",{class:I.fileName,key:"file-name"},d),f("label",{class:this.classes(I.fileLabel,g.button,g.buttonSecondary)},this.messages.changeFile,f("input",{bind:this,class:I.fileInput,name:"attachment",onchange:this._handleFileInputChange,type:"file"}))):void 0,_=f("fieldset",{class:I.metadataFieldset,key:"size"},f("label",null,o(this.messagesUnits,c??0))),v=f("fieldset",{class:I.metadataFieldset,key:"content-type"},f("label",null,l)),y=null!=m?f("a",{class:I.itemLink,href:m,rel:"noreferrer",target:"_blank"},this._renderImageMask(e,400),f("div",{class:I.itemLinkOverlay},f("span",{class:I.itemLinkOverlayIcon},f("calcite-icon",{icon:"launch"})))):this._renderImageMask(e,400),w=f("form",{afterCreate:M,afterRemoved:A,bind:this,"data-node-ref":"_updateAttachmentForm",onsubmit:t=>this._submitUpdateAttachment(t,e)},f("div",{class:I.metadata},_,v),b,f("div",{class:I.actions},h,p,u));return f("div",{class:I.formNode,key:"edit-form-container"},y,w)}_renderImageMask(e,t){return e?"file"in e?this._renderGenericImageMask(e.file.name,e.file.type):this._renderImageMaskForAttachment(e,t):null}_renderGenericImageMask(e,t){const{supportsResizeAttachments:s}=this.viewModel,i=p(t),a={[I.itemImageResizable]:s};return f("div",{class:this.classes(I.itemMaskIcon,I.itemMask),key:i},f("img",{alt:e,class:this.classes(a,I.itemImage),src:i,title:e}))}_renderImageMaskForAttachment(e,t){const{supportsResizeAttachments:s}=this.viewModel;if(!e)return null;const{contentType:i,name:a,size:n,url:r}=e;if(!s||!b(i))return this._renderGenericImageMask(a,i);const l=this._getCSSTransform(e),o=l?{transform:l,"image-orientation":"none"}:{},d=`${r}${r?.includes("?")?"&":"?"}w=${t}&s=${n}`,c={[I.itemImageResizable]:s};return f("div",{class:this.classes(I.itemMask),key:d},f("img",{alt:a,class:this.classes(c,I.itemImage),src:d,styles:o,title:a}))}_renderFile(e){const{file:t}=e;return f("li",{class:I.item,key:t},f("button",{"aria-label":this.messages.attachmentDetails,bind:this,class:I.itemButton,key:"details-button",onclick:()=>this._startEditFile(e),title:this.messages.attachmentDetails,type:"button"},this._renderImageMask(e),f("label",{class:I.itemLabel},f("span",{class:I.itemFilename},t.name||this.messages.noTitle),f("span",{"aria-hidden":"true",class:this.classes(I.itemChevronIcon,y(this.container)?v.left:v.right)}))))}_renderAttachmentInfo({attachmentInfo:e,displayType:t}){const{viewModel:s,effectiveDisplayType:i}=this,{capabilities:a,supportsResizeAttachments:n}=s,{contentType:r,name:l,url:o}=e,d=this._renderImageMask(e,"list"===t?48:400),c=a.editing?f("span",{"aria-hidden":"true",class:this.classes(I.itemChevronIcon,y(this.container)?v.left:v.right)}):null,m=[d,"preview"===i&&n&&b(r)?null:f("label",{class:I.itemLabel},f("span",{class:I.itemFilename},l||this.messages.noTitle),c)],h=a.editing?f("button",{"aria-label":this.messages.attachmentDetails,bind:this,class:I.itemButton,"data-attachment-info-id":e.id,key:"details-button",onclick:()=>this._startEditAttachment(e),title:this.messages.attachmentDetails,type:"button"},m):f("a",{class:I.itemButton,href:o??void 0,key:"details-link",rel:"noreferrer",target:"_blank"},m);return f("li",{class:I.item,key:e},h)}_renderAttachmentContainer(){const{effectiveDisplayType:e,viewModel:t,visibleElements:s}=this,{attachmentInfos:i,capabilities:a,fileInfos:n}=t,r=!!i?.length,l=!!n?.length,o={[I.containerList]:"preview"!==e,[I.containerPreview]:"preview"===e},d=a.editing&&a.operations?.add&&s.addButton?f("button",{bind:this,class:this.classes(g.button,g.buttonTertiary,I.addAttachmentButton),onclick:()=>this._startAddAttachment(),type:"button"},f("span",{"aria-hidden":"true",class:this.classes(I.itemAddIcon,v.plus)}),this.messages.add):void 0,c=r?f("ul",{class:I.items,key:"attachments-list"},i.toArray().map(t=>this._renderAttachmentInfo({attachmentInfo:t,displayType:e}))):void 0,m=l?f("ul",{class:I.items,key:"file-list"},n.toArray().map(e=>this._renderFile(e))):void 0,h=l||r?void 0:f("div",{class:g.empty},this.messages.noAttachments);return f("div",{class:this.classes(I.container,o),key:"attachments-container"},c,m,h,d)}_modeChanged(){this._set("error",null),this._set("selectedFile",null)}_handleFileInputChange(e){const t=e.target,s=t.files?.item(0);this._set("selectedFile",s)}_submitDeleteAttachment(e,t){e.preventDefault(),t&&("file"in t?this.deleteFile(t.file):t&&this.deleteAttachment(t))}_submitAddAttachment(e){e.preventDefault(),this.viewModel.filesEnabled?this.addFile():this.addAttachment()}_submitUpdateAttachment(e,t){e.preventDefault(),t&&"file"in t?this.updateFile():this.updateAttachment()}_startEditAttachment(e){const{viewModel:t}=this;t.activeFileInfo=null,t.activeAttachmentInfo=e,t.mode="edit"}_startEditFile(e){const{viewModel:t}=this;t.activeAttachmentInfo=null,t.activeFileInfo=e,t.mode="edit"}_startAddAttachment(){this.viewModel.mode="add"}_cancelForm(e){e.preventDefault(),this.viewModel.mode="view"}_getCSSTransform(e){const{orientationInfo:t}=e;return!this._supportsImageOrientation&&t?[t.rotation?`rotate(${t.rotation}deg)`:"",t.mirrored?"scaleX(-1)":""].join(" "):""}};e([d()],T.prototype,"capabilities",null),e([d()],T.prototype,"displayType",void 0),e([d({readOnly:!0})],T.prototype,"effectiveDisplayType",null),e([d()],T.prototype,"attachmentKeywords",null),e([d()],T.prototype,"attachmentTypes",null),e([d({type:t})],T.prototype,"graphic",null),e([d()],T.prototype,"icon",null),e([d()],T.prototype,"label",null),e([d(),w("esri/widgets/Attachments/t9n/Attachments")],T.prototype,"messages",void 0),e([d(),w("esri/core/t9n/Units")],T.prototype,"messagesUnits",void 0),e([d({readOnly:!0})],T.prototype,"selectedFile",void 0),e([d({readOnly:!0})],T.prototype,"submitting",void 0),e([d({readOnly:!0})],T.prototype,"error",void 0),e([d({type:u})],T.prototype,"viewModel",void 0),e([d()],T.prototype,"visibleElements",void 0),e([c("visibleElements")],T.prototype,"castVisibleElements",null),T=e([m("esri.widgets.Attachments")],T);export{T as default};