@novin-dev/formalite
Version:
Generate MUI form with few line of code
95 lines (88 loc) • 6.59 kB
JavaScript
'use strict';
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 Formalite = require('../../Formalite.js');
var AddIcon = require('@mui/icons-material/Add');
var reactTransitionGroup = require('react-transition-group');
var DeleteOutlineOutlinedIcon = require('@mui/icons-material/DeleteOutlineOutlined');
var I18nProvider = require('../../../base/I18nProvider.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var AddIcon__default = /*#__PURE__*/_interopDefaultLegacy(AddIcon);
var DeleteOutlineOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(DeleteOutlineOutlinedIcon);
var CustomDivider = function () {
return (React__default["default"].createElement(material.Divider, { sx: function (theme) { return ({
marginBottom: 1,
borderStyle: "dashed",
borderColor: theme.palette.mode === "light" ? "grey.400" : "grey.600",
}); } }));
};
var RepeaterView = function (props) {
var allData = props.allData, name = props.name, formik$1 = props.formik, loading = props.loading, lang = props.lang, validationSchema = props.validationSchema, translator = props.translator, isUpdateMode = props.isUpdateMode, formMustRegex = props.formMustRegex;
var t = I18nProvider.useI18nContext().t;
return (React__default["default"].createElement(material.Grid, tslib.__assign({ item: true }, allData.layoutProps, { id: String(name) }),
React__default["default"].createElement(material.Grid, { item: true, xs: 12 },
React__default["default"].createElement(CustomDivider, null)),
React__default["default"].createElement(formik.FieldArray, { name: String(name) }, function (_a) {
var remove = _a.remove, push = _a.push;
return (React__default["default"].createElement(material.Grid, { container: true, direction: "column" },
React__default["default"].createElement(reactTransitionGroup.TransitionGroup, null, utils.getData({ source: formik$1.values, key: name }) &&
utils.getData({ source: formik$1.values, key: name }).length > 0 &&
utils.getData({ source: formik$1.values, key: name }).map(function (obj, index) { return (
// eslint-disable-next-line react/no-array-index-key
React__default["default"].createElement(material.Collapse, { key: index },
React__default["default"].createElement(material.Grid, { item: true, container: true, spacing: 1, sx: function (theme) { return ({ marginTop: theme.spacing(1) }); } },
React__default["default"].createElement(material.Grid, { container: true, item: true, xs: 12, spacing: 3 }, Formalite.itemRenderer({
formMustRegex: formMustRegex,
form: allData.options,
formik: formik$1,
loading: loading,
lang: lang,
isUpdateMode: isUpdateMode,
validationSchema: validationSchema,
translator: translator,
repItem: {
name: String(name),
index: index,
},
})),
React__default["default"].createElement(material.Grid, { item: true, xs: 12, sx: { display: "flex", justifyContent: "end" } },
React__default["default"].createElement(material.Button, { color: "error", variant: "text", disabled: loading ||
(allData.disableOfRemoveFunction
? allData.disableOfRemoveFunction(obj)
: false), onClick: function () {
remove(index);
} },
React__default["default"].createElement(DeleteOutlineOutlinedIcon__default["default"], null),
React__default["default"].createElement(material.Box, { component: "span" }, t("repeater_remove_btn")))),
React__default["default"].createElement(material.Grid, { item: true, xs: 12 },
React__default["default"].createElement(CustomDivider, null))))); })),
!allData.removeAddBtn && (React__default["default"].createElement(material.Grid, { item: true, xs: 12 },
React__default["default"].createElement(material.Grid, { sx: function (theme) { return ({ marginTop: theme.spacing(1) }); }, style: {
width: "fit-content",
marginLeft: 0,
marginRight: 0,
} },
React__default["default"].createElement(material.Button, { disabled: loading, style: {
display: "flex",
justifyContent: "center",
alignItems: "stretch",
}, onClick: function () {
var data = {};
Object.keys(allData.options).forEach(function (item) {
data[item] = utils.getDefaultValue(allData.options[item].type);
});
push(data);
} },
React__default["default"].createElement(AddIcon__default["default"], null),
allData.buttonText || t("repeater_add_btn"))))),
!Array.isArray(utils.getData({ source: formik$1.errors, key: name })) &&
utils.getData({ source: formik$1.touched, key: name }) ? (React__default["default"].createElement(material.FormHelperText, { error: true }, translator(utils.getData({ source: formik$1.errors, key: name })))) : ("")));
})));
};
exports["default"] = RepeaterView;
//# sourceMappingURL=RepeaterView.js.map