Merge master to develop

bpmn-io · Jan 11, 2024 · 749f391 · 749f391
2 parents 39302a7 + 29e266b
commit 749f391
Show file tree

Hide file tree

Showing 19 changed files with 140 additions and 115 deletions.
diff --git a/e2e/visual/carbon-styles.spec.js-snapshots/carbon-styles-1-chromium-linux.png b/e2e/visual/carbon-styles.spec.js-snapshots/carbon-styles-1-chromium-linux.png
diff --git a/packages/form-js-editor/src/features/render-injection/slot-fill/SlotFillRoot.js b/packages/form-js-editor/src/features/render-injection/slot-fill/SlotFillRoot.js
@@ -2,19 +2,26 @@ import FillContext from './FillContext';
 import SlotContext from './SlotContext';
 import { useMemo, useState } from 'preact/hooks';
 
+const noop = () => {};
+
 export default (props) => {
   const [ fills, setFills ] = useState([]);
 
+  const {
+    onSetFill = noop,
+    onRemoveFill = noop
+  } = props;
+
   const fillContext = useMemo(() => ({
     addFill: (fill) => {
       setFills((fills) => [ ...fills.filter((f) => f.id !== fill.id), fill ]);
-      props.onSetFill && props.onSetFill(fill);
+      onSetFill(fill);
     },
     removeFill: (id) => {
       setFills((fills) => fills.filter((f) => f.id !== id));
-      props.onRemoveFill && props.onRemoveFill(id);
+      onRemoveFill(id);
     }
-  }), []);
+  }), [ onRemoveFill, onSetFill ]);
 
   const slotContext = useMemo(() => ({ fills }), [ fills ]);
 

