42 lines
1.2 KiB
React
42 lines
1.2 KiB
React
|
import { useState } from "react";
|
||
|
|
import TextField from "@mui/material/TextField";
|
||
|
|
import Autocomplete from "@mui/material/Autocomplete";
|
||
|
|
import Chip from "@mui/material/Chip";
|
||
|
|
|
||
|
|
const validatePort = (p) => p !== "25565" && p !== "25575" && p.length < 6;
|
||
|
|
|
||
|
|
export default function ExtraPortsOption(props) {
|
||
|
|
const [extraPorts, setExtraPorts] = useState([]);
|
||
|
|
const { onChange } = props;
|
||
|
|
|
||
|
|
function portChange(e, val, optionType, changedValue) {
|
||
|
|
if (optionType === "clear") {
|
||
|
|
setExtraPorts([]);
|
||
|
|
onChange("extraPorts", []);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (!validatePort(changedValue.option))
|
||
|
|
return alert("That port cannot be added/removed as an extra port!");
|
||
|
|
setExtraPorts(val);
|
||
|
|
onChange("extraPorts", val);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Autocomplete
|
||
|
|
multiple
|
||
|
|
id="extra-ports-autocomplete"
|
||
|
|
options={[]}
|
||
|
|
value={extraPorts}
|
||
|
|
onChange={portChange}
|
||
|
|
freeSolo
|
||
|
|
renderInput={(p) => <TextField {...p} label="Extra Ports" />}
|
||
|
|
renderTags={(value, getTagProps) =>
|
||
|
|
value.map((option, index) => {
|
||
|
|
const defaultChipProps = getTagProps({ index });
|
||
|
|
return <Chip label={option} {...defaultChipProps} />;
|
||
|
|
})
|
||
|
|
}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|