@sankhyalabs/ezui 1.1.40 → 1.1.44

package/dist/collection/components/ez-upload/ez-upload.js

@@ -1,136 +1,124 @@
-import { Component, Host, h, Prop, Method, Event } from '@stencil/core';
+import { Component, h, Prop, Element, Event, Method, Watch, forceUpdate } from '@stencil/core';
+import Application from '../../utils/Application';
+import RemoteFile from './RemoteFile';
 export class EzUpload {
-  fileListChange() {
-    this.ezChange.emit({ value: this.value });
+  constructor() {
+    this._filePointers = new Map();
+    /**
+    * Deixa o campo disponível ou não para digitação.
+    */
+    this.enabled = true;
   }
-  async addFiles(files) {
-    Array.prototype.forEach.call(files, this.addFile.bind(this));
+  changeValue(newValue) {
+    if (newValue !== this._updatingValue) {
+      this._filePointers.forEach(f => {
+        if (this.isRemoteFile(f)) {
+          f.abortUpload();
+        }
+      });
+      this._filePointers = new Map();
+      this.updateFilePointers();
+    }
+    this._updatingValue = undefined;
   }
-  addFile(file) {
-    this.errorMessage = undefined;
-    if (this.validateFile(file)) {
-      if (this.target) {
-        this._uploadFile(file);
+  updateFilePointers() {
+    if (this.value) {
+      this.value.forEach(ezFile => this._filePointers.set(ezFile.name, ezFile));
+    }
+  }
+  normalizeRequestHeaders() {
+    this._requestHeaders = new Map();
+    if (typeof this.requestheaders == 'string') {
+      try {
+        this.requestheaders = JSON.parse(this.requestheaders);
       }
-      else {
-        this.errorMessage = "Endereço de upload não informado";
-        alert(this.errorMessage);
+      catch (e) {
+        this.requestheaders = undefined;
       }
     }
-    else {
-      if (this.errorMessage && this.errorMessage.length > 0) {
-        alert(this.errorMessage);
-      }
+    for (var key in this.requestheaders) {
+      this._requestHeaders.set(key, this.requestheaders[key]);
     }
   }
-  validateFile(file) {
-    this.errorMessage = '';
-    let isValid = true;
-    if (this.maxFileSize >= 0 && file.size > this.maxFileSize) {
-      this.errorMessage = 'O tamanho máximo dos arquivos é de ' + this.formatBytes(this.maxFileSize);
-      isValid = false;
-    }
-    this.validatedEvent.emit({ isValid: isValid, fileName: file.name });
-    return isValid;
+  async addFiles(files) {
+    Array.prototype.forEach.call(files, this.addFile.bind(this));
   }
-  _uploadFile(file) {
-    const xhr = (file.xhr = this._createXhr());
-    const newValue = this.value ? [...this.value] : [];
-    newValue.push({ name: file.name, size: file.size, xhr: file.xhr });
-    let stalledId;
-    xhr.upload.onprogress = (e) => {
-      clearTimeout(stalledId);
-      const loaded = e.loaded, total = e.total, progress = ~~((loaded / total) * 100);
-      let viewFile = newValue.find(f => f.name === file.name);
-      if (viewFile) {
-        viewFile.progress = progress;
-      }
-    };
-    xhr.onreadystatechange = () => {
-      this.errorMessage = '';
-      if (xhr.readyState == 4) {
-        clearTimeout(stalledId);
-        file.indeterminate = file.uploading = false;
-        if (xhr.status === 0) {
-          // this.errorMessage = "Servidor indisponível";
-        }
-        else if (xhr.status >= 500) {
-          this.errorMessage = "Erro inesperado no servidor";
-        }
-        else if (xhr.status >= 400) {
-          this.errorMessage = "Operação não permitida";
-        }
-        if (this.errorMessage && this.errorMessage.length > 0) {
-          //TODO
-          // Conferir com o time de UX um estado de erro ou remoção da lista
-          // this.removeFile(file.name);
-          alert(this.errorMessage);
-        }
-        else {
-          if (xhr.response) {
-            let response = JSON.parse(xhr.response);
-            response.forEach(element => {
-              let viewFile = newValue.find(f => f.name === this.decode_utf8(element.name));
-              if (viewFile) {
-                viewFile.progress = undefined;
-                //Validar estado de erro com UX
-                viewFile.error = false;
-                delete viewFile.xhr;
-                viewFile.downloadURL = element.downloadURL;
-                viewFile.lastModifiedDate = element.lastModifiedDate;
-                viewFile.properties = element.properties;
-              }
-              else {
-                //caso não encontre o elemento na lista
-              }
-            });
-            this.value = newValue;
-            this.fileListChange();
-          }
-          else {
-            let viewFile = newValue.find(f => f.name === file.name);
-            viewFile.progress = undefined;
-            //Validar estado de erro com UX
-            viewFile.error = true;
+  async addFile(file) {
+    const oldFile = this._filePointers.get(file.name);
+    if (oldFile) {
+      Application.confirm("Substituir arquivo", `Já existe um arquivo chamado "${file.name}". Deseja substituí-lo?`)
+        .then(ok => {
+        if (ok) {
+          if (this.isRemoteFile(oldFile)) {
+            oldFile.abortUpload();
           }
+          this.doAddFile(file);
         }
-      }
-    };
-    xhr.ontimeout = () => {
-      if (this.errorMessage && this.errorMessage.length > 0) {
-        this.errorMessage.concat(" / Tempo expirado");
-        this.removeFile(file.name);
-        alert(this.errorMessage);
-      }
-    };
-    const formData = new FormData();
-    formData.append(this.formDataName, file, file.name);
-    xhr.open("POST", this.target, true);
-    this._configureXhr(xhr);
-    file.status = "conectando";
-    file.uploading = file.indeterminate = true;
-    file.complete = file.abort = file.error = file.held = false;
-    xhr.send(formData);
+      });
+    }
+    else {
+      this.doAddFile(file);
+    }
+  }
+  async doAddFile(file) {
+    if (this.validateFile(file)) {
+      const uploadingFile = new RemoteFile(file);
+      this._filePointers.set(file.name, uploadingFile);
+      uploadingFile.upload(this.urlupload, this._requestHeaders, (file) => this.updateFeedback(file))
+        .then((files) => files.forEach(ezFile => this.finishUpload(ezFile)))
+        .catch(msg => this.showError(msg));
+      forceUpdate(this);
+    }
   }
-  _createXhr() {
-    return new XMLHttpRequest();
+  finishUpload(ezFile) {
+    this._filePointers.set(ezFile.name, ezFile);
+    this.updateValue();
   }
-  _configureXhr(xhr) {
-    if (typeof this.headers == 'string') {
-      try {
-        this.headers = JSON.parse(this.headers);
+  updateValue() {
+    this._updatingValue = [];
+    this._filePointers.forEach(f => {
+      if (!this.isRemoteFile(f)) {
+        this._updatingValue.push(f);
       }
-      catch (e) {
-        this.headers = undefined;
+    });
+    this.value = this._updatingValue;
+    this.ezChange.emit(this.value);
+  }
+  buildProgressId(uploading) {
+    let sanitizedName = uploading.name.replace(/[^a-z0-9_]/gi, '_');
+    return `PROGRESS_${sanitizedName}_${uploading.file.lastModified}`;
+  }
+  updateFeedback(uf) {
+    window.requestAnimationFrame(() => {
+      if (this._host) {
+        const progress = this._host.shadowRoot.querySelector('#' + this.buildProgressId(uf));
+        if (progress) {
+          progress.value = uf.progress;
+        }
       }
+    });
+  }
+  validateFile(file) {
+    if (this.maxfiles > 0 && this._filePointers.size >= this.maxfiles) {
+      this.showError(`A quantidade máxima de arquivos é ${this.maxfiles}.`);
+      return false;
+    }
+    if (file.size === 0) {
+      this.showError(`Erro de permissão: O arquivo "${file.name}" não pode ser enviado.`);
+      return false;
     }
-    for (var key in this.headers) {
-      xhr.setRequestHeader(key, this.headers[key]);
+    if (!this.urlupload) {
+      this.showError("Endereço de upload não informado");
+      return false;
     }
-    if (this.timeout) {
-      xhr.timeout = this.timeout;
+    if (this.maxfilesize >= 0 && file.size > this.maxfilesize) {
+      this.showError("O tamanho máximo dos arquivos é de " + this.formatBytes(this.maxfilesize));
+      return false;
     }
-    xhr.withCredentials = this.withCredentials;
+    return true;
+  }
+  showError(message) {
+    Application.alert("Enviando arquivo", message);
   }
   formatBytes(bytes, decimals = 1) {
     if (bytes === 0)
@@ -142,118 +130,114 @@ export class EzUpload {
     return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
   }
   onFileInputChange(event) {
-    this.addFiles(event.target.files);
+    const input = event.target;
+    this.addFiles(Array.from(input.files));
     this._fileInput.value = '';
   }
-  /*componentWillLoad() {
-    if (this.fileList?.length > 0) {
-      this.fileList.forEach(item => {
-        if (item.size) {
-          item.strSize = this.formatBytes(item.size);
-        }
-      })
-      this.fileList = [...this.fileList];
+  isRemoteFile(item) {
+    return "file" in item;
+  }
+  removeFromList(name) {
+    this._filePointers.delete(name);
+    this.updateValue();
+  }
+  removeFile(name) {
+    const item = this._filePointers.get(name);
+    if (this.isRemoteFile(item)) {
+      item.abortUpload();
+      this.removeFromList(name);
+    }
+    else {
+      if (this.urldelete) {
+        const uploadingFile = new RemoteFile(null);
+        this._filePointers.set(item.name, uploadingFile);
+        uploadingFile.delete(item, this.urldelete, null)
+          .then(_ok => this.removeFromList(name))
+          .catch(msg => this.showError(msg));
+      }
+      else {
+        this.removeFromList(name);
+      }
+    }
+  }
+  openFilesDialog() {
+    if (this.enabled) {
+      if (this.maxfiles > 0 && this._filePointers.size >= this.maxfiles) {
+        this.showError(`A quantidade máxima de arquivos é ${this.maxfiles}.`);
+      }
+      else {
+        this._fileInput.click();
+      }
     }
-  }*/
-  decode_utf8(s) {
-    return decodeURIComponent(escape(s));
   }
   componentDidLoad() {
-    if (this.dropZone && window.FileList && window.File) {
-      this.dropZone.addEventListener('dragover', event => {
+    if (this.enabled && this._dropZone && window.FileList && window.File) {
+      this._dropZone.addEventListener('dragover', event => {
         event.stopPropagation();
         event.preventDefault();
         event.dataTransfer.dropEffect = 'copy';
       });
-      this.dropZone.addEventListener('drop', event => {
+      this._dropZone.addEventListener('drop', event => {
         event.stopPropagation();
         event.preventDefault();
-        this.addFiles(event.dataTransfer.files);
+        this.addFiles(Array.from(event.dataTransfer.files));
       });
     }
   }
-  removeFile(name, xhr, downloadURL) {
-    if (xhr) {
-      xhr.abort();
+  componentWillRender() {
+    if (this.value) {
+      if (this._filePointers.size < this.value.length) {
+        this.updateFilePointers();
+      }
     }
-    if (downloadURL) {
-      this.removeFileFromServer(name, downloadURL);
+  }
+  /*
+  background--disabled
+  text--disabled
+  fill--disabled
+  mouse-poiter--disabled
+   */
+  render() {
+    return (h("div", { ref: (el) => this._dropZone = el, class: this.evalDisabledClass('iu', 'background--disabled') },
+      this.label ? h("label", { class: this.evalDisabledClass('iu__label', 'text--disabled'), title: this.label }, this.label) : null,
+      h("div", { class: "iu__container", onClick: () => this.openFilesDialog() },
+        h("div", { class: this.evalDisabledClass('iu__icon-label', 'mouse-pointer--disabled') },
+          h("button", { class: "iu__file-icon", disabled: !this.enabled }),
+          h("div", { class: this.evalDisabledClass('text text--center text--medium text--primary', 'text--disabled') }, this.enabled ? 'Arraste e solte ou clique para adicionar arquivos' : 'Somente leitura')),
+        this.buildFooter()),
+      h("input", { ref: (el) => this._fileInput = el, onChange: (ev) => this.onFileInputChange(ev), type: "file", multiple: true, hidden: true })));
+  }
+  buildFooter() {
+    if (this._filePointers.size === 0) {
+      return null;
     }
-    this.value = [...this.value.filter(function (value) { return value.name !== name; })];
-    this.fileListChange();
+    const items = [];
+    this._filePointers.forEach(item => items.push(this.buildFileItem(item)));
+    return (h("div", { class: "iu__footer" }, items));
   }
-  removeFileFromServer(name, donwloadURL) {
-    const xhr = this._createXhr();
-    this.errorMessage = '';
-    let stalledId;
-    xhr.onreadystatechange = () => {
-      if (xhr.readyState == 4) {
-        clearTimeout(stalledId);
-        if (xhr.status === 0) {
-          this.errorMessage = "Servidor indisponível";
-        }
-        else if (xhr.status >= 500) {
-          this.errorMessage = "Erro inesperado no servidor";
-        }
-        else if (xhr.status >= 400) {
-          this.errorMessage = "Operação não permitida";
-        }
-        if (this.errorMessage && this.errorMessage.length > 0) {
-          //TODO
-          // Conferir com o time de UX um estado de erro ou remoção da lista
-          // this.removeFile(file.name);
-          alert(this.errorMessage);
-        }
-      }
-    };
-    xhr.ontimeout = () => {
-      if (this.errorMessage && this.errorMessage.length > 0) {
-        alert(this.errorMessage);
-      }
-    };
-    const body = JSON.stringify({
-      name: name,
-      donwloadURL: donwloadURL,
-    });
-    xhr.open("DELETE", this.target, true);
-    xhr.setRequestHeader('Content-Type', 'application/json');
-    this._configureXhr(xhr);
-    xhr.send(body);
+  buildFileItem(item) {
+    const fileName = item.name;
+    const progress = Number(item['progress']);
+    const downloadURL = item['downloadURL'];
+    const label = `${fileName} (${this.formatBytes(item.size)})`;
+    return (h("div", { class: "iu__item", key: fileName, onClick: evt => evt.stopPropagation() },
+      h("div", { class: "iu__item-label modificador" },
+        h("div", { title: label, class: "col--stretch align--middle file__name text text--primary text--small text--ellipsis align--middle" }, downloadURL ? h("a", { href: downloadURL, download: true }, label) : label)),
+      isNaN(progress)
+        ?
+          null
+        :
+          h("div", { class: "col col--sd-4 col--stretch align--middle" },
+            h("progress", { id: this.buildProgressId(item), value: progress, max: "100" })),
+      this.enabled
+        ?
+          h("div", { class: "col col--stretch align--middle" },
+            h("button", { class: "btn-cancel ", onClick: () => this.removeFile(fileName) }))
+        :
+          null));
   }
-  render() {
-    var _a;
-    return (h(Host, null,
-      h("slot", null,
-        h("div", { ref: (el) => this.dropZone = el, class: "iu" },
-          h("div", { class: "iu__container" },
-            h("div", { onClick: () => this._fileInput.click(), class: "iu__icon-label" },
-              h("button", { class: "iu__file-icon" }),
-              h("div", { class: "text text--center text--medium text--primary" }, "Arraste e solte ou clique para anexar arquivo")),
-            ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) > 0 ?
-              h("div", { class: "iu__footer" }, this.value.map(file => {
-                return (h("div", { class: "iu__item" },
-                  h("div", { class: "iu__item-label" + (file.progress ? " modificador " : " modificador ") }, file.downloadURL ?
-                    h("div", { title: file.name + "(" + this.formatBytes(file.size) + ")", class: "file__name text text--primary text--small text--ellipsis align--middle" },
-                      h("a", { href: file.downloadURL, download: true },
-                        file.name,
-                        " (",
-                        this.formatBytes(file.size),
-                        ")"))
-                    :
-                      h("div", { title: file.name + "(" + this.formatBytes(file.size) + ")", class: "col--stretch align--middle file__name text text--primary text--small text--ellipsis align--middle " },
-                        file.name,
-                        " (",
-                        this.formatBytes(file.size),
-                        ")")),
-                  file.progress ?
-                    h("div", { class: "col col--sd-4 col--stretch align--middle" },
-                      h("progress", { value: file.progress, max: "100" }))
-                    : undefined,
-                  h("div", { class: "col col--stretch align--middle" },
-                    h("button", { class: "btn-cancel ", onClick: () => this.removeFile(file.name, file.xhr) }))));
-              }))
-              : undefined))),
-      h("input", { ref: (el) => this._fileInput = el, type: "file", id: "fileInput", hidden: true, onChange: (ev) => this.onFileInputChange(ev), multiple: true })));
+  evalDisabledClass(regularClasses, disabledClass) {
+    return this.enabled ? regularClasses : `${regularClasses} ${disabledClass}`;
   }
   static get is() { return "ez-upload"; }
   static get encapsulation() { return "shadow"; }
@@ -264,41 +248,42 @@ export class EzUpload {
     "$": ["ez-upload.css"]
   }; }
   static get properties() { return {
-    "maxFileSize": {
-      "type": "number",
+    "label": {
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "number",
-        "resolved": "number",
+        "original": "string",
+        "resolved": "string",
         "references": {}
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Define se o tamanho m\u00E1ximo (em bytes) de cada arquivo que pode ser transferido"
+        "text": "Label \u00E9 o t\u00EDtulo do campo"
       },
-      "attribute": "max-file-size",
-      "reflect": true
+      "attribute": "label",
+      "reflect": false
     },
-    "headers": {
-      "type": "any",
+    "enabled": {
+      "type": "boolean",
       "mutable": false,
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "boolean",
+        "resolved": "boolean",
         "references": {}
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Headers da requisi\u00E7\u00E3o XMLHttpRequest que ser\u00E1 montada para fazer o upload"
+        "text": "Deixa o campo dispon\u00EDvel ou n\u00E3o para digita\u00E7\u00E3o."
       },
-      "attribute": "headers",
-      "reflect": true
+      "attribute": "enabled",
+      "reflect": false,
+      "defaultValue": "true"
     },
-    "timeout": {
+    "maxfilesize": {
       "type": "number",
       "mutable": false,
       "complexType": {
@@ -310,29 +295,46 @@ export class EzUpload {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Define o tempo permitido para realizar a requisi\u00E7\u00E3o, ap\u00F3s esse per\u00EDodo \u00E9 disparado um erro"
+        "text": "Define o tamanho m\u00E1ximo (em bytes) de cada arquivo que pode ser transferido"
       },
-      "attribute": "timeout",
-      "reflect": true
+      "attribute": "maxfilesize",
+      "reflect": false
     },
-    "withCredentials": {
-      "type": "boolean",
+    "maxfiles": {
+      "type": "number",
       "mutable": false,
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
+        "original": "number",
+        "resolved": "number",
         "references": {}
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Define se a requisi\u00E7\u00E3o deve ou n\u00E3o utilizar credenciais"
+        "text": "Define um limite para a quantidade de arquivos"
       },
-      "attribute": "with-credentials",
-      "reflect": true
+      "attribute": "maxfiles",
+      "reflect": false
     },
-    "formDataName": {
+    "requestheaders": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Headers para a requisi\u00E7\u00E3o Http"
+      },
+      "attribute": "requestheaders",
+      "reflect": false
+    },
+    "urlupload": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -344,12 +346,12 @@ export class EzUpload {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Define a propriedade name do Content-Disposition"
+        "text": "Define a URL de upload"
       },
-      "attribute": "form-data-name",
-      "reflect": true
+      "attribute": "urlupload",
+      "reflect": false
     },
-    "target": {
+    "urldelete": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -361,22 +363,22 @@ export class EzUpload {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Define a URL do servidor de destino"
+        "text": "Define a URL do dele\u00E7\u00E3o"
       },
-      "attribute": "target",
-      "reflect": true
+      "attribute": "urldelete",
+      "reflect": false
     },
     "value": {
       "type": "unknown",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
-        "original": "Array<FileType>",
-        "resolved": "FileType[]",
+        "original": "Array<EzFile>",
+        "resolved": "EzFile[]",
         "references": {
           "Array": {
             "location": "global"
           },
-          "FileType": {
+          "EzFile": {
             "location": "local"
           }
         }
@@ -390,51 +392,6 @@ export class EzUpload {
     }
   }; }
   static get events() { return [{
-      "method": "validatedEvent",
-      "name": "validatedEvent",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Evento emitido ao validar um arquivo"
-      },
-      "complexType": {
-        "original": "{ isValid: boolean, fileName: string }",
-        "resolved": "{ isValid: boolean; fileName: string; }",
-        "references": {}
-      }
-    }, {
-      "method": "initUploadEvent",
-      "name": "initUploadEvent",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Evento emitido ao iniciar o upload de um arquivo"
-      },
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      }
-    }, {
-      "method": "finishedUploadEvent",
-      "name": "finishedUploadEvent",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Evento emitido ao finalizar o upload de um arquivo"
-      },
-      "complexType": {
-        "original": "{ isValid: boolean, fileName: string }",
-        "resolved": "{ isValid: boolean; fileName: string; }",
-        "references": {}
-      }
-    }, {
       "method": "ezChange",
       "name": "ezChange",
       "bubbles": true,
@@ -445,13 +402,13 @@ export class EzUpload {
         "text": "Evento emitido ao finalizar o upload de um arquivo"
       },
       "complexType": {
-        "original": "{ value: Array<FileType> }",
-        "resolved": "{ value: FileType[]; }",
+        "original": "Array<EzFile>",
+        "resolved": "EzFile[]",
         "references": {
           "Array": {
             "location": "global"
           },
-          "FileType": {
+          "EzFile": {
             "location": "local"
           }
         }
@@ -460,7 +417,7 @@ export class EzUpload {
   static get methods() { return {
     "addFiles": {
       "complexType": {
-        "signature": "(files: any) => Promise<void>",
+        "signature": "(files: Array<File>) => Promise<void>",
         "parameters": [{
             "tags": [],
             "text": ""
@@ -468,6 +425,12 @@ export class EzUpload {
         "references": {
           "Promise": {
             "location": "global"
+          },
+          "Array": {
+            "location": "global"
+          },
+          "File": {
+            "location": "global"
           }
         },
         "return": "Promise<void>"
@@ -478,4 +441,12 @@ export class EzUpload {
       }
     }
   }; }
+  static get elementRef() { return "_host"; }
+  static get watchers() { return [{
+      "propName": "value",
+      "methodName": "changeValue"
+    }, {
+      "propName": "requestheaders",
+      "methodName": "normalizeRequestHeaders"
+    }]; }
 }