@acrsolutions/chat-components
Version:
Un set di componenti per la creazione di un'applicazione di messaggistica
40 lines (39 loc) • 2.21 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Close } from '@mui/icons-material';
import AddIcon from '@mui/icons-material/Add';
import { Button, Typography } from '@mui/material';
import { useCallback, useRef } from 'react';
import { StyledDropZone } from '../ui/StyledDropZone';
/**
*
* @param param0
* @param param0.onCloseMedia funzione per chiudere il media
* @param param0.onSelectFile funzione che riceve il click sul file.
* Il target del click è l'input di tipo file; il suo contenuto può essere recuperato con const file = event.target.files?.[0];
*
*/
export function FileDropZone({ onCloseMedia, onSelectFile, onDropUrl, onDropFile, }) {
const fileInputRef = useRef(null); // Referenza all'input nascosto
const handleDragOver = (event) => {
event.preventDefault();
};
const handleDrop = useCallback(async (event) => {
event.preventDefault();
const item = event.dataTransfer.items[0]; // Prendi il primo elemento trascinato. L'Api NON supporta l'invio di più file
if (item.kind === 'string') {
//l'elemento trascinato è un URL, media da browser
item.getAsString(async (url) => {
await onDropUrl(url);
});
return;
}
//altrimenti è un file
const file = event.dataTransfer.files[0]; // Prendi il primo elemento trascinato. L'Api NON supporta l'invio di più file
if (file) {
await onDropFile(file);
}
}, [onDropFile, onDropUrl]);
return (_jsxs(StyledDropZone, { onDragOver: handleDragOver, onDrop: handleDrop, children: [_jsx(Button, { variant: "contained", onClick: onCloseMedia, children: _jsx(Close, { fontSize: "small" }) }), _jsx(Typography, { variant: "h4", color: "textSecondary", textAlign: 'center', children: "Trascina qui un file o un media da browser" }), _jsx(Button, { variant: "outlined", color: "success", onClick: () => {
fileInputRef.current?.click();
}, children: _jsx(AddIcon, { fontSize: "large", color: "action" }) }), _jsx("input", { type: "file", ref: fileInputRef, style: { display: 'none' }, onChange: onSelectFile })] }));
}