@uploadcare/file-uploader 0.50.1-alpha.2

package/blocks/UploadCtxProvider/EventEmitter.d.ts

@@ -0,0 +1,107 @@
+export const EventType: Readonly<{
+    FILE_ADDED: "file-added";
+    FILE_REMOVED: "file-removed";
+    FILE_UPLOAD_START: "file-upload-start";
+    FILE_UPLOAD_PROGRESS: "file-upload-progress";
+    FILE_UPLOAD_SUCCESS: "file-upload-success";
+    FILE_UPLOAD_FAILED: "file-upload-failed";
+    FILE_URL_CHANGED: "file-url-changed";
+    MODAL_OPEN: "modal-open";
+    MODAL_CLOSE: "modal-close";
+    DONE_CLICK: "done-click";
+    UPLOAD_CLICK: "upload-click";
+    ACTIVITY_CHANGE: "activity-change";
+    COMMON_UPLOAD_START: "common-upload-start";
+    COMMON_UPLOAD_PROGRESS: "common-upload-progress";
+    COMMON_UPLOAD_SUCCESS: "common-upload-success";
+    COMMON_UPLOAD_FAILED: "common-upload-failed";
+    CHANGE: "change";
+    GROUP_CREATED: "group-created";
+}>;
+/**
+ * @typedef {{
+ *   [EventType.FILE_ADDED]: import('../../index.js').OutputFileEntry<'idle'>;
+ *   [EventType.FILE_REMOVED]: import('../../index.js').OutputFileEntry<'removed'>;
+ *   [EventType.FILE_UPLOAD_START]: import('../../index.js').OutputFileEntry<'uploading'>;
+ *   [EventType.FILE_UPLOAD_PROGRESS]: import('../../index.js').OutputFileEntry<'uploading'>;
+ *   [EventType.FILE_UPLOAD_SUCCESS]: import('../../index.js').OutputFileEntry<'success'>;
+ *   [EventType.FILE_UPLOAD_FAILED]: import('../../index.js').OutputFileEntry<'failed'>;
+ *   [EventType.FILE_URL_CHANGED]: import('../../index.js').OutputFileEntry<'success'>;
+ *   [EventType.MODAL_OPEN]: void;
+ *   [EventType.MODAL_CLOSE]: void;
+ *   [EventType.ACTIVITY_CHANGE]: {
+ *     activity: import('../../abstract/ActivityBlock.js').ActivityType;
+ *   };
+ *   [EventType.UPLOAD_CLICK]: void;
+ *   [EventType.DONE_CLICK]: import('../../index.js').OutputCollectionState;
+ *   [EventType.COMMON_UPLOAD_START]: import('../../index.js').OutputCollectionState<'uploading'>;
+ *   [EventType.COMMON_UPLOAD_PROGRESS]: import('../../index.js').OutputCollectionState<'uploading'>;
+ *   [EventType.COMMON_UPLOAD_SUCCESS]: import('../../index.js').OutputCollectionState<'success'>;
+ *   [EventType.COMMON_UPLOAD_FAILED]: import('../../index.js').OutputCollectionState<'failed'>;
+ *   [EventType.CHANGE]: import('../../index.js').OutputCollectionState;
+ *   [EventType.GROUP_CREATED]: import('../../index.js').OutputCollectionState<'success', 'has-group'>;
+ * }} EventPayload
+ */
+export class EventEmitter {
+    /** @param {(...args: unknown[]) => void} debugPrint */
+    constructor(debugPrint: (...args: unknown[]) => void);
+    /**
+     * @private
+     * @type {Map<string, number>}
+     */
+    private _timeoutStore;
+    /**
+     * @private
+     * @type {Set<import('../../abstract/Block.js').Block>}
+     */
+    private _targets;
+    /**
+     * @private
+     * @type {((...args: unknown[]) => void) | null}
+     */
+    private _debugPrint;
+    /** @param {import('../../abstract/Block.js').Block} target */
+    bindTarget(target: import('../../abstract/Block.js').Block): void;
+    /** @param {import('../../abstract/Block.js').Block} target */
+    unbindTarget(target: import('../../abstract/Block.js').Block): void;
+    /**
+     * @private
+     * @template {(typeof EventType)[keyof typeof EventType]} T
+     * @param {T} type
+     * @param {unknown} [payload]
+     */
+    private _dispatch;
+    /**
+     * @template {(typeof EventType)[keyof typeof EventType]} T
+     * @template {boolean | number | undefined} TDebounce
+     * @param {T} type
+     * @param {TDebounce extends false | undefined ? unknown : () => unknown} [payload]
+     * @param {{ debounce?: TDebounce }} [options]
+     */
+    emit<T extends "change" | "file-added" | "file-removed" | "file-upload-start" | "file-upload-progress" | "file-upload-success" | "file-upload-failed" | "file-url-changed" | "modal-open" | "modal-close" | "done-click" | "upload-click" | "activity-change" | "common-upload-start" | "common-upload-progress" | "common-upload-success" | "common-upload-failed" | "group-created", TDebounce extends number | boolean | undefined>(type: T, payload?: (TDebounce extends false | undefined ? unknown : () => unknown) | undefined, { debounce }?: {
+        debounce?: TDebounce | undefined;
+    } | undefined): void;
+}
+export type EventPayload = {
+    [EventType.FILE_ADDED]: import('../../index.js').OutputFileEntry<'idle'>;
+    [EventType.FILE_REMOVED]: import('../../index.js').OutputFileEntry<'removed'>;
+    [EventType.FILE_UPLOAD_START]: import('../../index.js').OutputFileEntry<'uploading'>;
+    [EventType.FILE_UPLOAD_PROGRESS]: import('../../index.js').OutputFileEntry<'uploading'>;
+    [EventType.FILE_UPLOAD_SUCCESS]: import('../../index.js').OutputFileEntry<'success'>;
+    [EventType.FILE_UPLOAD_FAILED]: import('../../index.js').OutputFileEntry<'failed'>;
+    [EventType.FILE_URL_CHANGED]: import('../../index.js').OutputFileEntry<'success'>;
+    [EventType.MODAL_OPEN]: void;
+    [EventType.MODAL_CLOSE]: void;
+    [EventType.ACTIVITY_CHANGE]: {
+        activity: import('../../abstract/ActivityBlock.js').ActivityType;
+    };
+    [EventType.UPLOAD_CLICK]: void;
+    [EventType.DONE_CLICK]: import('../../index.js').OutputCollectionState;
+    [EventType.COMMON_UPLOAD_START]: import('../../index.js').OutputCollectionState<'uploading'>;
+    [EventType.COMMON_UPLOAD_PROGRESS]: import('../../index.js').OutputCollectionState<'uploading'>;
+    [EventType.COMMON_UPLOAD_SUCCESS]: import('../../index.js').OutputCollectionState<'success'>;
+    [EventType.COMMON_UPLOAD_FAILED]: import('../../index.js').OutputCollectionState<'failed'>;
+    [EventType.CHANGE]: import('../../index.js').OutputCollectionState;
+    [EventType.GROUP_CREATED]: import('../../index.js').OutputCollectionState<'success', 'has-group'>;
+};
+//# sourceMappingURL=EventEmitter.d.ts.map

