use Symbols for ArrayControl data item keys

webgme · Jan 30, 2024 · 0e40673 · 0e40673
1 parent 1f679ee
commit 0e40673
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git a/src/lib/controls/AnyOfControl.svelte b/src/lib/controls/AnyOfControl.svelte
@@ -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 />

diff --git a/src/lib/controls/ArrayControl.svelte b/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]];
     }
   }