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