feat: scroll to new fields in the editor

danielo515 · Oct 22, 2023 · ce3ece5 · ce3ece5
1 parent defc86c
commit ce3ece5
Showing 1 changed file with 19 additions and 2 deletions.
diff --git a/src/views/FormBuilder.svelte b/src/views/FormBuilder.svelte
@@ -26,6 +26,7 @@
 
     $: isValid = isValidFormDefinition(definition);
     $: errors = validateFields(definition.fields);
+    $: activeFieldIndex = 0;
 
     function folderField(element: HTMLElement, index: number) {
         const field = definition.fields[index];
@@ -45,6 +46,18 @@
         });
     }
 
+    function scrollWhenActive(element: HTMLElement, index: number) {
+        function update() {
+            if (index === activeFieldIndex) {
+                element.scrollIntoView({ behavior: "smooth", block: "center" });
+            }
+        }
+        update();
+        return {
+            update,
+        };
+    }
+
     function findFreeName(fieldIndex: number): string {
         const field = definition.fields[fieldIndex];
         let name = field.name;
@@ -130,7 +143,8 @@
                                 input: { type: "text" },
                             },
                         ];
-                        onChange();
+                        // onChange();
+                        activeFieldIndex = definition.fields.length - 1;
                     }}>Add more fields</button
                 >
                 <button
@@ -169,7 +183,10 @@
                 {#each definition.fields as field, index}
                     {@const desc_id = `desc_${index}`}
                     {@const delete_id = `delete_${index}`}
-                    <div class="flex column md-row gap2">
+                    <div
+                        class="flex column md-row gap2"
+                        use:scrollWhenActive={index}
+                    >
                         <div class="flex column gap1">
                             <label for={`name_${index}`}>Name</label>
                             <input