UNPKG

@arcgis/core

Version:

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

js.arcgis.com

6 lines (5 loc) • 13.9 kB
1
2
3
4
5
6
/* All material copyright ESRI, All Rights Reserved, unless otherwise specified. See https://js.arcgis.com/4.33/esri/copyright.txt for details. */ import{_ as e}from"../chunks/tslib.es6.js";import t from"../core/Error.js";import{on as s,watch as i,initial as a}from"../core/reactiveUtils.js";import{formatFileSize as n}from"../core/unitFormatUtils.js";import{property as l}from"../core/accessorSupport/decorators/property.js";import{cast as r}from"../core/accessorSupport/decorators/cast.js";import"../core/has.js";import"../core/RandomLCG.js";import{subclass as o}from"../core/accessorSupport/decorators/subclass.js";import d from"./Widget.js";import c from"./Attachments/AttachmentsViewModel.js";import{getIconPath as m,isSupportedImage as h}from"./Attachments/support/attachmentUtils.js";import{loadCalciteComponents as u}from"./support/componentsUtils.js";import{globalCss as p}from"./support/globalCss.js";import{legacyIcon as b}from"./support/legacyIcon.js";import{discardNode as _,storeNode as g,isRTL as f}from"./support/widgetUtils.js";import{messageBundle as v}from"./support/decorators/messageBundle.js";import{tsx as y}from"./support/jsxFactory.js";const A={addButton:!0,addSubmitButton:!0,cancelAddButton:!0,cancelUpdateButton:!0,deleteButton:!0,errorMessage:!0,progressBar:!0,updateButton:!0},w="esri-attachments",F={base:w,loaderContainer:`${w}__loader-container`,loader:`${w}__loader`,container:`${w}__container`,containerList:`${w}__container--list`,containerPreview:`${w}__container--preview`,actions:`${w}__actions`,deleteButton:`${w}__delete-button`,addAttachmentButton:`${w}__add-attachment-button`,errorMessage:`${w}__error-message`,items:`${w}__items`,item:`${w}__item`,itemButton:`${w}__item-button`,itemMask:`${w}__item-mask`,itemMaskIcon:`${w}__item-mask--icon`,itemImage:`${w}__image`,itemImageResizable:`${w}__image--resizable`,itemLabel:`${w}__label`,itemFilename:`${w}__filename`,itemChevronIcon:`${w}__item-chevron-icon`,itemLink:`${w}__item-link`,itemLinkOverlay:`${w}__item-link-overlay`,itemLinkOverlayIcon:`${w}__item-link-overlay-icon`,itemAddIcon:`${w}__item-add-icon`,formNode:`${w}__form-node`,fileFieldset:`${w}__file-fieldset`,fileLabel:`${w}__file-label`,fileName:`${w}__file-name`,fileInput:`${w}__file-input`,metadata:`${w}__metadata`,metadataFieldset:`${w}__metadata-fieldset`,progressBar:`${w}__progress-bar`},k=window.CSS;let M=class extends d{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={...A},this._supportsImageOrientation=k&&k.supports&&k.supports("image-orientation","from-image"),this._addAttachmentForm=null,this._updateAttachmentForm=null}normalizeCtorArgs(e){return e?.viewModel||(e={viewModel:new c,...e}),e}initialize(){this.addHandles([s((()=>this.viewModel?.attachmentInfos),"change",(()=>this.scheduleRender())),s((()=>this.viewModel?.fileInfos),"change",(()=>this.scheduleRender())),i((()=>this.viewModel?.mode),(()=>this._modeChanged()),a)])}loadDependencies(){return u({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 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{...A,...e}}addAttachment(){const{_addAttachmentForm:e,viewModel:s}=this;return this._set("submitting",!0),this._set("error",null),s.addAttachment(e).then((e=>(this._set("submitting",!1),this._set("error",null),s.mode="view",e))).catch((e=>{throw this._set("submitting",!1),this._set("error",new t("attachments:add-attachment",this.messages.addErrorMessage,e)),e}))}deleteAttachment(e){const{viewModel:s}=this;return this._set("submitting",!0),this._set("error",null),s.deleteAttachment(e).then((e=>(this._set("submitting",!1),this._set("error",null),s.mode="view",e))).catch((e=>{throw this._set("submitting",!1),this._set("error",new t("attachments:delete-attachment",this.messages.deleteErrorMessage,e)),e}))}updateAttachment(){const{viewModel:e}=this,{_updateAttachmentForm:s}=this;return this._set("submitting",!0),this._set("error",null),e.updateAttachment(s).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 t("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 y("div",{class:this.classes(F.base,p.widget)},e?this._renderProgressBar():null,"loading"===s?this._renderLoading():this._renderAttachments(),this._renderErrorMessage())}_renderErrorMessage(){const{error:e,visibleElements:t}=this;return e&&t.errorMessage?y("div",{class:F.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 y("div",{class:F.loaderContainer,key:"loader"},y("div",{class:F.loader}))}_renderProgressBar(){return this.visibleElements.progressBar?y("div",{class:F.progressBar,key:"progress-bar"}):null}_renderAddForm(){const{submitting:e,selectedFile:t}=this,s=e||!t,i=this.visibleElements.cancelAddButton?y("button",{bind:this,class:this.classes(p.button,p.buttonTertiary,p.buttonSmall,p.buttonHalf,e&&p.buttonDisabled),disabled:e,onclick:this._cancelForm,type:"button"},this.messages.cancel):null,a=this.visibleElements.addSubmitButton?y("button",{class:this.classes(p.button,p.buttonSecondary,p.buttonSmall,p.buttonHalf,{[p.buttonDisabled]:s}),disabled:s,type:"submit"},this.messages.add):null,n=t?y("span",{class:F.fileName,key:"file-name"},t.name):null,l=y("form",{afterCreate:g,afterRemoved:_,bind:this,"data-node-ref":"_addAttachmentForm",onsubmit:this._submitAddAttachment},y("fieldset",{class:F.fileFieldset},n,y("label",{class:this.classes(F.fileLabel,p.button,p.buttonSecondary)},t?this.messages.changeFile:this.messages.selectFile,y("input",{bind:this,class:F.fileInput,name:"attachment",onchange:this._handleFileInputChange,type:"file"}))),a,i);return y("div",{class:F.formNode,key:"add-form-container"},l)}_renderDetailsForm(e){const{visibleElements:t,viewModel:s,selectedFile:i,submitting:a}=this,{capabilities:l}=s,r=a||!i;let o,d,c,m;i?(o=i.type,d=i.name,c=i.size):e&&"file"in e?(o=e.file.type,d=e.file.name,c=e.file.size):e&&"contentType"in e&&(o=e.contentType,d=e.name,c=e.size,m=e.url);const h=l.editing&&l.operations?.delete&&t.deleteButton?y("button",{bind:this,class:this.classes(p.button,p.buttonSmall,p.buttonTertiary,F.deleteButton,{[p.buttonDisabled]:a}),disabled:a,key:"delete-button",onclick:t=>this._submitDeleteAttachment(t,e),type:"button"},this.messages.delete):void 0,u=l.editing&&l.operations?.update&&t.updateButton?y("button",{class:this.classes(p.button,p.buttonSmall,p.buttonThird,{[p.buttonDisabled]:r}),disabled:r,key:"update-button",type:"submit"},this.messages.update):void 0,b=this.visibleElements.cancelUpdateButton?y("button",{bind:this,class:this.classes(p.button,p.buttonSmall,p.buttonTertiary,p.buttonThird,{[p.buttonDisabled]:a}),disabled:a,key:"cancel-button",onclick:this._cancelForm,type:"button"},this.messages.cancel):void 0,f=l.editing&&l.operations?.update?y("fieldset",{class:F.fileFieldset,key:"file"},y("span",{class:F.fileName,key:"file-name"},d),y("label",{class:this.classes(F.fileLabel,p.button,p.buttonSecondary)},this.messages.changeFile,y("input",{bind:this,class:F.fileInput,name:"attachment",onchange:this._handleFileInputChange,type:"file"}))):void 0,v=y("fieldset",{class:F.metadataFieldset,key:"size"},y("label",null,n(this.messagesUnits,c??0))),A=y("fieldset",{class:F.metadataFieldset,key:"content-type"},y("label",null,o)),w=null!=m?y("a",{class:F.itemLink,href:m,rel:"noreferrer",target:"_blank"},this._renderImageMask(e,400),y("div",{class:F.itemLinkOverlay},y("span",{class:F.itemLinkOverlayIcon},y("calcite-icon",{icon:"launch"})))):this._renderImageMask(e,400),k=y("form",{afterCreate:g,afterRemoved:_,bind:this,"data-node-ref":"_updateAttachmentForm",onsubmit:t=>this._submitUpdateAttachment(t,e)},y("div",{class:F.metadata},v,A),f,y("div",{class:F.actions},h,b,u));return y("div",{class:F.formNode,key:"edit-form-container"},w,k)}_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=m(t),a={[F.itemImageResizable]:s};return y("div",{class:this.classes(F.itemMaskIcon,F.itemMask),key:i},y("img",{alt:e,class:this.classes(a,F.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:l}=e;if(!s||!h(i))return this._renderGenericImageMask(a,i);const r=this._getCSSTransform(e),o=r?{transform:r,"image-orientation":"none"}:{},d=`${l}${l?.includes("?")?"&":"?"}w=${t}&s=${n}`,c={[F.itemImageResizable]:s};return y("div",{class:this.classes(F.itemMask),key:d},y("img",{alt:a,class:this.classes(c,F.itemImage),src:d,styles:o,title:a}))}_renderFile(e){const{file:t}=e;return y("li",{class:F.item,key:t},y("button",{"aria-label":this.messages.attachmentDetails,bind:this,class:F.itemButton,key:"details-button",onclick:()=>this._startEditFile(e),title:this.messages.attachmentDetails,type:"button"},this._renderImageMask(e),y("label",{class:F.itemLabel},y("span",{class:F.itemFilename},t.name||this.messages.noTitle),y("span",{"aria-hidden":"true",class:this.classes(F.itemChevronIcon,f(this.container)?b.left:b.right)}))))}_renderAttachmentInfo({attachmentInfo:e,displayType:t}){const{viewModel:s,effectiveDisplayType:i}=this,{capabilities:a,supportsResizeAttachments:n}=s,{contentType:l,name:r,url:o}=e,d=this._renderImageMask(e,"list"===t?48:400),c=a.editing?y("span",{"aria-hidden":"true",class:this.classes(F.itemChevronIcon,f(this.container)?b.left:b.right)}):null,m=[d,"preview"===i&&n&&h(l)?null:y("label",{class:F.itemLabel},y("span",{class:F.itemFilename},r||this.messages.noTitle),c)],u=a.editing?y("button",{"aria-label":this.messages.attachmentDetails,bind:this,class:F.itemButton,"data-attachment-info-id":e.id,key:"details-button",onclick:()=>this._startEditAttachment(e),title:this.messages.attachmentDetails,type:"button"},m):y("a",{class:F.itemButton,href:o??void 0,key:"details-link",rel:"noreferrer",target:"_blank"},m);return y("li",{class:F.item,key:e},u)}_renderAttachmentContainer(){const{effectiveDisplayType:e,viewModel:t,visibleElements:s}=this,{attachmentInfos:i,capabilities:a,fileInfos:n}=t,l=!!i?.length,r=!!n?.length,o={[F.containerList]:"preview"!==e,[F.containerPreview]:"preview"===e},d=a.editing&&a.operations?.add&&s.addButton?y("button",{bind:this,class:this.classes(p.button,p.buttonTertiary,F.addAttachmentButton),onclick:()=>this._startAddAttachment(),type:"button"},y("span",{"aria-hidden":"true",class:this.classes(F.itemAddIcon,b.plus)}),this.messages.add):void 0,c=l?y("ul",{class:F.items,key:"attachments-list"},i.toArray().map((t=>this._renderAttachmentInfo({attachmentInfo:t,displayType:e})))):void 0,m=r?y("ul",{class:F.items,key:"file-list"},n.toArray().map((e=>this._renderFile(e)))):void 0,h=r||l?void 0:y("div",{class:p.empty},this.messages.noAttachments);return y("div",{class:this.classes(F.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([l()],M.prototype,"capabilities",null),e([l()],M.prototype,"displayType",void 0),e([l({readOnly:!0})],M.prototype,"effectiveDisplayType",null),e([l()],M.prototype,"graphic",null),e([l()],M.prototype,"icon",null),e([l()],M.prototype,"label",null),e([l(),v("esri/widgets/Attachments/t9n/Attachments")],M.prototype,"messages",void 0),e([l(),v("esri/core/t9n/Units")],M.prototype,"messagesUnits",void 0),e([l({readOnly:!0})],M.prototype,"selectedFile",void 0),e([l({readOnly:!0})],M.prototype,"submitting",void 0),e([l({readOnly:!0})],M.prototype,"error",void 0),e([l({type:c})],M.prototype,"viewModel",void 0),e([l()],M.prototype,"visibleElements",void 0),e([r("visibleElements")],M.prototype,"castVisibleElements",null),M=e([o("esri.widgets.Attachments")],M);export{M as default};