Add MultiTextField

coder · BrunoQuaresma · Mar 17, 2023 · Mar 17, 2023 · Mar 17, 2023 · Mar 17, 2023
commit fb1ca9e18c60559b1fdc56f9c9734104b9943b09
diff --git a/site/src/components/MultiTextField/MultiTextField.stories.tsx b/site/src/components/MultiTextField/MultiTextField.stories.tsx
@@ -0,0 +1,16 @@
+import { Story } from "@storybook/react"
+import { useState } from "react"
+import { MultiTextField, MultiTextFieldProps } from "./MultiTextField"
+
+export default {
+  title: "components/MultiTextField",
+  component: MultiTextField,
+}
+
+const Template: Story<MultiTextFieldProps> = (args) => {
+  const [values, setValues] = useState(args.values ?? ["foo", "bar"])
+  return <MultiTextField {...args} values={values} onChange={setValues} />
+}
+
+export const Example = Template.bind({})
+Example.args = {}
diff --git a/site/src/components/MultiTextField/MultiTextField.tsx b/site/src/components/MultiTextField/MultiTextField.tsx
@@ -0,0 +1,95 @@
+import Chip from "@material-ui/core/Chip"
+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 (
+    <label className={styles.root}>
+      {values.map((value, index) => (
+        <Chip
+          key={index}
+          label={value}
+          size="small"
+          color="primary"
+          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()
+            const lastValue = values[values.length - 1]
+            onChange(values.slice(0, -1))
+            event.currentTarget.value = lastValue
+            return
+          }
+        }}
+        onBlur={(event) => {
+          if (event.currentTarget.value !== "") {
+            const newValue = event.currentTarget.value
+            onChange([...values, newValue])
+            event.currentTarget.value = ""
+          }
+        }}
+      />
+    </label>
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: theme.shape.borderRadius,
+    minHeight: theme.spacing(5),
+    padding: theme.spacing(1.25, 1.75),
+    fontSize: theme.spacing(2),
+    display: "flex",
+    flexWrap: "wrap",
+    gap: theme.spacing(1),
+    position: "relative",
+
+    "&: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",
+    },
+  },
+}))