major refactor

rename classes added props configuration for custom fields Co-authored-by: Copilot <copilot@github.com>
2026-04-27 12:42:18 +02:00
parent 798c5d69f9
commit 58a7ce20a7
10 changed files with 197 additions and 81 deletions
@@ -3,25 +3,109 @@ import reactLogo from './assets/react.svg'
 import viteLogo from './assets/vite.svg'
 import heroImg from './assets/hero.png'
 import './App.css'
-import * as ElixForms from './components/ElixFormsReact';
+import * as ElixForms from './components/ElixFormsComponent';

 function App() {
  const [count, setCount] = useState(0)

+  /** @type {import('./components/ElixFormsComponent').ElixFormsReact} */
  var myElixFormsReact = new ElixForms.ElixFormsReact();
-  myElixFormsReact.addTextInput("name", "Name", true);
-  myElixFormsReact.addTextAreaInput("description", "Description");
-  myElixFormsReact.addNumberInput("age", "Age");
-  myElixFormsReact.addDropdownInput("country", "Country", new Map<number, string>([
-    [1, "Italy"],
-    [2, "USA"],
-    [3, "UK"]
-  ]));
-  myElixFormsReact.addCheckboxInput("hobbies", "Hobbies", new Map<number, string>([
-    [1, "Sports"],
-    [2, "Music"],
-    [3, "Traveling"]
-  ]));
+
+  myElixFormsReact.props = {
+    description: "This is a custom form created with ElixFormsReact component.",
+    isDarkTheme: false,
+    environmentMessage: "TESTING!",
+    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('./components/IElixFormsComponentProperties').ICustomFormFieldFactory} */
+      formFieldFactory
+    ) => (
+      <>
+        {formFieldFactory.createTextInput("name", "Name", true)}
+        {formFieldFactory.createTextAreaInput("description", "Description")}
+      </>
+    )
+  };
+
+  // myElixFormsReact.addTextInput("name", "Name", true);
+  // myElixFormsReact.addTextAreaInput("description", "Description");
+  // myElixFormsReact.addNumberInput("age", "Age");
+  // myElixFormsReact.addDropdownInput("country", "Country", new Map<number, string>([
+  //   [1, "Italy"],
+  //   [2, "USA"],
+  //   [3, "UK"]
+  // ]));
+  // myElixFormsReact.addCheckboxInput("hobbies", "Hobbies", new Map<number, string>([
+  //   [1, "Sports"],
+  //   [2, "Music"],
+  //   [3, "Traveling"]
+  // ]));

  return myElixFormsReact.render();
 }