add bando page form;

src/components/FormField/components/Datepicker/index.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { classNames } from 'primereact/utils';
+import { Controller } from 'react-hook-form';
+import { isNil } from 'ramda';
+import { Calendar } from 'primereact/calendar';
+
+const Datepicker = ({
+                        fieldName,
+                        label,
+                        control,
+                        errors,
+                        defaultValue,
+                        config = {},
+                        infoText = null,
+                        minDate = null,
+                        maxDate = null
+                    }) => {
+    return (
+        <>
+            <label htmlFor={fieldName} className={classNames({ 'p-error': errors[fieldName] })}>
+                {label}{config.required ? '*' : null}
+            </label>
+            <Controller
+                    name={fieldName}
+                    control={control}
+                    defaultValue={defaultValue}
+                    rules={config}
+                    render={({ field, fieldState }) => (
+                        <Calendar id={field.name}
+                                  value={field.value}
+                                  onChange={(e) => field.onChange(e.value)}
+                                  dateFormat="dd/mm/yy"
+                                  mask="99/99/9999"
+                                  showIcon
+                                  minDate={minDate} maxDate={maxDate}
+                                  className={classNames({ 'p-invalid': fieldState.invalid })}/>
+                    )}/>
+            {infoText ? <small>{infoText}</small> : null}
+        </>)
+}
+
+export default Datepicker;

src/components/FormField/components/DatepickerRange/index.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { classNames } from 'primereact/utils';
+import { Controller } from 'react-hook-form';
+import { isNil } from 'ramda';
+import { Calendar } from 'primereact/calendar';
+
+const DatepickerRange = ({
+                        fieldName,
+                        label,
+                        control,
+                        errors,
+                        defaultValue,
+                        config = {},
+                        infoText = null,
+                        minDate = null,
+                        maxDate = null
+                    }) => {
+    return (
+        <>
+            <label htmlFor={fieldName} className={classNames({ 'p-error': errors[fieldName] })}>
+                {label}{config.required ? '*' : null}
+            </label>
+            <Controller
+                    name={fieldName}
+                    control={control}
+                    defaultValue={defaultValue}
+                    rules={config}
+                    render={({ field, fieldState }) => (
+                        <Calendar id={field.name}
+                                  value={field.value}
+                                  onChange={(e) => field.onChange(e.value)}
+                                  dateFormat="dd/mm/yy" mask="99/99/9999"
+                                  showIcon
+                                  minDate={minDate} maxDate={maxDate}
+                                  selectionMode="range" readOnlyInput hideOnRangeSelection
+                                  className={classNames({ 'p-invalid': fieldState.invalid })}/>
+                    )}/>
+            {infoText ? <small>{infoText}</small> : null}
+        </>)
+}
+
+export default DatepickerRange;

src/components/FormField/components/Fileupload/index.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { classNames } from 'primereact/utils';
+import { Controller } from 'react-hook-form';
+import { __ } from '@wordpress/i18n';
+import { FileUpload } from 'primereact/fileupload';
+
+const Fileupload = ({
+                        fieldName,
+                        label,
+                        control,
+                        errors,
+                        defaultValue,
+                        config = {},
+                        infoText = null,
+                        accept = 'image/*',
+                        api = '/api/upload',
+                        emptyText = __('Trascina qui il tuo file', 'gepafin'),
+                        chooseLabel = __('Aggiungi immagine', 'gepafin')
+                    }) => {
+    return (
+        <>
+            <label htmlFor={fieldName} className={classNames({ 'p-error': errors[fieldName] })}>
+                {label}{config.required ? '*' : null}
+            </label>
+            <Controller
+                name={fieldName}
+                control={control}
+                defaultValue={defaultValue}
+                rules={config}
+                render={({ field, fieldState }) => (
+                    <FileUpload
+                        id={field.name}
+                        name={`${field.name}[]`}
+                        url={api}
+                        multiple
+                        accept={accept}
+                        maxFileSize={1000000}
+                        emptyTemplate={<p>{emptyText}</p>}
+                        chooseLabel={chooseLabel}
+                        cancelLabel={__('Cancella', 'gepafin')}
+                        uploadLabel={__('Carica', 'gepafin')}
+                        className={classNames({ 'p-invalid': fieldState.invalid })}/>
+                )}/>
+            {infoText ? <small>{infoText}</small> : null}
+            {defaultValue ? <p>Uploaded:</p> : null}
+            {defaultValue}
+        </>)
+}
+
+export default Fileupload;

