allaw-ui 3.4.3 → 3.4.5

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

@@ -0,0 +1,346 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+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.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, initialFile = _a.initialFile, initialPreviewUrl = _a.initialPreviewUrl, initialCropMetadata = _a.initialCropMetadata, originalFileName = _a.originalFileName;
+    var _q = useState(initialFile || 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(initialPreviewUrl || null), previewUrl = _u[0], setPreviewUrl = _u[1];
+    var _v = useState(initialCropMetadata || 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);
+    var _x = useState(originalFileName), currentFileName = _x[0], setCurrentFileName = _x[1];
+    useEffect(function () {
+        if (initialFile) {
+            setSelectedFile(initialFile);
+            initialFile.arrayBuffer().then(function (content) {
+                setFileContent(content);
+            });
+        }
+        if (initialPreviewUrl) {
+            setPreviewUrl(initialPreviewUrl);
+        }
+        if (initialCropMetadata) {
+            setCropMetadata(initialCropMetadata);
+        }
+        if (originalFileName) {
+            setCurrentFileName(originalFileName);
+        }
+    }, [initialFile, initialPreviewUrl, initialCropMetadata, originalFileName]);
+    useEffect(function () {
+        return function () {
+            if (previewUrl && !initialPreviewUrl) {
+                URL.revokeObjectURL(previewUrl);
+            }
+        };
+    }, [previewUrl, initialPreviewUrl]);
+    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 = "";
+        }
+    };
+    var validateFile = function (file) {
+        var _a;
+        var fileExtension = ".".concat((_a = file.name.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase());
+        var isValidExtension = acceptedExtensions.includes(fileExtension);
+        var isValidSize = file.size <= maxFileSizeMB * 1024 * 1024;
+        return isValidExtension && isValidSize;
+    };
+    var isImageFile = function (file) {
+        var _a;
+        var fileExtension = ".".concat((_a = file.name.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase());
+        var imageExtensions = [".jpg", ".jpeg", ".png", ".gif", ".webp", ".bmp"];
+        return imageExtensions.includes(fileExtension);
+    };
+    var handleFileSelect = function (event) { return __awaiter(void 0, void 0, void 0, function () {
+        var file;
+        return __generator(this, function (_a) {
+            if (event.target.files && event.target.files.length > 0) {
+                file = event.target.files[0];
+                processFile(file);
+            }
+            return [2 /*return*/];
+        });
+    }); };
+    var handleDragOver = function (event) {
+        event.preventDefault();
+        setIsHovering(true);
+    };
+    var handleDragLeave = function () {
+        setIsHovering(false);
+    };
+    var handleDrop = function (event) { return __awaiter(void 0, void 0, void 0, function () {
+        var file;
+        return __generator(this, function (_a) {
+            event.preventDefault();
+            setIsHovering(false);
+            if (event.dataTransfer.files && event.dataTransfer.files.length > 0) {
+                file = event.dataTransfer.files[0];
+                processFile(file);
+            }
+            return [2 /*return*/];
+        });
+    }); };
+    var processFile = function (file) { return __awaiter(void 0, void 0, void 0, function () {
+        var content, url, error_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!validateFile(file)) {
+                        setSelectedFile(null);
+                        setPreviewUrl(null);
+                        setCropMetadata(null);
+                        setCurrentFileName(undefined);
+                        return [2 /*return*/];
+                    }
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, file.arrayBuffer()];
+                case 2:
+                    content = _a.sent();
+                    setFileContent(content);
+                    setCurrentFileName(file.name);
+                    if (isImageFile(file)) {
+                        url = URL.createObjectURL(file);
+                        setPreviewUrl(url);
+                        if (!enableCropping) {
+                            setCropMetadata({
+                                zoom: 1,
+                                offsetX: 0,
+                                offsetY: 0,
+                                shape: cropShape,
+                            });
+                        }
+                    }
+                    else {
+                        setPreviewUrl(null);
+                        setCropMetadata(null);
+                    }
+                    if (autoManageProgress && !(enableCropping && isImageFile(file))) {
+                        startProgressSimulation();
+                    }
+                    if (enableCropping && isImageFile(file)) {
+                        setSelectedFile(file);
+                        setShowCropper(true);
+                    }
+                    else {
+                        setSelectedFile(file);
+                        onFileRead === null || onFileRead === void 0 ? void 0 : onFileRead(file, content);
+                    }
+                    return [3 /*break*/, 4];
+                case 3:
+                    error_1 = _a.sent();
+                    console.error("Error reading file:", error_1);
+                    setSelectedFile(null);
+                    setPreviewUrl(null);
+                    setCropMetadata(null);
+                    setCurrentFileName(undefined);
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    var openCropModal = function () {
+        if (selectedFile && isImageFile(selectedFile)) {
+            setShowCropper(true);
+        }
+    };
+    var handleCropCancel = function () {
+        setShowCropper(false);
+    };
+    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);
+        }
+    };
+    var handleFileDelete = function () {
+        if (previewUrl && !initialPreviewUrl) {
+            URL.revokeObjectURL(previewUrl);
+        }
+        if (autoManageProgress) {
+            stopProgressSimulation();
+            setInternalProgress(0);
+        }
+        setSelectedFile(null);
+        setFileContent(null);
+        setPreviewUrl(null);
+        setCropMetadata(null);
+        setCurrentFileName(undefined);
+        resetFileInput();
+        onFileRemove === null || onFileRemove === void 0 ? void 0 : onFileRemove();
+    };
+    var handleNewFileClick = function () {
+        var _a;
+        (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+    };
+    var formatFileSize = function (size) {
+        if (size < 1024) {
+            return "".concat(size, " octets");
+        }
+        else if (size < 1024 * 1024) {
+            return "".concat((size / 1024).toFixed(2), " Ko");
+        }
+        else {
+            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);
+    return (React.createElement("div", { className: styles.upload_main_container },
+        enableDragAndDrop ? (React.createElement("div", { className: "".concat(styles.upload_container, " ").concat(isHovering ? styles.drag_over : "", " ").concat(previewUrl ? styles.upload_container_with_preview : ""), onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onClick: function () { var _a; return !previewUrl && ((_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click()); } },
+            previewUrl ? (React.createElement("div", { className: "".concat(styles.preview_container, " ").concat((cropMetadata === null || cropMetadata === void 0 ? void 0 : cropMetadata.shape) === "banner" || cropShape === "banner"
+                    ? styles.preview_container_banner
+                    : ""), onClick: function (e) {
+                    var _a;
+                    if (!e.target.closest(".".concat(styles.preview_image_container))) {
+                        (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+                    }
+                } },
+                React.createElement("div", { className: "".concat(styles.preview_image_container, " ").concat(styles["preview_image_".concat((cropMetadata === null || cropMetadata === void 0 ? void 0 : cropMetadata.shape) || cropShape)]), onClick: function () { return enableCropping && openCropModal(); } },
+                    React.createElement("div", { className: styles.preview_image_wrapper, style: {
+                            transform: cropMetadata
+                                ? "translate(".concat(cropMetadata.offsetX, "px, ").concat(cropMetadata.offsetY, "px) scale(").concat(cropMetadata.zoom, ")")
+                                : "scale(1)",
+                        } },
+                        React.createElement("img", { src: previewUrl, alt: displayFileName, className: styles.preview_image, draggable: false }))),
+                enableCropping && (React.createElement("div", { className: styles.edit_button_container, onClick: function (e) {
+                        e.stopPropagation();
+                        openCropModal();
+                    } },
+                    React.createElement(IconButton, { style: "largeFilled", iconName: "allaw-icon-edit-2" }))))) : (React.createElement("div", { className: styles.upload_content },
+                React.createElement("div", { className: styles.upload_icons },
+                    React.createElement("div", { className: styles.upload_file_icon },
+                        React.createElement("i", { className: "allaw-icon-file" })),
+                    React.createElement("div", { className: styles.upload_icon_container },
+                        React.createElement("div", { className: styles.upload_icon },
+                            React.createElement("i", { className: "allaw-icon-export" })))),
+                React.createElement("div", { className: styles.upload_description },
+                    React.createElement("span", null,
+                        "Glissez-d\u00E9posez votre fichier, ou",
+                        " ",
+                        React.createElement("span", { className: styles.btn_tertiary }, buttonLabel))))),
+            React.createElement("input", { id: "file-upload", ref: fileInputRef, type: "file", accept: acceptedExtensions.join(","), style: { display: "none" }, onChange: handleFileSelect }))) : (React.createElement("div", { className: styles.manual_upload_container },
+            React.createElement("button", { className: styles.file_upload_button, onClick: function () { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); } },
+                React.createElement("span", { className: styles.btn_tertiary }, buttonLabel),
+                React.createElement("input", { id: "file-upload", ref: fileInputRef, type: "file", accept: acceptedExtensions.join(","), style: { display: "none" }, onChange: handleFileSelect })))),
+        previewUrl ? (React.createElement("div", { className: styles.file_info_container },
+            filePresentationLabel && (React.createElement("span", { className: styles.file_presentation_label }, filePresentationLabel)),
+            React.createElement(TertiaryButton, { label: "Charger ".concat(isSelectedImage ? "une autre image ?" : "un autre fichier ?"), color: "bleu-allaw", variant: true, onClick: handleNewFileClick }))) : (React.createElement("div", { className: styles.limits },
+            React.createElement("div", { className: styles.format },
+                React.createElement("span", { className: styles.limit_text },
+                    acceptedLabel,
+                    " ",
+                    acceptedExtensions.join(", "))),
+            React.createElement("div", { className: styles.size },
+                React.createElement("span", { className: styles.limit_text },
+                    maxSizeLabel,
+                    " ",
+                    maxFileSizeMB,
+                    " Mo")))),
+        descriptionParts && (React.createElement("p", { className: styles.description },
+            descriptionParts.beforeLink,
+            " ",
+            React.createElement("a", { href: descriptionParts.linkUrl, target: "_blank", rel: "noopener noreferrer", className: styles.description_link }, descriptionParts.linkLabel),
+            " ",
+            descriptionParts.afterLink)),
+        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)))),
+        (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 },
+                    React.createElement("div", { className: styles.uploaded_file_name },
+                        React.createElement("span", { className: styles.file_name }, displayFileName || currentFileName || "Analyse en cours..."),
+                        selectedFile && (React.createElement("i", { className: "allaw-icon-check ".concat(styles.success_icon) }))),
+                    React.createElement("div", { className: styles.uploaded_file_size },
+                        React.createElement("span", { className: styles.file_size }, displayFileSize > 0
+                            ? formatFileSize(displayFileSize)
+                            : (selectedFile === null || selectedFile === void 0 ? void 0 : selectedFile.size)
+                                ? formatFileSize(selectedFile.size)
+                                : ""))),
+                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" }))))),
+            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.stories.d.ts

