mirror of https://github.com/coder/coder.git
105 lines
2.6 KiB
TypeScript
105 lines
2.6 KiB
TypeScript
import Chip from "@material-ui/core/Chip"
|
|
import FormHelperText from "@material-ui/core/FormHelperText"
|
|
import { makeStyles } from "@material-ui/core/styles"
|
|
import { FC } from "react"
|
|
|
|
export type MultiTextFieldProps = {
|
|
label: string
|
|
values: string[]
|
|
onChange: (values: string[]) => void
|
|
}
|
|
|
|
export const MultiTextField: FC<MultiTextFieldProps> = ({
|
|
label,
|
|
values,
|
|
onChange,
|
|
}) => {
|
|
const styles = useStyles()
|
|
|
|
return (
|
|
<div>
|
|
<label className={styles.root}>
|
|
{values.map((value, index) => (
|
|
<Chip
|
|
key={index}
|
|
label={value}
|
|
size="small"
|
|
onDelete={() => {
|
|
onChange(values.filter((oldValue) => oldValue !== value))
|
|
}}
|
|
/>
|
|
))}
|
|
<input
|
|
aria-label={label}
|
|
className={styles.input}
|
|
onKeyDown={(event) => {
|
|
if (event.key === ",") {
|
|
event.preventDefault()
|
|
const newValue = event.currentTarget.value
|
|
onChange([...values, newValue])
|
|
event.currentTarget.value = ""
|
|
return
|
|
}
|
|
|
|
if (event.key === "Backspace" && event.currentTarget.value === "") {
|
|
event.preventDefault()
|
|
|
|
if (values.length === 0) {
|
|
return
|
|
}
|
|
|
|
const lastValue = values[values.length - 1]
|
|
onChange(values.slice(0, -1))
|
|
event.currentTarget.value = lastValue
|
|
}
|
|
}}
|
|
onBlur={(event) => {
|
|
if (event.currentTarget.value !== "") {
|
|
const newValue = event.currentTarget.value
|
|
onChange([...values, newValue])
|
|
event.currentTarget.value = ""
|
|
}
|
|
}}
|
|
/>
|
|
</label>
|
|
|
|
<FormHelperText>{'Type "," to separate the values'}</FormHelperText>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const useStyles = makeStyles((theme) => ({
|
|
root: {
|
|
border: `1px solid ${theme.palette.divider}`,
|
|
borderRadius: theme.shape.borderRadius,
|
|
minHeight: theme.spacing(6), // Chip height + paddings
|
|
padding: theme.spacing(1.25, 1.75),
|
|
fontSize: theme.spacing(2),
|
|
display: "flex",
|
|
flexWrap: "wrap",
|
|
gap: theme.spacing(1),
|
|
position: "relative",
|
|
margin: theme.spacing(1, 0, 0.5), // Have same margin than TextField
|
|
|
|
"&:has(input:focus)": {
|
|
borderColor: theme.palette.primary.main,
|
|
borderWidth: 2,
|
|
// Compensate for the border width
|
|
top: -1,
|
|
left: -1,
|
|
},
|
|
},
|
|
|
|
input: {
|
|
flexGrow: 1,
|
|
fontSize: "inherit",
|
|
padding: 0,
|
|
border: "none",
|
|
background: "none",
|
|
|
|
"&:focus": {
|
|
outline: "none",
|
|
},
|
|
},
|
|
}))
|