refactor: remove unneeded concrete common class
custom form fields creation logic as overridable function
This commit is contained in:
@@ -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();
|
||||
|
||||
@@ -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" }
|
||||
])}
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user