src/components/FormField/components/NumberInput/index.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { classNames } from 'primereact/utils';
+import { Controller } from 'react-hook-form';
+import { InputNumber } from 'primereact/inputnumber';
+
+
+const NumberInput = ({
+                         fieldName,
+                         label,
+                         control,
+                         errors,
+                         defaultValue = 0,
+                         config = {},
+                         infoText = null,
+                         inputgroup = false,
+                         icon = null,
+                         locale = 'it-IT',
+                         minFractionDigits = 2,
+                         step = 1,
+                         min,
+                         max
+                     }) => {
+    const input = <Controller
+        name={fieldName}
+        control={control}
+        defaultValue={defaultValue}
+        rules={config}
+        render={({ field, fieldState }) => (
+            <InputNumber inputId={field.name}
+                         value={field.value}
+                         onValueChange={(e) => field.onChange(e.value)}
+                         min={min}
+                         max={max}
+                         locale={locale} minFractionDigits={minFractionDigits} step={step}
+                         className={classNames({ 'p-invalid': fieldState.invalid })}/>
+        )}/>
+    return (
+        <>
+            <label htmlFor={fieldName} className={classNames({ 'p-error': errors[fieldName] })}>
+                {label}{config.required ? '*' : null}
+            </label>
+            {inputgroup
+                ? <div className="p-inputgroup flex-1">
+                    <span className="p-inputgroup-addon">
+                        {icon}
+                    </span>
+                    {input}
+                </div>
+                : input}
+            {infoText ? <small>{infoText}</small> : null}
+        </>)
+}
+
+export default NumberInput;

src/components/FormField/components/TextArea/index.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { classNames } from 'primereact/utils';
+import { Controller } from 'react-hook-form';
+import { InputTextarea } from 'primereact/inputtextarea';
+
+const TextArea = ({
+                       fieldName,
+                       label,
+                       control,
+                       errors,
+                       defaultValue,
+                       config = {},
+                       infoText = null
+                   }) => {
+    return (
+        <>
+            <label htmlFor={fieldName} className={classNames({ 'p-error': errors[fieldName] })}>
+                {label}{config.required ? '*' : null}
+            </label>
+            <Controller
+                name={fieldName}
+                control={control}
+                defaultValue={defaultValue}
+                rules={config}
+                render={({ field, fieldState }) => (
+                    <InputTextarea id={field.name}
+                                   {...field}
+                                   className={classNames({ 'p-invalid': fieldState.invalid })}/>
+                )}/>
+            {infoText ? <small>{infoText}</small> : null}
+        </>)
+}
+
+export default TextArea;

src/components/FormField/components/TextInput/index.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { classNames } from 'primereact/utils';
+import { Controller } from 'react-hook-form';
+import { InputText } from 'primereact/inputtext';
+
+const TextInput = ({
+                       fieldName,
+                       label,
+                       control,
+                       errors,
+                       defaultValue,
+                       config = {},
+                       infoText = null,
+                       inputgroup = false,
+                       icon = null
+                   }) => {
+    const input = <Controller
+        name={fieldName}
+        control={control}
+        defaultValue={defaultValue}
+        rules={config}
+        render={({ field, fieldState }) => (
+            <InputText id={field.name}
+                       {...field}
+                       className={classNames({ 'p-invalid': fieldState.invalid })}/>
+        )}/>
+    return (
+        <>
+            <label htmlFor={fieldName} className={classNames({ 'p-error': errors[fieldName] })}>
+                {label}{config.required ? '*' : null}
+            </label>
+            {inputgroup
+                ? <div className="p-inputgroup flex-1">
+                    <span className="p-inputgroup-addon">
+                        {icon}
+                    </span>
+                    {input}
+                </div>
+                : input}
+            {infoText ? <small>{infoText}</small> : null}
+        </>)
+}
+
+export default TextInput;

src/components/FormField/index.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { isNil } from 'ramda';
+import { classNames } from 'primereact/utils';
+
+// components
+import TextInput from './components/TextInput';
+import TextArea from './components/TextArea';
+import Datepicker from './components/Datepicker';
+import DatepickerRange from './components/DatepickerRange';
+import Fileupload from './components/Fileupload';
+import NumberInput from './components/NumberInput';
+
+const FormField = (props) => {
+    const fields = {
+        textinput: TextInput,
+        textarea: TextArea,
+        datepicker: Datepicker,
+        datepickerrange: DatepickerRange,
+        fileupload: Fileupload,
+        numberinput: NumberInput
+    }
+    const Comp = !isNil(fields[props.type]) ? fields[props.type] : null;
+
+    return (!isNil(Comp)
+            ? <div className={classNames(['appForm__field', props.type])}>
+                <Comp {...props} />
+            </div>
+            : null
+    )
+}
+
+export default FormField;