package/blocks/UploadCtxProvider/EventEmitter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EventEmitter.d.ts","sourceRoot":"","sources":["EventEmitter.js"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAsBG;AAEH;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH;IAmBE,uDAAuD;IACvD,kCADsB,OAAO,EAAE,KAAK,IAAI,EAGvC;IArBD;;;OAGG;IACH,sBAA0B;IAE1B;;;OAGG;IACH,iBAAqB;IAErB;;;OAGG;IACH,oBAAmB;IAOnB,8DAA8D;IAC9D,mBADY,OAAO,yBAAyB,EAAE,KAAK,QAGlD;IAED,8DAA8D;IAC9D,qBADY,OAAO,yBAAyB,EAAE,KAAK,QAGlD;IAED;;;;;OAKG;IACH,kBAaC;IAED;;;;;;OAMG;IACH,ifAHiE,OAAO;;yBAkBvE;CACF;2BAtGY;IACZ,CAAK,UAAU,UAAU,CAAC,EAAE,OAAO,gBAAgB,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC7E,CAAK,UAAU,YAAY,CAAC,EAAE,OAAO,gBAAgB,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IAClF,CAAK,UAAU,iBAAiB,CAAC,EAAE,OAAO,gBAAgB,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;IACzF,CAAK,UAAU,oBAAoB,CAAC,EAAE,OAAO,gBAAgB,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;IAC5F,CAAK,UAAU,mBAAmB,CAAC,EAAE,OAAO,gBAAgB,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACzF,CAAK,UAAU,kBAAkB,CAAC,EAAE,OAAO,gBAAgB,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAC;IACvF,CAAK,UAAU,gBAAgB,CAAC,EAAE,OAAO,gBAAgB,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACtF,CAAK,UAAU,UAAU,CAAC,EAAE,IAAI,CAAC;IACjC,CAAK,UAAU,WAAW,CAAC,EAAE,IAAI,CAAC;IAClC,CAAK,UAAU,eAAe,CAAC,EAAE;QACjC,QAAc,EAAE,OAAO,iCAAiC,EAAE,YAAY,CAAC;KAClE,CAAC;IACN,CAAK,UAAU,YAAY,CAAC,EAAE,IAAI,CAAC;IACnC,CAAK,UAAU,UAAU,CAAC,EAAE,OAAO,gBAAgB,EAAE,qBAAqB,CAAC;IAC3E,CAAK,UAAU,mBAAmB,CAAC,EAAE,OAAO,gBAAgB,EAAE,qBAAqB,CAAC,WAAW,CAAC,CAAC;IACjG,CAAK,UAAU,sBAAsB,CAAC,EAAE,OAAO,gBAAgB,EAAE,qBAAqB,CAAC,WAAW,CAAC,CAAC;IACpG,CAAK,UAAU,qBAAqB,CAAC,EAAE,OAAO,gBAAgB,EAAE,qBAAqB,CAAC,SAAS,CAAC,CAAC;IACjG,CAAK,UAAU,oBAAoB,CAAC,EAAE,OAAO,gBAAgB,EAAE,qBAAqB,CAAC,QAAQ,CAAC,CAAC;IAC/F,CAAK,UAAU,MAAM,CAAC,EAAE,OAAO,gBAAgB,EAAE,qBAAqB,CAAC;IACvE,CAAK,UAAU,aAAa,CAAC,EAAE,OAAO,gBAAgB,EAAE,qBAAqB,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;CACnG"}

