From 3bdb5cb44aba326e3b77e4349e776cbff86985ca Mon Sep 17 00:00:00 2001 From: Valentin Serra Date: Wed, 24 Apr 2024 13:39:20 +0200 Subject: [PATCH] chore: simplify useVariables usages Related to #1162 --- .../properties-panel/entries/AdornerEntry.js | 4 ++-- .../properties-panel/entries/AltTextEntry.js | 2 +- .../entries/ColumnsExpressionEntry.js | 2 +- .../properties-panel/entries/ConditionEntry.js | 2 +- .../entries/DescriptionEntry.js | 2 +- .../entries/ExpressionFieldEntries.js | 2 +- .../properties-panel/entries/HtmlEntry.js | 2 +- .../properties-panel/entries/IFrameUrlEntry.js | 2 +- .../entries/ImageSourceEntry.js | 2 +- .../properties-panel/entries/LabelEntry.js | 6 +++--- .../entries/OptionsExpressionEntry.js | 2 +- .../properties-panel/entries/ReadonlyEntry.js | 2 +- .../entries/TableDataSourceEntry.js | 2 +- .../properties-panel/entries/TextEntry.js | 2 +- .../properties-panel/groups/ValidationGroup.js | 8 ++++---- .../properties-panel/hooks/useVariables.js | 17 ++++++++++++----- 16 files changed, 33 insertions(+), 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 index 7a555f8de..0646ca249 100644 --- 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 index 868944b21..3cc56437e 100644 --- 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 index 7609b3c47..cc9eb72e9 100644 --- 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 index fb49a8820..a30ee107f 100644 --- 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 index c5b0f1909..e58e6fcf8 100644 --- 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 index cdc71825b..efc4d6c0a 100644 --- 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 index bf1f81a38..d525c1326 100644 --- 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 index 118bdd9b3..ea67baefd 100644 --- 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 index 30b61c867..89da70770 100644 --- 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 index 884ac308a..17daf8780 100644 --- 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 index 25547ced8..a0ef47e03 100644 --- 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 index 20cadb40b..f2e8980ed 100644 --- 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 index 30d6dd772..808bbd4e0 100644 --- 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 index 166cbf1c3..8d6f730ed 100644 --- 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 index 92915be47..f599c27d5 100644 --- 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 index ed85bff07..24da50188 100644 --- 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]); }