allaw-ui 3.0.6 → 3.0.8

package/dist/components/molecules/fileUploader/FileUploader.d.ts

@@ -17,6 +17,9 @@ export interface FileUploaderProps {
     onFileRemove?: () => void;
     uploadProgress?: number;
     isLoading?: boolean;
+    autoManageProgress?: boolean;
+    progressSteps?: number;
+    progressInterval?: number;
     errorMessage?: string | null;
     buttonLabel?: string;
     acceptedLabel?: string;

package/dist/components/molecules/fileUploader/FileUploader.js

@@ -34,21 +34,47 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-import React, { useState, useRef } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import Image from "next/image";
 import styles from "./FileUploader.module.css";
 import ImageCropperModal from "./ImageCropperModal";
 import IconButton from "../../atoms/buttons/IconButton";
 import TertiaryButton from "../../atoms/buttons/TertiaryButton";
 var FileUploader = function (_a) {
-    var acceptedExtensions = _a.acceptedExtensions, maxFileSizeMB = _a.maxFileSizeMB, _b = _a.enableDragAndDrop, enableDragAndDrop = _b === void 0 ? true : _b, _c = _a.enableCropping, enableCropping = _c === void 0 ? false : _c, _d = _a.cropShape, cropShape = _d === void 0 ? "square" : _d, iconUrl = _a.iconUrl, descriptionParts = _a.descriptionParts, onFileRead = _a.onFileRead, onFileRemove = _a.onFileRemove, _e = _a.uploadProgress, uploadProgress = _e === void 0 ? 0 : _e, _f = _a.isLoading, isLoading = _f === void 0 ? false : _f, _g = _a.errorMessage, errorMessage = _g === void 0 ? null : _g, _h = _a.buttonLabel, buttonLabel = _h === void 0 ? "Choisir un fichier" : _h, _j = _a.acceptedLabel, acceptedLabel = _j === void 0 ? "Format accepté :" : _j, _k = _a.maxSizeLabel, maxSizeLabel = _k === void 0 ? "Taille maximale :" : _k, fileName = _a.fileName, fileSize = _a.fileSize, _l = _a.filePresentationLabel, filePresentationLabel = _l === void 0 ? "Voici votre fichier." : _l;
-    var _m = useState(null), selectedFile = _m[0], setSelectedFile = _m[1];
-    var _o = useState(null), fileContent = _o[0], setFileContent = _o[1];
-    var _p = useState(false), isHovering = _p[0], setIsHovering = _p[1];
-    var _q = useState(false), showCropper = _q[0], setShowCropper = _q[1];
-    var _r = useState(null), previewUrl = _r[0], setPreviewUrl = _r[1];
-    var _s = useState(null), cropMetadata = _s[0], setCropMetadata = _s[1];
+    var acceptedExtensions = _a.acceptedExtensions, maxFileSizeMB = _a.maxFileSizeMB, _b = _a.enableDragAndDrop, enableDragAndDrop = _b === void 0 ? true : _b, _c = _a.enableCropping, enableCropping = _c === void 0 ? false : _c, _d = _a.cropShape, cropShape = _d === void 0 ? "square" : _d, iconUrl = _a.iconUrl, descriptionParts = _a.descriptionParts, onFileRead = _a.onFileRead, onFileRemove = _a.onFileRemove, _e = _a.uploadProgress, uploadProgress = _e === void 0 ? 0 : _e, _f = _a.isLoading, isLoading = _f === void 0 ? false : _f, _g = _a.autoManageProgress, autoManageProgress = _g === void 0 ? false : _g, _h = _a.progressSteps, progressSteps = _h === void 0 ? 10 : _h, _j = _a.progressInterval, progressInterval = _j === void 0 ? 500 : _j, _k = _a.errorMessage, errorMessage = _k === void 0 ? null : _k, _l = _a.buttonLabel, buttonLabel = _l === void 0 ? "Choisir un fichier" : _l, _m = _a.acceptedLabel, acceptedLabel = _m === void 0 ? "Format accepté :" : _m, _o = _a.maxSizeLabel, maxSizeLabel = _o === void 0 ? "Taille maximale :" : _o, fileName = _a.fileName, fileSize = _a.fileSize, _p = _a.filePresentationLabel, filePresentationLabel = _p === void 0 ? "Voici votre fichier." : _p;
+    var _q = useState(null), selectedFile = _q[0], setSelectedFile = _q[1];
+    var _r = useState(null), fileContent = _r[0], setFileContent = _r[1];
+    var _s = useState(false), isHovering = _s[0], setIsHovering = _s[1];
+    var _t = useState(false), showCropper = _t[0], setShowCropper = _t[1];
+    var _u = useState(null), previewUrl = _u[0], setPreviewUrl = _u[1];
+    var _v = useState(null), cropMetadata = _v[0], setCropMetadata = _v[1];
+    var _w = useState(0), internalProgress = _w[0], setInternalProgress = _w[1];
+    var progressIntervalRef = useRef(null);
     var fileInputRef = useRef(null);
+    useEffect(function () {
+        return function () {
+            stopProgressSimulation();
+        };
+    }, []);
+    var startProgressSimulation = function () {
+        stopProgressSimulation();
+        setInternalProgress(1);
+        progressIntervalRef.current = setInterval(function () {
+            setInternalProgress(function (prev) {
+                if (prev >= progressSteps) {
+                    stopProgressSimulation();
+                    return progressSteps;
+                }
+                return prev + 1;
+            });
+        }, progressInterval);
+    };
+    var stopProgressSimulation = function () {
+        if (progressIntervalRef.current) {
+            clearInterval(progressIntervalRef.current);
+            progressIntervalRef.current = null;
+        }
+    };
     var resetFileInput = function () {
         if (fileInputRef.current) {
             fileInputRef.current.value = "";
@@ -56,10 +82,8 @@ var FileUploader = function (_a) {
     };
     var validateFile = function (file) {
         var _a;
-        // Vérifier l'extension
         var fileExtension = ".".concat((_a = file.name.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase());
         var isValidExtension = acceptedExtensions.includes(fileExtension);
-        // Vérifier la taille
         var isValidSize = file.size <= maxFileSizeMB * 1024 * 1024;
         return isValidExtension && isValidSize;
     };
@@ -116,11 +140,9 @@ var FileUploader = function (_a) {
                 case 2:
                     content = _a.sent();
                     setFileContent(content);
-                    // Créer un aperçu si c'est une image
                     if (isImageFile(file)) {
                         url = URL.createObjectURL(file);
                         setPreviewUrl(url);
-                        // Si le cadrage n'est pas activé, on utilise une métadonnée par défaut
                         if (!enableCropping) {
                             setCropMetadata({
                                 zoom: 1,
@@ -134,13 +156,14 @@ var FileUploader = function (_a) {
                         setPreviewUrl(null);
                         setCropMetadata(null);
                     }
-                    // Si c'est une image et que le cadrage est activé, afficher le composant de cadrage
+                    if (autoManageProgress && !(enableCropping && isImageFile(file))) {
+                        startProgressSimulation();
+                    }
                     if (enableCropping && isImageFile(file)) {
                         setSelectedFile(file);
                         setShowCropper(true);
                     }
                     else {
-                        // Sinon, traiter normalement
                         setSelectedFile(file);
                         onFileRead === null || onFileRead === void 0 ? void 0 : onFileRead(file, content);
                     }
@@ -167,6 +190,9 @@ var FileUploader = function (_a) {
     var handleCropConfirm = function (cropMetadata) {
         setShowCropper(false);
         setCropMetadata(cropMetadata);
+        if (autoManageProgress) {
+            startProgressSimulation();
+        }
         if (selectedFile && fileContent) {
             onFileRead === null || onFileRead === void 0 ? void 0 : onFileRead(selectedFile, fileContent, cropMetadata);
         }
@@ -175,6 +201,10 @@ var FileUploader = function (_a) {
         if (previewUrl) {
             URL.revokeObjectURL(previewUrl);
         }
+        if (autoManageProgress) {
+            stopProgressSimulation();
+            setInternalProgress(0);
+        }
         setSelectedFile(null);
         setFileContent(null);
         setPreviewUrl(null);
@@ -197,6 +227,12 @@ var FileUploader = function (_a) {
             return "".concat((size / (1024 * 1024)).toFixed(2), " Mo");
         }
     };
+    var displayProgress = autoManageProgress
+        ? internalProgress
+        : uploadProgress;
+    var isLoadingState = autoManageProgress
+        ? internalProgress > 0 && internalProgress < progressSteps
+        : isLoading;
     var displayFileSize = fileSize !== undefined ? fileSize : selectedFile ? selectedFile.size : 0;
     var displayFileName = fileName || (selectedFile ? selectedFile.name : "");
     var isSelectedImage = selectedFile && isImageFile(selectedFile);
@@ -206,7 +242,6 @@ var FileUploader = function (_a) {
                     ? styles.preview_container_banner
                     : ""), onClick: function (e) {
                     var _a;
-                    // Ne pas déclencher si on clique sur le conteneur d'image
                     if (!e.target.closest(".".concat(styles.preview_image_container))) {
                         (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
                     }
@@ -261,7 +296,7 @@ var FileUploader = function (_a) {
         errorMessage && (React.createElement("div", { className: styles.uploaded_file_container },
             React.createElement("div", { className: styles.uploaded_file_error },
                 React.createElement("span", { className: styles.error_message }, errorMessage)))),
-        (isLoading || selectedFile || fileName) && (React.createElement("div", { className: styles.uploaded_file_container },
+        (isLoadingState || selectedFile || fileName) && (React.createElement("div", { className: styles.uploaded_file_container },
             React.createElement("div", { className: styles.uploaded_file_content },
                 React.createElement("div", { className: styles.uploaded_file_icon }, iconUrl ? (React.createElement(Image, { src: iconUrl, alt: "File icon", className: styles.file_icon, width: 20, height: 20 })) : (React.createElement("i", { className: "allaw-icon-file" }))),
                 React.createElement("div", { className: styles.uploaded_file_name_size },
@@ -273,8 +308,11 @@ var FileUploader = function (_a) {
                 selectedFile && (React.createElement("div", { className: styles.uploaded_file_delete_container },
                     React.createElement("div", { className: styles.uploaded_file_delete, onClick: handleFileDelete },
                         React.createElement("i", { className: "allaw-icon-close" }))))),
-            React.createElement("div", { className: styles.uploaded_file_progress_bar }, uploadProgress > 0 && (React.createElement("div", { className: styles.progress_bar_container },
-                React.createElement("div", { className: styles.progress_bar_fill, style: { width: "".concat((uploadProgress / 10) * 100, "%") } })))))),
+            displayProgress > 0 && (React.createElement("div", { className: styles.uploaded_file_progress_bar },
+                React.createElement("div", { className: styles.progress_bar_container },
+                    React.createElement("div", { className: styles.progress_bar_fill, style: {
+                            width: "".concat((displayProgress / progressSteps) * 100, "%"),
+                        } })))))),
         showCropper && selectedFile && (React.createElement(ImageCropperModal, { file: selectedFile, shape: cropShape, onCancel: handleCropCancel, onConfirm: handleCropConfirm }))));
 };
 export default FileUploader;

package/dist/components/molecules/fileUploader/FileUploader.module.css

@@ -223,12 +223,13 @@
 }
 
 .uploaded_file_progress_bar {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 40px;
+  display: flex !important;
+  flex-direction: row !important;
+  align-items: center !important;
+  justify-content: center !important;
+  width: 100% !important;
+  height: 40px !important;
+  margin-top: 8px !important;
 }
 
 .progress_bar_container {
@@ -237,12 +238,14 @@
   background-color: #e6edf5;
   border-radius: 2px;
   overflow: hidden;
+  display: block !important;
 }
 
 .progress_bar_fill {
   height: 100%;
   background-color: #25beeb;
   transition: width 0.3s ease-in-out;
+  display: block !important;
 }
 
 .drag_over {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "allaw-ui",
-  "version": "3.0.6",
+  "version": "3.0.8",
   "description": "Composants UI pour l'application Allaw",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",