Skip to content

Commit

Permalink
fix: revalidation mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@valeriocomo
valeriocomo committed Dec 12, 2024
1 parent 2c027df commit 0c391b2
Show file tree
Hide file tree
Showing 3 changed files with 126 additions and 121 deletions.
3 changes: 2 additions & 1 deletion src/app/components/Editor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,8 @@ export default function Editor() {
const methods = useForm<PublicCode | PublicCodeWithDeprecatedFields>({
defaultValues,
resolver,
mode: 'onTouched'
mode: 'onTouched',
reValidateMode: 'onChange'
});
const { getValues, handleSubmit, watch, setValue, reset } = methods;

Expand Down
124 changes: 63 additions & 61 deletions src/app/components/EditorContacts.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,68 +29,70 @@ export default function EditorContacts(): JSX.Element {
return (
<fieldset>
<legend>{t(`publiccodeyml.${fieldName}.label`)}</legend>
{field.value?.length === 0 ? null : (
<Table responsive>
<caption><small>{t(`publiccodeyml.${fieldName}.affiliation.description`)}</small></caption>
<thead>
<tr>
<th className="align-top">#</th>
<th className="align-top">
{t(`publiccodeyml.${fieldName}.name.label`)} *
</th>
<th className="align-top">
{t(`publiccodeyml.${fieldName}.email.label`)}
</th>
<th className="align-top">
{t(`publiccodeyml.${fieldName}.phone.label`)}
</th>
<th className="align-top">
{t(`publiccodeyml.${fieldName}.affiliation.label`)}
</th>
<th></th>
</tr>
</thead>
<tbody>
{fields.map(({ id }, index) => (
<tr key={id}>
<th scope="row">{index + 1}</th>
{subfields.map((subfield) => {
const { ref, ...reg } = register(
`${fieldName}.${index}.${subfield}`
);

return (
<td key={subfield}>
<Input
{...reg}
innerRef={ref}
valid={
get(errors, `${fieldName}.${index}.${subfield}`) &&
false
}
validationText={get(
errors,
`${fieldName}.${index}.${subfield}.message`
)}
/>
</td>
);
})}
<td>
<Button
color="link"
icon
onClick={() => remove(index)}
size="xs"
>
<Icon icon="it-delete" size="sm" title="Remove feature" />
</Button>
</td>
{field.value?.length === 0
? (<p><small>Nessun contatto presente</small></p>)
: (
<Table responsive>
<caption><small>{t(`publiccodeyml.${fieldName}.affiliation.description`)}</small></caption>
<thead>
<tr>
<th className="align-top">#</th>
<th className="align-top">
{t(`publiccodeyml.${fieldName}.name.label`)} *
</th>
<th className="align-top">
{t(`publiccodeyml.${fieldName}.email.label`)}
</th>
<th className="align-top">
{t(`publiccodeyml.${fieldName}.phone.label`)}
</th>
<th className="align-top">
{t(`publiccodeyml.${fieldName}.affiliation.label`)}
</th>
<th></th>
</tr>
))}
</tbody>
</Table>
)}
</thead>
<tbody>
{fields.map(({ id }, index) => (
<tr key={id}>
<th scope="row">{index + 1}</th>
{subfields.map((subfield) => {
const { ref, ...reg } = register(
`${fieldName}.${index}.${subfield}`
);

return (
<td key={subfield}>
<Input
{...reg}
innerRef={ref}
valid={
get(errors, `${fieldName}.${index}.${subfield}`) &&
false
}
validationText={get(
errors,
`${fieldName}.${index}.${subfield}.message`
)}
/>
</td>
);
})}
<td>
<Button
color="link"
icon
onClick={() => remove(index)}
size="xs"
>
<Icon icon="it-delete" size="sm" title="Remove feature" />
</Button>
</td>
</tr>
))}
</tbody>
</Table>
)}
<Button
color="primary"
onClick={() =>
Expand Down
120 changes: 61 additions & 59 deletions src/app/components/EditorContractors.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,66 +29,68 @@ export default function EditorContractors(): JSX.Element {
return (
<fieldset>
<legend>{t(`publiccodeyml.${fieldName}.label`)}</legend>
{field.value?.length === 0 ? null : (
<Table responsive>
<thead>
<tr>
<th className="align-top">#</th>
<th className="align-top">
{t(`publiccodeyml.${fieldName}.name.label`)} *
</th>
<th className="align-top">
{t(`publiccodeyml.${fieldName}.until.label`)} *
</th>
<th className="align-top">
{t(`publiccodeyml.${fieldName}.email.label`)}
</th>
<th>{t(`publiccodeyml.${fieldName}.website.label`)}</th>
<th></th>
</tr>
</thead>
<tbody>
{fields.map(({ id }, index) => (
<tr key={id}>
<th scope="row">{index + 1}</th>
{subfields.map((subfield) => {
const { ref, ...reg } = register(
`${fieldName}.${index}.${subfield}`
);

return (
<td key={subfield}>
<Input
{...reg}
innerRef={ref}
type={subfield === "until" ? "date" : "text"}
valid={
get(errors, `${fieldName}.${index}.${subfield}`) &&
false
}
validationText={get(
errors,
`${fieldName}.${index}.${subfield}.message`
)}
/>
</td>
);
})}
<td>
<Button
color="link"
icon
onClick={() => remove(index)}
size="xs"
>
<Icon icon="it-delete" size="sm" title="Remove feature" />
</Button>
</td>
{field.value?.length === 0
? (<p><small>Nessun riferimento presente</small></p>)
: (
<Table responsive>
<thead>
<tr>
<th className="align-top">#</th>
<th className="align-top">
{t(`publiccodeyml.${fieldName}.name.label`)} *
</th>
<th className="align-top">
{t(`publiccodeyml.${fieldName}.until.label`)} *
</th>
<th className="align-top">
{t(`publiccodeyml.${fieldName}.email.label`)}
</th>
<th>{t(`publiccodeyml.${fieldName}.website.label`)}</th>
<th></th>
</tr>
))}
</tbody>
</Table>
)}
</thead>
<tbody>
{fields.map(({ id }, index) => (
<tr key={id}>
<th scope="row">{index + 1}</th>
{subfields.map((subfield) => {
const { ref, ...reg } = register(
`${fieldName}.${index}.${subfield}`
);

return (
<td key={subfield}>
<Input
{...reg}
innerRef={ref}
type={subfield === "until" ? "date" : "text"}
valid={
get(errors, `${fieldName}.${index}.${subfield}`) &&
false
}
validationText={get(
errors,
`${fieldName}.${index}.${subfield}.message`
)}
/>
</td>
);
})}
<td>
<Button
color="link"
icon
onClick={() => remove(index)}
size="xs"
>
<Icon icon="it-delete" size="sm" title="Remove feature" />
</Button>
</td>
</tr>
))}
</tbody>
</Table>
)}
<Button
color="primary"
onClick={() => append({ name: "", until: "", email: "", website: "" })}
Expand Down

0 comments on commit 0c391b2

Please sign in to comment.