feat: parameterized the properties panel subheading getter logic

Closes #1290

packages/form-js-editor/src/features/properties-panel/PropertiesPanelHeaderProvider.js

@@ -1,4 +1,3 @@
-import { textToLabel } from './Util';
 import { iconsByType } from '../../render/components/icons';
 import { getPaletteIcon } from '../palette/components/Palette';
 
@@ -8,19 +7,8 @@ export function getPropertiesPanelHeaderProvider(options = {}) {
  return {
  getElementLabel: (field) => {
  const { type } = field;
- if (type === 'datetime') {
- return field.dateLabel || field.timeLabel;
- }
- if (type === 'text') {
- return textToLabel(field.text);
- }
- if (type === 'image') {
- return field.alt;
- }
- if (type === 'default') {
- return field.id;
- }
- return field.label;
+ const fieldDefinition = formFields.get(type).config;
+ return fieldDefinition.getSubheading ? fieldDefinition.getSubheading(field) : field.label;
  },
 
  getElementIcon: (field) => {

packages/form-js-editor/src/features/properties-panel/Util.js

@@ -43,21 +43,6 @@ export function stopPropagation(listener) {
  };
 }
 
-export function textToLabel(text) {
- if (typeof text != 'string') return null;
-
- for (const line of text.split('\n')) {
- const displayLine = line.trim();
-
- // we use the first non-whitespace line in the text as label
- if (displayLine !== '') {
- return displayLine;
- }
- }
-
- return null;
-}
-
 /**
  * @param {string} path
  */

packages/form-js-viewer/src/render/components/Util.js

@@ -27,6 +27,21 @@ export function gridColumnClasses(formField) {
  );
 }
 
+export function textToLabel(text) {
+ if (typeof text != 'string') return null;
+
+ for (const line of text.split('\n')) {
+ const displayLine = line.trim();
+
+ // we use the first non-whitespace line in the text as label
+ if (displayLine !== '') {
+ return displayLine;
+ }
+ }
+
+ return null;
+}
+
 export function prefixId(id, formId, indexes) {
  let result = 'fjs-form';
 

packages/form-js-viewer/src/render/components/form-fields/Datetime.js

@@ -224,4 +224,7 @@ Datetime.config = {
 
  return { ...defaults, ...options };
  },
+ getSubheading: (field) => {
+ return field.dateLabel || field.timeLabel;
+ },
 };

packages/form-js-viewer/src/render/components/form-fields/Default.js

@@ -19,4 +19,5 @@ Default.config = {
  components: [],
  ...options,
  }),
+ getSubheading: (field) => field.id,
 };

packages/form-js-viewer/src/render/components/form-fields/Image.js

@@ -50,4 +50,5 @@ Image.config = {
  name: 'Image view',
  group: 'presentation',
  create: (options = {}) => options,
+ getSubheading: (field) => field.alt,
 };

packages/form-js-viewer/src/render/components/form-fields/Text.js

@@ -2,7 +2,7 @@ import { useCallback, useMemo } from 'preact/hooks';
 import { useDangerousHTMLWrapper, useService, useTemplateEvaluation } from '../../hooks';
 import { sanitizeHTML } from '../Sanitizer';
 
-import { formFieldClasses } from '../Util';
+import { formFieldClasses, textToLabel } from '../Util';
 
 const type = 'text';
 
@@ -66,4 +66,7 @@ Text.config = {
  text: '# Text',
  ...options,
  }),
+ getSubheading: (field) => {
+ textToLabel(field.text);
+ },
 };

packages/form-js-viewer/test/spec/render/components/Util.spec.js

@@ -1,4 +1,4 @@
-import { formFieldClasses } from '../../../../src/render/components/Util';
+import { formFieldClasses, textToLabel } from '../../../../src/render/components/Util';
 
 describe('Util', function () {
  describe('#formFieldClasses', function () {
@@ -26,4 +26,48 @@ describe('Util', function () {
  expect(classes).to.equal('fjs-form-field fjs-form-field-button fjs-disabled');
  });
  });
+
+ describe('#textToLabel', function () {
+ it('should use the first text line as label', function () {
+ // when
+ const label = textToLabel(
+ 'Lorem ipsum dolor sit amet\nConsetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.',
+ );
+
+ // then
+ expect(label).to.equal('Lorem ipsum dolor sit amet');
+ });
+
+ it('should ignore empty lines', function () {
+ // when
+ const label = textToLabel('\n\n\nLorem ipsum dolor sit amet\nConsetetur sadipscing elitr');
+
+ // then
+ expect(label).to.equal('Lorem ipsum dolor sit amet');
+ });
+
+ it('should ignore whitespace lines', function () {
+ // when
+ const label = textToLabel('\n \n \nLorem ipsum dolor sit amet\nConsetetur sadipscing elitr');
+
+ // then
+ expect(label).to.equal('Lorem ipsum dolor sit amet');
+ });
+
+ it('should tolerate empty string', function () {
+ // when
+ const label = textToLabel('');
+
+ // then
+ expect(label).to.equal(null);
+ });
+
+ it('should tolerate null', function () {
+ // when
+ const label = textToLabel(null);
+
+ // then
+ expect(label).to.equal(null);
+ });
+ });
 });