diff --git a/src/Field.ts b/src/Field.ts index e53e830..b4b4249 100644 --- a/src/Field.ts +++ b/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 */ diff --git a/src/Form.ts b/src/Form.ts index 069872f..097021b 100644 --- a/src/Form.ts +++ b/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], diff --git a/src/Widget.ts b/src/Widget.ts index 13fe06d..97b3411 100644 --- a/src/Widget.ts +++ b/src/Widget.ts @@ -1,4 +1,4 @@ -import { replaceEntities } from "./helpers/attributeParser"; +import { replaceEntities, parseWidgetProps } from "./helpers/attributeParser"; abstract class Widget { /** @@ -161,17 +161,7 @@ abstract class Widget { } } 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; diff --git a/src/helpers/attributeParser.ts b/src/helpers/attributeParser.ts index c7dcc4c..691171a 100644 --- a/src/helpers/attributeParser.ts +++ b/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, diff --git a/src/spec/Form.spec.ts b/src/spec/Form.spec.ts index 2fb156f..e53a9e0 100644 --- a/src/spec/Form.spec.ts +++ b/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 = ` +
`; + + 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"); + }); + }); });