chore: simplify useVariables usages

Related to #1162
bpmn-io · Sep 2, 2024 · 3bdb5cb · 3bdb5cb
1 parent 2ac7c15
commit 3bdb5cb
Show file tree

Hide file tree

Showing 16 changed files with 33 additions and 26 deletions.
diff --git a/packages/form-js-editor/src/features/properties-panel/entries/AdornerEntry.js b/packages/form-js-editor/src/features/properties-panel/entries/AdornerEntry.js
@@ -52,7 +52,7 @@ function PrefixAdorner(props) {
 
   const debounce = useService('debounce');
 
-  const variables = useVariables().map((name) => ({ name }));
+  const variables = useVariables();
 
   return FeelTemplatingEntry({
     debounce,
@@ -72,7 +72,7 @@ function SuffixAdorner(props) {
 
   const debounce = useService('debounce');
 
-  const variables = useVariables().map((name) => ({ name }));
+  const variables = useVariables();
 
   return FeelTemplatingEntry({
     debounce,

diff --git a/packages/form-js-editor/src/features/properties-panel/entries/AltTextEntry.js b/packages/form-js-editor/src/features/properties-panel/entries/AltTextEntry.js
@@ -26,7 +26,7 @@ function AltText(props) {
 
   const debounce = useService('debounce');
 
-  const variables = useVariables().map((name) => ({ name }));
+  const variables = useVariables();
 
   const path = ['alt'];
 

diff --git a/packages/form-js-editor/src/features/properties-panel/entries/ColumnsExpressionEntry.js b/packages/form-js-editor/src/features/properties-panel/entries/ColumnsExpressionEntry.js
@@ -27,7 +27,7 @@ function ColumnsExpression(props) {
 
   const debounce = useService('debounce');
 
-  const variables = useVariables().map((name) => ({ name }));
+  const variables = useVariables();
 
   const getValue = () => {
     return get(field, PATH);

diff --git a/packages/form-js-editor/src/features/properties-panel/entries/ConditionEntry.js b/packages/form-js-editor/src/features/properties-panel/entries/ConditionEntry.js
@@ -22,7 +22,7 @@ function Condition(props) {
 
   const debounce = useService('debounce');
 
-  const variables = useVariables().map((name) => ({ name }));
+  const variables = useVariables();
 
   const path = ['conditional', 'hide'];
 

diff --git a/packages/form-js-editor/src/features/properties-panel/entries/DescriptionEntry.js b/packages/form-js-editor/src/features/properties-panel/entries/DescriptionEntry.js
@@ -28,7 +28,7 @@ function Description(props) {
 
   const debounce = useService('debounce');
 
-  const variables = useVariables().map((name) => ({ name }));
+  const variables = useVariables();
 
   const path = ['description'];
 

diff --git a/packages/form-js-editor/src/features/properties-panel/entries/ExpressionFieldEntries.js b/packages/form-js-editor/src/features/properties-panel/entries/ExpressionFieldEntries.js
@@ -31,7 +31,7 @@ function ExpressionFieldExpression(props) {
   const { editField, field, id } = props;
 
   const debounce = useService('debounce');
-  const variables = useVariables().map((name) => ({ name }));
+  const variables = useVariables();
 
   const getValue = () => field.expression || '';
 

diff --git a/packages/form-js-editor/src/features/properties-panel/entries/HtmlEntry.js b/packages/form-js-editor/src/features/properties-panel/entries/HtmlEntry.js
@@ -26,7 +26,7 @@ function Content(props) {
 
   const debounce = useService('debounce');
 
-  const variables = useVariables().map((name) => ({ name }));
+  const variables = useVariables();
 
   const path = ['content'];
 

diff --git a/packages/form-js-editor/src/features/properties-panel/entries/IFrameUrlEntry.js b/packages/form-js-editor/src/features/properties-panel/entries/IFrameUrlEntry.js
@@ -27,7 +27,7 @@ function Url(props) {
 
   const debounce = useService('debounce');
 
-  const variables = useVariables().map((name) => ({ name }));
+  const variables = useVariables();
 
   const path = ['url'];
 

diff --git a/packages/form-js-editor/src/features/properties-panel/entries/ImageSourceEntry.js b/packages/form-js-editor/src/features/properties-panel/entries/ImageSourceEntry.js
@@ -25,7 +25,7 @@ function Source(props) {
 
   const debounce = useService('debounce');
 
-  const variables = useVariables().map((name) => ({ name }));
+  const variables = useVariables();
 
   const path = ['source'];
 

diff --git a/packages/form-js-editor/src/features/properties-panel/entries/LabelEntry.js b/packages/form-js-editor/src/features/properties-panel/entries/LabelEntry.js
@@ -58,7 +58,7 @@ function Label(props) {
 
   const debounce = useService('debounce');
 
-  const variables = useVariables().map((name) => ({ name }));
+  const variables = useVariables();
 
   const path = ['label'];
 
@@ -89,7 +89,7 @@ function DateLabel(props) {
 
   const debounce = useService('debounce');
 
-  const variables = useVariables().map((name) => ({ name }));
+  const variables = useVariables();
 
   const path = DATE_LABEL_PATH;
 
@@ -118,7 +118,7 @@ function TimeLabel(props) {
 
   const debounce = useService('debounce');
 
-  const variables = useVariables().map((name) => ({ name }));
+  const variables = useVariables();
 
   const path = TIME_LABEL_PATH;
 

diff --git a/packages/form-js-editor/src/features/properties-panel/entries/OptionsExpressionEntry.js b/packages/form-js-editor/src/features/properties-panel/entries/OptionsExpressionEntry.js
@@ -22,7 +22,7 @@ function OptionsExpression(props) {
 
   const debounce = useService('debounce');
 
-  const variables = useVariables().map((name) => ({ name }));
+  const variables = useVariables();
 
   const path = OPTIONS_SOURCES_PATHS[OPTIONS_SOURCES.EXPRESSION];
 

diff --git a/packages/form-js-editor/src/features/properties-panel/entries/ReadonlyEntry.js b/packages/form-js-editor/src/features/properties-panel/entries/ReadonlyEntry.js
@@ -32,7 +32,7 @@ function Readonly(props) {
 
   const debounce = useService('debounce');
 
-  const variables = useVariables().map((name) => ({ name }));
+  const variables = useVariables();
 
   const path = ['readonly'];
 

diff --git a/packages/form-js-editor/src/features/properties-panel/entries/TableDataSourceEntry.js b/packages/form-js-editor/src/features/properties-panel/entries/TableDataSourceEntry.js
@@ -27,7 +27,7 @@ function Source(props) {
 
   const debounce = useService('debounce');
 
-  const variables = useVariables().map((name) => ({ name }));
+  const variables = useVariables();
 
   const path = ['dataSource'];
 

diff --git a/packages/form-js-editor/src/features/properties-panel/entries/TextEntry.js b/packages/form-js-editor/src/features/properties-panel/entries/TextEntry.js
@@ -26,7 +26,7 @@ function Text(props) {
 
   const debounce = useService('debounce');
 
-  const variables = useVariables().map((name) => ({ name }));
+  const variables = useVariables();
 
   const path = ['text'];
 

diff --git a/packages/form-js-editor/src/features/properties-panel/groups/ValidationGroup.js b/packages/form-js-editor/src/features/properties-panel/groups/ValidationGroup.js
@@ -149,7 +149,7 @@ function MinLength(props) {
 
   const debounce = useService('debounce');
 
-  const variables = useVariables().map((name) => ({ name }));
+  const variables = useVariables();
 
   return FeelNumberEntry({
     debounce,
@@ -169,7 +169,7 @@ function MaxLength(props) {
 
   const debounce = useService('debounce');
 
-  const variables = useVariables().map((name) => ({ name }));
+  const variables = useVariables();
 
   return FeelNumberEntry({
     debounce,
@@ -204,7 +204,7 @@ function Min(props) {
 
   const debounce = useService('debounce');
 
-  const variables = useVariables().map((name) => ({ name }));
+  const variables = useVariables();
 
   return FeelNumberEntry({
     debounce,
@@ -224,7 +224,7 @@ function Max(props) {
 
   const debounce = useService('debounce');
 
-  const variables = useVariables().map((name) => ({ name }));
+  const variables = useVariables();
 
   return FeelNumberEntry({
     debounce,

diff --git a/packages/form-js-editor/src/features/properties-panel/hooks/useVariables.js b/packages/form-js-editor/src/features/properties-panel/hooks/useVariables.js
@@ -1,14 +1,21 @@
-import { getSchemaVariables } from '@bpmn-io/form-js-viewer';
+import { clone, getSchemaVariables } from '@bpmn-io/form-js-viewer';
 import { useService } from './usePropertiesPanelService';
+import { useMemo, useState } from 'preact/hooks';
 
 /**
- * Retrieve list of variables from the form schema.
+ * Retrieve list of variables from the form schema in the structure expected by FEEL entries.
  *
- * @returns { string[] } list of variables used in form schema
+ * @returns { { name: string; }[] } list of variables used in form schema
  */
 export function useVariables() {
   const form = useService('formEditor');
-  const schema = form.getSchema();
+  const [schema, setSchema] = useState(clone(form.getSchema()));
 
-  return getSchemaVariables(schema);
+  form.on('changed', ({ schema }) => {
+    if (schema !== undefined) {
+      setSchema(clone(schema));
+    }
+  });
+
+  return useMemo(() => getSchemaVariables(schema).map((name) => ({ name, type: 'variable' })), [schema]);
 }