- added validation for some settings releated to form fields;
This commit is contained in:
@@ -1,8 +1,9 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { classNames } from 'primereact/utils';
|
import { classNames } from 'primereact/utils';
|
||||||
import { Controller } from 'react-hook-form';
|
import { Controller } from 'react-hook-form';
|
||||||
import { InputNumber } from 'primereact/inputnumber';
|
import { is } from 'ramda';
|
||||||
|
|
||||||
|
import { InputNumber } from 'primereact/inputnumber';
|
||||||
|
|
||||||
const NumberInput = ({
|
const NumberInput = ({
|
||||||
fieldName,
|
fieldName,
|
||||||
@@ -25,7 +26,7 @@ const NumberInput = ({
|
|||||||
const input = <Controller
|
const input = <Controller
|
||||||
name={fieldName}
|
name={fieldName}
|
||||||
control={control}
|
control={control}
|
||||||
defaultValue={defaultValue}
|
defaultValue={is(Number, defaultValue) ? defaultValue : 0}
|
||||||
rules={config}
|
rules={config}
|
||||||
render={({ field, fieldState }) => (
|
render={({ field, fieldState }) => (
|
||||||
<InputNumber inputId={field.name}
|
<InputNumber inputId={field.name}
|
||||||
@@ -36,8 +37,8 @@ const NumberInput = ({
|
|||||||
max={max}
|
max={max}
|
||||||
locale={locale}
|
locale={locale}
|
||||||
useGrouping={useGrouping}
|
useGrouping={useGrouping}
|
||||||
maxFractionDigits={maxFractionDigits}
|
maxFractionDigits={!isNaN(parseInt(maxFractionDigits)) ? parseInt(maxFractionDigits) : 0}
|
||||||
minFractionDigits={minFractionDigits}
|
minFractionDigits={!isNaN(parseInt(minFractionDigits)) ? parseInt(minFractionDigits) : 0}
|
||||||
className={classNames({ 'p-invalid': fieldState.invalid })}/>
|
className={classNames({ 'p-invalid': fieldState.invalid })}/>
|
||||||
)}/>
|
)}/>
|
||||||
return (
|
return (
|
||||||
|
|||||||
@@ -64,6 +64,13 @@ const ElementSetting = ({ setting, changeFn, updateDataFn }) => {
|
|||||||
onTextChange={(e) => changeFn(e.htmlValue, setting.name)}
|
onTextChange={(e) => changeFn(e.htmlValue, setting.name)}
|
||||||
style={{ height: 80 * 4 }}
|
style={{ height: 80 * 4 }}
|
||||||
/>
|
/>
|
||||||
|
} else if (setting.name === 'step') {
|
||||||
|
return <InputText id={setting.name}
|
||||||
|
keyfilter="int"
|
||||||
|
aria-describedby={`${setting.name}-help`}
|
||||||
|
placeholder="0"
|
||||||
|
value={setting.value}
|
||||||
|
onChange={(e) => changeFn(e.target.value, setting.name)}/>
|
||||||
} else if (setting.name === 'table_columns') {
|
} else if (setting.name === 'table_columns') {
|
||||||
return <ElementSettingTableColumns
|
return <ElementSettingTableColumns
|
||||||
value={is(Object, setting.value) ? setting.value : {}}
|
value={is(Object, setting.value) ? setting.value : {}}
|
||||||
|
|||||||
@@ -21,7 +21,7 @@ const BuilderElementSettings = ({ closeSettings }) => {
|
|||||||
const [activeElementData, setActiveElementData] = useState({});
|
const [activeElementData, setActiveElementData] = useState({});
|
||||||
const [settings, setSettings] = useState([]);
|
const [settings, setSettings] = useState([]);
|
||||||
const [validators, setValidators] = useState({});
|
const [validators, setValidators] = useState({});
|
||||||
const textBasedValidatorFields = ['min', 'max', 'minLength', 'maxLength', 'pattern'];
|
const numberBasedValidatorFields = ['min', 'max', 'minLength', 'maxLength'];
|
||||||
const customValidationOptions = [
|
const customValidationOptions = [
|
||||||
{ value: 'isPIVA', label: 'isPIVA' },
|
{ value: 'isPIVA', label: 'isPIVA' },
|
||||||
{ value: 'isCodiceFiscale', label: 'isCodiceFiscale' },
|
{ value: 'isCodiceFiscale', label: 'isCodiceFiscale' },
|
||||||
@@ -132,7 +132,7 @@ const BuilderElementSettings = ({ closeSettings }) => {
|
|||||||
onChange={(e) => toggleRequired(e.value, k)}/>
|
onChange={(e) => toggleRequired(e.value, k)}/>
|
||||||
</div>
|
</div>
|
||||||
: null}
|
: null}
|
||||||
{textBasedValidatorFields.includes(k) || 'custom' === k
|
{numberBasedValidatorFields.includes(k) || 'pattern' === k || 'custom' === k
|
||||||
? <div className="formElementSettings__field">
|
? <div className="formElementSettings__field">
|
||||||
<label htmlFor={`enable_${k}`}>{sprintf(__('Set %s', 'gepafin'), k)}</label>
|
<label htmlFor={`enable_${k}`}>{sprintf(__('Set %s', 'gepafin'), k)}</label>
|
||||||
<InputSwitch
|
<InputSwitch
|
||||||
@@ -153,13 +153,23 @@ const BuilderElementSettings = ({ closeSettings }) => {
|
|||||||
placeholder={__('Scegli', 'gepafin')}/>
|
placeholder={__('Scegli', 'gepafin')}/>
|
||||||
</div>
|
</div>
|
||||||
: null}
|
: null}
|
||||||
{textBasedValidatorFields.includes(k) && !isNil(validators[k])
|
{'pattern' === k && !isNil(validators[k])
|
||||||
? <div className="formElementSettings__field">
|
? <div className="formElementSettings__field">
|
||||||
<label htmlFor={k}>{k}</label>
|
<label htmlFor={k}>{k}</label>
|
||||||
<InputText id={k} aria-describedby={`${k}-help`}
|
<InputText id={k} aria-describedby={`${k}-help`}
|
||||||
value={validators[k]}
|
value={validators[k]}
|
||||||
onChange={(e) => onChangeValidator(e.target.value, k)}/>
|
onChange={(e) => onChangeValidator(e.target.value, k)}/>
|
||||||
</div> : null}
|
</div> : null}
|
||||||
|
{numberBasedValidatorFields.includes(k) && !isNil(validators[k])
|
||||||
|
? <div className="formElementSettings__field">
|
||||||
|
<label htmlFor={k}>{k}</label>
|
||||||
|
<InputText id={k}
|
||||||
|
aria-describedby={`${k}-help`}
|
||||||
|
value={validators[k]}
|
||||||
|
keyfilter="int"
|
||||||
|
placeholder="0"
|
||||||
|
onChange={(e) => onChangeValidator(e.target.value, k)}/>
|
||||||
|
</div> : null}
|
||||||
</div>) : null}
|
</div>) : null}
|
||||||
</TabPanel> : null}
|
</TabPanel> : null}
|
||||||
</TabView>
|
</TabView>
|
||||||
|
|||||||
Reference in New Issue
Block a user