administratorandCopilot
58a7ce20a7
rename classes added props configuration for custom fields Co-authored-by: Copilot <copilot@github.com>
114 lines
3.9 KiB
React
114 lines
3.9 KiB
React
import { useState } from 'react'
|
|
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/ElixFormsComponent';
|
|
|
|
function App() {
|
|
const [count, setCount] = useState(0)
|
|
|
|
/** @type {import('./components/ElixFormsComponent').ElixFormsReact} */
|
|
var myElixFormsReact = new ElixForms.ElixFormsReact();
|
|
|
|
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();
|
|
}
|
|
|
|
export default App
|