@elacity-js/uikit
Version:
React / Material UI Design kit for Elacity project
138 lines (135 loc) • 6.58 kB
JavaScript
import { __rest } from '../node_modules/tslib/tslib.es6.js';
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import { useCallback, useState, useEffect } from 'react';
import { useDropzone } from 'react-dropzone';
import Box from '@mui/material/Box';
import MediaViewer from './MediaViewer.js';
const Upload = (_a) => {
var { onDropped, onRejected, children, sx, supportedFileDescription } = _a, dropzoneProps = __rest(_a, ["onDropped", "onRejected", "children", "sx", "supportedFileDescription"]);
const onDrop = useCallback(onDropped, []);
const onDropRejected = useCallback((rejectedFiles) => {
console.log('[onDropRejected]', rejectedFiles);
onRejected(rejectedFiles);
}, []);
const { getRootProps, getInputProps, isDragActive } = useDropzone(Object.assign({ onDrop,
onDropRejected, maxSize: 20 * 1024 * 1024 }, dropzoneProps));
return (jsxs(Box, Object.assign({}, getRootProps(), { sx: Object.assign({ borderRadius: 2, border: '3px dotted #aaa', p: 3, mt: 3 }, sx), className: "hoverable" }, { children: [jsx("input", Object.assign({}, getInputProps())), !children &&
(isDragActive ? (jsx("p", { children: "Drop the files here ..." })) : (jsxs("div", Object.assign({ style: {
minHeight: 200,
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
paddingLeft: 10,
paddingRight: 10,
} }, { children: [jsx("span", { children: "Drag and drop some files here, or click to select files" }), jsx("span", Object.assign({ style: { fontWeight: 'bolder' } }, { children: supportedFileDescription }))] })))), children && children] })));
};
Upload.defaultProps = {
// eslint-disable-next-line react/default-props-match-prop-types
accept: {
'image/*': ['.jpeg', '.jpg', '.png', '.gif', '.bmp']
},
supportedFileDescription: 'JPG, PNG, BMP, GIF Max 20Mb',
};
const Inline = (_a) => {
var { hideName, onDropped, onMimeTypeAcquired, initialValue, sx, children, previewStyle, accept } = _a, props = __rest(_a, ["hideName", "onDropped", "onMimeTypeAcquired", "initialValue", "sx", "children", "previewStyle", "accept"]);
const [file, setFile] = useState(null);
const [preview, setPreview] = useState({
src: '',
});
useEffect(() => {
onMimeTypeAcquired === null || onMimeTypeAcquired === void 0 ? void 0 : onMimeTypeAcquired(preview.mimeType);
}, [preview.mimeType]);
useEffect(() => {
if (initialValue) {
setFile(initialValue);
}
}, []);
useEffect(() => () => {
if (file !== null) {
URL.revokeObjectURL(file);
}
});
const handleDropped = (acceptedFiles) => {
var _a, _b;
if (acceptedFiles && acceptedFiles.length > 0) {
// console.log('[Upload.handleDropped]', acceptedFiles[0]);
setFile(acceptedFiles[0]);
const guessMimeType = (suggestedMimeType) => {
// this function will try to resolve the mime type by what has been given
// as argument but when it's too generic, we will try to use the extension instead
const extension = acceptedFiles[0].name.split('.').pop();
if (['application/octet-stream'].includes(suggestedMimeType)) {
// use extension to determine mimetype (not really safe)
switch (extension) {
case 'glb':
case 'gltf':
return 'model/gltf-binary';
case 'obj':
return 'model/obj';
case 'fbx':
default:
return 'application/octet-stream';
}
}
return suggestedMimeType;
};
if ((_a = acceptedFiles[0].type) === null || _a === void 0 ? void 0 : _a.match('image')) {
setPreview({
src: URL.createObjectURL(acceptedFiles[0]),
type: 'image',
mimeType: acceptedFiles[0].type,
});
}
else if ((_b = acceptedFiles[0].type) === null || _b === void 0 ? void 0 : _b.match('video')) {
setPreview({
src: URL.createObjectURL(acceptedFiles[0]),
type: 'video',
mimeType: acceptedFiles[0].type,
});
}
else if (acceptedFiles[0].type === '') {
// try to resolve with FileReader extension
const reader = new FileReader();
reader.onload = (e) => {
setPreview({
src: URL.createObjectURL(acceptedFiles[0]),
type: '3d',
mimeType: guessMimeType(String(e.target.result).split(';base64,').shift().replace(/^data:/gi, '')),
});
};
reader.readAsDataURL(acceptedFiles[0]);
}
else {
setPreview({
src: URL.createObjectURL(acceptedFiles[0]),
type: '3d',
mimeType: guessMimeType(acceptedFiles[0].type),
});
}
if (onDropped) {
onDropped(acceptedFiles[0]);
}
}
else {
setFile(null);
setPreview({
src: '',
});
}
};
return (jsxs(Fragment, { children: [jsx(Upload, Object.assign({ onDropped: handleDropped, maxFiles: 1, accept: accept, sx: sx }, props, { children: Boolean(children)
? children
: preview.src !== '' && (jsx(MediaViewer.Preview, { src: preview.src, mode: "preview", type: preview.type, mimeType: preview.mimeType, style: {
width: '100%',
height: 'auto',
backgroundRepeat: 'no-repeat',
backgroundSize: 'cover',
boxShadow: 'none',
} })) })), !hideName && file !== null && jsx("p", Object.assign({ style: { textAlign: 'center', fontSize: '0.8rem' } }, { children: file.name }))] }));
};
var Uploader = {
Base: Upload,
Inline,
};
export { Uploader as default };
//# sourceMappingURL=Uploader.js.map