package/blocks/UploadCtxProvider/EventEmitter.js

@@ -0,0 +1,132 @@
+//  @ts-check
+
+const DEFAULT_DEBOUNCE_TIMEOUT = 20;
+
+export const EventType = Object.freeze({
+  FILE_ADDED: 'file-added',
+  FILE_REMOVED: 'file-removed',
+  FILE_UPLOAD_START: 'file-upload-start',
+  FILE_UPLOAD_PROGRESS: 'file-upload-progress',
+  FILE_UPLOAD_SUCCESS: 'file-upload-success',
+  FILE_UPLOAD_FAILED: 'file-upload-failed',
+  FILE_URL_CHANGED: 'file-url-changed',
+
+  MODAL_OPEN: 'modal-open',
+  MODAL_CLOSE: 'modal-close',
+  DONE_CLICK: 'done-click',
+  UPLOAD_CLICK: 'upload-click',
+  ACTIVITY_CHANGE: 'activity-change',
+
+  COMMON_UPLOAD_START: 'common-upload-start',
+  COMMON_UPLOAD_PROGRESS: 'common-upload-progress',
+  COMMON_UPLOAD_SUCCESS: 'common-upload-success',
+  COMMON_UPLOAD_FAILED: 'common-upload-failed',
+
+  CHANGE: 'change',
+  GROUP_CREATED: 'group-created',
+});
+
+/**
+ * @typedef {{
+ *   [EventType.FILE_ADDED]: import('../../index.js').OutputFileEntry<'idle'>;
+ *   [EventType.FILE_REMOVED]: import('../../index.js').OutputFileEntry<'removed'>;
+ *   [EventType.FILE_UPLOAD_START]: import('../../index.js').OutputFileEntry<'uploading'>;
+ *   [EventType.FILE_UPLOAD_PROGRESS]: import('../../index.js').OutputFileEntry<'uploading'>;
+ *   [EventType.FILE_UPLOAD_SUCCESS]: import('../../index.js').OutputFileEntry<'success'>;
+ *   [EventType.FILE_UPLOAD_FAILED]: import('../../index.js').OutputFileEntry<'failed'>;
+ *   [EventType.FILE_URL_CHANGED]: import('../../index.js').OutputFileEntry<'success'>;
+ *   [EventType.MODAL_OPEN]: void;
+ *   [EventType.MODAL_CLOSE]: void;
+ *   [EventType.ACTIVITY_CHANGE]: {
+ *     activity: import('../../abstract/ActivityBlock.js').ActivityType;
+ *   };
+ *   [EventType.UPLOAD_CLICK]: void;
+ *   [EventType.DONE_CLICK]: import('../../index.js').OutputCollectionState;
+ *   [EventType.COMMON_UPLOAD_START]: import('../../index.js').OutputCollectionState<'uploading'>;
+ *   [EventType.COMMON_UPLOAD_PROGRESS]: import('../../index.js').OutputCollectionState<'uploading'>;
+ *   [EventType.COMMON_UPLOAD_SUCCESS]: import('../../index.js').OutputCollectionState<'success'>;
+ *   [EventType.COMMON_UPLOAD_FAILED]: import('../../index.js').OutputCollectionState<'failed'>;
+ *   [EventType.CHANGE]: import('../../index.js').OutputCollectionState;
+ *   [EventType.GROUP_CREATED]: import('../../index.js').OutputCollectionState<'success', 'has-group'>;
+ * }} EventPayload
+ */
+
+export class EventEmitter {
+  /**
+   * @private
+   * @type {Map<string, number>}
+   */
+  _timeoutStore = new Map();
+
+  /**
+   * @private
+   * @type {Set<import('../../abstract/Block.js').Block>}
+   */
+  _targets = new Set();
+
+  /**
+   * @private
+   * @type {((...args: unknown[]) => void) | null}
+   */
+  _debugPrint = null;
+
+  /** @param {(...args: unknown[]) => void} debugPrint */
+  constructor(debugPrint) {
+    this._debugPrint = debugPrint;
+  }
+
+  /** @param {import('../../abstract/Block.js').Block} target */
+  bindTarget(target) {
+    this._targets.add(target);
+  }
+
+  /** @param {import('../../abstract/Block.js').Block} target */
+  unbindTarget(target) {
+    this._targets.delete(target);
+  }
+
+  /**
+   * @private
+   * @template {(typeof EventType)[keyof typeof EventType]} T
+   * @param {T} type
+   * @param {unknown} [payload]
+   */
+  _dispatch(type, payload) {
+    for (const target of this._targets) {
+      target.dispatchEvent(
+        new CustomEvent(type, {
+          detail: payload,
+        }),
+      );
+    }
+
+    this._debugPrint?.(() => {
+      const copyPayload = !!payload && typeof payload === 'object' ? { ...payload } : payload;
+      return [`event "${type}"`, copyPayload];
+    });
+  }
+
+  /**
+   * @template {(typeof EventType)[keyof typeof EventType]} T
+   * @template {boolean | number | undefined} TDebounce
+   * @param {T} type
+   * @param {TDebounce extends false | undefined ? unknown : () => unknown} [payload]
+   * @param {{ debounce?: TDebounce }} [options]
+   */
+  emit(type, payload, { debounce } = {}) {
+    if (typeof debounce !== 'number' && !debounce) {
+      this._dispatch(type, typeof payload === 'function' ? payload() : payload);
+      return;
+    }
+
+    if (this._timeoutStore.has(type)) {
+      window.clearTimeout(this._timeoutStore.get(type));
+    }
+    const timeout = typeof debounce === 'number' ? debounce : DEFAULT_DEBOUNCE_TIMEOUT;
+    const timeoutId = window.setTimeout(() => {
+      this._dispatch(type, typeof payload === 'function' ? payload() : payload);
+      this._timeoutStore.delete(type);
+    }, timeout);
+    this._timeoutStore.set(type, timeoutId);
+  }
+}

