@novin-dev/formalite
Version:
Generate MUI form with few line of code
176 lines (169 loc) • 10.3 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var tslib = require('tslib');
var React = require('react');
var material = require('@mui/material');
var formik = require('formik');
var utils = require('./config/utils.js');
var I18nProvider = require('../base/I18nProvider.js');
var Formalite_type = require('./Formalite.type.js');
var ErrorBoundary = require('../base/ErrorBoundary.js');
var PriceView = require('./elements/PriceView/PriceView.js');
var CardNumberView = require('./elements/CardNumberView/CardNumberView.js');
var SelectView = require('./elements/SelectView/SelectView.js');
var ComponentView = require('./elements/ComponentView/ComponentView.js');
var RepeaterView = require('./elements/RepeaterView/RepeaterView.js');
var SingleDropZoneView = require('./elements/DropZoneView/SingleDropZoneView/SingleDropZoneView.js');
var MultiDropZoneView = require('./elements/DropZoneView/MultiDropZoneView/MultiDropZoneView.js');
var TextDropZoneView = require('./elements/DropZoneView/TextDropZoneView/TextDropZoneView.js');
var ColorPickerView = require('./elements/ColorPickerView/ColorPickerView.js');
var RadioGroupView = require('./elements/RadioGroupView/RadioGroupView.js');
var CheckGroupView = require('./elements/CheckGroupView/CheckGroupView.js');
var AutoCompleteView = require('./elements/AutoCompleteView/AutoCompleteView.js');
var TextView = require('./elements/TextView/TextView.js');
var DatePickerView = require('./elements/DatePickerView/DatePickerView/DatePickerView.js');
var DateTimePickerView = require('./elements/DatePickerView/DateTimePickerView/DateTimePickerView.js');
var TimePickerView = require('./elements/DatePickerView/TimePickerView/TimePickerView.js');
var SwitchGroupView = require('./elements/SwitchGroupView/SwitchGroupView.js');
var BigRadioGroupView = require('./elements/BigRadioGroupView/BigRadioGroupView.js');
var ErrorFocus = require('./elements/ErrorFocus.js');
var EditorView = require('./elements/EditorView/EditorView.js');
var GroupView = require('./elements/GroupView/GroupView.js');
var AvatarDropZoneView = require('./elements/DropZoneView/AvatarDropZoneView/AvatarDropZoneView.js');
var defaultEn = require('./translations/default-en.js');
var defaultFa = require('./translations/default-fa.js');
var FormObserver = require('./components/FormObserver.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var _a;
var resources = {
en: defaultEn.en,
fa: defaultFa.fa,
};
var ViewComponentMap = (_a = {},
_a[Formalite_type.ViewTypes.TextView.toString()] = TextView["default"],
_a[Formalite_type.ViewTypes.PriceView.toString()] = PriceView["default"],
_a[Formalite_type.ViewTypes.CardNumberView.toString()] = CardNumberView["default"],
_a[Formalite_type.ViewTypes.SelectView.toString()] = SelectView["default"],
_a[Formalite_type.ViewTypes.ComponentView.toString()] = ComponentView["default"],
_a[Formalite_type.ViewTypes.RepeaterView.toString()] = RepeaterView["default"],
_a[Formalite_type.ViewTypes.SingleDropZoneView.toString()] = SingleDropZoneView["default"],
_a[Formalite_type.ViewTypes.AvatarDropZoneView.toString()] = AvatarDropZoneView["default"],
_a[Formalite_type.ViewTypes.MultiDropZoneView.toString()] = MultiDropZoneView["default"],
_a[Formalite_type.ViewTypes.TextDropZoneView.toString()] = TextDropZoneView["default"],
_a[Formalite_type.ViewTypes.ColorPickerView.toString()] = ColorPickerView["default"],
_a[Formalite_type.ViewTypes.RadioGroupView.toString()] = RadioGroupView["default"],
_a[Formalite_type.ViewTypes.AutoCompleteView.toString()] = AutoCompleteView["default"],
_a[Formalite_type.ViewTypes.DatePickerView.toString()] = DatePickerView["default"],
_a[Formalite_type.ViewTypes.DateTimePickerView.toString()] = DateTimePickerView["default"],
_a[Formalite_type.ViewTypes.TimePickerView.toString()] = TimePickerView["default"],
_a[Formalite_type.ViewTypes.CheckGroupView.toString()] = CheckGroupView["default"],
_a[Formalite_type.ViewTypes.SwitchGroupView.toString()] = SwitchGroupView["default"],
_a[Formalite_type.ViewTypes.BigRadioGroupView.toString()] = BigRadioGroupView["default"],
_a[Formalite_type.ViewTypes.EditorView.toString()] = EditorView["default"],
_a[Formalite_type.ViewTypes.GroupView.toString()] = GroupView["default"],
_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$1 = formik.useFormik({
enableReinitialize: reIni,
initialValues: initialValues,
validationSchema: validationSchema,
onSubmit: function (values, _a) {
var resetForm = _a.resetForm;
try {
onSubmit(values, GResolve, GReject, resetForm);
}
catch (e) {
utils.showErrorMessage(e);
}
},
});
React.useImperativeHandle(props.formRef, function () { return ({
callSubmit: function (resolve, reject) {
if (resolve && reject) {
GResolve = resolve;
GReject = reject;
}
formik$1.validateForm().then(function (res) {
if (Object.keys(res).length && reject) {
reject("Form Data Is Not Valid");
}
formik$1.handleSubmit();
});
},
callRest: function () {
// Problem or not: this rest form dose not rest DropZones
formik$1.setValues(utils.resetFormFunction(formString));
},
formik: formik$1,
addRow: function (name) {
var repeatValue = formik$1.values[name];
var data = {};
try {
Object.keys(formString[name].options).forEach(function (item) {
data[item] = utils.getDefaultValue(formString[name].options[item].type);
});
}
catch (e) {
// Do noting
}
repeatValue.push(data);
formik$1.setFieldValue(name, repeatValue);
},
}); });
React.useEffect(function () {
if (!loading) {
formik$1.setValues(initialValues);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [loading]);
var newResources = React.useMemo(function () { return (tslib.__assign(tslib.__assign({}, resources), localization)); }, [localization]);
return (React__default["default"].createElement(I18nProvider.I18nProvider, { targetLang: lang, resources: newResources },
React__default["default"].createElement(ErrorBoundary["default"], null,
React__default["default"].createElement(formik.FormikProvider, { value: formik$1 },
React__default["default"].createElement("form", { onSubmit: formik$1.handleSubmit },
React__default["default"].createElement(FormObserver["default"], { onFormChange: onFormChange }),
React__default["default"].createElement(material.Grid, { container: true, direction: "row", spacing: 3, style: gridStyle, id: "formalite" },
itemRenderer({
form: formString,
formik: formik$1,
loading: loading,
lang: lang,
isUpdateMode: isUpdateMode,
validationSchema: validationSchema,
formMustRegex: formMustRegex,
translator: translator,
}),
React__default["default"].createElement(ErrorFocus["default"], { 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 = tslib.__assign(tslib.__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__default["default"].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__default["default"].memo(Formalite, function (prevProps, nextProps) {
return (prevProps.formString === nextProps.formString &&
prevProps.loading === nextProps.loading);
});
exports["default"] = Formalite$1;
exports.itemRenderer = itemRenderer;
//# sourceMappingURL=Formalite.js.map