@wulperstudio/cms
Version:
Wulper Studio Library Components CMS
245 lines (243 loc) • 12.1 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _material = require("@mui/material");
var _reactDropzone = require("react-dropzone");
var _react2 = require("@iconify/react");
var _uuid = require("uuid");
var _CircularProgress2 = require("../CircularProgress");
var _base = require("../../base");
var _components = require("./components");
var _helpers = require("./helpers");
var _jsxRuntime = require("react/jsx-runtime");
var _Icon, _Typography, _CircularProgress, _Typography2, _Typography3;
var _excluded = ["sx", "onChange", "focusedStyle", "acceptStyle", "rejectStyle", "multiple", "InputProps", "error", "errorMessage", "onDelete", "children", "value", "disabled", "customChildren", "helperNode"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
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 = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
var _React$useState = _react["default"].useState('clear'),
_React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
stateFile = _React$useState2[0],
setStateFile = _React$useState2[1];
var _React$useState3 = _react["default"].useState(),
_React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
innerFiles = _React$useState4[0],
setInnerFiles = _React$useState4[1];
var _React$useState5 = _react["default"].useState(),
_React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
innerValue = _React$useState6[0],
setInnerValue = _React$useState6[1];
var _useDropzone = (0, _reactDropzone.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 = (0, _toConsumableArray2["default"])(accepted).pop();
if (_final) {
var reader = new FileReader();
reader.onloadstart = function () {
setStateFile('loading');
};
reader.onload = function () {
setInnerFiles({
id: (0, _uuid.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 = (0, _react.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 (0, _toConsumableArray2["default"])(prev).filter(function (f) {
return f.id !== id;
});
});
}
if (temp_url && !multiple) {
URL.revokeObjectURL(temp_url);
}
onDelete == null || onDelete(id);
};
var style = (0, _react.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["default"].useEffect(function () {
if (value) setInnerValue(value);
}, [value]);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.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__*/(0, _jsxRuntime.jsx)("input", Object.assign({}, getInputProps(InputProps))), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.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__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [_Icon || (_Icon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
icon: "line-md:downloading-loop",
color: "#000",
width: "52",
height: "52"
})), _Typography || (_Typography = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
textAlign: "center",
fontWeight: 600,
variant: "body1",
children: ["Drag file here", /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
component: "span",
fontWeight: 400,
fontSize: "14px",
color: "text.secondary",
children: "or, click to browse"
})]
}))]
})
}), !disabled && !multiple && innerValue && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.AbsoluteElement, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.RemoveButton, {
onClick: function onClick() {
onDelete == null || onDelete(innerValue == null ? void 0 : innerValue.id);
setInnerValue(undefined);
setStateFile('clear');
}
})
}), !disabled && !multiple && innerFiles && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.AbsoluteElement, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.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__*/(0, _jsxRuntime.jsx)(_components.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__*/(0, _jsxRuntime.jsx)(_components.VideoPreview, {
src: temp_url
}), !multiple && innerValue && (innerValue == null || (_mimeType = innerValue.mimeType) == null ? void 0 : _mimeType.includes('image')) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.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__*/(0, _jsxRuntime.jsx)(_components.VideoPreview, {
src: (value == null ? void 0 : value.url) || ''
}), !multiple && !(0, _helpers.hasPreviewElement)(innerFiles == null || (_file4 = innerFiles.file) == null ? void 0 : _file4.type) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
textAlign: "center",
fontWeight: 600,
variant: "body1",
children: innerFiles == null || (_file5 = innerFiles.file) == null ? void 0 : _file5.name
}), !multiple && !(0, _helpers.hasPreviewElement)(innerValue == null ? void 0 : innerValue.mimeType) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
textAlign: "center",
fontWeight: 600,
variant: "body1",
children: innerValue == null ? void 0 : innerValue.name
}), !multiple && stateFile === 'loading' && (_CircularProgress || (_CircularProgress = /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress2.CircularProgress, {}))), stateFile === 'error' && (_Typography2 || (_Typography2 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
textAlign: "center",
fontWeight: 600,
variant: "body1",
children: "Error"
}))), stateFile === 'abort' && (_Typography3 || (_Typography3 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
textAlign: "center",
fontWeight: 600,
variant: "body1",
children: "Aborted"
})))]
})), error && /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.ErrorAlert, {
sx: {
maxWidth: 320
},
children: errorMessage
}), multiple && (value == null ? void 0 : value.map(function (file) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react["default"].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__*/(0, _jsxRuntime.jsx)(_react["default"].Fragment, {
children: children == null ? void 0 : children(file, function () {
return handleDeleteMultipleFile(file.id);
})
}, file.id);
})), helperNode]
});
};
var _default = exports["default"] = FileDrop;