refactor: remove unneeded concrete common class

custom form fields creation logic as overridable function

react/common/src/ElixFormsComponent.tsx

@@ -1,16 +0,0 @@
-//import * as React from 'react';
-import ElixFormsComponentAbstract from './ElixFormsComponentAbstract';
-
-export default class ElixFormsComponent extends ElixFormsComponentAbstract {
-  // public override createCustomFormFields(): React.ReactElement {
-  //   // const textTest = this.CreateTextInput("COL0018", "TEXT INPUT");
-  //   // const checkTest = this.CreateCheckboxInput("COL0090", "CHECKBOX INPUT", new Map<number, string>([ [1, "Option 1"], [2, "Option 2"], [3, "Option 3"] ]));
-  //   // const radioTest = this.CreateRadioInput("COL0091", "RADIO INPUT", new Map<number, string>([ [1, "Option 1"], [2, "Option 2"], [3, "Option 3"] ]));
-  //   // const boolTest = this.CreateBooleanInput("COL0092", "BOOLEAN INPUT");
-  //   // const textareaTest = this.CreateTextAreaInput("COL0093", "TEXTAREA INPUT");
-
-  //   return (<></>);
-  // }
-}
-
-export { ElixFormsComponent as ElixFormsReact };

react/common/src/ElixFormsComponentAbstract.tsx

@@ -86,7 +86,11 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
     );
   }
 
