@uploadcare/file-uploader 1.15.0-alpha.14 → 1.15.0-alpha.16

package/blocks/FileItem/FileItem.d.ts

@@ -1,21 +1,6 @@
-export class FileItem extends UploaderBlock {
-    /** @private */
-    private _entrySubs;
-    /**
-     * @private
-     * @type {import('../../abstract/uploadEntrySchema.js').UploadEntryTypedData | null}
-     */
-    private _entry;
+export class FileItem extends FileItemConfig {
     /** @private */
     private _renderedOnce;
-    /**
-     * @private
-     * @template {any[]} A
-     * @template {(entry: import('../../abstract/uploadEntrySchema.js').UploadEntryTypedData, ...args: A) => any} T
-     * @param {T} fn
-     * @returns {(...args: A) => ReturnType<T>}
-     */
-    private _withEntry;
     init$: {
         uid: string;
         itemName: string;
@@ -62,12 +47,6 @@ export class FileItem extends UploaderBlock {
     private _calculateState;
     /** @private */
     private _debouncedCalculateState;
-    /**
-     * @template {import('../../abstract/uploadEntrySchema.js').UploadEntryKeys} K
-     * @param {K} prop_
-     * @param {(value: import('../../abstract/uploadEntrySchema.js').UploadEntryData[K]) => void} handler_
-     */
-    _subEntry: (prop_: K, handler_: (value: import("../../abstract/uploadEntrySchema.js").UploadEntryData[K]) => void) => void;
     _updateHint: (...args: any[]) => void;
     /**
      * @private
@@ -92,5 +71,5 @@ export namespace FileItem {
     let template: string;
     let activeInstances: Set<any>;
 }
-import { UploaderBlock } from '../../abstract/UploaderBlock.js';
+import { FileItemConfig } from './FileItemConfig.js';
 //# sourceMappingURL=FileItem.d.ts.map

package/blocks/FileItem/FileItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileItem.d.ts","sourceRoot":"","sources":["FileItem.js"],"names":[],"mappings":"AAiBA;IAIE,eAAe;IACf,mBAAuB;IACvB;;;OAGG;IACH,eAAc;IAEd,eAAe;IACf,sBAAsB;IAEtB;;;;;;OAMG;IACH,mBAYC;IAKC;;;;;;;;;;;;;;;;;;;;;;;+CAvCS,gBAAU;mCAIjB,gBAAU;6BAImB,2BAA2B;;wCAS5C,wCACE;;;;;;MAoDf;IAGH,eAQC;IAED;;;OAGG;IACH,0BAUC;IAPC,qCAA2C;IAC3C,wCAA0C;IAQ5C,eAAe;IACf,wBAYG;IAEH,eAAe;IACf,iCAA0E;IAE1E;;;;OAIG;IACH,YAAa,OAHF,CAGO,EAAE,UAFT,CAAC,KAAK,EAAE,OAAO,qCAAqC,EAAE,eAAe,CAAC,CAAC,CAAC,KAAK,IAE5D,UAgBP;IAErB,sCAeE;IAEF;;;OAGG;IACH,uBAiCC;IAyDD,uCA+BE;IAaA,eAAe;IACf,kBAEE;IAUJ;;;MAEC;IAED;;;OAGG;IACH,uBAEC;IAED,0CAqGG;CACJ;;;;;8BAnb6B,iCAAiC"}
+{"version":3,"file":"FileItem.d.ts","sourceRoot":"","sources":["FileItem.js"],"names":[],"mappings":"AAiBA;IAIE,eAAe;IACf,sBAAsB;IAKpB;;;;;;;;;;;;;;;;;;;;;;;+CAVoB,gBAAU;mCAIlB,gBACR;6BAMM,2BAET;;wCAMC,wCACK;;;;;;MAqBN;IAGH,eAQC;IAED;;;OAGG;IACH,0BAUC;IAPC,qCAA2C;IAC3C,wCAA0C;IAQ5C,eAAe;IACf,wBAYG;IAEH,eAAe;IACf,iCAA0E;IAE1E,sCAeE;IAEF;;;OAGG;IACH,uBAiCC;IAyDD,uCA+BE;IAaA,eAAe;IACf,kBAEE;IAUJ;;;MAEC;IAED;;;OAGG;IACH,uBAEC;IAED,0CAqGG;CACJ;;;;;+BA3X8B,qBAAqB"}

package/blocks/FileItem/FileItem.js

@@ -2,11 +2,11 @@
 import { shrinkFile } from '@uploadcare/image-shrink';
 import { CancelError, UploadcareError, uploadFile } from '@uploadcare/upload-client';
 import { ActivityBlock } from '../../abstract/ActivityBlock.js';
-import { UploaderBlock } from '../../abstract/UploaderBlock.js';
 import { debounce } from '../utils/debounce.js';
 import { parseShrink } from '../../utils/parseShrink.js';
 import { UploadSource } from '../utils/UploadSource.js';
 import { throttle } from '../utils/throttle.js';
+import { FileItemConfig } from './FileItemConfig.js';
 
 const FileItemState = Object.freeze({
   FINISHED: Symbol('FINISHED'),
@@ -15,42 +15,13 @@ const FileItemState = Object.freeze({
   IDLE: Symbol('IDLE'),
 });
 
-export class FileItem extends UploaderBlock {
+export class FileItem extends FileItemConfig {
   couldBeCtxOwner = true;
   pauseRender = true;
 
-  /** @private */
-  _entrySubs = new Set();
-  /**
-   * @private
-   * @type {import('../../abstract/uploadEntrySchema.js').UploadEntryTypedData | null}
-   */
-  _entry = null;
-
   /** @private */
   _renderedOnce = false;
 
-  /**
-   * @private
-   * @template {any[]} A
-   * @template {(entry: import('../../abstract/uploadEntrySchema.js').UploadEntryTypedData, ...args: A) => any} T
-   * @param {T} fn
-   * @returns {(...args: A) => ReturnType<T>}
-   */
-  _withEntry(fn) {
-    const wrapperFn = /** @type {(...args: A) => ReturnType<T>} */ (
-      (...args) => {
-        const entry = this._entry;
-        if (!entry) {
-          console.warn('No entry found');
-          return;
-        }
-        return fn(entry, ...args);
-      }
-    );
-    return wrapperFn;
-  }
-
   constructor() {
     super();
 
@@ -132,29 +103,6 @@ export class FileItem extends UploaderBlock {
   /** @private */
   _debouncedCalculateState = debounce(this._calculateState.bind(this), 100);
 
-  /**
-   * @template {import('../../abstract/uploadEntrySchema.js').UploadEntryKeys} K
-   * @param {K} prop_
-   * @param {(value: import('../../abstract/uploadEntrySchema.js').UploadEntryData[K]) => void} handler_
-   */
-  _subEntry = (prop_, handler_) =>
-    this._withEntry(
-      /**
-       * @template {import('../../abstract/uploadEntrySchema.js').UploadEntryKeys} K
-       * @param {import('../../abstract/uploadEntrySchema.js').UploadEntryTypedData} entry
-       * @param {K} prop
-       * @param {(value: import('../../abstract/uploadEntrySchema.js').UploadEntryData[K]) => void} handler
-       */
-      (entry, prop, handler) => {
-        let sub = entry.subscribe(prop, (value) => {
-          if (this.isConnected) {
-            handler(value);
-          }
-        });
-        this._entrySubs.add(sub);
-      },
-    )(prop_, handler_);
-
   _updateHint = this._withEntry(
     throttle((entry) => {
       const source = entry.getValue('source');

package/blocks/FileItem/FileItemConfig.d.ts

@@ -0,0 +1,26 @@
+export class FileItemConfig extends UploaderBlock {
+    /** @protected */
+    protected _entrySubs: Set<any>;
+    /**
+     * @type {import('../../abstract/uploadEntrySchema.js').UploadEntryTypedData | null}
+     * @protected
+     */
+    protected _entry: import("../../abstract/uploadEntrySchema.js").UploadEntryTypedData | null;
+    /**
+     * @template {any[]} A
+     * @template {(entry: import('../../abstract/uploadEntrySchema.js').UploadEntryTypedData, ...args: A) => any} T
+     * @param {T} fn
+     * @returns {(...args: A) => ReturnType<T>}
+     * @protected
+     */
+    protected _withEntry<A extends any[], T extends (entry: import("../../abstract/uploadEntrySchema.js").UploadEntryTypedData, ...args: A) => any>(fn: T): (...args: A) => ReturnType<T>;
+    /**
+     * @template {import('../../abstract/uploadEntrySchema.js').UploadEntryKeys} K
+     * @param {K} prop_
+     * @param {(value: import('../../abstract/uploadEntrySchema.js').UploadEntryData[K]) => void} handler_
+     * @protected
+     */
+    protected _subEntry: (prop_: K, handler_: (value: import("../../abstract/uploadEntrySchema.js").UploadEntryData[K]) => void) => void;
+}
+import { UploaderBlock } from '../../abstract/UploaderBlock.js';
+//# sourceMappingURL=FileItemConfig.d.ts.map

package/blocks/FileItem/FileItemConfig.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileItemConfig.d.ts","sourceRoot":"","sources":["FileItemConfig.js"],"names":[],"mappings":"AAIA;IACE,iBAAiB;IACjB,+BAAuB;IAEvB;;;OAGG;IACH,kBAHU,OAAO,qCAAqC,EAAE,oBAAoB,GAAG,IAAI,CAGrE;IAEd;;;;;;OAMG;IACH,qBANqB,CAAC,SAAR,GAAG,EAAG,EAC0F,CAAC,SAAlG,CAAE,KAAK,EAAE,OAAO,qCAAqC,EAAE,oBAAoB,EAAE,GAAG,IAAI,EAAE,CAAC,KAAK,GAAI,MAClG,CAAC,GACC,CAAC,GAAG,IAAI,EAAE,CAAC,KAAK,UAAU,CAAC,CAAC,CAAC,CAezC;IAED;;;;;OAKG;IACH,sBAAa,OAJF,CAIO,EAAE,UAHT,CAAC,KAAK,EAAE,OAAO,qCAAqC,EAAE,eAAe,CAAC,CAAC,CAAC,KAAK,IAG5D,UAgBP;CAMtB;8BA7D6B,iCAAiC"}

package/blocks/FileItem/FileItemConfig.js

@@ -0,0 +1,64 @@
+//@ts-check
+
+import { UploaderBlock } from '../../abstract/UploaderBlock.js';
+
+export class FileItemConfig extends UploaderBlock {
+  /** @protected */
+  _entrySubs = new Set();
+
+  /**
+   * @type {import('../../abstract/uploadEntrySchema.js').UploadEntryTypedData | null}
+   * @protected
+   */
+  _entry = null;
+
+  /**
+   * @template {any[]} A
+   * @template {(entry: import('../../abstract/uploadEntrySchema.js').UploadEntryTypedData, ...args: A) => any} T
+   * @param {T} fn
+   * @returns {(...args: A) => ReturnType<T>}
+   * @protected
+   */
+  _withEntry(fn) {
+    const wrapperFn = /** @type {(...args: A) => ReturnType<T>} */ (
+      (...args) => {
+        const entry = this._entry;
+        if (!entry) {
+          console.warn('No entry found');
+          return;
+        }
+        return fn(entry, ...args);
+      }
+    );
+    return wrapperFn;
+  }
+
+  /**
+   * @template {import('../../abstract/uploadEntrySchema.js').UploadEntryKeys} K
+   * @param {K} prop_
+   * @param {(value: import('../../abstract/uploadEntrySchema.js').UploadEntryData[K]) => void} handler_
+   * @protected
+   */
+  _subEntry = (prop_, handler_) =>
+    this._withEntry(
+      /**
+       * @template {import('../../abstract/uploadEntrySchema.js').UploadEntryKeys} K
+       * @param {import('../../abstract/uploadEntrySchema.js').UploadEntryTypedData} entry
+       * @param {K} prop
+       * @param {(value: import('../../abstract/uploadEntrySchema.js').UploadEntryData[K]) => void} handler
+       */
+      (entry, prop, handler) => {
+        let sub = entry.subscribe(prop, (value) => {
+          if (this.isConnected) {
+            handler(value);
+          }
+        });
+        this._entrySubs.add(sub);
+      },
+    )(prop_, handler_);
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._entrySubs = new Set();
+  }
+}

package/blocks/Thumb/Thumb.d.ts

@@ -1,33 +1,13 @@
-export class Thumb extends UploaderBlock {
+export class Thumb extends FileItemConfig {
     /** @private */
-    private _entrySubs;
-    /** @private */
-    private _once;
-    /**
-     * @private
-     * @type {import('../../abstract/uploadEntrySchema.js').UploadEntryTypedData | null}
-     */
-    private _entry;
+    private _renderedGridOnce;
     /**
      * @private
      * @type {IntersectionObserverEntry['boundingClientRect'] | null}
      */
     private _thumbRect;
     _isIntersecting: boolean;
-    /**
-     * @private
-     * @template {any[]} A
-     * @template {(entry: import('../../abstract/uploadEntrySchema.js').UploadEntryTypedData, ...args: A) => any} T
-     * @param {T} fn
-     * @returns {(...args: A) => ReturnType<T>}
-     */
-    private _withEntry;
-    /**
-     * @template {import('../../abstract/uploadEntrySchema.js').UploadEntryKeys} K
-     * @param {K} prop_
-     * @param {(value: import('../../abstract/uploadEntrySchema.js').UploadEntryData[K]) => void} handler_
-     */
-    _subEntry: (prop_: K, handler_: (value: import("../../abstract/uploadEntrySchema.js").UploadEntryData[K]) => void) => void;
+    _firstViewMode: string;
     init$: {
         thumbUrl: string;
         badgeIcon: string;
@@ -46,11 +26,7 @@ export class Thumb extends UploaderBlock {
         '*historyBack': null;
         '*closeModal': () => void;
     };
-    /**
-     * Loads an image and sets it as the thumbnail.
-     *
-     * @param {string} imageUrl - The URL of the image to load.
-     */
+    /** @param {string} imageUrl */
     loadImage(imageUrl: string): Promise<any>;
     _calculateThumbSize(force?: boolean): number;
     /** @private */
@@ -63,10 +39,15 @@ export class Thumb extends UploaderBlock {
      * @param {IntersectionObserverEntry[]} entries
      */
     private _observerCallback;
+    /**
+     * @private
+     * @param {String} id
+     */
+    private _handleEntryId;
     _observer: IntersectionObserver | undefined;
 }
 export namespace Thumb {
     let template: string;
 }
-import { UploaderBlock } from '../../abstract/UploaderBlock.js';
+import { FileItemConfig } from '../FileItem/FileItemConfig.js';
 //# sourceMappingURL=Thumb.d.ts.map

package/blocks/Thumb/Thumb.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Thumb.d.ts","sourceRoot":"","sources":["Thumb.js"],"names":[],"mappings":"AAQA;IACE,eAAe;IACf,mBAAuB;IAEvB,eAAe;IACf,cAAc;IAEd;;;OAGG;IACH,eAAc;IAEd;;;OAGG;IACH,mBAAkB;IAElB,yBAAwB;IAExB;;;;;;OAMG;IACH,mBAYC;IAED;;;;OAIG;IACH,YAAa,OAHF,CAGO,EAAE,UAFT,CAAC,KAAK,EAAE,OAAO,qCAAqC,EAAE,eAAe,CAAC,CAAC,CAAC,KAAK,IAE5D,UAgBP;IAKnB;;;;;;;+CArD0C,gBAAU;mCAOnD,gBACL;6BAC0D,2BAA2B;;wCAKzE,wCAA2B;;;;;;MA4ClC;IAGH;;;;OAIG;IACH,oBAFW,MAAM,gBAehB;IAED,6CAgBC;IAED,eAAe;IACf,2BA2CG;IAEH;;MAA4E;IAE5E;;;OAGG;IACH,0BAaC;IA4CC,4CAAuG;CAY1G;;;;8BAjP6B,iCAAiC"}
+{"version":3,"file":"Thumb.d.ts","sourceRoot":"","sources":["Thumb.js"],"names":[],"mappings":"AAQA;IACE,eAAe;IACf,0BAA0B;IAE1B;;;OAGG;IACH,mBAAkB;IAElB,yBAAwB;IAExB,uBAAoB;IAKlB;;;;;;;+CACO,gBACX;mCAMU,gBAAU;6BAGd,2BAAoB;;wCAKpB,wCACa;;;;;;MAZd;IAGH,+BAA+B;IAC/B,oBADY,MAAM,gBAgBjB;IAED,6CAgBC;IAED,eAAe;IACf,2BA2CG;IAEH;;MAA4E;IAE5E;;;OAGG;IACH,0BAaC;IAED;;;OAGG;IACH,uBA0BC;IAgCC,4CAAuG;CAY1G;;;;+BA/M8B,+BAA+B"}

package/blocks/Thumb/Thumb.js

@@ -1,23 +1,14 @@
 //@ts-check
 
-import { UploaderBlock } from '../../abstract/UploaderBlock.js';
 import { createCdnUrl, createCdnUrlModifiers, createOriginalUrl } from '../../utils/cdn-utils.js';
+import { FileItemConfig } from '../FileItem/FileItemConfig.js';
 import { fileCssBg } from '../svg-backgrounds/svg-backgrounds.js';
 import { debounce } from '../utils/debounce.js';
 import { generateThumb } from '../utils/resizeImage.js';
 
-export class Thumb extends UploaderBlock {
+export class Thumb extends FileItemConfig {
   /** @private */
-  _entrySubs = new Set();
-
-  /** @private */
-  _once = false;
-
-  /**
-   * @private
-   * @type {import('../../abstract/uploadEntrySchema.js').UploadEntryTypedData | null}
-   */
-  _entry = null;
+  _renderedGridOnce = false;
 
   /**
    * @private
@@ -27,49 +18,7 @@ export class Thumb extends UploaderBlock {
 
   _isIntersecting = false;
 
-  /**
-   * @private
-   * @template {any[]} A
-   * @template {(entry: import('../../abstract/uploadEntrySchema.js').UploadEntryTypedData, ...args: A) => any} T
-   * @param {T} fn
-   * @returns {(...args: A) => ReturnType<T>}
-   */
-  _withEntry(fn) {
-    const wrapperFn = /** @type {(...args: A) => ReturnType<T>} */ (
-      (...args) => {
-        const entry = this._entry;
-        if (!entry) {
-          console.warn('No entry found');
-          return;
-        }
-        return fn(entry, ...args);
-      }
-    );
-    return wrapperFn;
-  }
-
-  /**
-   * @template {import('../../abstract/uploadEntrySchema.js').UploadEntryKeys} K
-   * @param {K} prop_
-   * @param {(value: import('../../abstract/uploadEntrySchema.js').UploadEntryData[K]) => void} handler_
-   */
-  _subEntry = (prop_, handler_) =>
-    this._withEntry(
-      /**
-       * @template {import('../../abstract/uploadEntrySchema.js').UploadEntryKeys} K
-       * @param {import('../../abstract/uploadEntrySchema.js').UploadEntryTypedData} entry
-       * @param {K} prop
-       * @param {(value: import('../../abstract/uploadEntrySchema.js').UploadEntryData[K]) => void} handler
-       */
-      (entry, prop, handler) => {
-        let sub = entry.subscribe(prop, (value) => {
-          if (this.isConnected) {
-            handler(value);
-          }
-        });
-        this._entrySubs.add(sub);
-      },
-    )(prop_, handler_);
+  _firstViewMode = '';
 
   constructor() {
     super();
@@ -82,21 +31,19 @@ export class Thumb extends UploaderBlock {
     };
   }
 
-  /**
-   * Loads an image and sets it as the thumbnail.
-   *
-   * @param {string} imageUrl - The URL of the image to load.
-   */
+  /** @param {string} imageUrl */
   loadImage(imageUrl) {
     return new Promise((resolve, reject) => {
       const img = new Image();
       img.onload = () => {
         this.set$({ thumbUrl: `url(${imageUrl})` });
         resolve(true);
+        img.remove();
       };
       img.onerror = () => {
         console.error('Failed to load image:', imageUrl);
         reject(new Error(`Failed to load image: ${imageUrl}`));
+        img.remove();
       };
       img.src = imageUrl;
     });
@@ -187,18 +134,16 @@ export class Thumb extends UploaderBlock {
     }
   }
 
-  initCallback() {
-    super.initCallback();
-
-    this.defineAccessor('badgeIcon', (/** @type {string} */ val) => (this.$.badgeIcon = val));
-
-    this.defineAccessor('uid', (/** @type {string} */ value) => {
-      this.set$({ uid: value });
-    });
-
-    this.sub('uid', (value) => {
-      this._entry = this.uploadCollection.read(value);
-    });
+  /**
+   * @private
+   * @param {String} id
+   */
+  _handleEntryId(id) {
+    let entry = this.uploadCollection?.read(id);
+    this._entry = entry;
+    if (!entry) {
+      return;
+    }
 
     this._subEntry('fileInfo', (fileInfo) => {
       if (fileInfo?.isImage && this._isIntersecting) {
@@ -216,10 +161,32 @@ export class Thumb extends UploaderBlock {
       }
     });
 
+    if (this._isIntersecting) {
+      this._debouncedGenerateThumb();
+    }
+  }
+
+  initCallback() {
+    super.initCallback();
+
+    this._firstViewMode = this.cfg.filesViewMode;
+
+    this.defineAccessor('badgeIcon', (/** @type {string} */ val) => (this.$.badgeIcon = val));
+
+    this.defineAccessor('uid', (/** @type {string} */ value) => {
+      this.set$({ uid: value });
+    });
+
+    this.sub('uid', (uid) => {
+      this._handleEntryId(uid);
+    });
+
     this.subConfigValue('filesViewMode', (viewMode) => {
-      if (!this._once && viewMode === 'grid') {
-        this._debouncedGenerateThumb(true);
-        this._once = true;
+      if (viewMode === 'grid' && !this._renderedGridOnce) {
+        if (this._firstViewMode === 'list') {
+          this._debouncedGenerateThumb(true);
+        }
+        this._renderedGridOnce = true;
       }
     });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uploadcare/file-uploader",
-  "version": "1.15.0-alpha.14",
+  "version": "1.15.0-alpha.16",
   "description": "Building blocks for Uploadcare products integration",
   "keywords": [
     "web components",