@@ -0,0 +1,107 @@
+declare namespace _default {
+    export let title: string;
+    export { FileUploader as component };
+    export let tags: string[];
+    export namespace parameters {
+        namespace backgrounds {
+            let _default: string;
+            export { _default as default };
+            export let values: {
+                name: string;
+                value: string;
+            }[];
+        }
+    }
+    export namespace argTypes {
+        namespace acceptedExtensions {
+            let control: string;
+            let description: string;
+        }
+        namespace maxFileSizeMB {
+            let control_1: string;
+            export { control_1 as control };
+            let description_1: string;
+            export { description_1 as description };
+        }
+        namespace enableDragAndDrop {
+            let control_2: string;
+            export { control_2 as control };
+            let description_2: string;
+            export { description_2 as description };
+        }
+        namespace enableCropping {
+            let control_3: string;
+            export { control_3 as control };
+            let description_3: string;
+            export { description_3 as description };
+        }
+        namespace cropShape {
+            export namespace control_4 {
+                let type: string;
+                let options: string[];
+            }
+            export { control_4 as control };
+            let description_4: string;
+            export { description_4 as description };
+        }
+        namespace iconUrl {
+            let control_5: string;
+            export { control_5 as control };
+            let description_5: string;
+            export { description_5 as description };
+        }
+        namespace buttonLabel {
+            let control_6: string;
+            export { control_6 as control };
+            let description_6: string;
+            export { description_6 as description };
+        }
+        namespace acceptedLabel {
+            let control_7: string;
+            export { control_7 as control };
+            let description_7: string;
+            export { description_7 as description };
+        }
+        namespace maxSizeLabel {
+            let control_8: string;
+            export { control_8 as control };
+            let description_8: string;
+            export { description_8 as description };
+        }
+        namespace uploadProgress {
+            export namespace control_9 {
+                let type_1: string;
+                export { type_1 as type };
+                export let min: number;
+                export let max: number;
+                export let step: number;
+            }
+            export { control_9 as control };
+            let description_9: string;
+            export { description_9 as description };
+        }
+        namespace isLoading {
+            let control_10: string;
+            export { control_10 as control };
+            let description_10: string;
+            export { description_10 as description };
+        }
+        namespace errorMessage {
+            let control_11: string;
+            export { control_11 as control };
+            let description_11: string;
+            export { description_11 as description };
+        }
+    }
+}
+export default _default;
+export const Default: any;
+export const WithDescription: any;
+export const WithoutDragAndDrop: any;
+export const WithError: any;
+export const WithProgress: any;
+export const MultipleExtensions: any;
+export const WithSquareCropping: any;
+export const WithCircleCropping: any;
+export const WithPreloadedImage: any;
+import FileUploader from "./FileUploader";