@novin-dev/formalite
Version:
Generate MUI form with few line of code
150 lines (143 loc) • 8.1 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var tslib = require('tslib');
var material = require('@mui/material');
var React = require('react');
var memo = require('../../Bases/functions/memo.js');
var utils = require('../../../config/utils.js');
var reactDropzone = require('react-dropzone');
var SkeletonBase = require('../../Bases/SkeletonBase.js');
var RejectionFiles = require('../Components/RejectionFiles.js');
var AvatarComponent = require('./elements/AvatarComponent.js');
var utils$1 = 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 AvatarDropZone = function (props) {
var allData = props.allData, name = props.name, formik = props.formik, loading = props.loading; props.lang; props.validationSchema; var translator = props.translator; props.isUpdateMode; props.formMustRegex;
var onUpload = allData.onUpload, inputProps = allData.inputProps, layoutProps = allData.layoutProps, onDelete = allData.onDelete, imageDownloader = allData.imageDownloader;
var _a = inputProps.dropZoneOptions, dropZoneOptions = _a === void 0 ? {} : _a, helperText = inputProps.helperText;
var _b = React.useState([]), file = _b[0], setFile = _b[1];
var _c = React.useState(false), preventDrop = _c[0], setPreventDefault = _c[1];
var uploadController = new AbortController();
var uploadFunction = React.useCallback(function (item) {
onUpload(item, function (progress) {
setFile(function (pre) {
var tempArray = tslib.__spreadArray([], pre, true);
if (tempArray.length &&
tempArray[0].status &&
tempArray[0].original === "selected") {
tempArray[0].progress = progress;
tempArray[0].status = "uploading";
}
return tempArray;
});
}, uploadController)
.then(function (resId) {
setFile(function (pre) {
var tempArray = tslib.__spreadArray([], pre, true);
if (tempArray.length && tempArray[0].original === "selected") {
tempArray[0].uid = resId;
tempArray[0].status = "done";
tempArray[0].progress = 100;
}
formik.setFieldValue(String(name), tempArray);
return tempArray;
});
})
.catch(function (e) {
setFile(function (pre) {
var tempArray = tslib.__spreadArray([], pre, true);
if (tempArray.length &&
tempArray[0].status &&
tempArray[0].original === "selected") {
tempArray[0].status = "error";
tempArray[0].errorText = e.message;
}
return tempArray;
});
});
}, []);
React.useEffect(function () {
if (utils.getData({ source: formik.values, key: name }) &&
utils.getData({ source: formik.values, key: name }).length) {
var firstData_1 = utils.getData({ source: formik.values, key: name })[0];
var controller_1 = new AbortController();
if (firstData_1.original !== "selected" && !!firstData_1.preview) {
setPreventDefault(true);
if (imageDownloader) {
imageDownloader(firstData_1.preview, controller_1)
.then(function (res) {
var data = Object.assign(firstData_1, {
original: "default",
status: "done",
base64: res.base64,
preview: res.base64,
originalName: res.originalName,
size: res.size,
errorText: "",
controller: controller_1,
});
setFile([data]);
setPreventDefault(false);
})
.catch(function (e) {
var data = Object.assign(firstData_1, {
original: "default",
status: "error",
errorText: e.message,
});
setFile([data]);
setPreventDefault(false);
});
}
else {
var data = Object.assign(firstData_1, {
original: "default",
status: "done",
base64: firstData_1.preview,
preview: firstData_1.preview,
originalName: utils$1.getNameFromUrl(firstData_1.preview),
size: 0,
errorText: "",
controller: controller_1,
});
setFile([data]);
setPreventDefault(false);
}
}
}
}, [formik.values[name]]);
var _d = reactDropzone.useDropzone(tslib.__assign(tslib.__assign({ multiple: false }, dropZoneOptions), { disabled: preventDrop, onDrop: function (acceptedFiles) {
var tempFile = Object.assign(acceptedFiles[0], {
original: "selected",
status: "uploading",
progress: 0,
uid: new Date().getTime().toString(),
preview: URL.createObjectURL(acceptedFiles[0]),
errorText: "",
controller: new AbortController(),
});
setFile([tempFile]);
uploadFunction(tempFile);
} })), getRootProps = _d.getRootProps, getInputProps = _d.getInputProps, isDragActive = _d.isDragActive, isDragReject = _d.isDragReject, fileRejections = _d.fileRejections;
if (loading || preventDrop) {
return (React__default["default"].createElement(material.Grid, tslib.__assign({ item: true }, layoutProps),
React__default["default"].createElement(SkeletonBase.AvatarViewSkeleton, { height: 126, hasHelper: !!helperText })));
}
return (React__default["default"].createElement(material.Grid, tslib.__assign({ item: true }, allData.layoutProps, { id: String(name) }),
React__default["default"].createElement(AvatarComponent.AvatarComponent, { formik: formik, name: String(name), file: file, uploadController: uploadController, setFile: setFile, onDelete: onDelete, getRootProps: getRootProps, getInputProps: getInputProps, isDragActive: isDragActive, isDragReject: isDragReject }),
(fileRejections.length > 0 ||
(typeof file[0] === "object" && file[0].status === "error")) && (React__default["default"].createElement(RejectionFiles["default"], { fileRejections: fileRejections, fileState: file[0] })),
helperText ||
(utils.getData({ source: formik.touched, key: name }) &&
Boolean(utils.getData({ source: formik.errors, key: name }))) ? (React__default["default"].createElement(material.FormControl, { sx: { alignItems: "center", display: "flex" } },
React__default["default"].createElement(material.FormHelperText, null, utils.getData({ source: formik.touched, key: name }) &&
utils.getData({ source: formik.errors, key: name })
? translator(utils.getData({ source: formik.errors, key: name }))
: helperText))) : null));
};
var AvatarDropZoneView = React__default["default"].memo(AvatarDropZone, function (prevProps, nextProps) {
return memo.baseMemo(prevProps, nextProps);
});
exports["default"] = AvatarDropZoneView;
//# sourceMappingURL=AvatarDropZoneView.js.map