Function ArrayField

packages/react/src/components/json-schema-form.tsx:624–689

(props: {
  readonly itemSchema: JsonSchema;
  readonly root: JsonSchema;
  readonly fieldId: string;
  readonly value: unknown;
  readonly onChange: (next: unknown) => void;
  readonly depth: number;
  readonly disabled?: boolean;
})

// ---------------------------------------------------------------------------

function ArrayField(props: {
  readonly itemSchema: JsonSchema;
  readonly root: JsonSchema;
  readonly fieldId: string;
  readonly value: unknown;
  readonly onChange: (next: unknown) => void;
  readonly depth: number;
  readonly disabled?: boolean;
}): React.ReactElement {
  const { itemSchema, root, fieldId, value, onChange, depth, disabled } = props;
  const items = Array.isArray(value) ? value : [];

  const setItem = (index: number, next: unknown): void => {
    if (next === REMOVE) {
      onChange(items.filter((_item: unknown, i: number) => i !== index));
      return;
    }
    onChange(items.map((item: unknown, i: number) => (i === index ? next : item)));
  };

  return (
    <div className="space-y-2 rounded-md border border-border/60 p-3">
      {items.length === 0 ? (
        <p className="text-[11px] text-muted-foreground">No items.</p>
      ) : (
        items.map((item: unknown, index: number) => {
          const itemId = `${fieldId}-${index}`;
          return (
            <div key={index} className="flex items-start gap-2">
              <div className="min-w-0 flex-1">
                <FieldControl
                  schema={deepResolve(itemSchema, root)}
                  root={root}
                  fieldId={itemId}
                  value={item}
                  onChange={(next: unknown) => setItem(index, next)}
                  depth={depth + 1}
                  disabled={disabled}
                />
              </div>
              <Button
                type="button"
                size="xs"
                variant="ghost"
                className="text-muted-foreground"
                disabled={disabled}
                onClick={() => setItem(index, REMOVE)}
              >
                Remove
              </Button>
            </div>
          );
        })
      )}
      <Button
        type="button"
        size="xs"
        variant="outline"