Merge pull request #29 from webgme/fix-array-anyof-add

Fix array anyOf add

Author: romancow

src/lib/Control.svelte

@@ -1,3 +1,20 @@
+<script context="module" lang="ts">
+  function useConst(schema: JSONSchema7 | undefined) {
+    return (schema != null) && !isBoolean(schema) && ("const" in schema);
+  }
+
+  function useAnyOf(schema: JSONSchema7 | undefined) {
+    return (schema?.anyOf != null) && (schema?.properties == null);
+  }
+
+  export function getSingleSchemaType(schema: JSONSchema7 | undefined) {
+    const type = useConst(schema) ? "const"
+      : useAnyOf(schema) ? "anyOf"
+      : schema?.type;
+    return (Array.isArray(type) ? type[0] : type) ?? "object";
+  }
+</script>
+
 <script lang="ts">
   import type { JSONSchema7 } from "json-schema";
   import type UISchema from "./UISchema";
@@ -13,19 +30,8 @@
 
   $: updateControlType(schema);
 
-  function useConst(schema: JSONSchema7 | undefined) {
-    return (schema != null) && !isBoolean(schema) && ("const" in schema);
-  }
-
-  function useAnyOf(schema: JSONSchema7 | undefined) {
-    return (schema?.anyOf != null) && (schema?.properties == null);
-  }
-
   function updateControlType(schema: JSONSchema7 | undefined) {
-    const type = useConst(schema) ? "const"
-      : useAnyOf(schema) ? "anyOf"
-      : schema?.type;
-    const singleType = (Array.isArray(type) ? type[0] : type) ?? "object";
+    const singleType = getSingleSchemaType(schema);
     const updatedControl = controls[singleType as keyof typeof controls] as any;
     if (updatedControl != control) {
       control = updatedControl;

src/lib/controls/AnyOfControl.svelte

@@ -75,7 +75,7 @@
 
   function resetSelectedProps() {
     const newSelectedProps = isObjSchema() ? Object.keys(selected?.properties ?? {}) : undefined;
-    if (newSelectedProps !== selectedProps) {
+    if (!deepEquals(newSelectedProps?.sort(), selectedProps?.sort())) {
       selectedProps = newSelectedProps;
     }
   }
@@ -103,7 +103,7 @@
   </Title>
   <Content class="jsonschema-form-controls">
     {#if selected != null}
-      {#if !!selectedProps}
+      {#if isObjSchema()}
         <ObjectProps {...selected} bind:data {uischema} />
       {:else}
         <Control schema={selected} bind:data {uischema} force />

src/lib/controls/ArrayControl.svelte

@@ -2,9 +2,9 @@
   import type { JSONSchema7 } from "json-schema";
   import UISchema from "$lib/UISchema";
   import { hasRequired as checkRequired, isBoolean } from "$lib/utilities";
-  import Accordion, { Panel, Header, Content } from '@smui-extra/accordion';
+  import Accordion, { Panel, Header } from '@smui-extra/accordion';
   import IconButton, { Icon } from "@smui/icon-button";
-  import Control from "../Control.svelte";
+  import Control, { getSingleSchemaType } from "../Control.svelte";
 
   export let data: any[] | undefined = undefined;
   export let uischema: UISchema = {};
@@ -49,18 +49,19 @@
   $: updateOpen(enabled);
   $: updateOpen($uiOptions.collapse);
 
+  const dataKeys: Symbol[] = [];
+
   function getKey(index: number) {
-    const value = data![index];
-    const useIndex = (value == null) || (typeof value !== "object");
-    return useIndex ? `${index} | ${getType(index) ?? ""}` : value;
+    return dataKeys[index] ??= Symbol();
   }
 
   function getItem(index: number) {
     return (prefixed.length > index) ? prefixed[index] : additional;
   }
 
   function getType(index: number) {
-    return getItem(index)?.type;
+    const item = getItem(index);
+    return getSingleSchemaType(item);
   }
 
   function canRemoveItem(index: number) {
@@ -78,25 +79,29 @@
   function addItem() {
     if (canAddItem) {
       data = [...(data ?? []), undefined];
+      dataKeys.push(Symbol());
     }
   }
 
   function removeItem(index: number) {
     if (canRemoveItem(index)) {
       data?.splice(index, 1);
       data = (ignoreEmpty && (data?.length ?? 0) === 0) ? undefined : data;
+      dataKeys.splice(index, 1);
     }
   }
 
   function moveItemUp(index: number) {
     if (canMoveItemUp(index)) {
       [data![index - 1], data![index]] = [data![index], data![index - 1]];
+      [dataKeys[index - 1], dataKeys[index]] = [dataKeys[index], dataKeys[index - 1]];
     }
   }
 
   function moveItemDown(index: number) {
     if (canMoveItemDown(index)) {
       [data![index + 1], data![index]] = [data![index], data![index + 1]];
+      [dataKeys[index + 1], dataKeys[index]] = [dataKeys[index], dataKeys[index + 1]];
     }
   }