From 4af653e08abdfb1e621052e713462a342e20ee7c Mon Sep 17 00:00:00 2001 From: Pier-Paolo Mammi Date: Mon, 6 Jul 2026 11:37:04 +0200 Subject: [PATCH] refactor: remove unneeded concrete common class custom form fields creation logic as overridable function --- react/common/src/ElixFormsComponent.tsx | 16 --- .../common/src/ElixFormsComponentAbstract.tsx | 13 +- .../src/IElixFormsComponentProperties.ts | 1 - react/scelta-carriera/src/App.jsx | 120 +----------------- .../src/SceltaCarrieraComponent.tsx | 45 +++++++ 5 files changed, 56 insertions(+), 139 deletions(-) delete mode 100644 react/common/src/ElixFormsComponent.tsx create mode 100644 react/scelta-carriera/src/SceltaCarrieraComponent.tsx diff --git a/react/common/src/ElixFormsComponent.tsx b/react/common/src/ElixFormsComponent.tsx deleted file mode 100644 index 85df174..0000000 --- a/react/common/src/ElixFormsComponent.tsx +++ /dev/null @@ -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([ [1, "Option 1"], [2, "Option 2"], [3, "Option 3"] ])); - // // const radioTest = this.CreateRadioInput("COL0091", "RADIO INPUT", new Map([ [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 }; \ No newline at end of file diff --git a/react/common/src/ElixFormsComponentAbstract.tsx b/react/common/src/ElixFormsComponentAbstract.tsx index b57efdd..474a425 100644 --- a/react/common/src/ElixFormsComponentAbstract.tsx +++ b/react/common/src/ElixFormsComponentAbstract.tsx @@ -86,7 +86,11 @@ export default abstract class ElixFormsComponentAbstract extends Component 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 { @@ -116,8 +120,7 @@ export default abstract class ElixFormsComponentAbstract extends Component {this.createMandatoryFormFields(queryParams)} {this.createAdditionalFormFields()} - {this.createCustomFormFields(customFormFieldsConfiguration)} + {this.renderCustomFormFields()} diff --git a/react/common/src/IElixFormsComponentProperties.ts b/react/common/src/IElixFormsComponentProperties.ts index 17be327..a8771f0 100644 --- a/react/common/src/IElixFormsComponentProperties.ts +++ b/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 diff --git a/react/scelta-carriera/src/App.jsx b/react/scelta-carriera/src/App.jsx index 13b9c78..5fe2af9 100644 --- a/react/scelta-carriera/src/App.jsx +++ b/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} */ - var myElixFormsReact = new ElixForms.ElixFormsReact({ + /** @type {SceltaCarrieraComponent} */ + 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(); diff --git a/react/scelta-carriera/src/SceltaCarrieraComponent.tsx b/react/scelta-carriera/src/SceltaCarrieraComponent.tsx new file mode 100644 index 0000000..4eac28a --- /dev/null +++ b/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" } + ])} + + ); + } +}