playground - support array options

packages/playground/src/react/settings/emitter-options-form.tsx

@@ -1,15 +1,17 @@
 import {
+  Checkbox,
   Input,
   Label,
   Radio,
   RadioGroup,
   Switch,
   useId,
+  type CheckboxOnChangeData,
   type InputOnChangeData,
   type RadioGroupOnChangeData,
   type SwitchOnChangeData,
 } from "@fluentui/react-components";
-import { useCallback, useMemo, type FunctionComponent } from "react";
+import { useCallback, useMemo, useState, type FunctionComponent } from "react";
 import type { PlaygroundTspLibrary } from "../../types.js";
 import type { EmitterOptions } from "../types.js";
 import style from "./emitter-options-form.module.css";
@@ -49,26 +51,106 @@ export const EmitterOptionsForm: FunctionComponent<EmitterOptionsFormProps> = ({
       {entries.map(([key, value]) => {
         return (
           <div key={key} className={style["form-item"]}>
-            <JsonSchemaPropertyInput
-              emitterOptions={options[library.name] ?? {}}
-              name={key}
-              prop={value as any}
-              onChange={handleChange}
-            />
+            {(value as any).type === "array" ? (
+              <JsonSchemaArrayPropertyInput
+                emitterOptions={options[library.name] ?? {}}
+                name={key}
+                prop={value as any}
+                onChange={handleChange}
+              />
+            ) : (
+              <JsonSchemaPropertyInput
+                emitterOptions={options[library.name] ?? {}}
+                name={key}
+                prop={value as any}
+                onChange={handleChange}
+              />
+            )}
           </div>
         );
       })}
     </div>
   );
 };
 
-interface JsonSchemaProperty {
+type JsonSchemaProperty = JsonSchemaScalarProperty;
+
+interface JsonSchemaScalarProperty {
   readonly type: "string" | "boolean" | "number";
   readonly description?: string;
   readonly enum?: string[];
   readonly default?: any;
 }
 
+interface JsonSchemaArrayProperty {
+  readonly type: "array";
+  readonly description?: string;
+  readonly items: JsonSchemaScalarProperty;
+}
+
+type JsonSchemaArrayPropertyInputProps = Omit<JsonSchemaPropertyInputProps, "prop"> & {
+  readonly prop: JsonSchemaArrayProperty;
+};
+
+const JsonSchemaArrayPropertyInput: FunctionComponent<JsonSchemaArrayPropertyInputProps> = ({
+  emitterOptions,
+  name,
+  prop,
+  onChange,
+}) => {
+  const itemsSchema = prop.items;
+  const value = emitterOptions[name] ?? itemsSchema.default;
+  const prettyName = useMemo(
+    () => name[0].toUpperCase() + name.slice(1).replace(/-/g, " "),
+    [name],
+  );
+  const inputId = useId("input");
+  const [selectedValues, setSelectedValues] = useState(new Set(value));
+
+  const handleChange = useCallback(
+    (
+      _: unknown,
+      data: RadioGroupOnChangeData | SwitchOnChangeData | InputOnChangeData | CheckboxOnChangeData,
+      value?: string,
+    ) => {
+      const modifiedSelectedValues = new Set(selectedValues);
+      if ("checked" in data) {
+        data.checked ? modifiedSelectedValues.add(value) : modifiedSelectedValues.delete(value);
+      } else {
+        modifiedSelectedValues.clear();
+        modifiedSelectedValues.add(data.value);
+      }
+      setSelectedValues(modifiedSelectedValues);
+      onChange({ name, value: Array.from(modifiedSelectedValues) });
+    },
+    [name, onChange, selectedValues],
+  );
+
+  // Currently only have example of what `enum`-based arrays look like,
+  // so just handle a single element for other arrays for now.
+  if (!itemsSchema.enum) {
+    return JsonSchemaPropertyInput({ emitterOptions, name, prop: itemsSchema, onChange });
+  }
+
+  const itemsEnum = itemsSchema.enum;
+  return (
+    <div className={style["item"]}>
+      <Label htmlFor={inputId} title={name}>
+        {prettyName}
+      </Label>
+      {itemsEnum.map((x) => (
+        <Checkbox
+          key={x}
+          value={x}
+          label={x}
+          checked={selectedValues.has(x)}
+          onChange={(...args) => handleChange(...args, x)}
+        />
+      ))}
+    </div>
+  );
+};
+
 interface JsonSchemaPropertyInputProps {
   readonly emitterOptions: Record<string, unknown>;
   readonly name: string;