@wulperstudio/cms
Version:
Wulper Studio Library Components CMS
260 lines • 11.1 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 _excluded = ["onDropElement", "onClickShape", "onDelete", "onChange", "getActualFiles", "name", "label", "variantShape", "variant", "accept", "disabled", "multiple", "error", "errorMessage", "filesDB", "iconSet", "customIcons", "shapeProps", "helperNode", "errorVariant", "addIcon", "wrapperShapeProps"];
import React, { useCallback } from 'react';
import { useDropzone } from 'react-dropzone';
import { Icon } from '@iconify/react';
import { v4 } from 'uuid';
import { IconButton, alpha, useTheme } from '@mui/material';
import { Root, DeleteWrapper, Wrapper, WithoutImageLoad, WrapperElement, ImageInputFile, WrapperBody, FixedElement } from './styled';
import { ErrorAlert, InputLabel, WrapperInputVariant } from '../../base/input';
import { ICONS_NAME } from '../../helpers/icons';
import { Results } from './Results';
import { validateMimeImage } from './helper';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var AttachFileDrop = function AttachFileDrop(props) {
var _files$2, _files$3;
var onDropElement = props.onDropElement,
onClickShape = props.onClickShape,
onDelete = props.onDelete,
onChange = props.onChange,
getActualFiles = props.getActualFiles,
name = props.name,
label = props.label,
variantShape = props.variantShape,
_props$variant = props.variant,
variant = _props$variant === void 0 ? 'divider' : _props$variant,
accept = props.accept,
disabled = props.disabled,
_props$multiple = props.multiple,
multiple = _props$multiple === void 0 ? false : _props$multiple,
error = props.error,
errorMessage = props.errorMessage,
filesDB = props.filesDB,
_props$iconSet = props.iconSet,
iconSet = _props$iconSet === void 0 ? 'file' : _props$iconSet,
customIcons = props.customIcons,
shapeProps = props.shapeProps,
helperNode = props.helperNode,
errorVariant = props.errorVariant,
addIcon = props.addIcon,
wrapperShapeProps = props.wrapperShapeProps,
rest = _objectWithoutProperties(props, _excluded);
var theme = useTheme();
var _React$useState = React.useState([]),
_React$useState2 = _slicedToArray(_React$useState, 2),
files = _React$useState2[0],
setFiles = _React$useState2[1];
var _React$useState3 = React.useState([]),
_React$useState4 = _slicedToArray(_React$useState3, 2),
filesDb = _React$useState4[0],
setFilesDb = _React$useState4[1];
var _React$useState5 = React.useState(false),
_React$useState6 = _slicedToArray(_React$useState5, 2),
onFocusInput = _React$useState6[0],
setOnFocusInput = _React$useState6[1];
var _onDropAccepted = React.useCallback(function (acceptedFiles) {
var mappedAcc = acceptedFiles.map(function (file) {
return {
id: v4(),
file: file
};
});
if (multiple) {
var newsFiles = [].concat(_toConsumableArray(files), _toConsumableArray(mappedAcc));
setFiles(newsFiles);
getActualFiles == null || getActualFiles(newsFiles);
} else {
var _final = mappedAcc.pop();
if (_final) {
setFiles([_final]);
getActualFiles == null || getActualFiles([_final]);
setFilesDb([]);
}
}
if (onDropElement) onDropElement(acceptedFiles);
}, [multiple, onDropElement]);
var _useDropzone = useDropzone({
onDropAccepted: function onDropAccepted(acceptedFiles) {
_onDropAccepted(acceptedFiles);
},
accept: accept,
disabled: disabled,
multiple: multiple
}),
getRootProps = _useDropzone.getRootProps,
getInputProps = _useDropzone.getInputProps;
var deleteFile = useCallback(function (id) {
var newFiles = files == null ? void 0 : files.filter(function (file) {
return file.id !== id;
});
setFiles(newFiles);
getActualFiles == null || getActualFiles(newFiles);
onDelete == null || onDelete(id);
}, [files]);
var deleteFilesDb = useCallback(function (id) {
var newFilesDb = filesDb == null ? void 0 : filesDb.filter(function (file) {
return file.id !== id;
});
setFilesDb(newFilesDb);
onDelete == null || onDelete(id);
}, [filesDb, onDelete]);
React.useEffect(function () {
if (filesDB) {
setFilesDb(filesDB);
setFiles([]);
}
}, [filesDB]);
return /*#__PURE__*/_jsxs(Root, {
children: [variant === 'labelOut' && label && /*#__PURE__*/_jsx(InputLabel, {
variant: variant,
htmlFor: props.id,
focused: onFocusInput,
children: label
}), /*#__PURE__*/_jsxs(WrapperInputVariant, {
variant: variant,
error: error,
size: "auto",
backgroundColor: props.backgroundColor,
children: [variant !== 'labelOut' && label && /*#__PURE__*/_jsx(InputLabel, {
variant: variant,
htmlFor: props.id,
focused: onFocusInput,
children: label
}), /*#__PURE__*/_jsxs(WrapperBody, {
children: [/*#__PURE__*/_jsxs(Wrapper, Object.assign({
size: props.variantSize
}, wrapperShapeProps, getRootProps(), {
onClick: function onClick(e) {
var _getRootProps, _getRootProps$onClick, _wrapperShapeProps$on;
(_getRootProps = getRootProps()) == null || (_getRootProps$onClick = _getRootProps.onClick) == null || _getRootProps$onClick.call(_getRootProps, e);
onClickShape == null || onClickShape(e);
wrapperShapeProps == null || (_wrapperShapeProps$on = wrapperShapeProps.onClick) == null || _wrapperShapeProps$on.call(wrapperShapeProps, e);
},
children: [/*#__PURE__*/_jsx("input", Object.assign({}, rest, {
id: name,
name: name,
multiple: multiple,
onFocus: function onFocus() {
setOnFocusInput(true);
},
onBlur: function onBlur() {
return setOnFocusInput(false);
}
}, getInputProps({
onChange: onChange
}))), !multiple && (filesDb == null ? void 0 : filesDb.length) > 0 && /*#__PURE__*/_jsxs(DeleteWrapper, {
children: [!disabled && /*#__PURE__*/_jsx(FixedElement, {
children: /*#__PURE__*/_jsx(IconButton, {
size: "small",
onClick: function onClick(e) {
e.stopPropagation();
deleteFilesDb(filesDb[0].id);
},
sx: {
width: '24px',
height: '24px',
backgroundColor: 'background.default',
'&:hover': {
backgroundColor: alpha(theme.palette.background["default"], 0.9)
}
},
children: /*#__PURE__*/_jsx(Icon, {
icon: ICONS_NAME.close,
color: theme.palette.text.secondary,
width: "24px"
})
})
}), /*#__PURE__*/_jsx(WrapperElement, {
variant: variantShape,
border: !validateMimeImage(filesDb[0].url),
children: validateMimeImage(filesDb[0].url) ? /*#__PURE__*/_jsx(ImageInputFile, {
src: filesDb[0].url,
alt: filesDb[0].url || 'unknown'
}) : /*#__PURE__*/_jsx(Icon, {
icon: (customIcons == null ? void 0 : customIcons[iconSet]) || '',
width: "48px",
color: "inherit"
})
})]
}), /*#__PURE__*/_jsx(WithoutImageLoad, {
variant: variantShape,
size: props.variantSize,
sx: Object.assign({}, !multiple && (filesDb == null ? void 0 : filesDb.length) > 0 && {
display: 'none'
}, !multiple && (files == null ? void 0 : files.length) > 0 && {
display: 'none'
}),
children: addIcon || /*#__PURE__*/_jsx(Icon, {
icon: ICONS_NAME.add,
color: theme.palette.text.secondary,
width: "30",
height: "30"
})
}), !multiple && (files == null ? void 0 : files.length) > 0 && /*#__PURE__*/_jsxs(DeleteWrapper, {
onClick: function onClick(e) {
return e.stopPropagation();
},
children: [!disabled && /*#__PURE__*/_jsx(FixedElement, {
children: /*#__PURE__*/_jsx(IconButton, {
size: "small",
onClick: function onClick(e) {
var _files$;
e.stopPropagation();
deleteFile(files == null || (_files$ = files[0]) == null ? void 0 : _files$.id);
},
sx: {
width: '24px',
height: '24px',
backgroundColor: 'background.default',
'&:hover': {
backgroundColor: alpha(theme.palette.background["default"], 0.9)
}
},
children: /*#__PURE__*/_jsx(Icon, {
icon: ICONS_NAME.close,
color: theme.palette.text.secondary
})
})
}), /*#__PURE__*/_jsx(WrapperElement, Object.assign({
variant: variantShape,
size: props.variantSize,
border: !(files != null && (_files$2 = files[0]) != null && (_files$2 = _files$2.file) != null && (_files$2 = _files$2.type) != null && _files$2.includes('image'))
}, shapeProps, {
onClick: function onClick(e) {
var _shapeProps$onClick;
e.stopPropagation();
shapeProps == null || (_shapeProps$onClick = shapeProps.onClick) == null || _shapeProps$onClick.call(shapeProps, e);
},
children: files != null && (_files$3 = files[0]) != null && _files$3.file.type.includes('image/') ? /*#__PURE__*/_jsx(ImageInputFile, {
src: URL.createObjectURL(files[0].file),
alt: files[0].file.name || 'unknown'
}) : /*#__PURE__*/_jsx(Icon, {
icon: (customIcons == null ? void 0 : customIcons[iconSet]) || '',
width: "48px",
color: "inherit"
})
}))]
})]
})), /*#__PURE__*/_jsx(Results, {
files: files,
filesDB: filesDb,
variantShape: variantShape,
variantSize: props.variantSize,
deleteFile: deleteFile,
deleteFilesDb: deleteFilesDb,
disabled: disabled,
customIcons: customIcons,
iconSet: iconSet,
multiple: multiple,
shapeProps: shapeProps
})]
})]
}), helperNode, error && /*#__PURE__*/_jsx(ErrorAlert, {
variant: errorVariant,
children: errorMessage
})]
});
};
export default AttachFileDrop;