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

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

import { __assign, __rest } from "tslib";
import { getIn } from 'formik';
import { Box, Chip, FormControl, FormHelperText, InputLabel, MenuItem, OutlinedInput, Select, TextField, useTheme, } from '@mui/material';
import CancelIcon from '@mui/icons-material/Cancel';
import React from '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
    };
}
export 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 = __rest(_a, ["field", "isMultiSelect", "options", "form"]);
    var errorMessage = getIn(errors, field.name);
    var theme = useTheme();
    var handleChange = function (event) {
        var value = event.target.value;
        setFieldValue(field.name, typeof value === 'string' ? value.split(',') : value);
    };
    return isMultiSelect ? (React.createElement(FormControl, { sx: { margin: '5px', width: 300 }, error: errorMessage == undefined ? false : (errorMessage === null || errorMessage === void 0 ? void 0 : errorMessage.length) !== 0 },
        React.createElement(InputLabel, { id: 'demo-multiple-chip-label' }, props.label),
        React.createElement(Select, { labelId: 'demo-multiple-chip-label', id: 'gv-select-chip', multiple: true, size: 'small', value: getIn(values, field.name), onChange: handleChange, input: React.createElement(OutlinedInput, { id: 'select-multiple-chip', label: props.label }), renderValue: function (selected) { return (React.createElement(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: 0.5 } }, selected.map(function (val) { return (React.createElement(Chip, { key: val, label: val, size: 'small', onDelete: function () {
                    var temp = getIn(values, field.name).filter(function (item) {
                        return item !== val;
                    });
                    setFieldValue(field.name, temp);
                }, deleteIcon: React.createElement(CancelIcon, { onMouseDown: function (event) { return event.stopPropagation(); } }) })); }))); }, MenuProps: MenuProps }, options.map(function (name) { return (React.createElement(MenuItem, { key: name, value: name, style: getStyles(name, options, theme) }, name)); })),
        React.createElement(FormHelperText, null, errorMessage))) : (React.createElement(TextField, __assign({ style: { minWidth: '200px', maxWidth: '300px', margin: '5px' } }, field, props, { size: 'small', select: true, helperText: errorMessage, error: !!errorMessage, disabled: isSubmitting || props.disabled })));
}
//# sourceMappingURL=GVSelect.js.map