@novin-dev/formalite
Version:
Generate MUI form with few line of code
206 lines (203 loc) • 11.2 kB
JavaScript
import { __spreadArray, __assign } from 'tslib';
import React, { useState, useRef, useLayoutEffect, useCallback, useEffect } from 'react';
import { useTheme, Grid, FormLabel, FormControl, FormHelperText } from '@mui/material';
import { getData, checkIsMin } from '../../../config/utils.js';
import { styled, alpha } from '@mui/material/styles';
import { useDropzone } from 'react-dropzone';
import BlockContent from '../Components/BlockContent.js';
import RejectionFiles from '../Components/RejectionFiles.js';
import { TextViewSkeleton } from '../../Bases/SkeletonBase.js';
import { baseMemo } from '../../Bases/functions/memo.js';
import MultiFilePreview from '../Components/MultiFilePreview.js';
import SmallBlockContent from '../Components/SmallBlockContent.js';
import { fixDropZoneDefaultValue } from '../utils.js';
import { getNameFromUrl } from '../../../../../config/utils.js';
var DropZoneStyle = styled("div")(function (_a) {
var theme = _a.theme;
return ({
outline: "none",
overflow: "hidden",
position: "relative",
padding: theme.spacing(4, 1),
borderRadius: theme.shape.borderRadius,
transition: theme.transitions.create("padding"),
backgroundColor: theme.palette.grey[theme.palette.mode === "light" ? 200 : 800],
border: "1px dashed ".concat(alpha(theme.palette.grey[500], 0.32)),
"&:hover": {
background: alpha(theme.palette.grey[theme.palette.mode === "light" ? 200 : 800], 0.72),
cursor: "pointer",
},
});
});
var MultiDropZoneView = function (props
// eslint-disable-next-line sonarjs/cognitive-complexity
) {
var allData = props.allData, name = props.name, formik = props.formik, loading = props.loading, validationSchema = props.validationSchema, translator = props.translator;
var onUpload = allData.onUpload, inputProps = allData.inputProps, layoutProps = allData.layoutProps, onDelete = allData.onDelete, imageDownloader = allData.imageDownloader, showPreview = allData.showPreview, _a = allData.isSmallView, isSmallView = _a === void 0 ? false : _a;
var _b = inputProps.dropZoneOptions, dropZoneOptions = _b === void 0 ? {} : _b, helperText = inputProps.helperText;
var _c = useState(fixDropZoneDefaultValue(getData({ source: formik.values, key: name }) || [])), file = _c[0], setFile = _c[1];
var ref = useRef(null);
var theme = useTheme();
var _d = useState(false), isLessMd = _d[0], setIsLessMd = _d[1];
useLayoutEffect(function () {
var _a;
setIsLessMd((((_a = ref.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0) < theme.breakpoints.values.sm);
}, []);
var isRequired = checkIsMin({
schema: validationSchema,
formikValues: formik.values,
key: String(name),
});
var uploadController = new AbortController();
var handleSetFile = function (item, newData) {
setFile(function (pre) {
var temp = __spreadArray([], pre, true);
if (item.original === "default") {
var index = pre.findIndex(function (i) { return i.uid === item.uid; });
if (index > -1) {
temp[index] = newData;
}
}
return temp;
});
};
var uploadFunction = useCallback(function (item) {
onUpload(item, function (progress) {
setFile(function (pre) {
var tempArray = __spreadArray([], pre, true);
var index = pre.findIndex(function (i) { return i.uid === item.uid; });
if (tempArray[index].original === "selected") {
tempArray[index].progress = progress;
tempArray[index].status = "uploading";
}
return tempArray;
});
}, uploadController)
.then(function (resId) {
setFile(function (pre) {
var tempArray = __spreadArray([], pre, true);
var index = pre.findIndex(function (i) { return i.uid === item.uid; });
if (tempArray[index].original === "selected") {
tempArray[index].uid =
resId || "".concat(Date.now(), "*").concat(tempArray[index].uid);
tempArray[index].status = "done";
tempArray[index].progress = 100;
}
formik.setFieldValue(String(name), tempArray);
return tempArray;
});
})
.catch(function (e) {
setFile(function (pre) {
var tempArray = __spreadArray([], pre, true);
var index = pre.findIndex(function (i) { return i.uid === item.uid; });
if (tempArray[index].original === "selected") {
tempArray[index].status = "error";
tempArray[index].errorText = e.message;
}
return tempArray;
});
});
}, []);
useEffect(function () {
file.forEach(function (item) {
var controller = new AbortController();
if (item.original === "default" && item.status === "not_downloaded") {
if (imageDownloader) {
var newDataForDefaults = Object.assign(item, {
status: "downloading",
});
handleSetFile(item, newDataForDefaults);
imageDownloader(item.preview, item.controller)
.then(function (res) {
var newData = Object.assign(item, {
original: "default",
status: "done",
base64: res.base64,
preview: res.base64,
originalName: res.originalName,
size: res.size,
errorText: "",
controller: controller,
});
handleSetFile(item, newData);
})
.catch(function (e) {
var newData = Object.assign(item, {
original: "default",
status: "error",
errorText: e.message,
});
handleSetFile(item, newData);
});
}
else {
var newData = Object.assign(item, {
original: "default",
status: "done",
base64: item.preview,
preview: item.preview,
originalName: getNameFromUrl(item.preview),
size: 0,
errorText: "",
controller: controller,
});
handleSetFile(item, newData);
}
}
});
}, [formik.values[name]]);
var _e = useDropzone(__assign(__assign({ multiple: true }, dropZoneOptions), { onDrop: function (acceptedFiles) {
var tempFile = acceptedFiles.map(function (item) {
return Object.assign(item, {
original: "selected",
status: "uploading",
progress: 0,
uid: new Date().getTime().toString(),
preview: URL.createObjectURL(item),
errorText: "",
controller: new AbortController(),
});
});
setFile(function (pre) { return __spreadArray(__spreadArray([], pre, true), tempFile, true); });
tempFile.forEach(function (item) { return uploadFunction(item); });
} })), inputRef = _e.inputRef, getRootProps = _e.getRootProps, getInputProps = _e.getInputProps, isDragActive = _e.isDragActive, isDragReject = _e.isDragReject, fileRejections = _e.fileRejections;
if (loading) {
return (React.createElement(Grid, __assign({ item: true }, allData.layoutProps),
React.createElement(TextViewSkeleton, { height: isSmallView ? 126 : 253, hasHelper: !!helperText })));
}
return (React.createElement(Grid, __assign({ item: true }, layoutProps, { id: String(name), ref: ref }),
inputProps.label && (React.createElement(FormLabel, { component: "legend", required: checkIsMin({
schema: validationSchema,
formikValues: formik.values,
key: String(name),
}) }, inputProps.label)),
React.createElement(DropZoneStyle, __assign({}, getRootProps(), { sx: function () { return (__assign(__assign({}, (isDragActive && { opacity: 0.72 })), ((isDragReject ||
(getData({ source: formik.errors, key: name }) &&
getData({ source: formik.touched, key: name }))) && {
color: "error.main",
borderColor: "error.light",
bgcolor: "error.lighter",
padding: theme.spacing(isSmallView ? 3 : 5, 1),
}))); } }),
React.createElement("input", __assign({}, getInputProps(), { ref: inputRef, "data-testid": "drop-input" })),
isSmallView ? (React.createElement(SmallBlockContent, { required: isRequired })) : (React.createElement(BlockContent, { uploadController: new AbortController(), file: null, required: isRequired, uploadFunction: uploadFunction, isLessMd: isLessMd }))),
fileRejections.length > 0 ||
(file.length && file.some(function (item) { return item.status === "error"; })) ? (React.createElement(RejectionFiles, { fileRejections: fileRejections, fileState: file.find(function (item) { return item.status === "error"; }) })) : null,
React.createElement(MultiFilePreview, { files: file, showPreview: !!showPreview, onRemove: onDelete, setFile: setFile, setToFormik: function (newValue) {
formik.setFieldValue(String(name), newValue);
}, uploadFunction: uploadFunction, uploadController: uploadController }),
helperText ||
(getData({ source: formik.touched, key: name }) &&
Boolean(getData({ source: formik.errors, key: name }))) ? (React.createElement(FormControl, null,
React.createElement(FormHelperText, { error: getData({ source: formik.touched, key: name }) &&
Boolean(getData({ source: formik.errors, key: name })) }, getData({ source: formik.touched, key: name }) &&
getData({ source: formik.errors, key: name })
? translator(getData({ source: formik.errors, key: name }))
: helperText))) : null));
};
var MultiDropZoneView$1 = React.memo(MultiDropZoneView, function (prevProps, nextProps) {
return baseMemo(prevProps, nextProps);
});
export { MultiDropZoneView$1 as default };
//# sourceMappingURL=MultiDropZoneView.js.map