diff --git a/package.json b/package.json index b3026e9..df45f52 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "continuum-frontend", "private": true, - "version": "0.0.6", + "version": "0.0.7", "scripts": { "build": "turbo build", "rebuild": "turbo build --no-cache --force", diff --git a/workflow-editor-extension/src/browser/components/node-dialog/NodeDialog.tsx b/workflow-editor-extension/src/browser/components/node-dialog/NodeDialog.tsx index e4f6ba0..6139e64 100644 --- a/workflow-editor-extension/src/browser/components/node-dialog/NodeDialog.tsx +++ b/workflow-editor-extension/src/browser/components/node-dialog/NodeDialog.tsx @@ -20,10 +20,68 @@ import { categorizationHasCategory, Categorization, Category, - LayoutProps + LayoutProps, + GroupLayout } from '@jsonforms/core'; import CodeEditorControl, { codeEditorTester } from './CodeEditorRenderer'; +/** + * Custom Group Layout Renderer + * Renders a group that stretches horizontally to fill parent but shrinks vertically to fit children + */ +const MaterialGroupLayoutRenderer = (props: LayoutProps) => { + const { uischema, schema, path, visible, renderers, cells } = props; + + const groupLayout = uischema as GroupLayout; + const label = groupLayout.label; + + if (!visible) { + return null; + } + + return ( + + {label && ( + + {label} + + )} + + {groupLayout.elements?.map((element, index) => ( + + ))} + + + ); +}; + +// Wrap with JSON Forms HOC to inject props +const MaterialGroupLayout = withJsonFormsLayoutProps(MaterialGroupLayoutRenderer); + +/** + * Custom tester for Group layout. + */ +const groupTester = rankWith( + 6, // Higher rank than default renderers + uiTypeIs('Group') +); + /** * Custom Tab Panel component for categorization layout */ @@ -181,6 +239,7 @@ const MIN_DIALOG_HEIGHT = 300; const customRenderers = [ { tester: codeEditorTester, renderer: CodeEditorControl }, { tester: categorizationTester, renderer: MaterialCategorizationLayout }, + { tester: groupTester, renderer: MaterialGroupLayout }, ...materialRenderers, ];