@novin-dev/formalite
Version:
Generate MUI form with few line of code
187 lines (180 loc) • 11.3 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var tslib = require('tslib');
var material = require('@mui/material');
var TextFieldBase = require('../../Bases/TextFieldBase.js');
var React = require('react');
var memo = require('../../Bases/functions/memo.js');
var AttachFileIcon = require('@mui/icons-material/AttachFile');
var utils$1 = require('../../../config/utils.js');
var reactDropzone = require('react-dropzone');
var RejectionFiles = require('../Components/RejectionFiles.js');
var MultiFilePreview = require('../Components/MultiFilePreview.js');
var utils = require('../utils.js');
var utils$2 = require('../../../../../config/utils.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var AttachFileIcon__default = /*#__PURE__*/_interopDefaultLegacy(AttachFileIcon);
var TextDropZoneView = function (props
// eslint-disable-next-line sonarjs/cognitive-complexity
) {
var _a, _b;
var allData = props.allData, name = props.name, formik = props.formik, loading = props.loading, validationSchema = props.validationSchema, translator = props.translator, formMustRegex = props.formMustRegex;
var _c = allData.inputProps; _c.onChange; var helperText = _c.helperText, _d = _c.dropZoneOptions, dropZoneOptions = _d === void 0 ? {} : _d, inputProps = tslib.__rest(_c, ["onChange", "helperText", "dropZoneOptions"]);
var onDelete = allData.onDelete, imageDownloader = allData.imageDownloader, onUpload = allData.onUpload, _e = allData.showPreview, showPreview = _e === void 0 ? false : _e;
var _f = React.useState(utils.fixDropZoneDefaultValue(((_a = utils$1.getData({ source: formik.values, key: name })) === null || _a === void 0 ? void 0 : _a.files) || [])), file = _f[0], setFile = _f[1];
var uploadController = new AbortController();
var handleSetFile = function (item, newData) {
setFile(function (pre) {
var temp = tslib.__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 = React.useCallback(function (item) {
onUpload(item, function (progress) {
setFile(function (pre) {
var tempArray = tslib.__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 = tslib.__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("".concat(String(name), ".files"), tempArray);
return tempArray;
});
})
.catch(function (e) {
setFile(function (pre) {
var tempArray = tslib.__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;
});
});
}, []);
React.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: utils$2.getNameFromUrl(item.preview),
size: 0,
errorText: "",
controller: controller,
});
handleSetFile(item, newData);
}
}
});
}, [(_b = utils$1.getData({ source: formik.values, key: name })) === null || _b === void 0 ? void 0 : _b.files]);
var _g = reactDropzone.useDropzone(tslib.__assign(tslib.__assign({ multiple: true, noClick: true, noKeyboard: 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: "",
});
});
setFile(function (pre) { return tslib.__spreadArray(tslib.__spreadArray([], pre, true), tempFile, true); });
tempFile.forEach(function (item) { return uploadFunction(item); });
} })), getRootProps = _g.getRootProps, getInputProps = _g.getInputProps, fileRejections = _g.fileRejections, open = _g.open, isDragActive = _g.isDragActive; _g.isDragReject; var inputRef = _g.inputRef;
return (React__default["default"].createElement(material.Grid, tslib.__assign({ item: true }, allData.layoutProps, getRootProps(), { id: String(name) }),
React__default["default"].createElement(TextFieldBase.TextFieldBase, tslib.__assign({ formik: formik, loading: loading, validationSchema: validationSchema, translator: translator, name: "".concat(String(name), ".text"), mustRegex: [allData.mustRegex, formMustRegex] }, inputProps, { sx: function (theme) { return (tslib.__assign({ background: isDragActive
? material.alpha(theme.palette.grey[500], 0.2)
: undefined }, (typeof inputProps.sx === "function" ? inputProps.sx(theme) : {}))); }, InputProps: tslib.__assign(tslib.__assign({}, (inputProps.InputProps || {})), { endAdornment: (React__default["default"].createElement(material.InputAdornment, { position: "end" },
React__default["default"].createElement("input", tslib.__assign({}, getInputProps(), { ref: inputRef, "data-testid": "drop-input" })),
React__default["default"].createElement(material.IconButton, { sx: allData.inputProps.multiline
? {
position: "absolute",
top: "8px",
right: "8px",
}
: {}, color: utils$1.getData({ source: formik.touched, key: name }) &&
utils$1.getData({
source: formik.errors,
key: "".concat(String(name), ".files"),
})
? "error"
: "default", onClick: open, onMouseDown: function (e) { return e.stopPropagation(); } },
React__default["default"].createElement(AttachFileIcon__default["default"], null)))) }) })),
!loading ? (React__default["default"].createElement(React__default["default"].Fragment, null,
fileRejections.length > 0 ||
(file.length && file.some(function (item) { return item.status === "error"; })) ? (React__default["default"].createElement(RejectionFiles["default"], { fileRejections: fileRejections, fileState: file.find(function (item) { return item.status === "error"; }) })) : null,
React__default["default"].createElement(MultiFilePreview["default"], { files: file, showPreview: showPreview, onRemove: onDelete, setFile: setFile, setToFormik: function (newValue) {
formik.setFieldValue("".concat(String(name), ".files"), newValue);
}, uploadFunction: uploadFunction, uploadController: uploadController }))) : null,
helperText ||
(utils$1.getData({ source: formik.touched, key: name }) &&
Boolean(utils$1.getData({ source: formik.errors, key: name }))) ? (React__default["default"].createElement(material.FormControl, null,
React__default["default"].createElement(material.FormHelperText, { error: !!utils$1.getData({ source: formik.touched, key: name }) &&
!!utils$1.getData({ source: formik.errors, key: "".concat(String(name), ".files") }) }, utils$1.getData({ source: formik.touched, key: name }) &&
utils$1.getData({ source: formik.errors, key: "".concat(String(name), ".files") })
? translator(utils$1.getData({
source: formik.errors,
key: "".concat(String(name), ".files"),
}))
: helperText))) : null));
};
var TextDropZoneView$1 = React__default["default"].memo(TextDropZoneView, function (prevProps, nextProps) {
return memo.baseMemo(prevProps, nextProps);
});
exports["default"] = TextDropZoneView$1;
//# sourceMappingURL=TextDropZoneView.js.map