package/blocks/UploadCtxProvider/UploadCtxProvider.d.ts

@@ -0,0 +1,35 @@
+export type UploadCtxProvider = (new () => {
+    addEventListener<T extends "change" | "file-added" | "file-removed" | "file-upload-start" | "file-upload-progress" | "file-upload-success" | "file-upload-failed" | "file-url-changed" | "modal-open" | "modal-close" | "done-click" | "upload-click" | "activity-change" | "common-upload-start" | "common-upload-progress" | "common-upload-success" | "common-upload-failed" | "group-created">(type: T, listener: (e: CustomEvent<import("./EventEmitter.js").EventPayload[T]>) => void, options?: boolean | AddEventListenerOptions): void;
+    removeEventListener<T_1 extends "change" | "file-added" | "file-removed" | "file-upload-start" | "file-upload-progress" | "file-upload-success" | "file-upload-failed" | "file-url-changed" | "modal-open" | "modal-close" | "done-click" | "upload-click" | "activity-change" | "common-upload-start" | "common-upload-progress" | "common-upload-success" | "common-upload-failed" | "group-created">(type: T_1, listener: (e: CustomEvent<import("./EventEmitter.js").EventPayload[T_1]>) => void, options?: boolean | EventListenerOptions): void;
+} & UploadCtxProviderClass) & Omit<typeof UploadCtxProviderClass, "new">;
+/**
+ * @typedef {import('../../utils/mixinClass.js').MixinClass<
+ *   typeof UploadCtxProviderClass,
+ *   {
+ *     addEventListener<
+ *       T extends (typeof import('./EventEmitter.js').EventType)[keyof typeof import('./EventEmitter.js').EventType],
+ *     >(
+ *       type: T,
+ *       listener: (e: CustomEvent<import('./EventEmitter.js').EventPayload[T]>) => void,
+ *       options?: boolean | AddEventListenerOptions,
+ *     ): void;
+ *     removeEventListener<
+ *       T extends (typeof import('./EventEmitter.js').EventType)[keyof typeof import('./EventEmitter.js').EventType],
+ *     >(
+ *       type: T,
+ *       listener: (e: CustomEvent<import('./EventEmitter.js').EventPayload[T]>) => void,
+ *       options?: boolean | EventListenerOptions,
+ *     ): void;
+ *   }
+ * >} UploadCtxProvider
+ */
+export const UploadCtxProvider: UploadCtxProvider;
+declare class UploadCtxProviderClass extends UploaderBlock {
+}
+declare namespace UploadCtxProviderClass {
+    export { EventType };
+}
+import { UploaderBlock } from '../../abstract/UploaderBlock.js';
+import { EventType } from './EventEmitter.js';
+export {};
+//# sourceMappingURL=UploadCtxProvider.d.ts.map

