@novin-dev/formalite
Version:
Generate MUI form with few line of code
167 lines (164 loc) • 9.2 kB
JavaScript
import { __assign } from 'tslib';
import React, { useImperativeHandle, useEffect, useMemo } from 'react';
import { Grid } from '@mui/material';
import { useFormik, FormikProvider } from 'formik';
import { showErrorMessage, resetFormFunction, getDefaultValue } from './config/utils.js';
import { I18nProvider } from '../base/I18nProvider.js';
import { ViewTypes } from './Formalite.type.js';
import ErrorBoundaryWrapper from '../base/ErrorBoundary.js';
import PriceView from './elements/PriceView/PriceView.js';
import CardNumberView from './elements/CardNumberView/CardNumberView.js';
import SelectView from './elements/SelectView/SelectView.js';
import ComponentView from './elements/ComponentView/ComponentView.js';
import RepeaterView from './elements/RepeaterView/RepeaterView.js';
import SingleDropZoneView from './elements/DropZoneView/SingleDropZoneView/SingleDropZoneView.js';
import MultiDropZoneView from './elements/DropZoneView/MultiDropZoneView/MultiDropZoneView.js';
import TextDropZoneView from './elements/DropZoneView/TextDropZoneView/TextDropZoneView.js';
import ColorPickerView from './elements/ColorPickerView/ColorPickerView.js';
import RadioGroupView from './elements/RadioGroupView/RadioGroupView.js';
import CheckGroupView from './elements/CheckGroupView/CheckGroupView.js';
import AutoCompleteView from './elements/AutoCompleteView/AutoCompleteView.js';
import TextView from './elements/TextView/TextView.js';
import DatePickerView from './elements/DatePickerView/DatePickerView/DatePickerView.js';
import DateTimePickerView from './elements/DatePickerView/DateTimePickerView/DateTimePickerView.js';
import TimePickerView from './elements/DatePickerView/TimePickerView/TimePickerView.js';
import SwitchGroupView from './elements/SwitchGroupView/SwitchGroupView.js';
import BigRadioGroupView from './elements/BigRadioGroupView/BigRadioGroupView.js';
import ErrorFocus from './elements/ErrorFocus.js';
import EditorView from './elements/EditorView/EditorView.js';
import GroupView from './elements/GroupView/GroupView.js';
import AvatarDropZoneView from './elements/DropZoneView/AvatarDropZoneView/AvatarDropZoneView.js';
import { en } from './translations/default-en.js';
import { fa } from './translations/default-fa.js';
import FormObserver from './components/FormObserver.js';
var _a;
var resources = {
en: en,
fa: fa,
};
var ViewComponentMap = (_a = {},
_a[ViewTypes.TextView.toString()] = TextView,
_a[ViewTypes.PriceView.toString()] = PriceView,
_a[ViewTypes.CardNumberView.toString()] = CardNumberView,
_a[ViewTypes.SelectView.toString()] = SelectView,
_a[ViewTypes.ComponentView.toString()] = ComponentView,
_a[ViewTypes.RepeaterView.toString()] = RepeaterView,
_a[ViewTypes.SingleDropZoneView.toString()] = SingleDropZoneView,
_a[ViewTypes.AvatarDropZoneView.toString()] = AvatarDropZoneView,
_a[ViewTypes.MultiDropZoneView.toString()] = MultiDropZoneView,
_a[ViewTypes.TextDropZoneView.toString()] = TextDropZoneView,
_a[ViewTypes.ColorPickerView.toString()] = ColorPickerView,
_a[ViewTypes.RadioGroupView.toString()] = RadioGroupView,
_a[ViewTypes.AutoCompleteView.toString()] = AutoCompleteView,
_a[ViewTypes.DatePickerView.toString()] = DatePickerView,
_a[ViewTypes.DateTimePickerView.toString()] = DateTimePickerView,
_a[ViewTypes.TimePickerView.toString()] = TimePickerView,
_a[ViewTypes.CheckGroupView.toString()] = CheckGroupView,
_a[ViewTypes.SwitchGroupView.toString()] = SwitchGroupView,
_a[ViewTypes.BigRadioGroupView.toString()] = BigRadioGroupView,
_a[ViewTypes.EditorView.toString()] = EditorView,
_a[ViewTypes.GroupView.toString()] = GroupView,
_a);
var newComponents = {};
var GResolve;
var GReject;
var gridStyle = { overflow: "hidden" };
var defaultTranslator = function (input) { return input; };
var Formalite = function (props) {
var _a = props.offsetScroll, offsetScroll = _a === void 0 ? 0 : _a, scrollReferenceId = props.scrollReferenceId, formString = props.formString, onSubmit = props.onSubmit, _b = props.reIni, reIni = _b === void 0 ? false : _b, _c = props.lang, lang = _c === void 0 ? "en" : _c, _d = props.loading, loading = _d === void 0 ? false : _d, _e = props.isUpdateMode, isUpdateMode = _e === void 0 ? false : _e, initialValues = props.initialValues, validationSchema = props.validationSchema, formMustRegex = props.formMustRegex, _f = props.translator, translator = _f === void 0 ? defaultTranslator : _f, onFormChange = props.onFormChange, _g = props.components, components = _g === void 0 ? {} : _g, localization = props.localization;
newComponents = components;
var formik = useFormik({
enableReinitialize: reIni,
initialValues: initialValues,
validationSchema: validationSchema,
onSubmit: function (values, _a) {
var resetForm = _a.resetForm;
try {
onSubmit(values, GResolve, GReject, resetForm);
}
catch (e) {
showErrorMessage(e);
}
},
});
useImperativeHandle(props.formRef, function () { return ({
callSubmit: function (resolve, reject) {
if (resolve && reject) {
GResolve = resolve;
GReject = reject;
}
formik.validateForm().then(function (res) {
if (Object.keys(res).length && reject) {
reject("Form Data Is Not Valid");
}
formik.handleSubmit();
});
},
callRest: function () {
// Problem or not: this rest form dose not rest DropZones
formik.setValues(resetFormFunction(formString));
},
formik: formik,
addRow: function (name) {
var repeatValue = formik.values[name];
var data = {};
try {
Object.keys(formString[name].options).forEach(function (item) {
data[item] = getDefaultValue(formString[name].options[item].type);
});
}
catch (e) {
// Do noting
}
repeatValue.push(data);
formik.setFieldValue(name, repeatValue);
},
}); });
useEffect(function () {
if (!loading) {
formik.setValues(initialValues);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [loading]);
var newResources = useMemo(function () { return (__assign(__assign({}, resources), localization)); }, [localization]);
return (React.createElement(I18nProvider, { targetLang: lang, resources: newResources },
React.createElement(ErrorBoundaryWrapper, null,
React.createElement(FormikProvider, { value: formik },
React.createElement("form", { onSubmit: formik.handleSubmit },
React.createElement(FormObserver, { onFormChange: onFormChange }),
React.createElement(Grid, { container: true, direction: "row", spacing: 3, style: gridStyle, id: "formalite" },
itemRenderer({
form: formString,
formik: formik,
loading: loading,
lang: lang,
isUpdateMode: isUpdateMode,
validationSchema: validationSchema,
formMustRegex: formMustRegex,
translator: translator,
}),
React.createElement(ErrorFocus, { offsetScroll: offsetScroll, scrollReferenceId: scrollReferenceId })))))));
};
function itemRenderer(_a) {
var form = _a.form, formik = _a.formik, loading = _a.loading, lang = _a.lang, isUpdateMode = _a.isUpdateMode, validationSchema = _a.validationSchema, repItem = _a.repItem, formMustRegex = _a.formMustRegex, translator = _a.translator;
var NewViewComponentMap = __assign(__assign({}, ViewComponentMap), newComponents);
return Object.entries(form).map(function (_a) {
var keyOriginal = _a[0], value = _a[1];
var key = repItem
? "".concat(repItem.name, ".").concat(repItem.index, ".").concat(keyOriginal)
: keyOriginal;
if ((!!value.showOnUpdate && isUpdateMode) || !value.showOnUpdate) {
var TargetComponent = NewViewComponentMap[value.type];
if (TargetComponent) {
return (React.createElement(TargetComponent, { key: key, name: key, allData: value, formik: formik, loading: loading, validationSchema: validationSchema, isUpdateMode: isUpdateMode, lang: lang, formMustRegex: formMustRegex, translator: translator }));
}
}
return null;
});
}
var Formalite$1 = React.memo(Formalite, function (prevProps, nextProps) {
return (prevProps.formString === nextProps.formString &&
prevProps.loading === nextProps.loading);
});
export { Formalite$1 as default, itemRenderer };
//# sourceMappingURL=Formalite.js.map