-  public createCustomFormFields(callback: (formFieldFactory: IElixFormsComponentCustomFormFieldFactory) => JSX.Element = () => <></>): JSX.Element {
+  protected createCustomFormFields(formFieldFactory: IElixFormsComponentCustomFormFieldFactory): JSX.Element {
+    return <></>;
+  }
+
+  private renderCustomFormFields(): JSX.Element {
     const formFieldFactory = {
       createBooleanInput: (name: string, label: string, required: boolean = false) =>
         this.createBooleanInput(name, label, required),
@@ -106,7 +110,7 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
         this.createTextAreaInput(name, label, required),
     };
 
-    return callback(formFieldFactory);
+    return this.createCustomFormFields(formFieldFactory);
   }
 
   public override render(): React.ReactElement<IElixFormsComponentProperties> {
@@ -116,8 +120,7 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
       environmentMessage,
       hasTeamsContext,
       userDisplayName,
-      additionalFieldsJson,
+      additionalFieldsJson
-      customFormFieldsConfiguration
     } = this.props;
 
     const queryParams = new URLSearchParams(window.location.search);
@@ -130,7 +133,7 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
         <form action="https://procedure.unipr.it/rwe2/ComeBackToElixAndSave" method="post" acceptCharset="ISO-8859-1">
           {this.createMandatoryFormFields(queryParams)}
           {this.createAdditionalFormFields()}
-          {this.createCustomFormFields(customFormFieldsConfiguration)}
+          {this.renderCustomFormFields()}
           <input type="submit" value="Submit"/>
         </form>
       </section>

react/common/src/IElixFormsComponentProperties.ts

@@ -8,7 +8,6 @@ export interface IElixFormsComponentProperties {
   hasTeamsContext: boolean;
   userDisplayName: string;
   additionalFieldsJson?: string;
-  customFormFieldsConfiguration?: (formFieldFactory: IElixFormsComponentCustomFormFieldFactory) => JSX.Element;
 }
 
 // Additional Fields JSON Schema

react/scelta-carriera/src/App.jsx

@@ -3,132 +3,18 @@ import { useState } from 'react'
 // import viteLogo from './assets/vite.svg'
 import heroImg from './assets/hero.png'
 import './App.css'
-import * as ElixForms from '@common/src/ElixFormsComponent';
+import SceltaCarrieraComponent from './SceltaCarrieraComponent';
 
 function App() {
   const [count, setCount] = useState(0)
 
-  /** @type {import('@common/src/ElixFormsComponent').ElixFormsReact} */
+  /** @type {SceltaCarrieraComponent} */
-  var myElixFormsReact = new ElixForms.ElixFormsReact({
+  var myElixFormsReact = new SceltaCarrieraComponent({
     description: "This is a custom form created with ElixFormsReact component.",
     isDarkTheme: false,
     environmentMessage: "TESTING!",
     hasTeamsContext: false,
     userDisplayName: "John Doe",
-    /*
-    additionalFieldsJson: JSON.stringify([
-      {
-        "key": "COL0002",
-        "type": "text",
-        "label": "Campo STRING",
-        "required": false
-      },
-      {
-        "key": "COL0003",
-        "type": "textarea",
-        "label": "Campo TEXTAREA",
-        "required": false
-      },
-      {
-        "key": "COL0004",
-        "type": "boolean",
-        "label": "Campo Boolean",
-        "required": false
-      },
-      {
-        "key": "COL0005",
-        "type": "radio",
-        "label": "Campo _RADIO_",
-        "required": false,
-        "options": [
-          { "value": 1, "label": "Opzione 1" },
-          { "value": 2, "label": "Opzione 2" },
-          { "value": 3, "label": "Altra opzione" }
-        ]
-      },
-      {
-        "key": "COL0006",
-        "type": "checkbox",
-        "label": "Campo CHECKBOX",
-        "options": [
-          { "value": 4, "label": "Check 1" },
-          { "value": 5, "label": "Check due" },
-          { "value": 6, "label": "Altro check" }
-        ]
-      },
-      {
-        "key": "COL0015",
-        "type": "dropdown",
-        "label": "Validazione lista",
-        "required": true,
-        "options": [
-          { "value": 0, "label": "Not applicable" },
-          { "value": 1, "label": "Goal 1: No poverty" },
-          { "value": 2, "label": "Goal 2: Zero hunger" },
-          { "value": 3, "label": "Goal 3: Good health and well-being" },
-          { "value": 4, "label": "Goal 4: Quality education" },
-          { "value": 5, "label": "Goal 5: Gender equality" },
-          { "value": 6, "label": "Goal 6: Clean water and sanitation" },
-          { "value": 7, "label": "Goal 7: Affordable and clean energy" },
-          { "value": 8, "label": "Goal 8: Decent work and economic growth" },
-          { "value": 9, "label": "Goal 9: Industry, Innovation, and Infrastructure" },
-          { "value": 10, "label": "Goal 10: Reduced inequalities" },
-          { "value": 11, "label": "Goal 11: Sustainable cities and communities" },
-          { "value": 12, "label": "Goal 12: Responsible consumption and production" },
-          { "value": 13, "label": "Goal 13: Climate action" },
-          { "value": 14, "label": "Goal 14: Life below water" },
-          { "value": 15, "label": "Goal 15: Life on land" },
-          { "value": 16, "label": "Goal 16: Peace, justice and strong institutions" },
-          { "value": 17, "label": "Goal 17: Partnerships for the goals" }
-        ]
-      }
-    ]),
-    */
-    customFormFieldsConfiguration: (
-        /** @type {import('../../common/src/IElixFormsComponentCustomFormFieldFactory').IElixFormsComponentCustomFormFieldFactory} */
-        formFieldFactory) => (
-        <>
-          {/* {formFieldFactory.createTextInput("required", "Campo Required", true)}
-          {formFieldFactory.createNumberInput("number", "Number")}
-          {formFieldFactory.createBooleanInput("boolean", "Boolean")}
-          {formFieldFactory.createRadioInput("radio", "Radio", [{ "value": 1, "label": "Opzione 1" }, { "value": 2, "label": "Opzione 2" }, { "value": 3, "label": "Altra opzione" }])}
-          {formFieldFactory.createDropdownInput("dropdown", "Dropdown", [{ "value": 0, "label": "Not applicable" }, { "value": 1, "label": "Goal 1: No poverty" }, { "value": 2, "label": "Goal 2: Zero hunger" }, { "value": 3, "label": "Goal 3: Good health and well-being" }])}
-          {formFieldFactory.createCheckboxInput("checkbox", "Checkbox", [{ "value": 0, "label": "Check 1" }, { "value": 1, "label": "Check 2" }, { "value": 2, "label": "Check 3" }])} */}
-          {formFieldFactory.createDropdownInput("COL0015", "COL0015 Goals", [
-            { "value": 0, "label": "Not applicable" },
-            { "value": 1, "label": "Goal 1: No poverty" },
-            { "value": 2, "label": "Goal 2: Zero hunger" },
-            { "value": 3, "label": "Goal 3: Good health and well-being" },
-            { "value": 4, "label": "Goal 4: Quality education" },
-            { "value": 5, "label": "Goal 5: Gender equality" },
-            { "value": 6, "label": "Goal 6: Clean water and sanitation" },
-            { "value": 7, "label": "Goal 7: Affordable and clean energy" },
-            { "value": 8, "label": "Goal 8: Decent work and economic growth" },
-            { "value": 9, "label": "Goal 9: Industry, Innovation, and Infrastructure" },
-            { "value": 10, "label": "Goal 10: Reduced inequalities" },
-            { "value": 11, "label": "Goal 11: Sustainable cities and communities" },
-            { "value": 12, "label": "Goal 12: Responsible consumption and production" },
-            { "value": 13, "label": "Goal 13: Climate action" },
-            { "value": 14, "label": "Goal 14: Life below water" },
-            { "value": 15, "label": "Goal 15: Life on land" },
-            { "value": 16, "label": "Goal 16: Peace, justice and strong institutions" },
-            { "value": 17, "label": "Goal 17: Partnerships for the goals" }
-          ], true)}
-          {formFieldFactory.createTextInput("COL0002", "Campo STRING", true)}
-          {formFieldFactory.createTextAreaInput("COL0003", "Campo TEXTAREA", true)}
-          {formFieldFactory.createBooleanInput("COL0004", "Campo BOOLEAN", true)}
-          {formFieldFactory.createRadioInput("COL0005", "Campo RADIO", [
-            { "value": 1, "label": "Opzione 1" },
-            { "value": 2, "label": "Opzione 2" },
-            { "value": 3, "label": "Altra opzione" }
-          ], true)}
-          {formFieldFactory.createCheckboxInput("COL0006", "Campo CHECKBOX", [
-            { "value": 4, "label": "Check 1" },
-            { "value": 5, "label": "Check 2" },
-            { "value": 6, "label": "Altro check" }
-          ])}
-        </>
-      )
   });
 
   var elixFormsReactRender = myElixFormsReact.render();

react/scelta-carriera/src/SceltaCarrieraComponent.tsx

@@ -0,0 +1,45 @@
+import type { JSX } from 'react';
+import ElixFormsComponentAbstract from '@common/src/ElixFormsComponentAbstract';
+import type { IElixFormsComponentCustomFormFieldFactory } from '@common/src/IElixFormsComponentCustomFormFieldFactory';
+
+export default class SceltaCarrieraComponent extends ElixFormsComponentAbstract {
+  protected override createCustomFormFields(formFieldFactory: IElixFormsComponentCustomFormFieldFactory): JSX.Element {
+    return (
+      <>
+        {formFieldFactory.createDropdownInput("COL0015", "COL0015 Goals", [
+          { "value": 0, "label": "Not applicable" },
+          { "value": 1, "label": "Goal 1: No poverty" },
+          { "value": 2, "label": "Goal 2: Zero hunger" },
+          { "value": 3, "label": "Goal 3: Good health and well-being" },
+          { "value": 4, "label": "Goal 4: Quality education" },
+          { "value": 5, "label": "Goal 5: Gender equality" },
+          { "value": 6, "label": "Goal 6: Clean water and sanitation" },
+          { "value": 7, "label": "Goal 7: Affordable and clean energy" },
+          { "value": 8, "label": "Goal 8: Decent work and economic growth" },
+          { "value": 9, "label": "Goal 9: Industry, Innovation, and Infrastructure" },
+          { "value": 10, "label": "Goal 10: Reduced inequalities" },
+          { "value": 11, "label": "Goal 11: Sustainable cities and communities" },
+          { "value": 12, "label": "Goal 12: Responsible consumption and production" },
+          { "value": 13, "label": "Goal 13: Climate action" },
+          { "value": 14, "label": "Goal 14: Life below water" },
+          { "value": 15, "label": "Goal 15: Life on land" },
+          { "value": 16, "label": "Goal 16: Peace, justice and strong institutions" },
+          { "value": 17, "label": "Goal 17: Partnerships for the goals" }
+        ], true)}
+        {formFieldFactory.createTextInput("COL0002", "Campo STRING", true)}
+        {formFieldFactory.createTextAreaInput("COL0003", "Campo TEXTAREA", true)}
+        {formFieldFactory.createBooleanInput("COL0004", "Campo BOOLEAN", true)}
+        {formFieldFactory.createRadioInput("COL0005", "Campo RADIO", [
+          { "value": 1, "label": "Opzione 1" },
+          { "value": 2, "label": "Opzione 2" },
+          { "value": 3, "label": "Altra opzione" }
+        ], true)}
+        {formFieldFactory.createCheckboxInput("COL0006", "Campo CHECKBOX", [
+          { "value": 4, "label": "Check 1" },
+          { "value": 5, "label": "Check 2" },
+          { "value": 6, "label": "Altro check" }
+        ])}
+      </>
+    );
+  }
+}