package/blocks/UploadCtxProvider/UploadCtxProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UploadCtxProvider.d.ts","sourceRoot":"","sources":["UploadCtxProvider.js"],"names":[],"mappings":";2dA8BoF,IAAI,YACrE,OAAO,GAAG,uBAAuB,GAC1C,IAAI;oeAKsE,IAAI,YACrE,OAAO,GAAG,oBAAoB,GACvC,IAAI;;AAjBd;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,kDAAoH;AAxCpH;CAcC;;;;8BAhB6B,iCAAiC;0BACrC,mBAAmB"}

package/blocks/UploadCtxProvider/UploadCtxProvider.js

@@ -0,0 +1,45 @@
+// @ts-check
+
+import { UploaderBlock } from '../../abstract/UploaderBlock.js';
+import { EventType } from './EventEmitter.js';
+class UploadCtxProviderClass extends UploaderBlock {
+  requireCtxName = true;
+
+  initCallback() {
+    super.initCallback();
+
+    this.$['*eventEmitter'].bindTarget(this);
+  }
+
+  destroyCallback() {
+    super.destroyCallback();
+
+    this.$['*eventEmitter'].unbindTarget(this);
+  }
+}
+
+UploadCtxProviderClass.EventType = EventType;
+
+/**
+ * @typedef {import('../../utils/mixinClass.js').MixinClass<
+ *   typeof UploadCtxProviderClass,
+ *   {
+ *     addEventListener<
+ *       T extends (typeof import('./EventEmitter.js').EventType)[keyof typeof import('./EventEmitter.js').EventType],
+ *     >(
+ *       type: T,
+ *       listener: (e: CustomEvent<import('./EventEmitter.js').EventPayload[T]>) => void,
+ *       options?: boolean | AddEventListenerOptions,
+ *     ): void;
+ *     removeEventListener<
+ *       T extends (typeof import('./EventEmitter.js').EventType)[keyof typeof import('./EventEmitter.js').EventType],
+ *     >(
+ *       type: T,
+ *       listener: (e: CustomEvent<import('./EventEmitter.js').EventPayload[T]>) => void,
+ *       options?: boolean | EventListenerOptions,
+ *     ): void;
+ *   }
+ * >} UploadCtxProvider
+ */
+
+export const UploadCtxProvider = /** @type {UploadCtxProvider} */ (/** @type {unknown} */ (UploadCtxProviderClass));

