feat(field): allow suffix and prefix (#152)

src/Field.ts

@@ -105,6 +105,14 @@ class Field extends Widget {
     this._sum = value;
   }
 
+  get suffix(): string {
+    return this._parsedWidgetProps.suffix || "";
+  }
+
+  get prefix(): string {
+    return this._parsedWidgetProps.prefix || "";
+  }
+
   /**
    * Values and keys
    */

src/Form.ts

@@ -3,7 +3,11 @@ import Container from "./Container";
 import ContainerWidget from "./ContainerWidget";
 import Widget from "./Widget";
 import { ParsedNode } from "./helpers/nodeParser";
-import { evaluateAttributes, replaceEntities } from "./helpers/attributeParser";
+import {
+  evaluateAttributes,
+  replaceEntities,
+  parseWidgetProps,
+} from "./helpers/attributeParser";
 import { evaluateStates, evaluateButtonStates } from "./helpers/stateParser";
 import { parseContext } from "./helpers/contextParser";
 import { parseOnChange } from "./helpers/onChangeParser";
@@ -195,6 +199,11 @@ class Form {
               );
             }
             widgetType = this._fields[name].type;
+            // Merge _fields[widget_props] with attributes[widget_props]
+            attributes.widget_props = {
+              ...parseWidgetProps(attributes.widget_props),
+              ...(this._fields[name].widget_props || {}),
+            };
           }
           tagAttributes = {
             ...this._fields[name],

src/Widget.ts

@@ -1,4 +1,4 @@
-import { replaceEntities } from "./helpers/attributeParser";
+import { replaceEntities, parseWidgetProps } from "./helpers/attributeParser";
 
 abstract class Widget {
   /**
@@ -172,17 +172,7 @@ abstract class Widget {
         this._fieldType = props.fieldsWidgetType;
       }
       if (props.widget_props) {
-        if (typeof props.widget_props === "string") {
-          try {
-            this._parsedWidgetProps = JSON.parse(
-              props.widget_props.replace(/'/g, '"'),
-            );
-          } catch (err) {
-            console.error("Error parsing widget_props");
-          }
-        } else {
-          this._parsedWidgetProps = props.widget_props;
-        }
+        this._parsedWidgetProps = parseWidgetProps(props.widget_props);
       }
       if (props.key) {
         this._key = props.key;

src/helpers/attributeParser.ts

@@ -184,6 +184,22 @@ const parseAttributes = ({
   return newAttributes;
 };
 
+export const parseWidgetProps = (widget_props: string | object): object => {
+  if (widget_props === undefined) {
+    return {};
+  }
+  if (typeof widget_props === "string") {
+    try {
+      return JSON.parse(widget_props.replace(/'/g, '"'));
+    } catch (err) {
+      console.error("Error parsing widget_props");
+      return {};
+    }
+  } else {
+    return widget_props;
+  }
+};
+
 export const parseJsonAttributes = ({
   attrs,
   values,

src/spec/Form.spec.ts

@@ -6015,4 +6015,34 @@ describe("A Form", () => {
     expect(field_char?.type).toBe("arrow_steps");
     expect(field_char?.id).toBe("field_char");
   });
+  describe("If the field has widget_props", () => {
+    it("should merge widget_props from fields definition and xml", () => {
+      const fields = {
+        field_integer: {
+          readonly: 1,
+          string: "Power",
+          type: "integer",
+          widget_props: {
+            suffix: "kW",
+          },
+        },
+      };
+
+      const xmlViewForm = `<?xml version="1.0"?>
+    <form string="Form1">
+    	<field name="field_integer" widget_props="{'prefix': 'Wow'}" />
+    </form>`;
+
+      const form = new Form(fields);
+      form.parse(xmlViewForm, {
+        values: {
+          field_integer: 10,
+        },
+      });
+      const field = form.findById("field_integer") as Field;
+      expect(field).toBeDefined();
+      expect(field.suffix).toBe("kW");
+      expect(field.prefix).toBe("Wow");
+    });
+  });
 });