@novin-dev/formalite
Version:
Generate MUI form with few line of code
164 lines (161 loc) • 7.82 kB
JavaScript
import { __rest, __assign } from 'tslib';
import React, { useState, useCallback, useEffect } from 'react';
import { Grid, Autocomplete, TextField } from '@mui/material';
import compare from 'react-fast-compare';
import { TextViewSkeleton } from '../Bases/SkeletonBase.js';
import { checkIsRequired, getData } from '../../config/utils.js';
import ViewError from '../../components/ViewError.js';
import { FetchingDataEnum } from '../../../base/model.js';
import ViewPending from '../../components/ViewPending.js';
import { baseMemo } from '../Bases/functions/memo.js';
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 = __rest(_a, ["label", "helperText"]);
var _b = allData.autoCompleteProps, onChange = _b.onChange, autoCompleteProps = __rest(_b, ["onChange"]);
var _c = useState({
status: OptionsStateEnum.PENDING,
data: {},
}), optionsStatus = _c[0], setOptionsStatus = _c[1];
var handleGetValue = function () {
var options = handleOptionsData(optionsStatus.data);
var formikData = 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 = useCallback(function () {
if (allData.dataFetching.type === 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]);
useEffect(function () {
if (allData.dataFetching.type === 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.createElement(Grid, __assign({ item: true }, allData.layoutProps),
React.createElement(TextViewSkeleton, { hasHelper: !!helperText })));
}
return (React.createElement(Grid, __assign({ item: true }, allData.layoutProps),
optionsStatus.status === OptionsStateEnum.READY && (React.createElement(Autocomplete, __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.createElement(TextField, __assign({ name: String(name), required: checkIsRequired({
schema: validationSchema,
formikValues: formik.values,
key: String(name),
}), error: getData({ source: formik.touched, key: name }) &&
Boolean(getData({ source: formik.errors, key: name })), label: label, helperText: getData({ source: formik.touched, key: name }) &&
getData({ source: formik.errors, key: name })
? translator(getData({ source: formik.errors, key: name }))
: helperText }, params, inputProps, { InputProps: __assign(__assign({}, params.InputProps), inputProps.InputProps) }))); } }, autoCompleteProps))),
optionsStatus.status === OptionsStateEnum.PENDING && (React.createElement(ViewPending, { label: label })),
optionsStatus.status === OptionsStateEnum.REJECTED && (React.createElement(ViewError, { error: optionsStatus.error, reloadFunction: allData.dataFetching.type === FetchingDataEnum.AUTOMATIC
? loadFunction
: allData.dataFetching.onRetry, label: label }))));
};
var AutoCompleteView$1 = React.memo(AutoCompleteView, function (prevProps, nextProps) {
var prevDataFetching = prevProps.allData.dataFetching;
var nextDataFetching = nextProps.allData.dataFetching;
return (baseMemo(prevProps, nextProps) &&
compare(prevDataFetching, nextDataFetching));
});
export { AutoCompleteView$1 as default };
//# sourceMappingURL=AutoCompleteView.js.map