package/blocks/UploadList/UploadList.d.ts

@@ -0,0 +1,59 @@
+/**
+ * @typedef {{
+ *   total: number;
+ *   succeed: number;
+ *   uploading: number;
+ *   failed: number;
+ * }} Summary
+ */
+export class UploadList extends UploaderBlock {
+    activityType: "upload-list";
+    init$: {
+        doneBtnVisible: boolean;
+        doneBtnEnabled: boolean;
+        uploadBtnVisible: boolean;
+        addMoreBtnVisible: boolean;
+        addMoreBtnEnabled: boolean;
+        headerText: string;
+        commonErrorMessage: string;
+        hasFiles: boolean;
+        onAdd: () => void;
+        onUpload: () => void;
+        onDone: () => void;
+        onCancel: () => void;
+        '*commonProgress': number;
+        '*uploadList': never[];
+        '*focusedEntry': null;
+        '*uploadQueue': import("@uploadcare/upload-client").Queue;
+        '*collectionErrors': any[];
+        '*collectionState': import("../../types").OutputCollectionState<import("../../types").OutputCollectionStatus, "maybe-has-group"> | null;
+        '*groupInfo': import("@uploadcare/upload-client").UploadcareGroup | null;
+        '*uploadTrigger': Set<string>;
+        '*secureUploadsManager': import("../../abstract/SecureUploadsManager.js").SecureUploadsManager | null;
+        '*currentActivity': null;
+        '*currentActivityParams': {};
+        '*history': never[];
+        '*historyBack': null;
+        '*closeModal': () => void;
+    };
+    /** @private */
+    private _throttledHandleCollectionUpdate;
+    /** @private */
+    private _updateUploadsState;
+    /**
+     * @private
+     * @param {Summary} summary
+     */
+    private _getHeaderText;
+}
+export namespace UploadList {
+    let template: string;
+}
+export type Summary = {
+    total: number;
+    succeed: number;
+    uploading: number;
+    failed: number;
+};
+import { UploaderBlock } from '../../abstract/UploaderBlock.js';
+//# sourceMappingURL=UploadList.d.ts.map

package/blocks/UploadList/UploadList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UploadList.d.ts","sourceRoot":"","sources":["UploadList.js"],"names":[],"mappings":"AAMA;;;;;;;GAOG;AAEH;IAKE,4BAAoD;IAKlD;;;;;;;;;;;;;;;;;;;;;;;;;;;MA0BC;IAGH,eAAe;IACf,yCASQ;IAER,eAAe;IACf,4BAsCC;IAED;;;OAGG;IACH,uBAmBC;CA+DF;;;;sBA1LY;IACZ,KAAS,EAAE,MAAM,CAAC;IAClB,OAAW,EAAE,MAAM,CAAC;IACpB,SAAa,EAAE,MAAM,CAAC;IACtB,MAAU,EAAE,MAAM,CAAC;CAChB;8BAV0B,iCAAiC"}

