Misc UI behavior improvements (#151)

* Fix issue with DnD not updating state * Add new patterns to the currently selected page. * When focus changes, scroll selected pattern to the center of the view. This is useful when adding a new element, and also when selecting one when it is obscured from view. * Fix scroll behavior in jsdom test
GSA-TTS · Jun 4, 2024 · 0c8372c · 0c8372c
1 parent f06f0a6
commit 0c8372c
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 12 deletions.
diff --git a/packages/design/src/FormManager/FormEdit/PreviewPattern.tsx b/packages/design/src/FormManager/FormEdit/PreviewPattern.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 
 import { PatternComponent } from '../../Form';
 import { useFormManagerStore } from '../store';
@@ -13,11 +13,24 @@ export const PreviewPattern: PatternComponent = function PreviewPattern(props) {
       return state.focus;
     }
   });
+  const focusRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (
+      focus &&
+      focus.pattern.id === props._patternId &&
+      focusRef.current?.scrollIntoView
+    ) {
+      focusRef.current?.scrollIntoView({
+        behavior: 'instant',
+        block: 'center',
+      });
+    }
+  }, [focus]);
 
   const EditComponent = context.editComponents[props.type];
-
   return (
     <div
+      ref={focusRef}
       onClick={event => {
         if (EditComponent) {
           event.stopPropagation();

diff --git a/packages/design/src/FormManager/FormEdit/components/PreviewSequencePattern/DraggableList.tsx b/packages/design/src/FormManager/FormEdit/components/PreviewSequencePattern/DraggableList.tsx
@@ -16,6 +16,7 @@ import {
   verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
+
 import { useFormManagerStore } from '../../../store';
 import styles from '../../formEditStyles.module.css';
 

diff --git a/packages/design/src/FormManager/FormEdit/components/PreviewSequencePattern/index.tsx b/packages/design/src/FormManager/FormEdit/components/PreviewSequencePattern/index.tsx
@@ -32,9 +32,9 @@ export const PatternPreviewSequence: PatternEditComponent<
       order={pattern.data.patterns}
       updateOrder={order => {
         updatePattern({
-          id: pattern.id,
-          type: pattern.type,
+          ...pattern,
           data: {
+            ...pattern.data,
             patterns: order,
           },
         });

diff --git a/packages/design/src/FormManager/FormEdit/store.ts b/packages/design/src/FormManager/FormEdit/store.ts
@@ -5,8 +5,9 @@ import {
   type PatternId,
   type PatternMap,
   type FormSession,
-  getPattern,
   BlueprintBuilder,
+  getPattern,
+  getSessionPage,
   mergeSession,
 } from '@atj/forms';
 import { type FormManagerContext } from '..';
@@ -76,7 +77,8 @@ export const createFormEditSlice =
         state.context.config,
         state.session.form
       );
-      const newPattern = builder.addPatternToFirstPage(patternType);
+      const page = getSessionPage(state.session);
+      const newPattern = builder.addPatternToPage(patternType, page);
       set({
         session: mergeSession(state.session, { form: builder.form }),
         focus: { pattern: newPattern },
@@ -135,7 +137,7 @@ export const createFormEditSlice =
       const success = builder.updatePattern(
         state.session.form.patterns[pattern.id],
         {
-          [pattern.id]: pattern,
+          [pattern.id]: pattern.data,
         }
       );
       if (success) {

diff --git a/packages/forms/src/builder/builder.test.ts b/packages/forms/src/builder/builder.test.ts
@@ -11,14 +11,14 @@ describe('form builder', () => {
   it('addPattern adds initial pattern of given type', () => {
     const builder = new BlueprintBuilder(defaultFormConfig);
     expect(Object.keys(builder.form.patterns).length).toEqual(2);
-    builder.addPatternToFirstPage('input');
+    builder.addPatternToPage('input');
     expect(Object.keys(builder.form.patterns).length).toEqual(3);
   });
 
   it('addPattern preserves existing structure', () => {
     const initial = createTestBlueprint();
     const newBuilder = new BlueprintBuilder(defaultFormConfig, initial);
-    const newPattern = newBuilder.addPatternToFirstPage('input');
+    const newPattern = newBuilder.addPatternToPage('input');
     expect(newBuilder.form.patterns[newPattern.id]).toEqual(newPattern);
     const oldPage = getPattern<PagePattern>(initial, 'page-1');
     const newPage = getPattern<PagePattern>(newBuilder.form, 'page-1');

diff --git a/packages/forms/src/builder/index.ts b/packages/forms/src/builder/index.ts
@@ -48,14 +48,14 @@ export class BlueprintBuilder {
     return newPage;
   }
 
-  addPatternToFirstPage(patternType: string) {
+  addPatternToPage(patternType: string, pageNum: number = 0) {
     const pattern = createDefaultPattern(this.config, patternType);
     const root = this.form.patterns[this.form.root] as PageSetPattern;
     if (root.type !== 'page-set') {
       throw new Error('expected root to be a page-set');
     }
-    const firstPagePatternId = root.data.pages[0];
-    this.bp = addPatternToPage(this.form, firstPagePatternId, pattern);
+    const pagePatternId = root.data.pages[pageNum];
+    this.bp = addPatternToPage(this.form, pagePatternId, pattern);
     return pattern;
   }
 

diff --git a/packages/forms/src/session.ts b/packages/forms/src/session.ts
@@ -185,3 +185,7 @@ export const mergeSession = (
   ...oldSession,
   ...newSession,
 });
+
+export const getSessionPage = (session: FormSession) => {
+  return parseInt(session.routeParams?.page as string) || 0;
+};