feat(properties-panel-header): use form field definition

bpmn-io · Sep 14, 2023 · 290c22c · 290c22c
1 parent 939fc98
commit 290c22c
Show file tree

Hide file tree

Showing 2 changed files with 114 additions and 22 deletions.
diff --git a/packages/form-js-editor/src/features/properties-panel/PropertiesPanelHeaderProvider.js b/packages/form-js-editor/src/features/properties-panel/PropertiesPanelHeaderProvider.js
@@ -4,24 +4,10 @@ import {
 
 import { iconsByType } from '../../render/components/icons';
 
-const labelsByType = {
-  button: 'BUTTON',
-  checkbox: 'CHECKBOX',
-  checklist: 'CHECKLIST',
-  columns: 'COLUMNS',
-  default: 'FORM',
-  datetime: 'DATETIME',
-  group: 'GROUP',
-  image: 'IMAGE VIEW',
-  number: 'NUMBER',
-  radio: 'RADIO',
-  select: 'SELECT',
-  spacer: 'SPACER',
-  taglist: 'TAGLIST',
-  text: 'TEXT VIEW',
-  textfield: 'TEXT FIELD',
-  textarea: 'TEXT AREA',
-};
+import { getPaletteIcon } from '../palette/components/Palette';
+
+import { useService } from './hooks';
+
 
 export const PropertiesPanelHeaderProvider = {
 
@@ -54,10 +40,17 @@ export const PropertiesPanelHeaderProvider = {
       type
     } = field;
 
-    const Icon = iconsByType(type);
+    // @Note: We know that we are inside the properties panel context,
+    // so we can savely use the hook here.
+    // eslint-disable-next-line
+    const fieldDefinition = useService('formFields').get(type).config;
+
+    const Icon = fieldDefinition.icon || iconsByType(type);
 
     if (Icon) {
       return () => <Icon width="36" height="36" viewBox="0 0 54 54" />;
+    } else if (fieldDefinition.iconUrl) {
+      return getPaletteIcon({ iconUrl: fieldDefinition.iconUrl, label: fieldDefinition.label });
     }
   },
 
@@ -66,6 +59,15 @@ export const PropertiesPanelHeaderProvider = {
       type
     } = field;
 
-    return labelsByType[type];
+    if (type === 'default') {
+      return 'Form';
+    }
+
+    // @Note: We know that we are inside the properties panel context,
+    // so we can savely use the hook here.
+    // eslint-disable-next-line
+    const fieldDefinition = useService('formFields').get(type).config;
+
+    return fieldDefinition.label || type;
   }
 };
diff --git a/.../form-js-editor/test/spec/features/properties-panel/PropertiesPanelHeaderProvider.spec.js b/.../form-js-editor/test/spec/features/properties-panel/PropertiesPanelHeaderProvider.spec.js
@@ -3,6 +3,8 @@ import {
   render
 } from '@testing-library/preact/pure';
 
+import { FormFields } from '@bpmn-io/form-js-viewer';
+
 import { PropertiesPanelHeaderProvider } from '../../../../src/features/properties-panel/PropertiesPanelHeaderProvider';
 
 import { WithPropertiesPanelContext, WithPropertiesPanel } from './helper';
@@ -58,18 +60,106 @@ describe('PropertiesPanelHeaderProvider', function() {
     expect(label.innerText).to.eql(field.label);
   });
 
+
+  describe('extension support', function() {
+
+    it('should render type label from config', function() {
+
+      // given
+      const extension = {
+        config: {
+          label: 'Custom label',
+          group: 'basic-input'
+        }
+      };
+
+      const formFields = new FormFields();
+
+      formFields.register('custom', extension);
+
+      const field = { type: 'custom' };
+
+      // when
+      const { container } = renderHeader({ field, formFields });
+
+      // then
+      const label = container.querySelector('.bio-properties-panel-header-type');
+
+      expect(label).to.exist;
+      expect(label.innerText).to.eql(extension.config.label.toUpperCase());
+    });
+
+
+    it('should render icon from config', function() {
+
+      // given
+      const extension = {
+        config: {
+          label: 'Custom label',
+          group: 'basic-input',
+          icon: () => <div class="custom-icon">Custom Icon</div>
+        }
+      };
+
+      const formFields = new FormFields();
+
+      formFields.register('custom', extension);
+
+      const field = { type: 'custom' };
+
+      // when
+      const { container } = renderHeader({ field, formFields });
+
+      // then
+      const customIcon = container.querySelector('.custom-icon');
+
+      expect(customIcon).to.exist;
+    });
+
+
+    it('should render iconUrl from config', function() {
+
+      // given
+      const extension = {
+        config: {
+          label: 'Custom label',
+          group: 'basic-input',
+          iconUrl: 'https://example.com/icon.png'
+        }
+      };
+
+      const formFields = new FormFields();
+
+      formFields.register('custom', extension);
+
+      const field = { type: 'custom' };
+
+      // when
+      const { container } = renderHeader({ field, formFields });
+
+      // then
+      const customIcon = container.querySelector('.fjs-field-icon-image');
+
+      expect(customIcon).to.exist;
+    });
+
+  });
+
 });
 
 
 // helpers /////////
 
 function renderHeader(options) {
   const {
-    field
+    field,
+    formFields
   } = options;
 
   return render(WithPropertiesPanelContext(WithPropertiesPanel({
     field,
     headerProvider: PropertiesPanelHeaderProvider
-  })));
+  }), {
+    formFields
+  }));
 }