@novin-dev/formalite
Version:
Generate MUI form with few line of code
122 lines (119 loc) • 6.59 kB
JavaScript
import { __rest, __assign } from 'tslib';
import { FormControl, InputLabel, Select, InputAdornment, IconButton, MenuItem, FormHelperText } from '@mui/material';
import { checkIsRequired, getData, isIOS, showErrorMessage } from '../../config/utils.js';
import ClearIcon from '@mui/icons-material/Clear';
import React, { useState } from 'react';
import { SelectStateEnum } from './SelectView.type.js';
import ViewPending from '../../components/ViewPending.js';
import ViewError from '../../components/ViewError.js';
import { useI18nContext } from '../../../base/I18nProvider.js';
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 = 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 = __rest(allInputProps, ["label", "onChange", "placeholder", "helperText"]);
var _b = useState(false), mouseOver = _b[0], setMouseOver = _b[1];
if (dataStatus.status === SelectStateEnum.READY) {
return (React.createElement(FormControl, { required: checkIsRequired({
schema: validationSchema,
formikValues: formik.values,
key: name,
}), error: getData({ source: formik.touched, key: name }) &&
Boolean(getData({ source: formik.errors, key: name })), fullWidth: true, variant: inputProps.variant },
React.createElement(InputLabel, { htmlFor: "my-input" }, label),
React.createElement(Select, __assign({ name: name, label: label, displayEmpty: true, value: getData({ source: formik.values, key: name }) }, (!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) {
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.createElement(InputAdornment, { position: "end" },
React.createElement(IconButton, { size: "small", sx: {
position: "absolute",
margin: "0px 8px",
right: "16px",
visibility: (isIOS() ? true : mouseOver) &&
!inputProps.disabled &&
getData({ source: formik.values, key: name }) &&
getData({ source: formik.values, key: name }) !== ""
? "visible"
: "hidden",
}, onClick: function () {
formik.setFieldValue(name, "");
formik.setFieldTouched(name, false);
if (onChange) {
try {
onChange("");
}
catch (e2) {
showErrorMessage(e2);
}
}
} },
React.createElement(ClearIcon, { style: { fontSize: "1.25rem" } }))), sx: selectSX }), dataStatus.status === 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.createElement(MenuItem, __assign({ key: key, value: key, sx: menuItemSx }, value.props), value.label));
})),
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 === SelectStateEnum.PENDING) {
return React.createElement(ViewPending, { label: label });
}
return (React.createElement(ViewError, { error: dataStatus.error, reloadFunction: loadFunction, label: label }));
};
export { SelectViewAllViews as default };
//# sourceMappingURL=SelectViewAllViews.js.map