@gecsevar.hu/gecsevar-formik-fields/dist/cjs/GVSelect.js

[](https://badge.fury.io/js/@gecsevar.hu%2Fgecsevar-formik-fields)

"use strict";
exports.__esModule = true;
exports.GVSelect = void 0;
var tslib_1 = require("tslib");
var formik_1 = require("formik");
var material_1 = require("@mui/material");
var Cancel_1 = tslib_1.__importDefault(require("@mui/icons-material/Cancel"));
var react_1 = tslib_1.__importDefault(require("react"));
var ITEM_HEIGHT = 48;
var ITEM_PADDING_TOP = 8;
var MenuProps = {
    PaperProps: {
        style: {
            maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
            width: 250
        }
    }
};
function getStyles(name, personName, theme) {
    return {
        fontWeight: personName.indexOf(name) === -1 ? theme.typography.fontWeightRegular : theme.typography.fontWeightMedium
    };
}
function GVSelect(_a) {
    var field = _a.field, _b = _a.isMultiSelect, isMultiSelect = _b === void 0 ? false : _b, options = _a.options, _c = _a.form, errors = _c.errors, isSubmitting = _c.isSubmitting, values = _c.values, setFieldValue = _c.setFieldValue, props = tslib_1.__rest(_a, ["field", "isMultiSelect", "options", "form"]);
    var errorMessage = (0, formik_1.getIn)(errors, field.name);
    var theme = (0, material_1.useTheme)();
    var handleChange = function (event) {
        var value = event.target.value;
        setFieldValue(field.name, typeof value === 'string' ? value.split(',') : value);
    };
    return isMultiSelect ? (react_1["default"].createElement(material_1.FormControl, { sx: { margin: '5px', width: 300 }, error: errorMessage == undefined ? false : (errorMessage === null || errorMessage === void 0 ? void 0 : errorMessage.length) !== 0 },
        react_1["default"].createElement(material_1.InputLabel, { id: 'demo-multiple-chip-label' }, props.label),
        react_1["default"].createElement(material_1.Select, { labelId: 'demo-multiple-chip-label', id: 'gv-select-chip', multiple: true, size: 'small', value: (0, formik_1.getIn)(values, field.name), onChange: handleChange, input: react_1["default"].createElement(material_1.OutlinedInput, { id: 'select-multiple-chip', label: props.label }), renderValue: function (selected) { return (react_1["default"].createElement(material_1.Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: 0.5 } }, selected.map(function (val) { return (react_1["default"].createElement(material_1.Chip, { key: val, label: val, size: 'small', onDelete: function () {
                    var temp = (0, formik_1.getIn)(values, field.name).filter(function (item) {
                        return item !== val;
                    });
                    setFieldValue(field.name, temp);
                }, deleteIcon: react_1["default"].createElement(Cancel_1["default"], { onMouseDown: function (event) { return event.stopPropagation(); } }) })); }))); }, MenuProps: MenuProps }, options.map(function (name) { return (react_1["default"].createElement(material_1.MenuItem, { key: name, value: name, style: getStyles(name, options, theme) }, name)); })),
        react_1["default"].createElement(material_1.FormHelperText, null, errorMessage))) : (react_1["default"].createElement(material_1.TextField, tslib_1.__assign({ style: { minWidth: '200px', maxWidth: '300px', margin: '5px' } }, field, props, { size: 'small', select: true, helperText: errorMessage, error: !!errorMessage, disabled: isSubmitting || props.disabled })));
}
exports.GVSelect = GVSelect;
//# sourceMappingURL=GVSelect.js.map