diff --git a/packages/form-js-editor/src/render/components/FormEditor.js b/packages/form-js-editor/src/render/components/FormEditor.js
@@ -110,24 +110,25 @@ function Element(props) {
 
   const [ hovered, setHovered ] = useState(false);
 
-  function scrollIntoView({ selection }) {
-    if (!selection || selection.id !== id || !ref.current) {
-      return;
-    }
+  useEffect(() => {
 
-    const elementBounds = ref.current.getBoundingClientRect(),
-          containerBounds = formEditor._container.getBoundingClientRect();
+    function scrollIntoView({ selection }) {
+      if (!selection || selection.id !== id || !ref.current) {
+        return;
+      }
 
-    if (elementBounds.top < 0 || elementBounds.top > containerBounds.bottom) {
-      ref.current.scrollIntoView();
+      const elementBounds = ref.current.getBoundingClientRect(),
+            containerBounds = formEditor._container.getBoundingClientRect();
+
+      if (elementBounds.top < 0 || elementBounds.top > containerBounds.bottom) {
+        ref.current.scrollIntoView();
+      }
     }
-  }
 
-  useEffect(() => {
     eventBus.on('selection.changed', scrollIntoView);
 
     return () => eventBus.off('selection.changed', scrollIntoView);
-  }, [ id ]);
+  }, [ eventBus, formEditor._container, id ]);
 
   useLayoutEffect(() => {
     if (selection.isSelected(field)) {
@@ -320,7 +321,7 @@ function Column(props) {
   );
 }
 
-export default function FormEditor(props) {
+export default function FormEditor() {
   const dragging = useService('dragging'),
         eventBus = useService('eventBus'),
         formEditor = useService('formEditor'),
@@ -339,19 +340,23 @@ export default function FormEditor(props) {
 
   const [ , setSelection ] = useState(schema);
 
+  const [ hasInitialized, setHasInitialized ] = useState(false);
+
   useEffect(() => {
     function handleSelectionChanged(event) {
       setSelection(event.selection || schema);
     }
 
     eventBus.on('selection.changed', handleSelectionChanged);
 
-    setSelection(selection.get() || schema);
-
     return () => {
       eventBus.off('selection.changed', handleSelectionChanged);
     };
-  }, [ schema, selection ]);
+  }, [ eventBus, schema ]);
+
+  useEffect(() => {
+    setSelection(selection.get() || schema);
+  }, [ selection, schema ]);
 
   const [ drake, setDrake ] = useState(null);
 
@@ -424,11 +429,17 @@ export default function FormEditor(props) {
 
   // fire event after render to notify interested parties
   useEffect(() => {
+
+    if (hasInitialized) {
+      return;
+    }
+
+    setHasInitialized(true);
     eventBus.fire('rendered');
 
     // keep deprecated event to ensure backward compatibility
     eventBus.fire('formEditor.rendered');
-  }, []);
+  }, [ eventBus, hasInitialized ]);
 
   const formRenderContext = useMemo(() => ({
     Children,
@@ -523,69 +534,69 @@ function CreatePreview(props) {
 
   const formFields = useService('formFields');
 
-  function handleCloned(clone, original, type) {
-
-    const fieldType = clone.dataset.fieldType;
+  useEffect(() => {
+    if (!drake) {
+      return;
+    }
 
-    // (1) field preview
-    if (fieldType) {
+    function handleCloned(clone, original, type) {
 
-      const paletteEntry = findPaletteEntry(fieldType, formFields);
+      const fieldType = clone.dataset.fieldType;
 
-      if (!paletteEntry) {
-        return;
-      }
+      // (1) field preview
+      if (fieldType) {
 
-      const { label } = paletteEntry;
+        const paletteEntry = findPaletteEntry(fieldType, formFields);
 
-      const Icon = getPaletteIcon(paletteEntry);
+        if (!paletteEntry) {
+          return;
+        }
 
-      clone.innerHTML = '';
+        const { label } = paletteEntry;
 
-      clone.class = 'gu-mirror';
-      clone.classList.add('fjs-field-preview-container');
+        const Icon = getPaletteIcon(paletteEntry);
 
-      if (original.classList.contains('fjs-palette-field')) {
+        clone.innerHTML = '';
 
-        // default to auto columns when creating from palette
-        clone.classList.add('cds--col');
-      }
+        clone.class = 'gu-mirror';
+        clone.classList.add('fjs-field-preview-container');
 
-      // todo(pinussilvestrus): dragula, how to mitigate cursor position
-      // https://github.com/bevacqua/dragula/issues/285
-      render(
-        <FieldDragPreview label={ label } Icon={ Icon } />,
-        clone
-      );
-    } else {
-
-      // (2) row preview
-
-      // remove elements from copy (context pad, row dragger, ...)
-      [
-        'fjs-context-pad',
-        'fjs-row-dragger',
-        'fjs-debug-columns'
-      ].forEach(cls => {
-        const cloneNode = clone.querySelectorAll('.' + cls);
-        cloneNode.length && cloneNode.forEach(e => e.remove());
-      });
+        if (original.classList.contains('fjs-palette-field')) {
 
-      // mirror grid
-      clone.classList.add('cds--grid');
-      clone.classList.add('cds--grid--condensed');
-    }
-  }
+          // default to auto columns when creating from palette
+          clone.classList.add('cds--col');
+        }
 
-  useEffect(() => {
-    if (!drake) {
-      return;
+        // todo(pinussilvestrus): dragula, how to mitigate cursor position
+        // https://github.com/bevacqua/dragula/issues/285
+        render(
+          <FieldDragPreview label={ label } Icon={ Icon } />,
+          clone
+        );
+      } else {
+
+        // (2) row preview
+
+        // remove elements from copy (context pad, row dragger, ...)
+        [
+          'fjs-context-pad',
+          'fjs-row-dragger',
+          'fjs-debug-columns'
+        ].forEach(cls => {
+          const cloneNode = clone.querySelectorAll('.' + cls);
+          cloneNode.length && cloneNode.forEach(e => e.remove());
+        });
+
+        // mirror grid
+        clone.classList.add('cds--grid');
+        clone.classList.add('cds--grid--condensed');
+      }
     }
 
     drake.on('cloned', handleCloned);
 
     return () => drake.off('cloned', handleCloned);
-  }, [ drake ]);
+  }, [ drake, formFields ]);
 
   return null;
 }

diff --git a/packages/form-js-editor/src/render/hooks/useDebounce.js b/packages/form-js-editor/src/render/hooks/useDebounce.js
@@ -5,14 +5,16 @@ import {
 
 import useService from './useService';
 
-
-export default function useDebounce(fn, dependencies = []) {
+/**
+ * @param {Function} fn - function to debounce
+ */
+export default function useDebounce(fn) {
 
   const debounce = useService('debounce');
 
   const callback = useMemo(() => {
     return debounce(fn);
-  }, dependencies);
+  }, [ debounce, fn ]);
 
   // cleanup async side-effect if callback #flush is provided.
   useEffect(() => {

diff --git a/packages/form-js-editor/src/render/hooks/usePrevious.js b/packages/form-js-editor/src/render/hooks/usePrevious.js
@@ -4,10 +4,10 @@ import {
 } from 'preact/hooks';
 
 
-export default function usePrevious(value) {
-  const ref = useRef();
+export default function usePrevious(value, defaultValue = null) {
+  const ref = useRef(defaultValue);
 
-  useEffect(() => ref.current = value);
+  useEffect(() => ref.current = value, [ value ]);
 
   return ref.current;
 }
diff --git a/packages/form-js-playground/src/components/PlaygroundRoot.js b/packages/form-js-playground/src/components/PlaygroundRoot.js
@@ -33,7 +33,9 @@ export function PlaygroundRoot(props) {
     editorProperties = {},
     viewerAdditionalModules = [],
     editorAdditionalModules = [],
-    propertiesPanel: propertiesPanelConfig = {}
+    propertiesPanel: propertiesPanelConfig = {},
+    onInit: onPlaygroundInit,
+    onStateChanged
   } = props;
 
   const {
@@ -66,7 +68,7 @@ export function PlaygroundRoot(props) {
 
   // pipe to playground API
   useEffect(() => {
-    props.onInit({
+    onPlaygroundInit({
       attachDataContainer: (node) => dataEditorRef.current.attachTo(node),
       attachEditorContainer: (node) => formEditorRef.current.attachTo(node),
       attachFormContainer: (node) => formRef.current.attachTo(node),
@@ -82,7 +84,7 @@ export function PlaygroundRoot(props) {
       setSchema: setInitialSchema,
       saveSchema: () => formEditorRef.current.saveSchema()
     });
-  });
+  }, [ onPlaygroundInit ]);
 
   useEffect(() => {
     setInitialSchema(props.schema || {});
@@ -230,11 +232,11 @@ export function PlaygroundRoot(props) {
   }, [ resultData ]);
 
   useEffect(() => {
-    props.onStateChanged({
+    onStateChanged && onStateChanged({
       schema,
       data
     });
-  }, [ schema, data ]);
+  }, [ onStateChanged, schema, data ]);
 
   const handleDownload = useCallback(() => {
 

diff --git a/packages/form-js-viewer/src/features/repeatRender/RepeatRenderManager.js b/packages/form-js-viewer/src/features/repeatRender/RepeatRenderManager.js
@@ -80,10 +80,10 @@ export default class RepeatRenderManager {
     return (
       <>
         {displayValues.map((value, index) => {
-          const elementProps = {
+          const elementProps = useMemo(() => ({
             ...restProps,
-            indexes: { ...(indexes || {}), [ repeaterField.id ]: index },
-          };
+            indexes: { ...(indexes || {}), [ repeaterField.id ]: index }
+          }), [ index ]);
 
           const localExpressionContextInfo = useMemo(() => ({
             data: parentExpressionContextInfo.data,

diff --git a/packages/form-js-viewer/src/render/Renderer.js b/packages/form-js-viewer/src/render/Renderer.js
@@ -34,7 +34,7 @@ export default function Renderer(config, eventBus, form, injector) {
       setState(newState);
     });
 
-    const onChange = useCallback((update) => form._update(update), [ form ]);
+    const onChange = useCallback((update) => form._update(update), []);
 
     const { properties } = state;
 
@@ -44,9 +44,9 @@ export default function Renderer(config, eventBus, form, injector) {
       if (!readOnly) {
         form.submit();
       }
-    }, [ form, readOnly ]);
+    }, [ readOnly ]);
 
-    const onReset = useCallback(() => form.reset(), [ form ]);
+    const onReset = useCallback(() => form.reset(), []);
 
     const { schema } = state;
 

diff --git a/packages/form-js-viewer/src/render/components/FormField.js b/packages/form-js-viewer/src/render/components/FormField.js
@@ -77,7 +77,7 @@ export default function FormField(props) {
     if (viewerCommands && initialValue) {
       viewerCommands.updateFieldValidation(field, initialValue, indexes);
     }
-  }, [ viewerCommands, field, initialValue, JSON.stringify(indexes) ]);
+  }, [ viewerCommands, field, initialValue, indexes ]);
 
   const hidden = useCondition(field.conditional && field.conditional.hide || null);