97 lines
2.2 KiB
JavaScript
97 lines
2.2 KiB
JavaScript
import { useState, useEffect } from "react";
|
|
import { Cancel } from "@mui/icons-material";
|
|
import { TextField } from "@mui/material";
|
|
import { Box } from "@mui/system";
|
|
import { useStatusContext } from "../../Contexts/StatusContext";
|
|
|
|
const TextInput = ({ text, handleDelete }) => {
|
|
return (
|
|
<Box sx={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: "2px",
|
|
p: "2px 4px",
|
|
backgroundColor: "#ccc",
|
|
borderRadius: 1,
|
|
}}>
|
|
{text}
|
|
<Cancel
|
|
sx={{
|
|
color: "#666",
|
|
fontSize: "16px",
|
|
cursor: "pointer",
|
|
}}
|
|
onClick={() => handleDelete(text)}
|
|
/>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
const TextInputList = ({
|
|
onChange = () => {},
|
|
validate = () => {},
|
|
label
|
|
}) => {
|
|
const [textList, setTextList] = useState([]);
|
|
const [input, setInput] = useState("");
|
|
|
|
const { setMessage } = useStatusContext();
|
|
|
|
const handleDelete = (textToDelete) => {
|
|
setTextList(textList => textList.filter(text => text !== textToDelete));
|
|
}
|
|
|
|
const handleOnChange = (event) => {
|
|
const char = event.nativeEvent.data;
|
|
if (char === ",") {
|
|
try {
|
|
if (validate) validate(input);
|
|
setTextList(textList => [...textList, input]);
|
|
setInput("");
|
|
} catch {
|
|
setMessage(`"${input}" is not valid.`);
|
|
}
|
|
} else {
|
|
setInput(event.target.value);
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
onChange(input.length ? [...textList, input] : [...textList]);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [textList, input]);
|
|
|
|
return (
|
|
<div>
|
|
<TextField
|
|
data-testid="text-input-list"
|
|
name="text"
|
|
label={`${label} (use commas to add multiple)`}
|
|
value={input}
|
|
variant="outlined"
|
|
margin="normal"
|
|
required
|
|
size="small"
|
|
fullWidth
|
|
onChange={handleOnChange}
|
|
/>
|
|
|
|
<Box sx={{
|
|
display: "flex",
|
|
flexWrap: "wrap",
|
|
gap: 1,
|
|
pr: 1,
|
|
}}>
|
|
{textList.map((text) => (
|
|
<TextInput
|
|
text={text}
|
|
handleDelete={handleDelete}
|
|
key={text}
|
|
/>
|
|
))}
|
|
</Box>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TextInputList; |