design-react-kit
Version:
Componenti React per Bootstrap 5
53 lines • 3.03 kB
JavaScript
import classNames from 'classnames';
import React, { useState } from 'react';
import DragandDropIcon from '../assets/upload-drag-drop-icon.svg';
import { Icon } from '../Icon/Icon';
export const UploadDragNdrop = ({ files, setFiles }) => {
const [dragOverClass, setDragOverClass] = useState(false), dragOverClasses = classNames('upload-dragdrop', {
dragover: dragOverClass,
success: files.length > 0
});
const handleDrop = (event) => {
handleDrag(event);
const droppedFiles = event.dataTransfer.files;
if (droppedFiles.length > 0) {
setFiles(Array.from(droppedFiles));
}
setDragOverClass(false);
}, handleDrag = (event) => {
event.preventDefault();
event.stopPropagation();
}, handleDragOver = (event) => {
handleDrag(event);
setDragOverClass(true);
}, handleDragLeave = (event) => {
handleDrag(event);
setDragOverClass(false);
};
const byteConverter = (bytes) => {
const K_UNIT = 1024;
const SIZES = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB'];
if (bytes == 0)
return '0 Byte';
const i = Math.floor(Math.log(bytes) / Math.log(K_UNIT)), resp = parseFloat((bytes / Math.pow(K_UNIT, i)).toFixed(2)) + ' ' + SIZES[i];
return resp;
};
return (React.createElement("div", { className: dragOverClasses },
React.createElement("div", { className: 'upload-dragdrop-image', onDrop: handleDrop, onDrag: handleDrag, onDragStart: handleDrag, onDragEnd: handleDrag, onDragExit: handleDrag, onDragOver: handleDragOver, onDragEnter: handleDrag, onDragLeave: handleDragLeave },
React.createElement("img", { src: DragandDropIcon, alt: 'descrizione immagine', "aria-hidden": 'true' }),
files.length > 0 && (React.createElement("div", { className: 'upload-dragdrop-success' },
React.createElement(Icon, { icon: 'it-check', size: 'xs' })))),
React.createElement("div", { className: 'upload-dragdrop-text' },
files.length > 0 && (React.createElement("p", { className: 'upload-dragdrop-weight' },
React.createElement(Icon, { icon: 'it-file', size: 'xs' }),
files.map((file) => file.type + ' ' + byteConverter(file.size)))),
files.length > 0 ? (React.createElement(React.Fragment, null,
React.createElement("h5", null, files.map((file) => file.name)),
React.createElement("p", null, "Caricamento completato"))) : (React.createElement(React.Fragment, null,
React.createElement("h5", null, "Trascina il file per caricarlo"),
React.createElement("p", null,
"oppure ",
React.createElement("input", { type: 'file', name: 'upload7', id: 'upload7', className: 'upload-dragdrop-input' }),
React.createElement("label", { htmlFor: 'upload7' }, "selezionalo dal dispositivo")))))));
};
//# sourceMappingURL=UploadDragNdrop.js.map