2020-05-22 13:00:53 +02:00
|
|
|
import React from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
2021-03-30 15:14:02 +02:00
|
|
|
import { TextField } from '@material-ui/core';
|
2020-05-22 13:00:53 +02:00
|
|
|
|
2021-08-27 13:43:28 +02:00
|
|
|
function InputListField({
|
|
|
|
label,
|
|
|
|
values = [],
|
|
|
|
error,
|
|
|
|
errorText,
|
|
|
|
name,
|
|
|
|
updateValues,
|
|
|
|
placeholder = '',
|
|
|
|
onBlur = () => {},
|
|
|
|
FormHelperTextProps,
|
|
|
|
}) {
|
2020-05-22 13:00:53 +02:00
|
|
|
const handleChange = evt => {
|
|
|
|
const values = evt.target.value.split(/,\s?/);
|
|
|
|
const trimmedValues = values.map(v => v.trim());
|
|
|
|
updateValues(trimmedValues);
|
|
|
|
};
|
|
|
|
|
|
|
|
const handleKeyDown = evt => {
|
|
|
|
if (evt.key === 'Backspace') {
|
|
|
|
const currentValue = evt.target.value;
|
|
|
|
if (currentValue.endsWith(', ')) {
|
|
|
|
evt.preventDefault();
|
|
|
|
const value = currentValue.slice(0, -2);
|
|
|
|
updateValues(value.split(/,\s*/));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
2021-03-30 15:14:02 +02:00
|
|
|
<TextField
|
2020-05-22 13:00:53 +02:00
|
|
|
name={name}
|
2021-08-27 13:43:28 +02:00
|
|
|
error={error}
|
|
|
|
helperText={errorText}
|
2020-05-22 13:00:53 +02:00
|
|
|
placeholder={placeholder}
|
|
|
|
value={values ? values.join(', ') : ''}
|
|
|
|
onKeyDown={handleKeyDown}
|
|
|
|
onChange={handleChange}
|
|
|
|
onBlur={onBlur}
|
|
|
|
label={label}
|
|
|
|
style={{ width: '100%' }}
|
2021-03-30 15:14:02 +02:00
|
|
|
variant="outlined"
|
|
|
|
size="small"
|
2021-08-27 13:43:28 +02:00
|
|
|
FormHelperTextProps={FormHelperTextProps}
|
2020-05-22 13:00:53 +02:00
|
|
|
/>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
InputListField.propTypes = {
|
|
|
|
label: PropTypes.string.isRequired,
|
|
|
|
values: PropTypes.array,
|
|
|
|
error: PropTypes.string,
|
|
|
|
placeholder: PropTypes.string,
|
|
|
|
name: PropTypes.string.isRequired,
|
|
|
|
updateValues: PropTypes.func.isRequired,
|
|
|
|
onBlur: PropTypes.func,
|
|
|
|
};
|
|
|
|
|
|
|
|
export default InputListField;
|