@wulperstudio/cms
Version:
Wulper Studio Library Components CMS
235 lines (234 loc) • 10.2 kB
JavaScript
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _Icon, _Typography, _CircularProgress, _Typography2, _Typography3;
var _excluded = ["sx", "onChange", "focusedStyle", "acceptStyle", "rejectStyle", "multiple", "InputProps", "error", "errorMessage", "onDelete", "children", "value", "disabled", "customChildren", "helperNode"];
import React, { useMemo } from 'react';
import { Box, Typography } from '@mui/material';
import { useDropzone } from 'react-dropzone';
import { Icon } from '@iconify/react';
import { v4 } from 'uuid';
import { CircularProgress } from '../CircularProgress';
import { ErrorAlert } from '../../base';
import { AbsoluteElement, ImagePreview, RemoveButton, VideoPreview } from './components';
import { hasPreviewElement } from './helpers';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
var FileDrop = function FileDrop(_ref) {
var _file, _file2, _file3, _mimeType, _mimeType2, _file4, _file5;
var sx = _ref.sx,
onChange = _ref.onChange,
focusedStyle = _ref.focusedStyle,
acceptStyle = _ref.acceptStyle,
rejectStyle = _ref.rejectStyle,
multiple = _ref.multiple,
InputProps = _ref.InputProps,
error = _ref.error,
errorMessage = _ref.errorMessage,
onDelete = _ref.onDelete,
children = _ref.children,
value = _ref.value,
disabled = _ref.disabled,
customChildren = _ref.customChildren,
helperNode = _ref.helperNode,
props = _objectWithoutProperties(_ref, _excluded);
var _React$useState = React.useState('clear'),
_React$useState2 = _slicedToArray(_React$useState, 2),
stateFile = _React$useState2[0],
setStateFile = _React$useState2[1];
var _React$useState3 = React.useState(),
_React$useState4 = _slicedToArray(_React$useState3, 2),
innerFiles = _React$useState4[0],
setInnerFiles = _React$useState4[1];
var _React$useState5 = React.useState(),
_React$useState6 = _slicedToArray(_React$useState5, 2),
innerValue = _React$useState6[0],
setInnerValue = _React$useState6[1];
var _useDropzone = useDropzone(Object.assign({}, props, {
onDrop: function onDrop(accepted, rejected, event) {
var files = accepted.map(function (file) {
return {
id: file.name,
file: file
};
});
onChange == null || onChange(files, rejected, event);
if (multiple) {
setInnerFiles(files);
} else {
var _final = _toConsumableArray(accepted).pop();
if (_final) {
var reader = new FileReader();
reader.onloadstart = function () {
setStateFile('loading');
};
reader.onload = function () {
setInnerFiles({
id: v4(),
file: _final
});
};
reader.onloadend = function () {
setStateFile('success');
};
reader.onerror = function () {
setStateFile('error');
};
reader.onabort = function () {
setStateFile('abort');
};
reader.readAsDataURL(_final);
}
}
},
disabled: disabled,
multiple: multiple
})),
getRootProps = _useDropzone.getRootProps,
getInputProps = _useDropzone.getInputProps,
isFocused = _useDropzone.isFocused,
isDragAccept = _useDropzone.isDragAccept,
isDragReject = _useDropzone.isDragReject;
var temp_url = useMemo(function () {
if (!innerFiles || multiple) return undefined;
return URL.createObjectURL(innerFiles == null ? void 0 : innerFiles.file);
}, [innerFiles, multiple]);
var handleDeleteMultipleFile = function handleDeleteMultipleFile(id) {
if (!id) return;
if (multiple) {
setInnerFiles(function (prev) {
return _toConsumableArray(prev).filter(function (f) {
return f.id !== id;
});
});
}
if (temp_url && !multiple) {
URL.revokeObjectURL(temp_url);
}
onDelete == null || onDelete(id);
};
var style = useMemo(function () {
return Object.assign({}, sx, isFocused ? focusedStyle : {}, isDragAccept ? acceptStyle : {}, isDragReject ? rejectStyle : {});
}, [isFocused, isDragAccept, isDragReject, focusedStyle, acceptStyle, rejectStyle, sx]);
// // Estar pendiente de los cambios del value
React.useEffect(function () {
if (value) setInnerValue(value);
}, [value]);
return /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsxs(Box, Object.assign({}, getRootProps(), {
sx: Object.assign({
borderRadius: 1,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
aspectRatio: '16 / 9',
mb: 1.5,
width: '100%',
maxWidth: 320,
height: 'auto',
overflow: 'hidden',
borderWidth: '1px',
borderColor: '#000',
borderStyle: 'dashed',
position: 'relative'
}, style),
children: [/*#__PURE__*/_jsx("input", Object.assign({}, getInputProps(InputProps))), /*#__PURE__*/_jsx(Box, {
sx: Object.assign({
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
gap: '.7rem'
}, stateFile !== 'clear' && {
display: 'none'
}, !multiple && innerValue && {
display: 'none'
}, !multiple && innerFiles && {
display: 'none'
}),
children: customChildren || /*#__PURE__*/_jsxs(_Fragment, {
children: [_Icon || (_Icon = /*#__PURE__*/_jsx(Icon, {
icon: "line-md:downloading-loop",
color: "#000",
width: "52",
height: "52"
})), _Typography || (_Typography = /*#__PURE__*/_jsxs(Typography, {
textAlign: "center",
fontWeight: 600,
variant: "body1",
children: ["Drag file here", /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx(Typography, {
component: "span",
fontWeight: 400,
fontSize: "14px",
color: "text.secondary",
children: "or, click to browse"
})]
}))]
})
}), !disabled && !multiple && innerValue && /*#__PURE__*/_jsx(AbsoluteElement, {
children: /*#__PURE__*/_jsx(RemoveButton, {
onClick: function onClick() {
onDelete == null || onDelete(innerValue == null ? void 0 : innerValue.id);
setInnerValue(undefined);
setStateFile('clear');
}
})
}), !disabled && !multiple && innerFiles && /*#__PURE__*/_jsx(AbsoluteElement, {
children: /*#__PURE__*/_jsx(RemoveButton, {
onClick: function onClick() {
onDelete == null || onDelete(innerFiles == null ? void 0 : innerFiles.id);
setInnerFiles(undefined);
setStateFile('clear');
}
})
}), !multiple && innerFiles && (innerFiles == null || (_file = innerFiles.file) == null || (_file = _file.type) == null ? void 0 : _file.includes('image')) && /*#__PURE__*/_jsx(ImagePreview, {
alt: innerFiles == null || (_file2 = innerFiles.file) == null ? void 0 : _file2.name,
src: temp_url
}), !multiple && innerFiles && !value && (innerFiles == null || (_file3 = innerFiles.file) == null || (_file3 = _file3.type) == null ? void 0 : _file3.includes('video')) && /*#__PURE__*/_jsx(VideoPreview, {
src: temp_url
}), !multiple && innerValue && (innerValue == null || (_mimeType = innerValue.mimeType) == null ? void 0 : _mimeType.includes('image')) && /*#__PURE__*/_jsx(ImagePreview, {
alt: (value == null ? void 0 : value.name) || '',
src: (value == null ? void 0 : value.url) || ''
}), !multiple && innerValue && (innerValue == null || (_mimeType2 = innerValue.mimeType) == null ? void 0 : _mimeType2.includes('video')) && /*#__PURE__*/_jsx(VideoPreview, {
src: (value == null ? void 0 : value.url) || ''
}), !multiple && !hasPreviewElement(innerFiles == null || (_file4 = innerFiles.file) == null ? void 0 : _file4.type) && /*#__PURE__*/_jsx(Typography, {
textAlign: "center",
fontWeight: 600,
variant: "body1",
children: innerFiles == null || (_file5 = innerFiles.file) == null ? void 0 : _file5.name
}), !multiple && !hasPreviewElement(innerValue == null ? void 0 : innerValue.mimeType) && /*#__PURE__*/_jsx(Typography, {
textAlign: "center",
fontWeight: 600,
variant: "body1",
children: innerValue == null ? void 0 : innerValue.name
}), !multiple && stateFile === 'loading' && (_CircularProgress || (_CircularProgress = /*#__PURE__*/_jsx(CircularProgress, {}))), stateFile === 'error' && (_Typography2 || (_Typography2 = /*#__PURE__*/_jsx(Typography, {
textAlign: "center",
fontWeight: 600,
variant: "body1",
children: "Error"
}))), stateFile === 'abort' && (_Typography3 || (_Typography3 = /*#__PURE__*/_jsx(Typography, {
textAlign: "center",
fontWeight: 600,
variant: "body1",
children: "Aborted"
})))]
})), error && /*#__PURE__*/_jsx(ErrorAlert, {
sx: {
maxWidth: 320
},
children: errorMessage
}), multiple && (value == null ? void 0 : value.map(function (file) {
return /*#__PURE__*/_jsx(React.Fragment, {
children: children == null ? void 0 : children(file, function () {
return onDelete == null ? void 0 : onDelete(file.id);
})
}, file.id);
})), multiple && (innerFiles == null ? void 0 : innerFiles.map(function (file) {
return /*#__PURE__*/_jsx(React.Fragment, {
children: children == null ? void 0 : children(file, function () {
return handleDeleteMultipleFile(file.id);
})
}, file.id);
})), helperNode]
});
};
export default FileDrop;