@novin-dev/formalite
Version:
Generate MUI form with few line of code
173 lines (166 loc) • 8.43 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var tslib = require('tslib');
var React = require('react');
var material = require('@mui/material');
var compare = require('react-fast-compare');
var SkeletonBase = require('../Bases/SkeletonBase.js');
var utils = require('../../config/utils.js');
var ViewError = require('../../components/ViewError.js');
var model = require('../../../base/model.js');
var ViewPending = require('../../components/ViewPending.js');
var memo = require('../Bases/functions/memo.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var compare__default = /*#__PURE__*/_interopDefaultLegacy(compare);
var OptionsStateEnum;
(function (OptionsStateEnum) {
OptionsStateEnum["READY"] = "ready";
OptionsStateEnum["PENDING"] = "pending";
OptionsStateEnum["REJECTED"] = "rejected";
})(OptionsStateEnum || (OptionsStateEnum = {}));
var handleOptionsData = function (optionsObj) {
return Object.entries(optionsObj).map(function (_a) {
var key = _a[0], value = _a[1];
return ({
key: key,
label: value.label,
});
});
};
var AutoCompleteView = function (props) {
var allData = props.allData, name = props.name, formik = props.formik, loading = props.loading, validationSchema = props.validationSchema, translator = props.translator;
var _a = allData.inputProps, label = _a.label, helperText = _a.helperText, inputProps = tslib.__rest(_a, ["label", "helperText"]);
var _b = allData.autoCompleteProps, onChange = _b.onChange, autoCompleteProps = tslib.__rest(_b, ["onChange"]);
var _c = React.useState({
status: OptionsStateEnum.PENDING,
data: {},
}), optionsStatus = _c[0], setOptionsStatus = _c[1];
var handleGetValue = function () {
var options = handleOptionsData(optionsStatus.data);
var formikData = utils.getData({ source: formik.values, key: name });
if (Array.isArray(formikData)) {
return formikData.map(function (value) {
return (options.find(function (option) {
return autoCompleteProps.freeSolo
? option.label === value
: option.key === value;
}) || { key: value, label: value });
});
}
return options.find(function (option) { return option.key === formikData; }) || null;
};
// eslint-disable-next-line sonarjs/cognitive-complexity
var handleOptionsChange = function (value) {
var isFreeSolo = autoCompleteProps.freeSolo;
var isMultiple = autoCompleteProps.multiple;
var finalValue;
if (isMultiple && value instanceof Array) {
finalValue = value.map(function (oldValue) {
if (typeof oldValue === "string") {
return oldValue;
}
return isFreeSolo ? oldValue.label : oldValue.key;
});
}
else if (value instanceof Object && !(value instanceof Array)) {
finalValue = isFreeSolo ? value.label : value.key;
}
else if (typeof value === "string") {
finalValue = value;
}
else if (!value) {
finalValue = "";
}
formik.setFieldValue(String(name), finalValue);
if (onChange) {
onChange(finalValue);
}
};
var loadFunction = React.useCallback(function () {
if (allData.dataFetching.type === model.FetchingDataEnum.AUTOMATIC) {
setOptionsStatus({ status: OptionsStateEnum.PENDING, data: {} });
var funcResult = allData.dataFetching.options();
funcResult
.then(function (res) {
setOptionsStatus({
status: OptionsStateEnum.READY,
data: res,
});
})
.catch(function (e) {
setOptionsStatus({
status: OptionsStateEnum.REJECTED,
data: {},
error: e,
});
});
}
}, [allData.dataFetching]);
React.useEffect(function () {
if (allData.dataFetching.type === model.FetchingDataEnum.AUTOMATIC) {
loadFunction();
}
else if (allData.dataFetching.error ||
(!allData.dataFetching.loading && !allData.dataFetching.data)) {
setOptionsStatus({
status: OptionsStateEnum.REJECTED,
data: {},
});
}
else if (allData.dataFetching.loading) {
setOptionsStatus({
status: OptionsStateEnum.PENDING,
data: {},
});
}
else if (allData.dataFetching.data) {
setOptionsStatus({
status: OptionsStateEnum.READY,
data: allData.dataFetching.data,
});
}
}, [allData.dataFetching]);
if (loading) {
return (React__default["default"].createElement(material.Grid, tslib.__assign({ item: true }, allData.layoutProps),
React__default["default"].createElement(SkeletonBase.TextViewSkeleton, { hasHelper: !!helperText })));
}
return (React__default["default"].createElement(material.Grid, tslib.__assign({ item: true }, allData.layoutProps),
optionsStatus.status === OptionsStateEnum.READY && (React__default["default"].createElement(material.Autocomplete, tslib.__assign({ value: handleGetValue() || [], options: handleOptionsData(optionsStatus.data), onChange: function (_, value) { return handleOptionsChange(value); }, isOptionEqualToValue: function (option, value) {
// if (typeof value === "string") {
// if (autoCompleteProps.freeSolo) {
// return option.label === value;
// }
// return option.key === value;
// }
// return autoCompleteProps.freeSolo
// ? option.label === value.label
// : option.key === value.key;
return option.key === value.key;
}, getOptionLabel: function (option) {
if (option.label) {
return option.label;
}
return "";
}, renderInput: function (params) { return (React__default["default"].createElement(material.TextField, tslib.__assign({ name: String(name), required: utils.checkIsRequired({
schema: validationSchema,
formikValues: formik.values,
key: String(name),
}), error: utils.getData({ source: formik.touched, key: name }) &&
Boolean(utils.getData({ source: formik.errors, key: name })), label: label, helperText: utils.getData({ source: formik.touched, key: name }) &&
utils.getData({ source: formik.errors, key: name })
? translator(utils.getData({ source: formik.errors, key: name }))
: helperText }, params, inputProps, { InputProps: tslib.__assign(tslib.__assign({}, params.InputProps), inputProps.InputProps) }))); } }, autoCompleteProps))),
optionsStatus.status === OptionsStateEnum.PENDING && (React__default["default"].createElement(ViewPending["default"], { label: label })),
optionsStatus.status === OptionsStateEnum.REJECTED && (React__default["default"].createElement(ViewError["default"], { error: optionsStatus.error, reloadFunction: allData.dataFetching.type === model.FetchingDataEnum.AUTOMATIC
? loadFunction
: allData.dataFetching.onRetry, label: label }))));
};
var AutoCompleteView$1 = React__default["default"].memo(AutoCompleteView, function (prevProps, nextProps) {
var prevDataFetching = prevProps.allData.dataFetching;
var nextDataFetching = nextProps.allData.dataFetching;
return (memo.baseMemo(prevProps, nextProps) &&
compare__default["default"](prevDataFetching, nextDataFetching));
});
exports["default"] = AutoCompleteView$1;
//# sourceMappingURL=AutoCompleteView.js.map