@novin-dev/formalite
Version:
Generate MUI form with few line of code
131 lines (124 loc) • 7.25 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var tslib = require('tslib');
var material = require('@mui/material');
var utils = require('../../config/utils.js');
var ClearIcon = require('@mui/icons-material/Clear');
var React = require('react');
var SelectView_type = require('./SelectView.type.js');
var ViewPending = require('../../components/ViewPending.js');
var ViewError = require('../../components/ViewError.js');
var I18nProvider = require('../../../base/I18nProvider.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var ClearIcon__default = /*#__PURE__*/_interopDefaultLegacy(ClearIcon);
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var selectSX = {
paddingRight: 0,
"& .MuiInputBase-input": {
flexShrink: 0,
boxSizing: "border-box",
},
};
var menuItemSx = {
mx: 1,
my: 0.5,
borderRadius: 0.75,
};
var SelectViewAllViews = function (props
// eslint-disable-next-line sonarjs/cognitive-complexity
) {
var t = I18nProvider.useI18nContext().t;
var formik = props.formik, name = props.name, validationSchema = props.validationSchema, translator = props.translator, dataStatus = props.dataStatus, loadFunction = props.loadFunction, allInputProps = props.allInputProps, _a = props.emptyItemLabel, emptyItemLabel = _a === void 0 ? t("fg_select_no_option") : _a;
var label = allInputProps.label, onChange = allInputProps.onChange, placeholder = allInputProps.placeholder, helperText = allInputProps.helperText, inputProps = tslib.__rest(allInputProps, ["label", "onChange", "placeholder", "helperText"]);
var _b = React.useState(false), mouseOver = _b[0], setMouseOver = _b[1];
if (dataStatus.status === SelectView_type.SelectStateEnum.READY) {
return (React__default["default"].createElement(material.FormControl, { required: utils.checkIsRequired({
schema: validationSchema,
formikValues: formik.values,
key: name,
}), error: utils.getData({ source: formik.touched, key: name }) &&
Boolean(utils.getData({ source: formik.errors, key: name })), fullWidth: true, variant: inputProps.variant },
React__default["default"].createElement(material.InputLabel, { htmlFor: "my-input" }, label),
React__default["default"].createElement(material.Select, tslib.__assign({ name: name, label: label, displayEmpty: true, value: utils.getData({ source: formik.values, key: name }) }, (!utils.isIOS() && {
onFocus: function () {
setMouseOver(true);
},
onMouseEnter: function () { return setMouseOver(true); },
onMouseLeave: function () { return setMouseOver(false); },
onOpen: function () { return setMouseOver(false); },
}), { onChange: function (e) {
var value = e.target.value;
formik.setFieldValue(name, value);
var selectedOption = dataStatus.data[value];
if (onChange) {
try {
onChange(value, selectedOption.additionalData);
}
catch (e2) {
utils.showErrorMessage(e2);
}
}
}, renderValue: function (selected) {
var _a;
// console.log(selected)
if (selected) {
return (_a = dataStatus.data[selected]) === null || _a === void 0 ? void 0 : _a.label;
}
return placeholder;
} }, inputProps, { endAdornment: React__default["default"].createElement(material.InputAdornment, { position: "end" },
React__default["default"].createElement(material.IconButton, { size: "small", sx: {
position: "absolute",
margin: "0px 8px",
right: "16px",
visibility: (utils.isIOS() ? true : mouseOver) &&
!inputProps.disabled &&
utils.getData({ source: formik.values, key: name }) &&
utils.getData({ source: formik.values, key: name }) !== ""
? "visible"
: "hidden",
}, onClick: function () {
formik.setFieldValue(name, "");
formik.setFieldTouched(name, false);
if (onChange) {
try {
onChange("");
}
catch (e2) {
utils.showErrorMessage(e2);
}
}
} },
React__default["default"].createElement(ClearIcon__default["default"], { style: { fontSize: "1.25rem" } }))), sx: selectSX }), dataStatus.status === SelectView_type.SelectStateEnum.READY &&
(Object.entries(dataStatus.data).length || emptyItemLabel === null
? Object.entries(dataStatus.data)
: [
[
"",
{
label: emptyItemLabel,
props: {
style: { fontStyle: "italic", opacity: 0.3 },
disabled: true,
selected: false,
},
additionalData: {},
},
],
]).map(function (_a) {
var key = _a[0], value = _a[1];
return (React__default["default"].createElement(material.MenuItem, tslib.__assign({ key: key, value: key, sx: menuItemSx }, value.props), value.label));
})),
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 === SelectView_type.SelectStateEnum.PENDING) {
return React__default["default"].createElement(ViewPending["default"], { label: label });
}
return (React__default["default"].createElement(ViewError["default"], { error: dataStatus.error, reloadFunction: loadFunction, label: label }));
};
exports["default"] = SelectViewAllViews;
//# sourceMappingURL=SelectViewAllViews.js.map