@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
109 lines • 6.47 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
/**
*
* Copyright (c) "Neo4j"
* Neo4j Sweden AB [http://neo4j.com]
*
* This file is part of Neo4j.
*
* Neo4j is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
const solid_1 = require("@heroicons/react/24/solid");
const react_1 = require("@neo4j-ndl/react");
const react_2 = require("react");
// Configuration constants
const CONFIG = {
MAX_FILES: 3,
MAX_FILE_SIZE: 5 * 1024 * 1024, // 5MB
PROGRESS_INCREMENT: 5,
UPDATE_INTERVAL: 100,
ACCEPTED_EXTENSIONS: ['.txt', '.json'],
};
var UploadState;
(function (UploadState) {
UploadState["Idle"] = "idle";
UploadState["Uploading"] = "uploading";
UploadState["Success"] = "success";
UploadState["Error"] = "error";
})(UploadState || (UploadState = {}));
const Component = () => {
const [uploadData, setUploadData] = (0, react_2.useState)({
errors: [],
files: [],
progress: 0,
state: UploadState.Idle,
});
const resetUpload = (0, react_2.useCallback)(() => {
setUploadData({
errors: [],
files: [],
progress: 0,
state: UploadState.Idle,
});
}, []);
const simulateUpload = (0, react_2.useCallback)((files) => {
setUploadData((prev) => (Object.assign(Object.assign({}, prev), { state: UploadState.Uploading, files, progress: 0 })));
const interval = setInterval(() => {
setUploadData((prev) => {
const newProgress = prev.progress + CONFIG.PROGRESS_INCREMENT;
if (newProgress >= 100) {
clearInterval(interval);
setTimeout(() => setUploadData((current) => (Object.assign(Object.assign({}, current), { state: UploadState.Success }))), 500);
return Object.assign(Object.assign({}, prev), { progress: 100 });
}
return Object.assign(Object.assign({}, prev), { progress: newProgress });
});
}, CONFIG.UPDATE_INTERVAL);
}, []);
const handleDrop = (0, react_2.useCallback)((acceptedFiles, rejectedFiles, event) => {
console.info('Drop event:', { acceptedFiles, event, rejectedFiles });
if (acceptedFiles.length > 0) {
simulateUpload(acceptedFiles);
}
}, [simulateUpload]);
const handleDropRejected = (0, react_2.useCallback)((rejectedFiles) => {
const errors = rejectedFiles.map((file) => `${file.file.name}: ${file.errors.map((e) => e.message).join(', ')}`);
setUploadData((prev) => (Object.assign(Object.assign({}, prev), { state: UploadState.Error, errors })));
}, []);
const handleError = (0, react_2.useCallback)((error) => {
console.error('Dropzone error:', error);
setUploadData((prev) => (Object.assign(Object.assign({}, prev), { state: UploadState.Error, errors: [error.message] })));
}, []);
const renderStatusContent = () => {
const { state, progress, files, errors } = uploadData;
switch (state) {
case UploadState.Uploading:
return ((0, jsx_runtime_1.jsx)(react_1.Dropzone.LoadingProgressBar, { progressBarPrecentage: Math.round(progress) }));
case UploadState.Success:
return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-justify-center n-items-center n-gap-y-token-32", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "title-4", className: "n-text-success-text n-font-semibold", children: "Upload Complete!" }), (0, jsx_runtime_1.jsxs)(react_1.Typography, { variant: "body-small", className: "n-text-neutral-text-weak", children: ["Successfully uploaded: ", files.map((file) => file.name).join(', ')] }), (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: resetUpload, children: "Upload More Files" })] }));
case UploadState.Error:
return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-justify-center n-items-center n-gap-y-token-32", children: [(0, jsx_runtime_1.jsx)(solid_1.XMarkIcon, { className: "n-w-token-32 n-h-token-32 n-text-danger-text" }), (0, jsx_runtime_1.jsx)("div", { className: "n-flex n-flex-col n-gap-y-token-2", children: errors.map((message, index) => ((0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", className: "n-text-danger-text n-font-semibold", htmlAttributes: { role: 'alert' }, children: message }, index))) }), (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: resetUpload, children: "Try Again" })] }));
default:
return undefined;
}
};
return ((0, jsx_runtime_1.jsx)(react_1.Dropzone, { dropZoneOptions: {
disabled: uploadData.state === UploadState.Uploading,
maxFiles: CONFIG.MAX_FILES,
maxSize: CONFIG.MAX_FILE_SIZE,
multiple: true,
onDrop: handleDrop,
onDropRejected: handleDropRejected,
onError: handleError,
}, supportedFilesDescription: (0, jsx_runtime_1.jsxs)("div", { className: "n-text-center n-flex n-flex-col n-gap-y-token-2", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-small", className: "n-text-neutral-text-weak", children: "Supports: Text files (.txt, .json) only" }), (0, jsx_runtime_1.jsxs)(react_1.Typography, { variant: "body-small", className: "n-text-neutral-text-weak", children: ["Max ", CONFIG.MAX_FILES, " files \u2022", ' ', CONFIG.MAX_FILE_SIZE / (1024 * 1024), "MB per file"] })] }), acceptedFileExtensions: CONFIG.ACCEPTED_EXTENSIONS, loadingElement: renderStatusContent(), rejectedText: "Error: Please make sure to only upload .json or .txt files", heading: "Drag & Drop your files" }));
};
exports.default = Component;
//# sourceMappingURL=dropzone-full.story.js.map