@novin-dev/formalite
Version:
Generate MUI form with few line of code
61 lines (58 loc) • 4.26 kB
JavaScript
import { __rest, __assign, __spreadArray } from 'tslib';
import { FormControl, FormGroup, FormControlLabel, FormHelperText, FormLabel, Checkbox, Switch } from '@mui/material';
import { getData, checkIsRequired } from '../../config/utils.js';
import React from 'react';
import { CheckGroupStateEnum } from './CheckGroupView.type.js';
import ViewPending from '../../components/ViewPending.js';
import ViewError from '../../components/ViewError.js';
var checkComponentMap = {
checkbox: Checkbox,
switch: Switch,
};
var CustomLabel = function (_a) {
var name = _a.name, allInputProps = _a.allInputProps, labelProps = _a.labelProps, formik = _a.formik, validationSchema = _a.validationSchema;
return (React.createElement(FormLabel, __assign({ component: "legend", required: checkIsRequired({
schema: validationSchema,
formikValues: formik.values,
key: name,
}) }, labelProps), allInputProps.label));
};
var CheckGroupViewAllViews = function (props) {
var formik = props.formik, name = props.name, validationSchema = props.validationSchema, dataStatus = props.dataStatus, loadFunction = props.loadFunction, allInputProps = props.allInputProps, labelProps = props.labelProps, translator = props.translator, _a = props.component, component = _a === void 0 ? "checkbox" : _a;
var TargetComponent = checkComponentMap[component];
var helperText = allInputProps.helperText, onChange = allInputProps.onChange, inputProps = __rest(allInputProps, ["helperText", "onChange"]);
if (dataStatus.status === CheckGroupStateEnum.READY) {
return (React.createElement(FormControl, { component: "fieldset", error: getData({ source: formik.touched, key: name }) &&
Boolean(getData({ source: formik.errors, key: name })), fullWidth: true },
React.createElement(CustomLabel, { validationSchema: validationSchema, name: name, allInputProps: allInputProps, labelProps: labelProps, formik: formik }),
React.createElement(FormGroup, __assign({ row: true }, inputProps), Object.entries(dataStatus.data).map(function (_a) {
var key = _a[0], value = _a[1];
var formikValue = getData({ source: formik.values, key: name });
return (React.createElement(FormControlLabel, { key: key, value: key, label: value.label, control: React.createElement(TargetComponent, __assign({ checked: formikValue.includes(key) }, value.props, { name: name, onChange: function (event) {
var arr = __spreadArray([], formikValue, true);
if (event.target.checked) {
arr.push(key);
}
else {
arr = arr.filter(function (item) { return item !== key; });
}
formik.setFieldValue(name, arr);
if (typeof onChange === "function") {
onChange(arr, value.additionalData);
}
} })) }));
})),
React.createElement(FormHelperText, { "data-i18n": "[html]content.body", dangerouslySetInnerHTML: {
__html: getData({ source: formik.touched, key: name }) &&
getData({ source: formik.errors, key: name })
? translator(getData({ source: formik.errors, key: name }))
: helperText,
} })));
}
if (dataStatus.status === CheckGroupStateEnum.PENDING) {
return (React.createElement(ViewPending, { label: React.createElement(CustomLabel, { validationSchema: validationSchema, name: name, allInputProps: allInputProps, labelProps: labelProps, formik: formik }) }));
}
return (React.createElement(ViewError, { error: dataStatus.error, reloadFunction: loadFunction, label: React.createElement(CustomLabel, { validationSchema: validationSchema, name: name, allInputProps: allInputProps, labelProps: labelProps, formik: formik }) }));
};
export { CheckGroupViewAllViews as default };
//# sourceMappingURL=CheckGroupViewAllViews.js.map