UNPKG

@novin-dev/formalite

Version:

Generate MUI form with few line of code

69 lines (62 loc) 4.82 kB
'use strict'; Object.defineProperty(exports, '__esModule', { value: true }); var tslib = require('tslib'); var material = require('@mui/material'); var utils = require('../../config/utils.js'); var React = require('react'); var CheckGroupView_type = require('./CheckGroupView.type.js'); var ViewPending = require('../../components/ViewPending.js'); var ViewError = require('../../components/ViewError.js'); function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } var React__default = /*#__PURE__*/_interopDefaultLegacy(React); var checkComponentMap = { checkbox: material.Checkbox, switch: material.Switch, }; var CustomLabel = function (_a) { var name = _a.name, allInputProps = _a.allInputProps, labelProps = _a.labelProps, formik = _a.formik, validationSchema = _a.validationSchema; return (React__default["default"].createElement(material.FormLabel, tslib.__assign({ component: "legend", required: utils.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 = tslib.__rest(allInputProps, ["helperText", "onChange"]); if (dataStatus.status === CheckGroupView_type.CheckGroupStateEnum.READY) { return (React__default["default"].createElement(material.FormControl, { component: "fieldset", error: utils.getData({ source: formik.touched, key: name }) && Boolean(utils.getData({ source: formik.errors, key: name })), fullWidth: true }, React__default["default"].createElement(CustomLabel, { validationSchema: validationSchema, name: name, allInputProps: allInputProps, labelProps: labelProps, formik: formik }), React__default["default"].createElement(material.FormGroup, tslib.__assign({ row: true }, inputProps), Object.entries(dataStatus.data).map(function (_a) { var key = _a[0], value = _a[1]; var formikValue = utils.getData({ source: formik.values, key: name }); return (React__default["default"].createElement(material.FormControlLabel, { key: key, value: key, label: value.label, control: React__default["default"].createElement(TargetComponent, tslib.__assign({ checked: formikValue.includes(key) }, value.props, { name: name, onChange: function (event) { var arr = tslib.__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__default["default"].createElement(material.FormHelperText, { "data-i18n": "[html]content.body", dangerouslySetInnerHTML: { __html: utils.getData({ source: formik.touched, key: name }) && utils.getData({ source: formik.errors, key: name }) ? translator(utils.getData({ source: formik.errors, key: name })) : helperText, } }))); } if (dataStatus.status === CheckGroupView_type.CheckGroupStateEnum.PENDING) { return (React__default["default"].createElement(ViewPending["default"], { label: React__default["default"].createElement(CustomLabel, { validationSchema: validationSchema, name: name, allInputProps: allInputProps, labelProps: labelProps, formik: formik }) })); } return (React__default["default"].createElement(ViewError["default"], { error: dataStatus.error, reloadFunction: loadFunction, label: React__default["default"].createElement(CustomLabel, { validationSchema: validationSchema, name: name, allInputProps: allInputProps, labelProps: labelProps, formik: formik }) })); }; exports["default"] = CheckGroupViewAllViews; //# sourceMappingURL=CheckGroupViewAllViews.js.map