package/blocks/UploadList/UploadList.js

@@ -0,0 +1,237 @@
+// @ts-check
+import { ActivityBlock } from '../../abstract/ActivityBlock.js';
+import { UploaderBlock } from '../../abstract/UploaderBlock.js';
+import { EventType } from '../UploadCtxProvider/EventEmitter.js';
+import { throttle } from '../utils/throttle.js';
+
+/**
+ * @typedef {{
+ *   total: number;
+ *   succeed: number;
+ *   uploading: number;
+ *   failed: number;
+ * }} Summary
+ */
+
+export class UploadList extends UploaderBlock {
+  // Context owner should have access to CSS l10n
+  // TODO: We need to move away l10n from CSS
+  couldBeCtxOwner = true;
+  historyTracked = true;
+  activityType = ActivityBlock.activities.UPLOAD_LIST;
+
+  constructor() {
+    super();
+
+    this.init$ = {
+      ...this.init$,
+      doneBtnVisible: false,
+      doneBtnEnabled: false,
+      uploadBtnVisible: false,
+      addMoreBtnVisible: false,
+      addMoreBtnEnabled: false,
+      headerText: '',
+      commonErrorMessage: '',
+
+      hasFiles: false,
+      onAdd: () => {
+        this.api.initFlow(true);
+      },
+      onUpload: () => {
+        this.emit(EventType.UPLOAD_CLICK);
+        this.api.uploadAll();
+        this._throttledHandleCollectionUpdate();
+      },
+      onDone: () => {
+        this.emit(EventType.DONE_CLICK, this.api.getOutputCollectionState());
+        this.api.doneFlow();
+      },
+      onCancel: () => {
+        this.uploadCollection.clearAll();
+      },
+    };
+  }
+
+  /** @private */
+  _throttledHandleCollectionUpdate = throttle(() => {
+    if (!this.isConnected) {
+      return;
+    }
+    this._updateUploadsState();
+
+    if (!this.couldOpenActivity && this.$['*currentActivity'] === this.activityType) {
+      this.historyBack();
+    }
+  }, 300);
+
+  /** @private */
+  _updateUploadsState() {
+    const collectionState = this.api.getOutputCollectionState();
+    /** @type {Summary} */
+    const summary = {
+      total: collectionState.totalCount,
+      succeed: collectionState.successCount,
+      uploading: collectionState.uploadingCount,
+      failed: collectionState.failedCount,
+    };
+    const fitCountRestrictions = !collectionState.errors.some(
+      (err) => err.type === 'TOO_MANY_FILES' || err.type === 'TOO_FEW_FILES',
+    );
+    const tooMany = collectionState.errors.some((err) => err.type === 'TOO_MANY_FILES');
+    const exact = collectionState.totalCount === (this.cfg.multiple ? this.cfg.multipleMax : 1);
+    const validationOk = summary.failed === 0 && collectionState.errors.length === 0;
+    let uploadBtnVisible = false;
+    let allDone = false;
+    let doneBtnEnabled = false;
+
+    const readyToUpload = summary.total - summary.succeed - summary.uploading - summary.failed;
+    if (readyToUpload > 0 && fitCountRestrictions) {
+      uploadBtnVisible = true;
+    } else {
+      allDone = true;
+      doneBtnEnabled = summary.total === summary.succeed && fitCountRestrictions && validationOk;
+    }
+
+    this.set$({
+      doneBtnVisible: allDone,
+      doneBtnEnabled: doneBtnEnabled,
+
+      uploadBtnVisible,
+
+      addMoreBtnEnabled: summary.total === 0 || (!tooMany && !exact),
+      addMoreBtnVisible: !exact || this.cfg.multiple,
+    });
+
+    this.bindL10n('headerText', () => this._getHeaderText(summary));
+  }
+
+  /**
+   * @private
+   * @param {Summary} summary
+   */
+  _getHeaderText(summary) {
+    /** @param {keyof Summary} status */
+    const localizedText = (status) => {
+      const count = summary[status];
+      return this.l10n(`header-${status}`, {
+        count: count,
+      });
+    };
+    if (summary.uploading > 0) {
+      return localizedText('uploading');
+    }
+    if (summary.failed > 0) {
+      return localizedText('failed');
+    }
+    if (summary.succeed > 0) {
+      return localizedText('succeed');
+    }
+
+    return localizedText('total');
+  }
+
+  get couldOpenActivity() {
+    return this.cfg.showEmptyList || this.uploadCollection.size > 0;
+  }
+
+  initCallback() {
+    super.initCallback();
+
+    this.registerActivity(this.activityType);
+
+    this.subConfigValue('multiple', this._throttledHandleCollectionUpdate);
+    this.subConfigValue('multipleMin', this._throttledHandleCollectionUpdate);
+    this.subConfigValue('multipleMax', this._throttledHandleCollectionUpdate);
+
+    this.sub('*currentActivity', (currentActivity) => {
+      if (!this.couldOpenActivity && currentActivity === this.activityType) {
+        this.$['*currentActivity'] = this.initActivity;
+      }
+    });
+
+    // TODO: could be performance issue on many files
+    // there is no need to update buttons state on every progress tick
+    this.uploadCollection.observeProperties(this._throttledHandleCollectionUpdate);
+
+    this.sub(
+      '*uploadList',
+      (list) => {
+        this._throttledHandleCollectionUpdate();
+
+        this.set$({
+          hasFiles: list.length > 0,
+        });
+
+        if (!this.cfg.confirmUpload) {
+          this.api.uploadAll();
+        }
+      },
+      false,
+    );
+
+    this.sub(
+      '*collectionErrors',
+      /** @param {import('../../types').OutputError<import('../../types').OutputCollectionErrorType>[]} errors */
+      (errors) => {
+        const firstError = errors.filter((err) => err.type !== 'SOME_FILES_HAS_ERRORS')[0];
+        if (!firstError) {
+          this.set$({
+            commonErrorMessage: null,
+          });
+          return;
+        }
+        this.set$({
+          commonErrorMessage: firstError.message,
+        });
+      },
+    );
+  }
+
+  destroyCallback() {
+    super.destroyCallback();
+    this.uploadCollection.unobserveProperties(this._throttledHandleCollectionUpdate);
+  }
+}
+
+UploadList.template = /* HTML */ `
+  <uc-activity-header>
+    <span class="uc-header-text">{{headerText}}</span>
+    <button type="button" class="uc-mini-btn uc-close-btn" set="onclick: *closeModal">
+      <uc-icon name="close"></uc-icon>
+    </button>
+  </uc-activity-header>
+
+  <div class="uc-no-files" set="@hidden: hasFiles">
+    <slot name="empty"><span l10n="no-files"></span></slot>
+  </div>
+
+  <div class="uc-files" repeat="*uploadList" repeat-item-tag="uc-file-item"></div>
+
+  <div class="uc-common-error" set="@hidden: !commonErrorMessage; textContent: commonErrorMessage;"></div>
+
+  <div class="uc-toolbar">
+    <button type="button" class="uc-cancel-btn uc-secondary-btn" set="onclick: onCancel;" l10n="clear"></button>
+    <div class="uc-toolbar-spacer"></div>
+    <button
+      type="button"
+      class="uc-add-more-btn uc-secondary-btn"
+      set="onclick: onAdd; @disabled: !addMoreBtnEnabled; @hidden: !addMoreBtnVisible"
+    >
+      <uc-icon name="add"></uc-icon><span l10n="add-more"></span>
+    </button>
+    <button
+      type="button"
+      class="uc-upload-btn uc-primary-btn"
+      set="@hidden: !uploadBtnVisible; onclick: onUpload;"
+      l10n="upload"
+    ></button>
+    <button
+      type="button"
+      class="uc-done-btn uc-primary-btn"
+      set="@hidden: !doneBtnVisible; onclick: onDone;  @disabled: !doneBtnEnabled"
+      l10n="done"
+    ></button>
+  </div>
+
+  <uc-drop-area ghost></uc-drop-area>
+`;